Improving DevTools accessibility in Microsoft Edge

Improving DevTools accessibility in Microsoft Edge

Improving web development accessibility in MS Edge

Microsoft Edge has evolved as a browser over the years, eventually replacing Internet Explorer. The latter had debuted more than two decades ago, along with Windows 95. Microsoft Edge is faster, robust and secure and its latest edition is developed on the Chromium platform which benefits the users to obtain similar features that are offered by its competitor Chrome browser. 

The users can experience features designed as per the standards for web services. However, Microsoft will not be incorporating Edge to the previous versions of Windows. It is presently available in Windows 10. Besides, the users will not be able to use Edge in any other operating system apart from Windows. Presently, web development accessibility in MS Edge constitutes a significant aspect of priority for developers.

It is quite evident that web developers have acknowledged the importance of making the web accessible to its users. In the digitized age, people spend more time in cyberspace, as compared to what they used to do a decade ago. Eventually, the Dev Tools accessibility has improved manifold in recent years.

Why is web development accessibility necessary in browsers?

A study reveals that approximately 50% of computer users in the US use AT (assistive technology) for some time. The AT users may be having some kind of cognitive or physical disabilities. Some of them may have a vision or hearing loss, or temporary injuries. Besides, some of the users may have other impairments, which prevent them from taking advantage of all the features. Through web development accessibility enhancement, Microsoft can offer its products to a wider range of users.

Microsoft, along with its dedicated team of designers and developers, has upheld its commitment to its users. You would come across some of the brand-new web development accessibility features, that has enhanced the usability and experience significantly.

Microsoft Edge’s new web development accessibility enhancements

Microsoft Edge’s DevTools team has made around 170 changes to deal with aspects like keyboard, high-impact colour contrast and screen reader problems. With these, developers will find it easy to use DevTools. Have a look into the new web development accessibility features in MS Edge.

  • Developers using DevTools through screen readers like Narrator or NVDA, or screen readers would find it easy to navigate between the tabs. They would also be able to get detailed information within the respective panes.
  • Besides, it offers features through which one can access performance details and breakpoints.
  • In certain cases, Edge has reimagined the tools, developing the same from the scratch. You might have noticed the Initiator tab, through which stack traces can be made accessible. The user simply needs to move them into their own tab, out of the hover elements. Presently, you will find the stack traces in a more compatible format with AT.
  • You might have also noted that Microsoft Edge has enhanced the ratio of colour contrasts in the user interface of DevTools. As a result, you can visualize different information and data charts in various ways, apart from simply the colour.

The features mentioned above are available in MS Edge browser for Windows 10. These web development accessibility features are also available for legacy Windows like 7, 8 and 8.1, apart from Mac OS X and Chrome.

Additional web development accessibility features in MS Edge

In addition to the attributes mentioned above, developers of MS Edge have also incorporated certain changes in its UX and features. These include:

  • Supporting high-contrast mode for MS Edge’s DevTools.
  • Incorporating necessary tools to support websites with high contrast, which are debugged. In this process, developers on Mac and Windows platforms are able to examine high-contrast layouts.
  • Ensuring that their DevTools adhere to the accessibility recommendations, that have been mentioned as per WCAG 2.1 standards.

The users can now download MS Edge’s stable version. This version comes with all these web development accessibility features.

Assistive technology in MS Edge to enhance compatibility

Microsoft has prioritized inclusivity in developing software in recent years. With fresh features incorporating more sophistication in Edge, web development accessibility is here to increase. In 2020, Microsoft has announced a wide array of features that would strengthen DevTools accessibility in its browser.

In February 2020, MS Edge incorporated as many as ten localized languages to its developer tools. This, along with other features, is likely to help developers relying on AT (assistive technology) to carry out their work.

Compatibility with keyboard and screen readers

Regardless of whether you are accessing Edge through a screen reader or a keyboard, moving between panes or tabs (within the coding environment of the browser) has become easier. Particularly, developers would find this feature effective during debugging. In case you are in this industry, you should know how painstaking the debugging process is to developers with or without any impairment. Particularly, enhancing features like breakpoints enable the developers to probe the code conveniently after pausing.

Microsoft has also announced that it will come up with new tools to streamline the process of developing web pages and tools.

With more enhancements to be made, Microsoft has acknowledged that a lot more needs to be done, so that they can enhance web development accessibility. Presently, the experts are carrying out research to add support for high-contrast modes. This would be beneficial for developers who have a weak eyesight. In the process, they would find it easier to differentiate between elements in the coding environment of the browser. Therefore, they would not have to use assistive technology. The developers will also be able to decipher the text easily in this process.

In a nutshell, Microsoft is working to enhance web development accessibility in Edge DevTools to fulfil the WCAG 2.1 specifications.

To overcome the shortcomings, the company is deliberately making an effort to include in-built accessibility features in its software products. You might consider Steam in this instance, the tool for video sharing, that enables the users to annotate live footage. In the process, the users can auto-generate transcripts or captions to help individuals with difficulty in hearing to follow the Steam videos in the training facility or workplace. In the Stable channel, you will find the Microsoft Edge version with the latest web development accessibility features.

How to use DevTools in other languages?

As a developer, you might be using certain other tools, such as VS Code or StackOverflow in your respective native language. This might be different from English. With the localization of DevTools for MS Edge, one can now carry out the proceedings in languages other than English. These include:

  • French
  • Italian
  • Chinese
  • Russian
  • Korean
  • German
  • Japanese
  • Spanish
  • Portuguese

In order to change the preferred language, you need to go to ‘Settings’ and then to ‘Languages’.

How to find web development accessibility features in MS Edge?

Here are some of the new web development accessibility features in MS Edge. You will also find a detailed guideline on how you can find these options when you use it.

1. Webhint Microsoft Edge Extension

Now, with new web development accessibility features available, the users will be able to scan their web pages to get feedback on different aspects. These include:

  • Performance
  • Security
  • Browser compatibility
  • Accessibility

Many developers are now installing the Web Hint browser extension in the browser. You will find this option under the Hints tab in DevTools. In MS Edge, you may try out this browser extension. When you install it, simply select the Hints tab after opening DevTools. After this, a customizable site scan has to be run to get the necessary options.

2. 3D View

The developers can use the 3D view option to debug the application. In order to do this, you need to navigate through the DOM (Document Object Model). Alternatively, you can navigate through the z-index stacking context. In order to find this option, go to edge://flags. Then, set the flag as ‘Enabled’. Now you simply need to restart Microsoft Edge. Open the DevTools and click on F1, or you can go to the Experiments section from the ‘Settings’ option. Check the 3D View checkbox and enable the same. Now, you need to enter the combination ‘press Ctrl + Shift + P’ and select Show 3D View from 3D view.

3. Visual Studio Code extensions

The DevTools team has come up with some extensions for VS Code (Visual Studio Code). This will enable the developers to use the features of DevTools from the text editor directly. The users have to use the Elements tool, available in VS Code. However, it is necessary to add Elements for Microsoft Edge at the outset.

4. Visual Studio integration

In order to debug Edge’s JavaScript in versions 16.2 or later of Visual Studio 2019, Visual Studio debugger will prove handy. In order to do this, you have to download Visual Studio 2019. Developers should be knowing that Visual Studio comes with the option to launch the web app in Microsoft Edge Beta, Dev or Canary.

5. Tracking prevention Console messages

In Microsoft Edge, you will come across a unique feature called tracking prevention. This protects the developers from getting tracked by websites that they have never visited in the past. This is a default prevention for tracking, set in the Balanced mode. In the process, developers can block third-party trackers, as well as malicious trackers. This is one of the recent web development accessibility enhancements in MS Edge. In the process, you can enjoy a balanced experience between web compatibility and privacy. When Edge blocks a tracker, the user gets a warning message.

No wonder, the new web development accessibility features in Microsoft Edge have enhanced the user experience significantly. Knowing that developers count on fresh technologies to ease up their work, Microsoft has incorporated these sophistications. New features are on the way, and developers acknowledge that they find it easier to use the browser presently, as compared to the past. 

About the Author

Avatar QA InfoTech
Established in 2003, with less than five testing experts, QA InfoTech has grown leaps and bounds with three QA Centers of Excellence globally; two of which are located in the hub of IT activity in India, Noida, and the other, our affiliate QA InfoTech Inc Michigan USA. In 2010 and 2011, QA InfoTech has been ranked in the top 100 places to work for in India.