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)

See also