Can I use new WAI-ARIA features immediately?

Yes, but always ensure assistive technologies and browsers you target support the latest WAI-ARIA features.

Is WAI-ARIA a replacement for semantic HTML?

No, WAI-ARIA complements semantic HTML. Always use native semantic HTML when available, enhancing it with ARIA as needed.

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

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>

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.