Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
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) |