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