Accessibility-testing features
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.
Alt-text for images
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 |
Keyboard support
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 |
Text contrast
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 |
Screen reader support
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 |
Vision deficiencies
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 |
Usable when narrow
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) |
See also
Feedback
Submit and view feedback for