Breadcrumbs

  • Place the breadcrumb in a <nav> element when you can.
  • If you do not use a <nav> element, you need to add role="navigation" to the markup. Note: this role is implied when you use the <nav> element so it is a bit redundant to use both at the same time.
  • The markup includes an aria-label="breadcrumbs" to describe the type of navigation.
  • Add aria-current="page" to the link that points to the current page. This will tell assistive technology (AT) devices that the focused link is pointing to the current page.

Resources

WCAG 2.0 Guidelines

Basic Navbar

  • All navigation elements should have a <nav> tag.
  • If you have to use a more generic element such as a <div>, add role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
  • Menus should be labeled according to their individual function. Use can use class="visuallyhidden">, aria-label="", or aria-labelledby="" to easily add context to the different menus on your site.

WCAG 2.0 Guidelines

Navbar Mobile Icon

  • Use the <button> element for your mobile navigation icon.
  • If you use an icon that is purely decoration, declare alt="", as no additional information is needed. If the icon you are using is important to the functionality, then supply additional alt="_descriptive text goes here_" information.
  • It is helpful to all users when you add descriptive text when displaying a mobile icon to give more context to the button's purpose.
  • Place mobile open/close buttons within the <nav> element and use them to toggle state of another child wrapper of the nav. This will ensure that the navigation landmark is still discoverable by screen readers, even if it is in a closed/hidden state.

Resources

WCAG 2.0 Guidelines

Pagination

  • Place the pager in a <nav> element when you can.
  • If you do not use a <nav> element, you need to add role="navigation" to the markup. Note: this role is implied when you use the <nav> element so it is a bit redundant to use both at the same time.
  • The markup includes an aria-label="pagination" to describe the type of navigation.
  • Add aria-current="page" to the link that points to the current page. This will tell AT that the focused link is pointing to the current page.

Resources

WCAG 2.0 Guidelines

2.4.8 Location - Information about the user's location within a set of Web pages is available. (Level AAA)