Navigation Simplification
Design Matters
posted on February 20, 2023
by Vizability
< Prev <Home> Next >If you have ever scrolled through a page with a screen reader, you might notice that it reads every single thing it comes across. There is no such thing as scanning or skimming with a screen reader, which is why it is crucial to design your website with proper elements for navigation.
One such way is by using headings. Headings in HTML have six levels and a screen reader can not only jump from heading to heading, but identify the level of heading to give the user information on the structure of the content. It is important to have a good heading to content ratio so that a screen reader user can navigate efficiently through your page and find what they are looking for. Too few headings will lead to a lot of unnecessary reading by the screen reader; too many will defeat the purpose of headings in the first place.
Another way to make navigation easier is to include a table of contents at the top of the page, with in page links so that sections can be jumped to. This is most useful if a page is very long so would require the user to jump through possibly dozens of headings to find what they are looking for. In page links allow for an overview of everything on the page so a user doesn't have to jump all the way through the headings and then backtrack to find what they are looking for. For examples of how a table of contents uses in page links, please refer to my Disclaimer, Privacy Policy, or Terms & Conditions because they show how a lot of content can be made more readable with a table of contents with in page links.
You can also include a jump to main content link if there is a lot of information in the header of your pages that you want to allow people to skip over. On a similar note, including a return to top link at the bottom of your page is also helpful, not only for screen reader users but for your sighted users as well.
Lastly, other HTML elements can be used to break up the page contents further. Using proper tables and lists to display information to a screen reader user in a useful format will make navigating much easier. There are also special commands that are available to a screen reader when it detects an element like a table, so making use of the these elements when it is appropriate can make browsing much simpler. If you make use of these few navigational techniques, you will make life a lot more enjoyable for your screen reader users, and might notice your sighted users appreciate the content layout as well.