DevTools Tips

Visualize the screen reader order for elements within the page

Categories: Supported by:

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).

Screenshot of the source order viewer in Microsoft Edge, showing numbered boxes around elements

Learn more about it here.