Jump to main content

A11Y Style Guide

Accordion

  • Buttons are used as the accordions so that they are tab-able by keyboard users and accessible to screen readers.
  • Each accordion button and realted content has a unique id associated with its aria-controls.
  • Each button has an aria-expanded attribute on it that is toggled between true and false. If aria-expanded='true', the content associated with it is shown, and if aria-expanded='false' the content is hidden.

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.

Option #1: List styling with nav element

Option #2: Link styling with no nav element

Basic Navigation

  • 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.

Option #1: List styling with visuallyhidden class

Option #2: List styling with ARIA label

Option #3: No list styling with ARIA labelledby

Mobile Navigation

  • 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.

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.
  • Add aria-disabled="true" to the link when the link is disabled.

Default State

Disabled Previous/Next Group Link State

Disabled Previous/Next Page Link State

Back to top