Principle 1: Perceivable
Structuring content and navigation logically for screen readers
Movement through a web page or application should follow a logical order. It should mirror the visual order of navigation and controls on the page. Users who are navigating by keyboard (e.g., using the tab key) expect to move sequentially from left to right and top to bottom through the focusable elements on the page. Ensure this is thought about at the early stages of a project (the design) to make it easier when it comes to build.
testing and checks
Checking for structured content
Web pages
Try navigating through your web page using keyboard alone. Using the tab key, you should be able to access all links and controls in a predictable order based on their visual position on the page.
You can also keep an eye on providing visual focus at this stage and ensure the area you’ve tabbed to is highlighted correctly. See providing visible focus for keyboard users for more information.
PDF Documents
In Adobe Acrobat Pro, go to View > Tools > Accessibility, and select “Touch Up Reading Order”. This feature provides mock-up view of approximately what your PDF is likely to look like when re-purposed for smaller screens.
Generally, this order will give you a good indication of the read order for screen readers. However, a more accurate test for screen reader order is to check the tag tree, by going to View > Show/Hide > Navigation Pane > Tags.
With both of these features in Acrobat Pro, you can modify the read order if items are out of sequence. In Touch Up Reading Order, click the “Show Order Panel” button, then drag the various blocks of content into a logical reading order. The process is the same in the Tag Tree: If any items are out of order, simply drag them to their appropriate place in the tree.