1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
---
title: ARIA
slug: Accessibilité/ARIA
tags:
- ARIA
- Accessibilité
- Applications
- Web
translation_of: Web/Accessibility/ARIA
---
<p class="summary"><span class="seoSummary"><em>Accessible Rich Internet Applications</em> <strong>(ARIA) </strong>(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. </span></p>
<p><span class="seoSummary">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.</span> Ainsi, ARIA permet de rendre accessible les <em>widgets</em> JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.</p>
<div class="warning">
<p><strong>Attention !</strong> La plupart de ces <em>widgets</em> 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 <a href="/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier">de navigation au clavier</a>, 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.</p>
</div>
<p>Voici un <em>widget</em> utilisé pour une barre de progression :</p>
<pre class="brush: html"><div id="percent-loaded" role="progressbar" aria-valuenow="75"
aria-valuemin="0" aria-valuemax="100" /></pre>
<p>Cette barre de progression utilise un élément <code><div></code> 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 <code>role="progressbar"</code> indique au navigateur qu'il s'agit d'une barre de progression mise à jour en JavaScript. Les attributs <code>aria-valuemin</code> et <code>aria-valuemax</code> indiquent les valeurs minimales et maximales pour cette barre tandis que <code>aria-valuenow</code> décrit l'état actuel de la barre et cette valeur doit être mise à jour par le code JavaScript.</p>
<p>En plus des déclarations <em>statiques</em> dans le contenu HTML, les attributs ARIA peuvent être ajoutés aux éléments et être mis à jour grâce à JavaScript :</p>
<pre class="brush: js"><code>// Trouver la barre de progression <div> dans le DOM.
var progressBar = document.getElementById("percent-loaded");</code>
<code>// Définir les rôles et les états ARIA
// afin que les technologies d'assistance puissent les
// identifier/exploiter correctement</code>
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);
}</pre>
<div class="note">
<p><strong>Note :</strong> 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é.</p>
<p>En HTML5, tous les attributs ARIA sont valides. Les nouveaux éléments de navigation (<code><main></code>, <code><header></code>, <code><nav></code> etc.) possèdent des rôles ARIA natifs et il n'est pas nécessaire de les dupliquer.</p>
</div>
<h2 id="Prise_en_charge">Prise en charge</h2>
<p>À 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.</p>
<p>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 <a href="/fr/docs/Apprendre/a11y/HTML">utiliser des éléments HTML « sémantiques »</a> dès que possible car cela maximisera la prise en charge des technologies d'assistance.</p>
<p>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.</p>
<section id="sect1">
<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="Tutoriels">Tutoriels</h2>
<dl>
<dt><a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles">Introduction à ARIA</a></dt>
<dd>Une rapide introduction à ARIA pour rendre accessible le contenu dynamique. Voir aussi <a class="external" href="https://dev.opera.com/articles/introduction-to-wai-aria/">l'introduction à ARIA de Gez Lemon</a> en 2008</dd>
<dt><a class="external" href="https://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Vidéos de lecteurs d'écran utilisant ARIA</a></dt>
<dd>Des exemples concrets et d'autres simplifiés avec des vidéos comparatives entre l'état « avant ARIA » et « après ARIA ».</dd>
<dt><a class="external" href="https://w3c.github.io/using-aria/">Utiliser ARIA</a></dt>
<dd>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.</dd>
</dl>
<h2 id="Améliorations_légères_avec_ARIA">Améliorations légères avec ARIA</h2>
<dl>
<dt><a class="external" href="https://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Améliorer la navigation avec les balises (<em>landmarks</em>) ARIA</a></dt>
<dd>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. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">Voir aussi les notes d'implémentation pour les balises ARIA</a> (mis à jour en juillet 2011).</dd>
<dt><a href="/fr/docs/Accessibilité/ARIA/formulaires">Améliorer l'accessibilité des formulaires</a></dt>
<dd>ARIA ne se limite pas au contenu dynamique ! Apprenez comment améliorer l'accessibilité des formulaires HTML grâce aux attributs ARIA.</dd>
</dl>
<h2 id="ARIA_pour_les_widgets_scriptés">ARIA pour les <em>widgets</em> scriptés</h2>
<dl>
<dt><a href="/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier">Concevoir des <em>widgets</em> JavaScript navigables au clavier</a></dt>
<dd>Les éléments tels que <code><input></code>, <code><button></code> disposent de fonctionnalités natives pour l'utilisation au clavier. Si on triche en utilisant des <code> <div></code> et ARIA, on doit s'assurer que l'accessibilité au clavier soit préservée.</dd>
<dt><a href="/fr/docs/Accessibilité/ARIA/Zones_live_ARIA">Régions dynamiques</a> (<em>live regions</em>)</dt>
<dd>Les régions dynamiques fournissent des suggestion aux lecteurs d'écran sur la façon dont gérer la modification du contenu d'une page.</dd>
<dt><a class="external" href="https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm">Utiliser les régions dynamiques ARIA afin d'indiquer une modification de contenu</a></dt>
<dd>Un rapide résumé des régions interactives par les concepteurs du lecteur d'écran JAWS. Les régions dynamiques sont également prises en charge par NVDA pour Firefox et par VoiceOver avec Safari.</dd>
</dl>
</div>
<div class="section">
<h2 class="Tools" id="Processus_de_standardisation">Processus de standardisation</h2>
<dl>
<dt><a class="external" href="https://www.w3.org/TR/wai-aria-1.1/">La spécification WAI-ARIA</a></dt>
<dd>La spécification rédigée par le W3C.</dd>
<dt><a class="external" href="https://www.w3.org/TR/wai-aria-practices-1.1/">Bonnes pratiques afin d'écrire avec WAI-ARIA</a></dt>
<dd>
<p>Les documents officiels décrivant les meilleurs pratiques pour appliquer ARIA aux <em>widgets</em> et aux mécanismes interactifs.</p>
</dd>
</dl>
<h2 id="Videos">Videos</h2>
<p><a href="https://www.youtube.com/watch?v=qdB8SRhqvFc">ARIA, les API pour l'accessibilité : coder comme si ça vous intéressait ! de Léonie Watson (en anglais)</a></p>
<h2 id="Rapporter_des_bogues">Rapporter des bogues</h2>
<p><a href="/fr/docs/Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA">Rapporter des bogues d'accessibilté/ARIA sur les navigateurs, les lecteurs d'écran et les bibliothèques JavaScript.</a></p>
</div>
</div>
</section>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/Accessibilité">Accessibilité</a></li>
<li><a href="/fr/docs/Web/Guide/AJAX">AJAX</a></li>
<li><a href="/fr/docs/Web/JavaScript">JavaScript</a></li>
<li><a href="/fr/docs/Mozilla/Accessibility">Accessibilité et Mozilla</a></li>
</ul>
|
