10.4 Do not convey information solely through shape, size, or location

Ensure that information conveyed through shape, size, or location remains available and understandable for screen reader users.

Examples

Current position in a navigation menu (example 1)

In this example, a bold style on the link title “Latest news” indicates that it is the current page, and an underline on the title “News” indicates that it is the current parent section.

In this case, an effective way to convey this information in the code is to add an aria-current="page" attribute to the <a> (or <li>) tag of the current page, and an aria-current="true" attribute to the <button> (or <li>) tag of the current section.

<nav role="navigation" aria-label="Main menu">
   <ul>
      <li><a href="…">Vehicle registration services</a></li>
      <li><button href="…" aria-current="true">News</button>
         <ul>
            <li><a href="…">All the news</a></li>
            <li><a href="…" aria-current="page">Latest news</a></li>
         </ul>
      </li>
      <li><a href="…">Services and forms</a></li>
   </ul>
</nav>

Current position in pagination (exemple 2)

In this example, a box around the link “2” indicates that it is the current page.

In this case, an effective way to convey this information in the code is to add an aria-current="page" attribute to the <a> (or <li>) tag of the current page.

<nav role="navigation" aria-label="Pagination">
   <ul>
      […]
      <li><a href="…" aria-label="Page 1">1</a></li>
      <li><a href="…" aria-label="Page 2" aria-current="page">2</a></li>
      <li><a href="…" aria-label="Page 3">3</a></li>
      […]
   </ul>
</nav>

Current position in a breadcrumb (example 3)

In this example, an effective way to convey that “Mamma Mia!” is the current page in the code is to add an aria-current="page" attribute to the <a> tag (or <li>).

<nav role="navigation" aria-labelledby="breadcrumb-label">
<p id="breadcrumb-label">You are here:</p>
   <ol>
      <li><a href="…">Home</a></li>
      <li><a href="…">Things to Do</a></li>
      <li><a href="…">What's On</a></li>
      <li><a href="…">Theatre</a></li>
      <li><a href="…">Musical</a></li>
      <li aria-current="page">Mamma Mia!</li>
   </ol>
</nav>

Current step in multi-step forms (example 4)

In this example, for the “Options” step, bold styling of the label indicates that it is the current step.

In this case, an effective way to convey this information in the code is to add an aria-current="step" attribute to the <a> tag (or <li>).

<nav role="navigation" aria-label="Your order steps">
   <ol>
      <li><a href="…">Selection</a></li>
      <li><a href="…" aria-current="step">Extras</a></li>
      <li>Contact</li>
      <li>Summary</li>
      <li>Payment</li>
   </ol>
</nav>

It is also recommended to allow users to go back in multi-step forms, for example by providing a link.

Current position in tabs (example 5)

In this example, an underline added to the “Guided Tours” tab indicates that it is the active tab.

In this case, an effective way to convey this information in the code is to add an aria-selected="true" attribute to the <button> tag of the active tab.

To see a code sample, refer to the AcceDe Web “Tab panels” guidelines from the main rich interface components accessibility guidelines.

Comments

Back to top