Aria Attributes

ARIA landmarks - Roles and properties

General page structure

To allow for screen reader user to easily understand where elements are located on the page we should clearly label and structure the key elements of a site, for example.

Ideally you should also use aria-label to differentiate when using multiple of the same roles like navigations.

<header>[…]</header>

<nav aria-label="Primary menu">[…]</nav>

<nav aria-label="Secondary menu">[…]</nav>

<main>[…]</main>

<footer>[…]</footer>

This also applies to the heading structure of a site and ensuring they are in the correct numerical order.

Good

<h1>
<h2>
<h3>
<h2>

Bad

<h3>
<h2>
<h1>

Accessible name and descriptions

Ensure all elements have accessible names and descriptions attached to them that clearly explains what will happen when this element is interacted with.

For example if a button/link just has an icon/image on it you should be attaching an aria-label onto it to explain what the button does.

<button
  type="button"
  aria-label="Open push cart"
>
  {%- render 'icon-bag' -%}
</button>

Other examples of this Filtering elements could have aria-labels explaining how many products will be returned as well as the category:

aria-label="Blue, 14 products"

Instead of using "Close" on all close buttons include the name of the element/drawer that will be closed as well so it is more descriptive.

aria-label="Close [drawer title]"

Product tags can be generic words and not make much sense on their own so we could prefix these to make them more understandable

aria-label="Tagged: [tag]"

Quantity selectors to include the product that it relates to

aria-label="Increase quantity for [product] from 1 to 2"