Navigation

General Better Practices for Navigation Accessibility

Skip to Content

  • Easiest and most effective addition for keyboard users

  • Add a button that allows you to bypass all navigation menu items (or sidebar items) and jump directly to the main content of the page.

  • The main content should be under the h1 heading. This follows from the heading structure best practices.

    Skip To Content Button
    Skip To Content Butotn

BreadCrumbs

  • Consider Breadcrumbs for dapps that have nested pages, such as marketplaces. This will allow the user to backtrack and navigate more easily than having to start from the main page from scratch

  • See our example from our accessible marketplace dapp:

Webpage breadcrumb for navigating back. Reads: Home > Market > Book Collections as nested page options
Breadcrumb example

Footer (Site Map)

  • The presence of a site map will allow the user to always have an easy accessible road map for every page option present on your dapp.

  • In practice some users even skip navigation menus and jump to the site map from our experience. Furthermore, your legal section is usually required for production grade applications.

Example of Site map
Site Map Example

Tabbing

  • All items should be navigable and reachable in a logical order. It should be clear which item the user is on. This section is a repeat of the general guideline main page, however we believe the importance should be reiterated:

Tabbing

Tab through every component on your screen. Can you easily navigate the page only with a keyboard? Can you navigated each component in an obvious sequence?

WCAG 2.2 has expanded AA / AAA guidance to include a larger focus ring as well. This can be modified using styling atop component libraries:

Larger Focus Ring is a AAA enhancement:

Focus Ring

  • Refer to the expandable section above, however ideally there should be a very clear focus on the item selected.

  • Furthermore other elements shouldn't obstruct the view of this focus. If a popup covers the item selected that becomes a visual accessibility issue. (Thinking of cookie disclaimers or privacy policy popups)

Infinite Scroll

  • Unless it is not a default option and offered only as a separate toggle

  • Otherwise considered inaccessible

  • Preferred to have a "Show More" option or Pagination (page numbers with n number of items per page)

Pagination with 8 pages numbered 1 through 8 present. An ellipses icon between pages 5 and 8 exists, as do a left and right arrow to allow page progression on either end of the page numbers.
Pagination Screenshot

PreviousConsistent HelpNextComponent Libraries

Last updated