--- title: ARIA slug: Web/Accessibility/ARIA tags: - ARIA - Accessibilité - Applications - Web translation_of: Web/Accessibility/ARIA original_slug: Accessibilité/ARIA --- _Accessible Rich Internet Applications_ **(ARIA)** (qu'on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble un attribut qui définit comment rendre le contenu et les applications web accessibles. ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance quand les fonctionnalités standard ne le permettent pas. Ainsi, ARIA permet de rendre accessible les _widgets_ JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc. > **Attention :** La plupart de ces _widgets_ ont été intégrés au sein d'HTML5 et mieux vaudra donc utiliser les éléments « sémantiques » HTML lorsqu'ils sont disponibles. Ainsi, les éléments natifs disposent de fonctionnalités [de navigation au clavier](/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier), de rôles et d'états définis en standard. Toutefois, lorsque vous choisissez d'utiliser ARIA, il vous revient de recoder les fonctionnalités équivalentes dans vos scripts. Voici un _widget_ utilisé pour une barre de progression : ```html
``` Cette barre de progression utilise un élément `
` qui n'a pas de sémantique forte. Malheureusement, HTML 4 ne possède pas d'élément natif avec la sémantique nécessaire et on doit donc inclure les rôles et propriétés ARIA. Ici, l'attribut `role="progressbar"` indique au navigateur qu'il s'agit d'une barre de progression mise à jour en JavaScript. Les attributs `aria-valuemin` et `aria-valuemax` indiquent les valeurs minimales et maximales pour cette barre tandis que `aria-valuenow` décrit l'état actuel de la barre et cette valeur doit être mise à jour par le code JavaScript. En plus des déclarations _statiques_ dans le contenu HTML, les attributs ARIA peuvent être ajoutés aux éléments et être mis à jour grâce à JavaScript : ```js // Trouver la barre de progression
dans le DOM. var progressBar = document.getElementById("percent-loaded"); // Définir les rôles et les états ARIA // afin que les technologies d'assistance puissent les // identifier/exploiter correctement progressBar.setAttribute("role", "progressbar"); progressBar.setAttribute("aria-valuemin", 0); progressBar.setAttribute("aria-valuemax", 100); // Créer une fonction qui peut être appelée à tout moment // pour mettre à jour la valeur de la barre de progression function updateProgress(percentComplete) { progressBar.setAttribute("aria-valuenow", percentComplete); } ``` > **Note :** ARIA  a été inventé après HTML4 et ne valide pas HTML4 ou les variantes XHTML. Toutefois, les gains d'accessibilité l'emportent sur cette invalidité. > > En HTML5, tous les attributs ARIA sont valides. Les nouveaux éléments de navigation (`
`, `
`, `