Caution
This document is an English translation of the “freee Accessibility Guidelines.” The normative version of this document is in Japanese, and the English version is informational. The English translation is incomplete, and any links with their link texts left in Japanese are untranslated. Please be aware that there may be inaccuracies in the translation or parts that are outdated.
Designing and Implementing Navigation for Improved Usability and Accessibility
The navigation mechanisms and site structure significantly impact a Web site’s usability. This short article explains the importance of consistent navigation, clearly indicating the page’s location, and providing multiple pathways.
Consistent Navigation
Users with low vision who use magnification to view a screen may operate by looking at only a portion of it. For such users, if the order and layout of navigation links are consistent across all pages, it becomes easier to infer the page structure, allowing them to find the desired functions more quickly and easily.
Furthermore, for screen reader users, having the screen reader announce all common navigation elements on every page is time-consuming and inefficient. However, if the order and layout are consistent, it is not always necessary to read out the same content every time.
What is crucial here is that in addition to visual consistency in the order and layout, consistent markup should also be used. Screen readers add information to convey the semantics indicated by the markup. Therefore, even if something appears visually the same, if the markup differs, the way it is read aloud will also differ, leading to a lack of consistency in the spoken output.
Clearly Indicating the Page’s Location
Clearly indicating where a page is located within the site’s structure is crucial for users to understand that structure. Understanding the site structure helps users reach their target page more easily and facilitates assumptions when performing various operations.
For example, displaying a breadcrumb trail that shows the hierarchical structure from the site’s top page helps users understand the position of the current page.
Furthermore, indicating which global navigation item the current page belongs to also helps users understand the site structure.
This can be achieved by visually highlighting the global navigation item.
Additionally, by appropriately using the aria-current
attribute, screen reader users can also be informed of which item the current page belongs to.
Providing Multiple Pathways
If a page has only one pathway, it becomes difficult to reach for users who don’t accurately understand or can’t easily infer the site structure. To mitigate this issue, providing multiple pathways is recommended.
Specifically, pages reachable from the global navigation fulfill this condition, as they can be accessed from anywhere within the site. Also, if a page can be reached via a link within a specific page as well as by some other means, this condition is met. Here are some specific examples:
Links from a help page
Links from site search results
Links from a list page in addition to links from results displayed using the list page’s filter function
However, there is no need to provide multiple pathways for pages that only make sense when displayed in a specific context, such as the following examples:
Pages displayed in the middle of a wizard
Pages displayed only when a specific operation is performed, such as showing operation results
Related Guidelines
Pages in General: Consistent Sequence of Components
Pages in General: Multiple Ways
Pages in General: Indicate Current Location