Skip to main content Skip to footer
Manuel Sánchez
Latest Post: Designing Games: Tips For Creating Emotional Player Experiences

WAI-ARIA 1.3: What Developers Need to Know for Better Accessibility

Discover the latest updates in WAI-ARIA 1.3, including new roles and properties that enhance web accessibility for diverse user needs. Learn how these changes improve the semantics of web content and support users with disabilities.

3 min read

This is a summary of what you will find in

the First Public Working Draft regarding WAI-ARIA 1.3

At the moment of this writing, the document is still a draft and subject to change. The final version will be published in a couple of weeks.

Web accessibility standards keep evolving to better serve diverse user needs. The release of WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications) 1.3 introduces essential improvements to help developers create more inclusive websites. Let’s explore these updates in a simple yet informative way.

Key Improvements in WAI-ARIA 1.3

New Roles and Properties

WAI-ARIA 1.3 introduces several important new roles and properties:

  • aria-braillelabel and aria-brailleroledescription: Provides improved support for braille users by allowing separate braille-specific labels and descriptions.
<button aria-label="Close" aria-braillelabel="CLS">X</button>
  • aria-description: Allows adding a detailed description separate from the accessible name, helping provide richer context.
<div
  role="application"
  aria-label="calendar"
  aria-description="Game schedule for the Boston Red Sox 2021 Season"
>
  <h1>Red Sox 2021</h1>
  <div role="grid">…</div>
</div>
  • Rolescomment, mark, and suggestion: These new semantic roles enrich content annotation and suggestions: Allows adding a detailed description separate from the accessible name, helping provide richer context.

See how nicely we can use them in nested comments:

<div role="comment" id="thread-1" data-author="chris">
  <h3>Chris said</h3>
  <p class="comment-text">I really think this moment could use more cowbell.</p>
  <p><time datetime="2021-03-30T19:29">March 30 2021, 19:29</time></p>

  <div role="comment" data-author="marcus">
    <h3>Marcus replied</h3>
    <p class="comment-text">
      I don't know about that. I think the cowbell could distract from the solo.
    </p>
    <p><time datetime="2021-03-30T21:02">March 30 2021, 21:02</time></p>
  </div>
</div>
  • Role code: Mirrors the code element semantically—ideal for custom components that render code snippets without using native tags.
<div role="code">const sum = (a, b) => a + b;</div>
  • Role time: Represents a specific time or range of time, enhancing the semantics of time-related content.
<span role="time" datetime="2025-06-29">June 29, 2025</span>
  • aria-keyshortcuts: Declares keyboard shortcuts so screen readers can inform users (e.g., “Ctrl+S to save”).
<button aria-keyshortcuts="Ctrl+S">Save</button>
  • aria-placeholder: Provides placeholder text for non-native or contenteditable fields, keeping the UI clean yet accessible.
<div role="textbox" aria-placeholder="Type your comment here..."></div>

Enhancements to Existing Attributes

Among the notable enhancements in WAI-ARIA 1.3, the following ones are particularly interesting: aria-details and aria-errormessage.

The aria-details attribute serves a similar purpose to the never supported longdesc, as stated in the MDN specification. You could connect an element to a more detailed description of its content, which is especially useful for complex data or lengthy explanations.

<div role="article" aria-details="details1 details2">
  <h2>Understanding WAI-ARIA 1.3</h2>
  <p>This article explains the new features in WAI-ARIA 1.3.</p>
</div>
<div id="details1">
  <p>
    WAI-ARIA 1.3 introduces new roles and properties to enhance web
    accessibility. It aims to provide better support for users with disabilities
    by improving the semantics of web content.
  </p>
</div>
<div id="details2">
  <p>
    The new features include roles for comments, suggestions, and enhanced
    support for braille users. These updates help developers create more
    inclusive web applications.
  </p>
</div>

When it comes to aria-errormessage, we are now able to associate multiple error messages with a single input field. This is particularly useful for complex validation scenarios where multiple issues may need to be communicated to the user.

<input aria-errormessage="error1 error2" />
<div id="error1">Username must be at least 8 characters.</div>
<div id="error2">Username must include letters and numbers.</div>

Clarifications and Refinements

  • Better distinction between generic elements and explicit ARIA roles.

  • Improved definitions for roles such as figure, note, search, and complementary.

  • Clarified handling of attributes like aria-haspopup and aria-atomic.

Accessibility Tree and User-Agent Support

  • Enhanced definitions of the accessibility tree, including guidance on which elements should or shouldn’t appear in assistive technologies.

  • Clarified how user agents should handle changes within live regions.

FAQ about WAI-ARIA 1.3

WAI-ARIA helps developers create accessible interactive content, enabling assistive technologies to interpret and interact with web elements effectively.

Share article