Skip to content

Commit 616bb0b

Browse files
MewenLeHoMewenLeHo
authored
Create article for new features in ARIA version 1.3 (#694)
* Create article for new features in ARIA version 1.3 * Fix tags * Fix tags * Cleaning and add webography * fix * Add and fix content * Fix structure * Fix typo * Fix aria-details example * Fix role mark example * Fix role comment * Update role comment code example * Add lang en on webographie * Update date of release * Update updateate again * Update updateDate
1 parent f24b0d4 commit 616bb0b

File tree

2 files changed

+292
-0
lines changed

2 files changed

+292
-0
lines changed

‎src/en/articles/aria-1-3-new-accessibility-features.md‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
---
2+
title: "New features in ARIA version 1.3: a guide for developers"
3+
abstract: "Explore the new features introduced in ARIA version 1.3. This article provides practical examples and explains how these enhancements improve web application accessibility for all users."
4+
titleBeforeTag: true
5+
date: "2025-08-01"
6+
tags:
7+
- web
8+
- advanced
9+
---
10+
11+
## Introduction
12+
Version 1.3 of the <abbr>ARIA</abbr> (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.
13+
14+
## New ARIA attributes
15+
16+
### aria-braillelabel
17+
18+
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.
19+
20+
Example usage:
21+
22+
```html
23+
<button aria-braillelabel="Send message">Send</button>
24+
```
25+
26+
User impact: braille device users will benefit from a better understanding of available actions, which can enhance their navigation experience and autonomy.
27+
28+
### aria-brailleroledescription
29+
30+
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.
31+
32+
Example usage:
33+
34+
```html
35+
<div role="navigation" aria-brailleroledescription="Main navigation menu">
36+
<ul>
37+
<li><a href="#home">Home</a></li>
38+
<li><a href="#about">About</a></li>
39+
</ul>
40+
</div>
41+
```
42+
43+
User impact: braille device users will have a better understanding of the page structure, making navigation and interaction with content easier.
44+
45+
### aria-details
46+
47+
Description: this attribute has been modified in the version 1.3 of <abbr>ARIA</abbr> to allow referencing multiple <code>is</code>. It thus allows referencing one or more elements that provide additional information about another element, offering a richer context.
48+
49+
Example usage:
50+
51+
```html
52+
<button aria-details="details1 details2">Learn more</button>
53+
<div id="details1">
54+
<p>Here is additional information about this button.</p>
55+
</div>
56+
<div id="details2">
57+
<p>Also, check our user guide.</p>
58+
</div>
59+
```
60+
61+
User impact: users, especially those using screen readers, will benefit from a better understanding of elements, reducing confusion and enhancing the overall experience.
62+
63+
### aria-description
64+
65+
Description: this attribute allows providing a description of an element, offering additional contextual information to users.
66+
67+
Example usage:
68+
69+
```html
70+
<input type="text" aria-description="Please enter your email address." />
71+
```
72+
73+
User impact: users will have access to additional information that can help them fill out forms or interact with elements more effectively.
74+
75+
## New ARIA roles
76+
77+
### role="suggestion"
78+
79+
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.
80+
81+
Example usage:
82+
83+
```html
84+
<p>
85+
The best pets are
86+
<span role="suggestion">
87+
<span role="deletion">dogs.</span>
88+
<span role="insertion">T. Rex.</span>
89+
</span>
90+
</p>
91+
```
92+
93+
User impact: users can receive helpful advice that enhances their experience and helps them navigate more effectively through the application.
94+
95+
### role="comment"
96+
97+
Description: this role is used to programmatically indicate comment areas.
98+
99+
Example usage:
100+
101+
```html
102+
<article>
103+
<h1>My Blog Post</h1>
104+
<div class="comments-section">
105+
<div role="comment" aria-labelledby="user1">
106+
<h3 id="user1">Mary</h3>
107+
<time datetime="2024-01-20">01/20/2024</time>
108+
<p>Great article, thanks!</p>
109+
</div>
110+
</div>
111+
</article>
112+
```
113+
114+
User impact: users will benefit from clear instructions that help them interact with elements more effectively.
115+
116+
### role="mark"
117+
118+
Description: the <code>mark</code> role is used to indicate text that has been highlighted or is of particular importance within the content.
119+
120+
Example usage:
121+
122+
```html
123+
<p>This text is <span role="mark">important</span> for understanding.</p>
124+
```
125+
126+
User impact: screen reader users can be informed about important elements in the content, improving their ability to grasp key points.
127+
128+
## Use cases
129+
130+
### Messaging applications
131+
In a messaging application, using <code>aria-braillelabel</code> and <code>aria-brailleroledescription</code> can enhance the user experience by providing clear labels for action buttons, allowing users to quickly understand available options.
132+
133+
### Navigation interfaces
134+
For navigation interfaces, <code>aria-details</code> and <code>aria-description</code> can be used to provide additional context about navigation elements, making the experience more intuitive for all users, especially those using assistive technologies.
135+
136+
### Suggestions and Instructions
137+
Using the new roles <code>suggestion</code> and <code>comment</code> can help guide users in using the application's features by providing them with advice and clear instructions.
138+
139+
## Conclusion
140+
Version 1.3 of the <abbr>ARIA</abbr> 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.
141+
142+
## Webography
143+
<ul>
144+
<li><a href="https://w3c.github.io/aria/">WAI-ARIA 1.3 draft</a></li>
145+
<li><a href="https://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/">A look at the new WAI-ARIA 1.3 draft</a></li>
146+
</ul>

‎src/fr/articles/aria-1-3-nouveautes-accessibilite.md‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
---
2+
title: "Nouveautés de la version 1.3 de la norme ARIA : guide pour les développeurs"
3+
abstract: "Découvrez les nouvelles fonctionnalités de la version 1.3 de la norme ARIA. Cet article fournit des exemples pratiques et explique comment ces améliorations renforcent l'accessibilité des applications web pour tous les utilisateurs."
4+
titleBeforeTag: true
5+
date: "2025-08-01"
6+
tags:
7+
- web
8+
- advanced
9+
---
10+
11+
## Introduction
12+
La version 1.3 de la norme <abbr>ARIA</abbr> (Accessible Rich Internet Applications) apporte des améliorations significatives pour l'accessibilité des applications web. Cet article vise à informer les développeurs web et mobile, ainsi que toute personne intéressée par l'accessibilité numérique, des nouveaux attributs et rôles introduits, de leur utilisation, et de l'impact qu'ils peuvent avoir sur l'expérience utilisateur.
13+
14+
## Nouveaux attributs ARIA
15+
16+
### aria-braillelabel
17+
18+
Description : cet attribut permet de fournir une étiquette spécifique pour les utilisateurs de dispositifs braille. Il est particulièrement utile pour les éléments interactifs, comme les boutons ou les liens, où une étiquette claire est essentielle pour la compréhension.
19+
20+
Exemple d'utilisation :
21+
22+
```html
23+
<button aria-braillelabel="Envoyer le message">Envoyer</button>
24+
```
25+
26+
Impact utilisateur : les utilisateurs de dispositifs braille bénéficieront d'une meilleure compréhension des actions disponibles, ce qui peut améliorer leur expérience de navigation et leur autonomie.
27+
28+
### aria-brailleroledescription
29+
30+
Description : cet attribut fournit une description du rôle d'un élément pour les utilisateurs de dispositifs braille. Cela aide à contextualiser la fonction d'un élément, en particulier dans des interfaces complexes.
31+
32+
Exemple d'utilisation :
33+
34+
```html
35+
<div role="navigation" aria-brailleroledescription="Menu principal de navigation">
36+
<ul>
37+
<li><a href="#home">Accueil</a></li>
38+
<li><a href="#about">À propos</a></li>
39+
</ul>
40+
</div>
41+
```
42+
43+
Impact utilisateur : les utilisateurs de dispositifs braille auront une meilleure compréhension de la structure de la page, ce qui facilite la navigation et l'interaction avec le contenu.
44+
45+
### aria-details
46+
47+
Description : cet attribut a été modifié dans la version 1.3 d'<abbr>ARIA</abbr> pour permettre la référence à plusieurs <code>id</code>. Il permet ainsi de référencer un ou plusieurs éléments qui fournissent des informations supplémentaires sur un autre élément, offrant ainsi un contexte plus riche.
48+
49+
Exemple d'utilisation :
50+
51+
```html
52+
<button aria-details="details1 details2">En savoir plus</button>
53+
<div id="details1">
54+
<p>Voici des informations supplémentaires sur ce bouton.</p>
55+
</div>
56+
<div id="details2">
57+
<p>Consultez également notre guide d'utilisation.</p>
58+
</div>
59+
```
60+
61+
Impact utilisateur : les utilisateurs, notamment ceux utilisant des lecteurs d'écran, bénéficieront d'une meilleure compréhension des éléments, ce qui peut réduire la confusion et améliorer l'expérience globale.
62+
63+
### aria-description
64+
65+
Description : cet attribut permet de fournir une description d'un élément, offrant ainsi des informations contextuelles supplémentaires aux utilisateurs.
66+
67+
Exemple d'utilisation :
68+
69+
```html
70+
<input type="text" aria-description="Veuillez entrer votre adresse e-mail." />
71+
```
72+
73+
Impact utilisateur : les utilisateurs auront accès à des informations supplémentaires qui peuvent les aider à remplir des formulaires ou à interagir avec des éléments de manière plus efficace.
74+
75+
## Nouveaux rôles ARIA
76+
77+
### role="suggestion"
78+
79+
Description : ce rôle est utilisé pour indiquer programmatiquement qu'une modification a été faite dans un texte. Cela permet aux utilisateurs de comprendre qu'il y a des options ou des corrections proposées dans le texte qu'ils peuvent considérer ou appliquer.
80+
81+
Exemple d'utilisation :
82+
83+
```html
84+
<p>
85+
Les meilleurs animaux de compagnie sont
86+
<span role="suggestion">
87+
<span role="deletion">les chiens.</span>
88+
<span role="insertion">les T-rex.</span>
89+
</span>
90+
</p>
91+
```
92+
93+
Impact utilisateur : les utilisateurs peuvent recevoir des conseils utiles qui améliorent leur expérience et les aident à naviguer plus efficacement dans l'application.
94+
95+
### role="comment"
96+
97+
Description : ce rôle est utilisé signaler programmatiquement les zones de commentaires.
98+
99+
Exemple d'utilisation :
100+
101+
```html
102+
<article>
103+
<h1>Mon article de blog</h1>
104+
<div class="comments-section">
105+
<div role="comment" aria-labelledby="user1">
106+
<h3 id="user1">Marie</h3>
107+
<time datetime="2024-01-20">20/01/2024</time>
108+
<p>Super article, merci !</p>
109+
</div>
110+
</div>
111+
</article>
112+
```
113+
114+
Impact utilisateur : les utilisateurs bénéficieront d'instructions claires qui les aident à interagir avec les éléments de manière plus efficace.
115+
116+
### role="mark"
117+
118+
Description : le rôle <code>mark</code> est utilisé pour indiquer un texte qui a été mis en surbrillance ou qui est d'une importance particulière dans le contenu.
119+
120+
Exemple d'utilisation :
121+
122+
```html
123+
<p>Ce texte est <span role="mark">important</span> pour la compréhension.</p>
124+
```
125+
126+
Impact utilisateur : les utilisateurs de lecteurs d'écran peuvent être informés des éléments importants dans le contenu, ce qui améliore leur capacité à saisir les points clés.
127+
128+
## Cas d'utilisation
129+
130+
### Applications de messagerie
131+
Dans une application de messagerie, l'utilisation de <code>aria-braillelabel</code> et <code>aria-brailleroledescription</code> peut améliorer l'expérience utilisateur en fournissant des étiquettes claires pour les boutons d'action, permettant aux utilisateurs de comprendre rapidement les options disponibles.
132+
133+
### Interfaces de navigation
134+
Pour les interfaces de navigation, <code>aria-details</code> et <code>aria-description</code> peuvent être utilisés pour donner un contexte supplémentaire sur les éléments de navigation, rendant l'expérience plus intuitive pour tous les utilisateurs, en particulier ceux utilisant des technologies d'assistance.
135+
136+
### Suggestions et instructions
137+
L'utilisation des nouveaux rôles <code>suggestion</code> et <code>comment</code> peut aider à guider les utilisateurs dans l'utilisation des fonctionnalités de l'application, en leur fournissant des conseils et des instructions claires.
138+
139+
## Conclusion
140+
La version 1.3 de la norme <abbr>ARIA</abbr> introduit des attributs et rôles essentiels qui améliorent l'accessibilité des applications web. En intégrant ces nouveautés, les développeurs peuvent créer des expériences plus inclusives pour tous les utilisateurs, en particulier ceux qui dépendent de technologies d'assistance. N'hésitez pas à explorer ces nouveautés et à les appliquer dans vos projets pour garantir une meilleure accessibilité numérique.
141+
142+
## Webographie
143+
<ul lang="en">
144+
<li><a href="https://w3c.github.io/aria/" hreflang="en">WAI-ARIA 1.3 draft (en)</a></li>
145+
<li><a href="https://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/" hreflang="en">A look at the new WAI-ARIA 1.3 draft (en)</a></li>
146+
</ul>

0 commit comments

Comments
 (0)