Accessibility-testing features
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) |