Edit

Accessibility-testing features

  • Article

This article lists typical accessibility aspects to test for webpages, and the corresponding features in Microsoft DevTools.

Alt-text for images

Accessibility aspect to check Feature of DevTools Article
Verify that images have alt text Issues tool > Accessibility section of report Verify that images have alt text in Automatically test a webpage for accessibility issues
Verify that images have alt text Lighthouse tool > Issues about alt-text Test accessibility using Lighthouse

Keyboard support

Accessibility aspect to check Feature of DevTools Article
Verify keyboard support Inspect tool > Accessibility section of overlay Use the Inspect tool to detect accessibility issues by hovering over the webpage and Analyze HTML pages using the Inspect tool
Verify keyboard support Tab, Shift+Tab, and Enter keys Check for keyboard support by using the Tab and Enter keys
Verify keyboard support: verify that focus is indicated Inspect tool, Styles tab, and Sources tool Analyze the lack of indication of keyboard focus
Verify keyboard support: verify that form buttons can be used with the keyboard Inspect tool, DOM tree in the Elements tool, and Event Listeners tab Analyze the lack of keyboard support in a form
Verify keyboard support: verify Tab key order Elements tool > Accessibility tab > Source Order Viewer Test keyboard support using the Source Order Viewer
Verify keyboard support Lighthouse tool > Issues about keyboard support Test accessibility using Lighthouse

Text contrast

Accessibility aspect to check Feature of DevTools Article
Verify that text has enough contrast (automatically, for the entire page) Issues tool > Accessibility section of report Verify that text colors have enough contrast in Automatically test a webpage for accessibility issues
Verify that text has enough contrast Elements tool > Styles tab > Color Picker Test text-color contrast using the Color Picker
Verify that text has enough contrast Inspect tool > Accessibility section of overlay > Contrast row Use the Inspect tool to detect accessibility issues by hovering over the webpage and Analyze HTML pages using the Inspect tool
Verify that text has enough contrast: in the hover state Elements tool > Styles tab > Toggle Element State (shows Force element state checkboxes) Verify accessibility of all states of elements
Verify that text has enough contrast: with dark theme (dark mode) and light theme Rendering tool > Emulate CSS media feature prefers-color-scheme Check for contrast issues with dark theme and light theme
Verify that text has enough contrast (automatically, for the entire page) Lighthouse tool > Issues about text contrast Test accessibility using Lighthouse

Screen reader support

Accessibility aspect to check Feature of DevTools Article
Verify screen reader support: Verify that input fields have labels Issues tool > Accessibility section of report Verify that input fields have labels in Automatically test a webpage for accessibility issues
Verify screen reader support Inspect tool > Accessibility section of overlay > Name and Role Use the Inspect tool to detect accessibility issues by hovering over the webpage and Analyze HTML pages using the Inspect tool
Verify screen reader support Elements tool > Accessibility tab > Accessibility Tree Check the Accessibility Tree for keyboard and screen reader support, and Test accessibility using the Accessibility tab
Verify screen reader support Lighthouse tool > Issues about screen reader support Test accessibility using Lighthouse

Vision deficiencies

Accessibility aspect to check Feature of DevTools Article
Verify that the webpage is usable by people with color blindness Rendering tool > Emulate vision deficiencies dropdown list Verify that a page is usable by people with color blindness
Verify that the webpage is usable with blurred vision Rendering tool > Emulate vision deficiencies dropdown list Verify that a page is usable with blurred vision
Verify that the webpage is usable with UI animation turned off (reduced motion) Rendering tool > Emulate CSS media feature prefers-reduced-motion Verify that a page is usable with UI animation turned off
Verify that the webpage is usable by people with vision deficiencies Lighthouse tool > Issues about vision deficiencies Test accessibility using Lighthouse

Usable when narrow

Accessibility aspect to check Feature of DevTools Article
Verify that the webpage layout is usable when narrow Device Emulation tool Verify that the webpage layout is usable when narrow, and Emulate mobile devices (Device Emulation)

Further automated and manual testing

Testing the accessibility of your website is important to ensure that people with different needs can use your website. The DevTools features described above are a good start to catch accessibility problems in your products. These features range from automated checks and manual detail checks to simulation of different states and environments.

First, use DevTools automated reports and manual testing

As covered in the tables above, DevTools includes automated accessibility-testing features, such as tools that automatically generate accessibility reports for a webpage, including the Issues tool and the Lighthouse tool. You can also use the Assessments feature of Accessibility Insights, per below.

Microsoft Edge, including DevTools, also supports manual accessibility testing, such as:

  • Inspect different parts of the page by using the Inspect tool.
  • Use the keyboard to navigate the page.
  • Look for issues that arise when interacting with the page.
  • Look for issues related to changes in display, such as making the window narrow.

Perform additional checks

After the tests that are listed above, you may need to perform additional checks, such as:

  • Testing when zoomed-in.
  • Testing with screen readers.
  • Testing with voice recognition.
  • Testing in high-contrast mode.

Use testers who have different accessibility needs

Ideally, have testers with different accessibility needs use these automated testing features and do manual accessibility testing.

Automated tools can't find all the problems in a product, because many of the accessibility barriers show up only during interactive use. None of these features can replace a proper round of testing with people that use assistive technologies and following a plan to check for all the required tests.

Use Accessibility Insights

You can also use the Assessments feature of Accessibility Insights.

Use webhint in Visual Studio Code

Another way to find out what to do to improve your webpage is to use the webhint extension for Visual Studio Code. This extension flags the readily detectable accessibility problems in your source code and gives insights on how to fix them.

See also