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.

WCAG 2.1 Guidelines

2.4.3 Focus Order - If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)

2.4.5 Multiple Ways - More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process. (Level AA)

2.4.7 Focus Visible - Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

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

4.1.2 Name, Role, Value - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

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.1 Guidelines

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

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.

WCAG 2.1 Guidelines

2.4.3 Focus Order - If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)

2.4.5 Multiple Ways - More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process. (Level AA)

2.4.7 Focus Visible - Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

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

4.1.2 Name, Role, Value - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)

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.

Resources

WCAG 2.1 Guidelines

1.1.1 Non-text Content - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose (some exceptions). (Level A)

Note: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it does not need text alternatives.

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.

Resources

WCAG 2.1 Guidelines

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

Default State

Disabled Previous/Next Group Link State

Disabled Previous/Next Page Link State

Back to top