Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
Visualize the screen reader order for elements within the page
Edge has an accessibility tab within the elements panel that, among other things, lets you visualize the order a screen reader will encounter elements on a page. This is determined by the order of elements in the HTML source code.
Users that can't view the screen may use a screen reader (e.g. Narrator, VoiceOver, NVDA) to consume the content of a page or focused element. If the order of the content read aloud is incorrect, it might give users a confusing experience. Incorrect ordering can occur if CSS is used to reorder elements visually in a way that is not reflected in the source order (Examples here).
This tool adds a layer on the page that shows the order in which elements would be read (i.e. their source order).
- Go to the Elements tab
- Go to the Accessibility panel
- In the toolbar, check the "Show source order" box
