Multiple Navigation Panels and Their Labelling at Apple inc.

The Importance of Navigation System

They are a crucial part of any website. Steve Krug, in his book: “Don’t Make Me Think” says that a good navigation system should answer the following questions:

  • Where am I?
  • How did I get here?
  • What can I do here?
  • Where can I go from here?

Considering how advanced the search engines have become, it is possible to first arrive at a page somewhere deep down the organisational structure of the website. If the system answers all the above questions, the user should get a sense of location and create expectations as to what could happen next. In this case, appropriate labelling helps in managing those expectations.

There is a type of labelling which, possibly, does not receive the attention it deserves. It is the naming of multiple navigation menus. Essentially, each menu should have its name, which is visible to screen reader users. This name, just like all other options on the page, provides context as to what the user may find. Having seen several websites which do not provide a unique name for separate navigation panels, we decided to present an example of how such labelling on the Apple website can improve the user experience.

General Principles

Screen reader software relies on appropriate HTML mark-up to convey the structure of a web page.  ARIA roles, states and properties are an extension to this structure. The two elements combined have the potential to create an informative and enjoyable experience for the user. In the case of navigation panels, the main focus is on the <nav> landmark. Using the NVDA screen reader, the <nav> element is communicated to the user as “navigation landmark”.

Ever since websites have become more complex, web designers started to create multiple navigation panels. It means that often there is more than one<nav> element on a web page. For example, it is common to distinguish navigations between primary and secondary. Visual users can get this idea by looking at the page. For secondary navigation, the text is often styled using smaller font-size with the entire panel being less visible than the primary navigation. The idea is that the user creates sub-conscious expectations based on the styling of the page. Therefore, the secondary navigation is perceived as the less important than the primary navigation.

Screenshot of Royal Mail website showing 2 navigation panels

 

The same sort of differentiation should also be presented to screen reader users. The W3C organisation themselves encourages you to make each repetitive landmark easily distinguishable. It is achievable by using either aria-label or aria-labelledby attributes. The following examples provide insight into the type of expectations a screen reader user may create when using navigation panels.

Global and Local Navigation at Apple inc.

In addition to the distinction for primary and secondary navigation, there is a differentiation between global and local navigation. It is better to illustrate how it works on a real-life example. Let us say that you are interested in buying an Apple smartwatch, but you are unsure which model you want. The first step you do is go to the Apple homepage to check available models and their specs.

Home Page

When you arrive at the homepage, the NVDA screen reader announces:

“Global navigation landmark; list with ten items…”

If you inspect the list of items in the panel, i.e. Mac, iPad, iPhone, etc. and check other web pages, you soon realise that this is the high-level navigation menu which you can find on every web page within the Apple website. It is the global navigation.

Image of iPhone NVDA Speech Viewer

 

Some NVDA screen reader users like to navigate through websites using the elements list. It is a dialog with the list of links, headings, forms, fields, buttons, and landmarks. Based on the information from the list, the user can choose where to go to in a matter of seconds. The homepage landmarks elements list presents you with the following options:

  • Global navigation
  • Search function nested inside the global navigation
  • Main section
  • Apple Footer
  • Footnotes nested inside the footer
  • Apple Directory navigation also nested inside the Footer

Copy of iPhone 11 elements list

It is a clear separation of the content. It provides meaning to those who cannot scan the web page visually.

Smartwatch Page

Continuing with checking Apple smartwatch models, you activate the link called “Watch”. The new page brings up a navigation panel which was not available on the home page. Its items are different models of the Apple smartwatch and its accessories. If you had followed a similar path and ended up on the iPad page, you soon realise that the same panel is made of different iPad models and its accessories. It changes depending on the location. It is the local navigation.

Visual users can get the sense of it by looking at the graphics in the panel;each one of them resembles a different smartwatch model. What about the screen reader users? The landmarks elements list presents four navigation panels. That is:

  • “Global; navigation.”
  • “Navigation.”
  • “Breadcrumbs; navigation.”
  • “Apple Directory; navigation.”

Picture of Smartwatch Elements list

 

Smartwatch model and accessories panel is marked using the standard “navigation” label. Also, there is one more panel which was not available on the homepage. It is “Breadcrumbs; navigation” which answers two questions from the beginning of this article- “where am I?” and “how did I get here?”

Based on this information, it is possible to get a sense of location as well as the sense of where you can go. Imagine if the elements list was the following:

  • “navigation.”
  • “navigation.”
  • “navigation.”
  • “navigation.”

Screen reader users should be able to make choices and navigate through web pages similarly to visual users. Because they are unable to check the styling of a web page, the designers should pay attention to the structure of the content and determine if it’s possible to enhance its meaning to the users of assistive technologies.

How to Label Navigation Panels

There are a few ways to name a navigation bar. The technique mostly depends on whether or not the visual user should see the label.

For example, if the name of the navigation is perceivable by the visual user, then the <nav>element could have the aria-labelledby attribute. The attribute is pointing to the element’s description. A simplified version of the code could be:

<nav aria-labelledby="globalNav">
  <h2 id="globalNav">Global</h2>
  <ul>
    <li>Pencil</li>
    <li>Pen</li>
    <li>Paper</li>
  </ul>
</nav>

 

The navigation components, i.e. Pencil, Pen, Paper, should, of course, be interactive, but in this case, we are mainly focusing on the <nav> container and its labelling. The advantage of the above method is that the user can move focus to the panel using not only the landmarks elements list but also features available for the heading elements. That is pressing the “H” shortcut key or using the headings elements list.

I chose “Global” as a heading instead of “Global Navigation” for a reason. It is to reduce the number of repetitive words. Using the above technique,the user will hear something like:

“Global navigation landmark; heading level two; global; list with three items…”.

The name in the landmarks elements list appears as “Global; navigation.”

Landmarks Elements List banner

 

If we opted for “Global Navigation” as the label (this would probably provide more sense to visual users), the screen reader software would announce:

“Global navigation; navigation landmark; heading level two; global navigation; list with three items…”.

The name which would appear in the landmarks elements list is: “Global Navigation; navigation”.

Landmarks Element List for Global navigation; global navigation

It is important to notice that even after eliminating the word navigation from the heading element, the word global is still being repeated by the software (i.e. “Global navigation landmark; heading level two; global).

From my experience, navigation names, just like in the example of the Apple website, are mostly hidden from visual users. To do so, we can use CSS to hide the description, or we can nest the aria-label attribute within the opening <nav> element. The first technique will still make the assistive technology announce the repetitive words. Aria-label, on the other hand, will eliminate this issue. Consider the following pattern:

<nav aria-label="Global">
  <ul>
    <li>Pencil</li>
    <li>Pen</li>
    <li>Paper</li>
  </ul>
</nav>

 

In the above example, the screen reader software announces:

“Global navigation landmark; list with three items…”.

The name in thelandmarks elements list appears as “Global; navigation”.

Global navigation landmark elements list with 3 items

 

The aria-label technique does remove the unnecessary announcements associated with aria-labelledby. However, it does not provide the user with the ability to move focus into the navigation panel using the heading features.

Conclusion

There are many ways to style a web page to provide meaning and create the right expectation to visual users. It helps in making the right choices while navigating through a set of web pages. The same level of understanding should be conveyed to screen reader users. If there are multiple navigation bars, each should have a unique name so that the user could make such choices. The uses of aria-label and aria-labelledby attributes are the most common methods to achieve it.