2.4 Navigable

Provide ways to help users navigate, find content, and determine where they are.

Overview

If you are looking for directions on a map that has no labels, it isn't a very helpful map. Websites should contain labels, or link text, that is informative for anyone whether or not they use assistive technology. Many of the techniques mentioned here, though, focus on either screen reader, text-to-speech, speech recognition software that can take your commands (e.g. Alexa, Google Assistant, Siri).

1. Bypass blocks: Screen readers read content top-down from the code, not from what you see visually on the screen. Therefore, if you navigation is at the top (as it typically should be), then you will read the same links over and over again before getting to the main content. There are two common ways to skip this repeated navigation:
   1. Create skip links using HTML and CSS.
   2. Use proper headings and order them based on relevance and importance. Note: Proper headings in a document can also be turned into a table of contents or bookmarks within a document.
2. Title your pages: Label your documents and web pages appropriately for searchability, bookmarks, and wayfinding. Ideally, in a university setting, you don't want to just label your page "Contact Us", since multiple departments will have a contact page. Identify who they can contact in your title: "Contact Us - EIR Accessibility Coordinator" or "Contact the EIR Accessibility Coordinator"
3. Set the reading order or sequence: Screen readers read the code top-down, left-to-right. However, if you change the order visually using certain layout functionality (e.g. CSS, blocks), it may not be reflected when using a screen reader or keyboard to tab through the content. Show the proper sequence or reading order for assistive technology on:
   1. PDF documents
   2. Word documents
   3. PowerPoint presentation documents
   4. web pages
4. Create unique link text: If every link says, "Click here" or "Read more", then you are likely unable to distinguish between the links using speech recognition software. It will give you a list of the "Read more" links and ask you to pick the number you think you want, turning it into a major guessing game. The same thing occurs for screen reader users. To avoid reading the entire page, screen reader users will opt to view all the links on the page. This list is entirely out of context. Therefore, you should do the following in link text:
   1. Add appropriate context to the link text, not depend on the surrounding text.
   2. Try to use active voice to avoid using device dependent gestures in the link text (e.g. slide, tap, click).
5. Use site maps or menus: Make sure your web pages are accessible from more than just a certain page, unless it is hidden in order to follow a set of steps. This is typically done through an easy-to-use menu structure or site map. Site maps list out the web pages in hierarchical order, nesting lists of pages within folders.
6. Provide proper headings and labels: Proper headings allow you to create tables of content and bookmarks within documents. Screen reader users rely on the headings of a page to scan a page similar to a visual user looking for larger, bolder, or more colorful text.
7. Make the cursor focus visible: For those using text-to-speech, speech recognition software, or keyboards, the location of the cursor is vitally important. Ensure that it can be seen on any link, button, or form field that can take action on the page. Being seen should also include making it distinguishable from the rest of the layout, such as color contrast.