diff --git a/src/en/articles/aria-1-3-new-accessibility-features.md b/src/en/articles/aria-1-3-new-accessibility-features.md index 1ddfb22cd..8ac1e39f1 100644 --- a/src/en/articles/aria-1-3-new-accessibility-features.md +++ b/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 ARIA standard. + ## 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. @@ -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 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. +Description: this attribute has been modified in the version 1.3 of ARIA to allow referencing multiple id 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 - + ``` 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 (aria-invalid="true"). + +Example usage: + +```html + + +

Error: enter a valid email address

+``` + +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 + +``` + +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 div with a contenteditable attribute. + +Example usage: + +```html +
...
+``` + +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: role="code" and role="time" reproduce the semantics of the HTML elements code and time. + +User impact: maintain good semantics in cases where it is not possible to use native HTML elements due to technical constraints. + +### role="image" + +Description: role="image" is created as a replacement for role="img" to harmonize the names of different ARIA roles. role="img" remains valid for backward compatibility reasons. + ## Use cases ### Messaging applications @@ -143,4 +194,5 @@ Version 1.3 of the ARIA standard introduces essential attributes an diff --git a/src/fr/articles/aria-1-3-nouveautes-accessibilite.md b/src/fr/articles/aria-1-3-nouveautes-accessibilite.md index ffca3df96..7f61f033a 100644 --- a/src/fr/articles/aria-1-3-nouveautes-accessibilite.md +++ b/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 ARIA. + ## Introduction La version 1.3 de la norme ARIA (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 - + ``` 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 (aria-invalid="true"). + + +Exemple d'utilisation : + +```html + + +

Erreur : cette adresse mail n'est pas valide

+``` + +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 + +``` + +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 placeholder, par exemple une div avec un attribut contenteditable. + + +Exemple d'utilisation : + +```html +
...
+``` + +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 role="code" et le role="time" reproduisent la sémantique des éléments HTML code et time. + +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 role="image" est créé en remplacement du role="img" afin d'harmoniser les noms des différents rôles ARIA. role="img" 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 ARIA introduit des attributs et rôles e