Banner da postagem: Complete Guide to aria-* Attributes for Accessibility

Complete Guide to aria-* Attributes for Accessibility

Understand how `aria-*` attributes can improve your website’s accessibility

Ensuring your web page is accessible is a fundamental step toward creating an inclusive experience for all users. One of the main resources available to improve accessibility is the use of aria-* attributes, defined by WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications). These attributes provide additional information for screen readers and other assistive technologies.

Table of Contents

  1. What Are the aria-* Attributes?
  2. Main aria-* Attributes and Their Uses
  3. Tips to Use aria-* Attributes Effectively
  4. Complete Example of Using aria-* Attributes
  5. Conclusion

What Are the aria-* Attributes?

The aria-* attributes are a series of HTML attributes that add semantic and behavioral information to user interface elements. They allow you to describe roles, states, and properties of elements so that assistive technologies can interpret them correctly.

Why Use aria-*?

aria-* attributes help to:

  • Improve navigation for users who rely on screen readers.
  • Provide additional context that HTML elements alone may not convey.
  • Describe dynamic states of UI components, such as sliders, dialogs, and modals.

Main aria-* Attributes and Their Uses

1. aria-label

Defines an accessible label for an element that might not have visible text content.

Example:

<button aria-label="Close window">
  <span aria-hidden="true">&times;</span>
</button>

Tip: Avoid redundancy

Before using aria-label, ask yourself: does the element already have an accessible description? If so, you probably don’t need this attribute.

2. aria-labelledby

Associates an element with another that serves as its accessible label.

Example:

<h2 id="section-title">Settings Section</h2>
<section aria-labelledby="section-title">
  <p>General system settings...</p>
</section>

Tip: Check IDs

Make sure the ID referenced in aria-labelledby exists in the DOM. Otherwise, screen readers won’t be able to interpret the label.

3. aria-describedby

Used to associate an element with another that provides additional description.

Example:

<label for="email">Email</label>
<input type="email" id="email" aria-describedby="email-help" />
<small id="email-help">Use a valid email like example@domain.com.</small>

Tip: Use only when necessary

Use aria-describedby only when the additional information is truly important. Otherwise, a label is usually enough.

4. aria-hidden

Indicates whether an element is visible to assistive technologies.

Example:

<div aria-hidden="true">
  <img src="decorative-image.png" alt="" />
</div>

5. aria-live

Indicates that a section of content is subject to dynamic changes.

Example:

<div aria-live="polite">
  <p>You have new messages.</p>
</div>

6. aria-expanded

Used to indicate the expanded/collapsed state of an interactive element.

Example:

<button aria-expanded="false" aria-controls="menu">Menu</button>
<nav id="menu" hidden>
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
  </ul>
</nav>

7. aria-current

Indicates the current item in a set of related items, such as navigation or pagination.

Example:

<nav aria-label="Pagination">
  <ul>
    <li><a href="#" aria-current="page">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</nav>

8. role

Defines the semantic role of an element when standard HTML doesn’t do it adequately.

Example:

<div role="alert">Attention! Your session is about to expire.</div>

Tips to Use aria-* Attributes Effectively

  1. Use aria-* to Complement, Not Replace: aria-* attributes should complement the semantics of HTML elements, not replace them.

  2. Verify Referenced IDs Exist: Ensure attributes like aria-labelledby and aria-describedby point to valid, existing IDs in the DOM.

  3. Avoid Inputs Without a Label:

    • An input without a label will be read as an “unnamed field,” which confuses screen reader users.
    • Always associate a label with the input: 
      <label for="name">Name</label> <input type="text" id="name" />

  4. Test with Screen Readers: Test your implementations with different screen readers to verify behavior.

  5. Combine aria-labelledby and aria-describedby When Needed:

    • Use aria-labelledby for the main label and aria-describedby to provide additional information: 
      <input type="email" id="email" aria-labelledby="email-label" aria-describedby="email-help" />
<label id="email-label" for="email">Email</label>
<small id="email-help">Enter a valid email.</small>

Complete Example of Using aria-* Attributes

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Accessibility Example with ARIA</title>
  </head>
  <body>
    <header>
      <h1>My Accessible Site</h1>
      <nav aria-label="Main Menu">
        <ul>
          <li><a href="#" aria-current="page">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <section aria-labelledby="sec-title">
        <h2 id="sec-title">Important Information</h2>
        <p>This section contains important details for users.</p>
      </section>

      <article aria-labelledby="post-title">
        <h2 id="post-title">Latest Blog Post</h2>
        <p>Discover the latest trends in web accessibility.</p>
      </article>

      <div role="alert" aria-live="assertive">Your session will expire soon. Please save your work.</div>
    </main>

    <footer>
      <button aria-label="Back to top">↑</button>
    </footer>
  </body>
</html>

Conclusion

The aria-* attributes are a powerful tool to make your web pages more accessible. They provide additional context for assistive technologies, enabling users to navigate and interact with your content more effectively.

Remember: Accessibility is a responsibility shared by all developers. By applying aria-* attributes correctly, you’ll be creating more inclusive web experiences.