From bc7e79341ee10fcf8d48b1789f9382fddb0bcf73 Mon Sep 17 00:00:00 2001 From: julieng Date: Thu, 11 Nov 2021 07:55:03 +0100 Subject: convert content to md --- files/fr/web/accessibility/aria/index.md | 126 ++++++++++++++----------------- 1 file changed, 57 insertions(+), 69 deletions(-) (limited to 'files/fr/web/accessibility/aria/index.md') diff --git a/files/fr/web/accessibility/aria/index.md b/files/fr/web/accessibility/aria/index.md index c54e182fce..24b46f7564 100644 --- a/files/fr/web/accessibility/aria/index.md +++ b/files/fr/web/accessibility/aria/index.md @@ -9,29 +9,30 @@ tags: 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.

+_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.

+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, 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.

-
+> **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 :

+Voici un _widget_ utilisé pour une barre de progression : -
<div id="percent-loaded" role="progressbar" aria-valuenow="75"
-     aria-valuemin="0" aria-valuemax="100" />
+```html +
+``` -

Cette barre de progression utilise un élément <div> 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.

+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 :

+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 : -
// Trouver la barre de progression <div> dans le DOM.
- var progressBar = document.getElementById("percent-loaded");
+```js
+// Trouver la barre de progression 
 dans le DOM.
+ var progressBar = document.getElementById("percent-loaded");
 
-// Définir les rôles et les états ARIA
+// Définir les rôles et les états ARIA
 // afin que les technologies d'assistance puissent les
-// identifier/exploiter correctement
+// identifier/exploiter correctement
  progressBar.setAttribute("role", "progressbar");
  progressBar.setAttribute("aria-valuemin", 0);
  progressBar.setAttribute("aria-valuemax", 100);
@@ -40,77 +41,64 @@ original_slug: Accessibilité/ARIA
 // 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é.

+> **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 (`
`, `
`, `
+## Prise en charge -

Prise en charge

+À l'instar des autres technologies web, la prise en charge d'ARIA est plus ou moins hétérogène parmi les différents navigateurs. La prise en charge d'ARIA repose à la fois sur le navigateur, sur le système d'exploitation sous-jacent et sur la technologie d'assistance utilisée. Certaines versions antérieures de logiciels pourront ne pas prendre en charge (ou que partiellement) certains rôles ARIA. -

À l'instar des autres technologies web, la prise en charge d'ARIA est plus ou moins hétérogène parmi les différents navigateurs. La prise en charge d'ARIA repose à la fois sur le navigateur, sur le système d'exploitation sous-jacent et sur la technologie d'assistance utilisée. Certaines versions antérieures de logiciels pourront ne pas prendre en charge (ou que partiellement) certains rôles ARIA.

+On notera également que certaines personnes qui utilisent des outils d'assistance hésitent à mettre à jour leurs logiciels de peur de perdre les fonctionnalités liées à l'ordinateur et au navigateur. Pour ces raisons, mieux vaudra [utiliser des éléments HTML « sémantiques »](/fr/docs/Apprendre/a11y/HTML) dès que possible car cela maximisera la prise en charge des technologies d'assistance. -

On notera également que certaines personnes qui utilisent des outils d'assistance hésitent à mettre à jour leurs logiciels de peur de perdre les fonctionnalités liées à l'ordinateur et au navigateur. Pour ces raisons, mieux vaudra utiliser des éléments HTML « sémantiques » dès que possible car cela maximisera la prise en charge des technologies d'assistance.

+Il est aussi important de tester l'ARIA écrit avec des technologies d'assistance réelles. Bien qu'il existe certains émulateurs et simulateurs, rien ne vaut un test réel afin d'obtenir suffisamment de garanties. -

Il est aussi important de tester l'ARIA écrit avec des technologies d'assistance réelles. Bien qu'il existe certains émulateurs et simulateurs, rien ne vaut un test réel afin d'obtenir suffisamment de garanties.

+## Tutoriels -

Tutoriels

+- [Introduction à ARIA](/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles) + - : Une rapide introduction à ARIA pour rendre accessible le contenu dynamique. Voir aussi [l'introduction à ARIA de Gez Lemon](https://dev.opera.com/articles/introduction-to-wai-aria/) en 2008 +- [Vidéos de lecteurs d'écran utilisant ARIA](https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/) + - : Des exemples concrets et d'autres simplifiés avec des vidéos comparatives entre l'état « avant ARIA » et « après ARIA ». +- [Utiliser ARIA](https://w3c.github.io/using-aria/) + - : Un guide pratique pour les développeurs qui fournit également des suggestions quant aux attributs ARIA à utiliser sur les éléments HTML sur la base d'implémentations concrètes. -
-
Introduction à ARIA
-
Une rapide introduction à ARIA pour rendre accessible le contenu dynamique. Voir aussi l'introduction à ARIA de Gez Lemon en 2008
-
Vidéos de lecteurs d'écran utilisant ARIA
-
Des exemples concrets et d'autres simplifiés avec des vidéos comparatives entre l'état « avant ARIA » et « après ARIA ».
-
Utiliser ARIA
-
Un guide pratique pour les développeurs qui fournit également des suggestions quant aux attributs ARIA à utiliser sur les éléments HTML sur la base d'implémentations concrètes.
-
+## Améliorations légères avec ARIA -

Améliorations légères avec ARIA

+- [Améliorer la navigation avec les balises (_landmarks_) ARIA](https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/) + - : Une introduction à l'utilisation des balises ARIA afin d'améliorer la navigation au sein d'une page web pour les utilisateurs de lecteur d'écran. [Voir aussi les notes d'implémentation pour les balises ARIA](http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/) (mis à jour en juillet 2011). +- [Améliorer l'accessibilité des formulaires](/fr/docs/Accessibilité/ARIA/formulaires) + - : ARIA ne se limite pas au contenu dynamique ! Apprenez comment améliorer l'accessibilité des formulaires HTML grâce aux attributs ARIA. -
-
Améliorer la navigation avec les balises (landmarks) ARIA
-
Une introduction à l'utilisation des balises ARIA afin d'améliorer la navigation au sein d'une page web pour les utilisateurs de lecteur d'écran. Voir aussi les notes d'implémentation pour les balises ARIA (mis à jour en juillet 2011).
-
Améliorer l'accessibilité des formulaires
-
ARIA ne se limite pas au contenu dynamique ! Apprenez comment améliorer l'accessibilité des formulaires HTML grâce aux attributs ARIA.
-
+## ARIA pour les _widgets_ scriptés -

ARIA pour les widgets scriptés

+- [Concevoir des _widgets_ JavaScript navigables au clavier](/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier) + - : Les éléments tels que ``, `