New features in ARIA version 1.3: a guide for developers

  • Web
  • Advanced

Introduction #

Version 1.3 of the ARIA (Accessible Rich Internet Applications) standard brings significant improvements to the accessibility of web applications. This article aims to inform web and mobile developers, as well as anyone interested in digital accessibility, about the new attributes and roles introduced, their usage, and the impact they can have on user experience.

New ARIA attributes #

aria-braillelabel #

Description: this attribute allows developers to provide a specific label for users of braille devices. It is particularly useful for interactive elements, such as buttons or links, where a clear label is essential for understanding.

Example usage:

<button aria-braillelabel="Send message">Send</button>

User impact: braille device users will benefit from a better understanding of available actions, which can enhance their navigation experience and autonomy.

aria-brailleroledescription #

Description: this attribute provides a description of an element's role for users of braille devices. It helps to contextualize the function of an element, especially in complex interfaces.

Example usage:

<div role="navigation" aria-brailleroledescription="Main navigation menu">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</div>

User impact: braille device users will have a better understanding of the page structure, making navigation and interaction with content easier.

aria-details #

Description: this attribute has been modified in the version 1.3 of ARIA to allow referencing multiple is. It thus allows referencing one or more elements that provide additional information about another element, offering a richer context.

Example usage:

<button aria-details="details1 details2">Learn more</button>
<div id="details1">
  <p>Here is additional information about this button.</p>
</div>
<div id="details2">
  <p>Also, check our user guide.</p>
</div>

User impact: users, especially those using screen readers, will benefit from a better understanding of elements, reducing confusion and enhancing the overall experience.

aria-description #

Description: this attribute allows providing a description of an element, offering additional contextual information to users.

Example usage:

<input type="text" aria-description="Please enter your email address." />

User impact: users will have access to additional information that can help them fill out forms or interact with elements more effectively.

New ARIA roles #

role="suggestion" #

Description: this role is used to programmatically indicate that a change has been made in a text. This allows users to understand that there are options or proposed corrections in the text that they can consider or apply.

Example usage:

<p>
  The best pets are
  <span role="suggestion">
    <span role="deletion">dogs.</span>
    <span role="insertion">T. Rex.</span>
  </span>
</p>

User impact: users can receive helpful advice that enhances their experience and helps them navigate more effectively through the application.

role="comment" #

Description: this role is used to programmatically indicate comment areas.

Example usage:

<article>
  <h1>My Blog Post</h1>
  <div class="comments-section">
    <div role="comment" aria-labelledby="user1">
      <h3 id="user1">Mary</h3>
      <time datetime="2024-01-20">01/20/2024</time>
      <p>Great article, thanks!</p>
    </div>
  </div>
</article>

User impact: users will benefit from clear instructions that help them interact with elements more effectively.

role="mark" #

Description: the mark role is used to indicate text that has been highlighted or is of particular importance within the content.

Example usage:

<p>This text is <span role="mark">important</span> for understanding.</p>

User impact: screen reader users can be informed about important elements in the content, improving their ability to grasp key points.

Use cases #

Messaging applications #

In a messaging application, using aria-braillelabel and aria-brailleroledescription can enhance the user experience by providing clear labels for action buttons, allowing users to quickly understand available options.

For navigation interfaces, aria-details and aria-description can be used to provide additional context about navigation elements, making the experience more intuitive for all users, especially those using assistive technologies.

Suggestions and Instructions #

Using the new roles suggestion and comment can help guide users in using the application's features by providing them with advice and clear instructions.

Conclusion #

Version 1.3 of the ARIA standard introduces essential attributes and roles that enhance the accessibility of web applications. By integrating these new features, developers can create more inclusive experiences for all users, particularly those who rely on assistive technologies. Feel free to explore these new features and apply them in your projects to ensure better digital accessibility.

Webography #