| title | Accessibility-testing features |
|---|---|
| description | Webpage accessibility aspects to test, and the corresponding features in Microsoft DevTools. |
| author | MSEdgeTeam |
| ms.author | msedgedevrel |
| ms.topic | conceptual |
| ms.prod | microsoft-edge |
| ms.date | 06/07/2021 |
To test your webpages for accessibility, first make a checklist of accessibility aspects to test, and then use the relevant DevTools features to check each aspect.
| Accessibility aspect to check | Feature of DevTools | Article or subheading |
|---|---|---|
| Verify that images have alt text | Issues tool > Accessibility section of report | Verify that images have alt text |
| Accessibility aspect to check | Feature of DevTools | Article or subheading |
|---|---|---|
| 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 in a sidebar menu |
| 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 |
| Accessibility aspect to check | Feature of DevTools | Article or subheading |
|---|---|---|
| Verify that text has enough contrast (automatically, for the entire page) | Issues tool > Accessibility section of report | Verify that text colors have enough contrast |
| 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 |
| Accessibility aspect to check | Feature of DevTools | Article or subheading |
|---|---|---|
| Verify screen reader support: Verify that input fields have labels | Issues tool > Accessibility section of report | Verify that input fields have labels |
| 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 |
| Accessibility aspect to check | Feature of DevTools | Article or subheading |
|---|---|---|
| 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 |
| Accessibility aspect to check | Feature of DevTools | Article or subheading |
|---|---|---|
| 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) |