DevTools Tips

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

The source order viewer in Microsoft Edge, showing numbered boxes around elements.

Learn more about it here.