Usability & Web Accessibility – Navigation
Posted by Yale University | Date Accessed: August 18, 2022
Designers and developers should consider both site-wide and page navigation.
In general, provide multiple ways to reach any page on a site. Doing so allows users to chose whatever way of finding pages is easiest for them. Users with low vision may find using search easier than navigating through a large menu. Users with cognitive impairments may prefer a table of contents or site map over clicking through many pages.
Common ways of supporting navigation include:
- links to related pages
- tables of contents
- site maps
- linking to all other pages from the home page
- Pages that are a step in or result of a process need not have multiple ways to reach them.
Navigation menus reflect the underlying structures of websites. Development best practices for navigation menus include:
- Using a navigation landmark(link is external) and an ARIA label.
- Using conventional locations for menus, such as across the top of the page or along the left side.
- Providing a visual heading to label menus.
- Providing generous sizes for clickable areas, generally no smaller than 44px by 44px.
- Providing clear styles for hover and current states. Menus often do not have styles for visited states.
- Ensuring that menus are keyboard operable and focus is never hidden from users.
- Indicating the current page(link is external) using a hidden span or aria-current.
- Designing fly-out menus(link is external) for screen reader and keyboard users.
- Avoiding role=menu and role=menuitem unless you are implementing all aspects of the ARIA menu design pattern.
For more, the W3C Web Accessibility Initiative has a comprehensive tutorial for designing and coding menus(link is external).
Breadcrumbs are lists of links that present a page’s place in the site hierarchy. They help users find their place within a website. In the DOM, breadcrumbs are typically placed after the main menu and before the document title <h1> heading.
HTML does not have dedicated semantic elements to breadcrumbs(link is external). But, developers should follow the ARIA Authoring Practices breadcrumb design pattern(link is external).
To help screen reader users and users with cognitive disabilities, pages should be organized according to headings. A 2017 WebAIM survey found that most screen reader users prefer headings as their go-to way to find information(link is external) within a page.
Keyboard users navigate through pages by pressing the TAB key to move focus through each focusable element, such as links and form controls. Navigating through repeated blocks of content on each page, such as headers and menus, can be tedious. Websites should provide skip links to bypass repeated blocks and move focus to each page’s main content.
A page’s skip link should be the first focusable element on the page. It should appear within a landmark, typically the banner landmark. Typically, skip links are only visible on focus and use styles to hide them otherwise.
All content on a page should also be contained within a landmark. Landmarks provide a helpful way of organizing information, and also affords additional skip navigation to screen reader users. To implement landmarks, first divide a page into large perceivable areas. Then, assign landmarks and labels appropriately to each area. Important landmarks include:
- main (each page should have exactly one main)
- banner (the page header; each page should have exactly one)
- contentinfo (the page footer; each page should have exactly one)
- navigation (if more than one is present, each should have a unique label)
To further help users understand the structure of pages within a website, repeated blocks of information (headers, footers, sidebars, navigations) should occur within the same relative order, and should have consistent labels.
About This Article:
A Life Worth Living has copied the content of this article under fair use in order to preserve as a post in our resource library for preservation in accessible format. Explicit permission pending.
Link to Original Article: https://usability.yale.edu/web-accessibility/articles/navigation