The Final Touches
After completing this lesson, you will be able to describe the importance of adding structural navigation to Web user interfaces using ARIA landmarks.
Time to complete
VideoARIA landmark role video (0:33) and slide
Finally, we have come full circle by demonstrating the features of ARIA that have been designed to add structural navigation to web user interfaces.
Start with well-structured HTML
As explained in Lesson 1.2, creating well-structured HTML content is a precursor to ensuring that web content remains long-lived and accessible. All of HTML's traditional structuring commands can be traced back to the world of documents. Web applications have become quite complex with multiple menus, widgets, sub-pages, and sections to navigate through. So how do you structure a user interface for a web application?
Add landmarks to your page, when it makes sense
In addition to using document structuring conventions such as sections and bulleted lists, ARIA introduces the notion of landmarks that are designed explicitly for use in annotating complex user interfaces. These landmarks provide additional navigational semantics to aid screen readers in making complex user interfaces accessible, for example, via keyboard shortcuts. There are three common levels of using landmarks: at the web page navigation level, the sidebar level, and for the main content.
Google search results pages used to be chunks of text on the page that blind or low-vision users had a difficult time navigating. Occasionally, there were as many as 50 various sections that one had to tab over to get the results they wanted.
Today in Google search, the knowledge panels have landmarks. What this means is that a person using a screen reader can more easily jump between the landmarks or important non-typical sections of a page like knowledge panels that show up in Google searches now.Image 4.1.1. ARIA landmarks in Google Search results knowledge panel
Conduct accessibility tests
As you are developing your web application interfaces, be sure to conduct accessibility tests and solicit feedback to provide the best experience for your users. This could be as simple as going through your entire website using only the keyboard. Run it through ChromeVox yourself, or connect with other developers and people who use screen readers to test each other’s websites and applications. Look in the Resources tab above for other communities you can connect with outside of this class.
You may want to review the previous lessons before you begin the final project.