[Update] Aria 1.3 article

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

@@ -3,11 +3,14 @@ title: "New features in ARIA version 1.3: a guide for developers"
 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."
 titleBeforeTag: true
 date: "2025-08-01"
+updateDate: "2025-09-08"
 tags:
   - web
   - advanced
 ---
 
+This article is regularly updated based on the new features announced in version 1.3 of the <abbr>ARIA</abbr> standard.
+
 ## Introduction
 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.
 
@@ -44,7 +47,7 @@ User impact: braille device users will have a better understanding of the page s
 
 ### aria-details
 
-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.
+Description: this attribute has been modified in the version 1.3 of <abbr>ARIA</abbr> to allow referencing multiple <code>id</code> attributes. It thus allows referencing one or more elements that provide additional information about another element, offering a richer context.
 
 Example usage:
 
@@ -67,11 +70,49 @@ Description: this attribute allows providing a description of an element, offeri
 Example usage:
 
 ```html
-<input type="text" aria-description="Please enter your email address." />
+<input type="email" 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.
 
+### aria-errormessage
+
+Description: this attribute allows linking an error message to a form element. The error message is then vocalized by assistive technologies only if the form element is invalid (<code>aria-invalid="true"</code>).
+
+Example usage:
+
+```html
+<label for="mail">Email address</label>
+<input type="email" id="mail" aria-invalid="true" aria-errormessage="mailError" />
+<p id="mailError">Error: enter a valid email address</p>
+```
+
+User impact: users will be able to understand and correct errors more easily when filling out a form.
+
+### aria-keyshortcuts
+
+Description: this attribute allows highlighting in the DOM any keyboard shortcuts available to users.
+
+Example usage:
+
+```html
+<button type="button" aria-keyshortcuts="Esc">Close dialog</button>
+```
+
+User impact: inform users and enable all users to know the available keyboard shortcuts to facilitate navigation.
+
+### aria-placeholder
+
+Description: this attribute allows adding a placeholder to custom form elements that do not natively support the placeholder attribute, such as a <code>div</code> with a <code>contenteditable</code> attribute.
+
+Example usage:
+
+```html
+<div contenteditable="true" aria-placeholder="Write your message">...</div>
+```
+
+User impact: better understanding of users.
+
 ## New ARIA roles
 
 ### role="suggestion"
@@ -125,6 +166,16 @@ Example usage:
 
 User impact: screen reader users can be informed about important elements in the content, improving their ability to grasp key points.
 
+### role="code" and role="time"
+
+Description: <code>role="code"</code> and <code>role="time"</code> reproduce the semantics of the HTML elements <code>code</code> and <code>time</code>.
+
+User impact: maintain good semantics in cases where it is not possible to use native HTML elements due to technical constraints.
+
+### role="image"
+
+Description: <code>role="image"</code> is created as a replacement for <code>role="img"</code> to harmonize the names of different <abbr>ARIA</abbr> roles. <code>role="img"</code> remains valid for backward compatibility reasons.
+
 ## Use cases
 
 ### Messaging applications
@@ -143,4 +194,5 @@ Version 1.3 of the <abbr>ARIA</abbr> standard introduces essential attributes an
 <ul>
   <li><a href="https://w3c.github.io/aria/">WAI-ARIA 1.3 draft</a></li>
   <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>
+  <li><a href="https://webaim.org/blog/up-and-coming-aria/">Up and Coming ARIA</a></li>
 </ul>

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

@@ -3,11 +3,14 @@ title: "Nouveautés de la version 1.3 de la norme ARIA : guide pour les dévelop
 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."
 titleBeforeTag: true
 date: "2025-08-01"
+updateDate: "2025-09-08"
 tags:
   - web
   - advanced
 ---
 
+Cet article est régulièrement mis à jour en fonction des nouveautés annoncées dans la nouvelle version 1.3 de la norme <abbr>ARIA</abbr>.
+
 ## Introduction
 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.
 
@@ -67,11 +70,53 @@ Description : cet attribut permet de fournir une description d'un élément, off
 Exemple d'utilisation :
 
 ```html
-<input type="text" aria-description="Veuillez entrer votre adresse e-mail." />
+<input type="mail" aria-description="Veuillez entrer votre adresse e-mail." />
 ```
 
 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.
 
+### aria-errormessage
+
+Description : cet attribut permet de lier un message d'erreur à un élément de formulaire. Le message d'erreur est alors vocalisé par les technologies d'assistance uniquement si l'élément de formulaire est invalide (<code>aria-invalid="true"</code>).
+
+
+Exemple d'utilisation :
+
+```html
+<label for="mail">Adresse mail</label>
+<input type="email" id="mail" aria-invalid="true" aria-errormessage="erreurMail" />
+<p id="erreurMail">Erreur : cette adresse mail n'est pas valide</p>
+```
+
+Impact utilisateur : les utilisateurs pourront plus facilement comprendre et corriger les erreurs en remplisant un formulaire.
+
+### aria-keyshortcuts
+
+Description : cet attribut permet de mettre en évidence, dans le DOM, les éventuels raccourcis clavier à la disposition des utilisateurs.
+
+
+Exemple d'utilisation :
+
+```html
+<button type="button" aria-keyshortcuts="Esc">Fermer la modale</button>
+```
+
+Impact utilisateur : informer les utilisateurs et permettre à tous les utilisateurs de connaître les raccourcis claviers disponibles pour faciliter la navigation.
+
+
+### aria-placeholder
+
+Description : cet attribut permet d'ajouter un placeholder à des éléments de formulaire personnalisés qui ne supportent pas nativement l'attribut <code>placeholder</code>, par exemple une <code>div</code> avec un attribut <code>contenteditable</code>.
+
+
+Exemple d'utilisation :
+
+```html
+<div contenteditable="true" aria-placeholder="Tapez un message">...</div>
+```
+
+Impact utilisateur : meilleure compréhension des utilisateurs.
+
 ## Nouveaux rôles ARIA
 
 ### role="suggestion"
@@ -94,7 +139,7 @@ Impact utilisateur : les utilisateurs peuvent recevoir des conseils utiles qui a
 
 ### role="comment"
 
-Description : ce rôle est utilisé signaler programmatiquement les zones de commentaires.
+Description : ce rôle est utilisé pour signaler programmatiquement les zones de commentaires.
 
 Exemple d'utilisation :
 
@@ -125,6 +170,16 @@ Exemple d'utilisation :
 
 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.
 
+### role="code" et role="time"
+
+Description : le <code>role="code"</code> et le <code>role="time"</code> reproduisent la sémantique des éléments HTML <code>code</code> et <code>time</code>.
+
+Impact utilisateur : conserver une bonne sémantique dans les cas où il n'est pas possible d'utiliser les éléments HTML en raison de contraintes techniques.
+
+### role="image"
+
+Description : le <code>role="image"</code> est créé en remplacement du <code>role="img"</code> afin d'harmoniser les noms des différents rôles <abbr>ARIA</abbr>. <code>role="img"</code> reste valide pour des raisons de rétrocompatibilité.
+
 ## Cas d'utilisation
 
 ### Applications de messagerie
@@ -143,4 +198,5 @@ La version 1.3 de la norme <abbr>ARIA</abbr> introduit des attributs et rôles e
 <ul lang="en">
   <li><a href="https://w3c.github.io/aria/" hreflang="en">WAI-ARIA 1.3 draft (en)</a></li>
   <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>
+  <li><a href="https://webaim.org/blog/up-and-coming-aria/" hreflang="en">Up and Coming ARIA (en)</a></li>
 </ul>