DevTools
The DevTools functionality in Accessibility Tools is designed to help developers, testers, and auditors inspect, debug, and validate accessibility issues directly within the website you are testing.
After running a test, click the
DevTools button in the top right-hand side corner of the application screen to open the selected page in DevTools.
The DevTools module is useful for a number of things, including:
- Inspecting Accessibility Elements:
- Hover over elements to see accessibility properties such as roles, names, and states.
- Identify mismatches between visible UI elements and what assistive technologies (like screen readers) interpret.
- Navigating ARIA and Semantics
- Check ARIA roles and attributes.
- Validate semantic structure and whether custom components expose correct accessibility behavior.
- Simulating Assistive Technology Experiences
- Simulate keyboard navigation and tab order.
- Focus states and focus traps.
- Debugging and Fixing Accessibility Issues
- Jump directly from an accessibility issue to the line of HTML or code responsible.
- Experiment with changes in real-time (e.g., editing ARIA labels, headings, or alt text) to verify improvements.
