It is important to keep in mind the reading order of objects in a document. ATs interpret a page based upon its structure. The order in which content is laid out visually on the page is the order in which it needs to be displayed to ATs.
The Tags Pane
The Tags pane and Order pane show the order in which the content will actually be displayed. It is best to only manipulate the tags in the Tags pane. The Order pane does not always update the content in an accessible manner. The Tags pane also shows the type of content contained in the document. For instance, properly structured headings, lists and tables will have corresponding structural tags in the Tags pane.
The graphic above shows how tags can be switched around. If the order of the tags in the Tags pane is not the same as the visual layout of the document, ATs cannot read the content properly.
Changing Reading Order
In the example above, the <H2> tag containing “Introduction” should be placed above the paragraph tag containing “Proper structure of…”
- To change the reading order, drag (or copy and paste) the <H2> tag above the paragraph tag. Once the order of the content matches the implied visual layout, AT users can accurately interpret the content.
Verifying Reading Order without Using Assistive Technology
- To verify the reading order of a document without using assistive technologies, open the Tags pane and activate the Context menu of any text.
- On the Context menu select Highlight Content.
- Use the arrow keys on the keyboard, arrow up or down, and notice the blue rectangle around the content in the main content area of the document. The area highlighted by the blue rectangle is content that the currently selected tag in the Tags pane references. Expand all tags to see the order of each item in the document.
- Note: Be sure to return to the Context menu and unselect Highlight Content when finished viewing the order. Leaving Highlight Content selected will make other options unusable.