The Final Touches

Lesson Objective

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

10 minutes


ARIA 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 

Screenshot of 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.