diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-11-11 07:55:03 +0100 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-11 09:09:42 +0100 |
| commit | bc7e79341ee10fcf8d48b1789f9382fddb0bcf73 (patch) | |
| tree | 7da0863a32a3afca6bc9a001fa0a24a933d65e33 /files/fr/web/accessibility | |
| parent | 9c3eb3245b0e937d6c2c61d126277bdd704e4bce (diff) | |
| download | translated-content-bc7e79341ee10fcf8d48b1789f9382fddb0bcf73.tar.gz translated-content-bc7e79341ee10fcf8d48b1789f9382fddb0bcf73.tar.bz2 translated-content-bc7e79341ee10fcf8d48b1789f9382fddb0bcf73.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/accessibility')
47 files changed, 3107 insertions, 2933 deletions
diff --git a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md index 5c3e8b8a90..3789895ae7 100644 --- a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md +++ b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md @@ -10,160 +10,191 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and original_slug: >- Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles --- -<p>Le Web est en perpétuelle évolution. En effet, les sites à contenu statique sont de plus en plus remplacés par des sites dynamiques à l’utilisation assez proche des applications de bureaux. Les sites Web dynamiques utilisent abondamment JavaScript et AJAX. Les designers créent des widgets et des éléments d'interface grâce aux langages du Web notamment HTML, CSS et Javascript. Ce tournant dans l’histoire du Web permet d'améliorer grandement l'expérience utilisateur et l'utilisation sur mobile (responsive). Mais certains utilisateurs peuvent être exclus par manque d'accessibilité. En effet, JavaScript avait la réputation d'être inaccessible aux technologies d'assistance tel que les interpréteurs d’écran. Or, il existe maintenant des techniques pour rendre le Web accessible à une large palette d’utilisateurs.</p> +Le Web est en perpétuelle évolution. En effet, les sites à contenu statique sont de plus en plus remplacés par des sites dynamiques à l’utilisation assez proche des applications de bureaux. Les sites Web dynamiques utilisent abondamment JavaScript et AJAX. Les designers créent des widgets et des éléments d'interface grâce aux langages du Web notamment HTML, CSS et Javascript. Ce tournant dans l’histoire du Web permet d'améliorer grandement l'expérience utilisateur et l'utilisation sur mobile (responsive). Mais certains utilisateurs peuvent être exclus par manque d'accessibilité. En effet, JavaScript avait la réputation d'être inaccessible aux technologies d'assistance tel que les interpréteurs d’écran. Or, il existe maintenant des techniques pour rendre le Web accessible à une large palette d’utilisateurs. + +## Problématique + +La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag `<div>` ou le tag `<span>`. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que [ARIA](/fr/ARIA) entre en jeu. + +_Exemple 1: Code d_’_une tabulation sans informations ARIA. Il n'y a aucune information permettant de décrire la forme du widget et ses fonctions._ + +```html +<!-- This is a tabs widget. How would you know, looking only at the markup? --> +<ol> + <li id="ch1Tab"> + <a href="#ch1Panel">Chapitre 1</a> + </li> + <li id="ch2Tab"> + <a href="#ch2Panel">Chapitre 2</a> + </li> + <li id="quizTab"> + <a href="#quizPanel">Quiz</a> + </li> +</ol> + +<div> + <div id="ch1Panel">Le contenu du chapitre 1 va ici</div> + <div id="ch2Panel">Le contenu du chapitre 2 va ici</div> + <div id="quizPanel">Le contenu du Quiz va ici</div> +</div> +``` -<h2 id="Problématique">Problématique</h2> +_Example 2: Telles qu'elles sont représentées ci-dessous, les tabulations peuvent être reconnues en tant que tel par les utilisateurs. Or aucune information sémantique exploitable par une technologie d_’_assistance n_’_est présente._ + -<p>La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag <code><div></code> ou le tag <code><span></code>. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que <a href="/fr/ARIA">ARIA</a> entre en jeu.</p> +## ARIA -<p><em>Exemple 1: Code d</em>’<em>une tabulation sans informations ARIA. Il n'y a aucune information permettant de décrire la forme du widget et ses fonctions.</em></p> +[WAI-ARIAI](https://www.w3.org/WAI/standards-guidelines/aria/), les spécifications concernant les applications **internet "riches" et accessibles** sont publiées par l’iniative du [W3C sur l’accessibilité](https://www.w3.org/WAI/), et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus. -<pre class="brush: html"><!-- This is a tabs widget. How would you know, looking only at the markup? --> -<ol> - <li id="ch1Tab"> - <a href="#ch1Panel">Chapitre 1</a> - </li> - <li id="ch2Tab"> - <a href="#ch2Panel">Chapitre 2</a> - </li> - <li id="quizTab"> - <a href="#quizPanel">Quiz</a> - </li> -</ol> +> **Attention :** Beaucoup d’entre eux ont été ajouté plus tard dans HTML5, et **les développeurs devraient toujours préférer utiliser la balise HTML correspondante plutôt qu’utiliser ARIA**. -<div> - <div id="ch1Panel">Le contenu du chapitre 1 va ici</div> - <div id="ch2Panel">Le contenu du chapitre 2 va ici</div> - <div id="quizPanel">Le contenu du Quiz va ici</div> -</div></pre> +Les spécifications ARIA distinguent 3 types d’attributs : rôles, états et propriétés. Les rôles sont utilisés pour les widgets ne faisant pas partie des spécifications HTML 4 comme des sliders, menus, barres, boites de dialogue... Les propriétés sont utilisées pour représenter les caractéristiques de ces widgets, elles décrivent les caractéristiques de ces widgets comme s'il sont déplaçables avec la souris, requièrent un élément ou ont un popup associés à eux. Les états, comme leur nom l'indique, servent à representer l'état actuel de ces éléments en informant les technologies d'assistance s'il est occupé, désactivé, sélectionné ou masqué. -<p><em>Example 2: Telles qu'elles sont représentées ci-dessous, les tabulations peuvent être reconnues en tant que tel par les utilisateurs. Or aucune information sémantique exploitable par une technologie d</em>’<em>assistance n</em>’<em>est présente.</em><br> - <img alt="Screenshot of the tabs widget" src="tabs_widget.png"></p> +Les attributs ARIA ont été conçus de façon à être interprétés directement par les navigateurs Web et interagir directement avec les APIs d'accessibilité natives des systèmes d'exploitation. Quand les spécifications ARIA sont implementées, les technologies d'assistance peuvent interagir avec les widgets JavaScript personnalisés de la même façon qu'ils interagissent avec leurs équivalents de bureau. Les technologies d'assistance peuvent ainsi fournir une expérience utilisateur homogène. -<h2 id="ARIA">ARIA</h2> +_Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà présentes._ -<p><a href="https://www.w3.org/WAI/standards-guidelines/aria/">WAI-ARIAI</a>, les spécifications concernant les applications <strong>internet "riches" et accessibles</strong> sont publiées par l’iniative du <a href="https://www.w3.org/WAI/">W3C sur l’accessibilité</a>, et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus.</p> +```html +<!-- Les tabulations sont bien définies --> +<!-- Des attributs ARIA ont été ajoutés pour lister les différentes tabulations. --> +<ol role="tablist"> + <li id="ch1Tab" role="tab"> + <a href="#ch1Panel">Chapter 1</a> + </li> + <li id="ch2Tab" role="tab"> + <a href="#ch2Panel">Chapter 2</a> + </li> + <li id="quizTab" role="tab"> + <a href="#quizPanel">Quiz</a> + </li> +</ol> -<div class="warning"> -<p><strong>Attention :</strong> Beaucoup d’entre eux ont été ajouté plus tard dans HTML5, et <strong>les développeurs devraient toujours préférer utiliser la balise HTML correspondante plutôt qu’utiliser ARIA</strong>.</p> +<div> + <!-- Remarquez les attributs role and aria-labelledby servant à décrire les tabulations. --> + <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div> + <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div> + <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Contenu du Quiz;/div> </div> +``` -<p>Les spécifications ARIA distinguent 3 types d’attributs : rôles, états et propriétés. Les rôles sont utilisés pour les widgets ne faisant pas partie des spécifications HTML 4 comme des sliders, menus, barres, boites de dialogue... Les propriétés sont utilisées pour représenter les caractéristiques de ces widgets, elles décrivent les caractéristiques de ces widgets comme s'il sont déplaçables avec la souris, requièrent un élément ou ont un popup associés à eux. Les états, comme leur nom l'indique, servent à representer l'état actuel de ces éléments en informant les technologies d'assistance s'il est occupé, désactivé, sélectionné ou masqué.</p> - -<p>Les attributs ARIA ont été conçus de façon à être interprétés directement par les navigateurs Web et interagir directement avec les APIs d'accessibilité natives des systèmes d'exploitation. Quand les spécifications ARIA sont implementées, les technologies d'assistance peuvent interagir avec les widgets JavaScript personnalisés de la même façon qu'ils interagissent avec leurs équivalents de bureau. Les technologies d'assistance peuvent ainsi fournir une expérience utilisateur homogène.</p> - -<p><em>Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà présentes.</em></p> - -<pre class="brush: html"><!-- Les tabulations sont bien définies --> -<!-- Des attributs ARIA ont été ajoutés pour lister les différentes tabulations. --> -<ol role="tablist"> - <li id="ch1Tab" role="tab"> - <a href="#ch1Panel">Chapter 1</a> - </li> - <li id="ch2Tab" role="tab"> - <a href="#ch2Panel">Chapter 2</a> - </li> - <li id="quizTab" role="tab"> - <a href="#quizPanel">Quiz</a> - </li> -</ol> +Les versions récentes des navigateurs majeurs du marché fournissent un support ARIA Firefox, Chrome, Safari, Internet Explorer... De nombreuses technologies d'assistance libres d’accès tel que NVDA et Orca fournissent aussi un support ARIA. Le support de ces spécifications est aussi de plus en plus présent dans les balises des librairies JavaScript : JQuery UI, YUI, Google Closure et Dojo Dijit. -<div> - <!-- Remarquez les attributs role and aria-labelledby servant à décrire les tabulations. --> - <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div> - <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div> - <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Contenu du Quiz;/div> -</div> -</pre> +### Les changement représentationnels -<p>Les versions récentes des navigateurs majeurs du marché fournissent un support ARIA Firefox, Chrome, Safari, Internet Explorer... De nombreuses technologies d'assistance libres d’accès tel que NVDA et Orca fournissent aussi un support ARIA. Le support de ces spécifications est aussi de plus en plus présent dans les balises des librairies JavaScript : JQuery UI, YUI, Google Closure et Dojo Dijit.</p> +Les changements représentationnels incluent l'utilisation du CSS pour changer l'apparence du contenu (mettre une bordure rouge autour de données invalides, changer la couleur de fond d’une case à cocher), le faire apparaitre ou disparaitre. -<h3 id="Les_changement_représentationnels">Les changement représentationnels</h3> +#### Les Changements d'états -<p>Les changements représentationnels incluent l'utilisation du CSS pour changer l'apparence du contenu (mettre une bordure rouge autour de données invalides, changer la couleur de fond d’une case à cocher), le faire apparaitre ou disparaitre. </p> +Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple : -<h4 id="Les_Changements_détats">Les Changements d'états</h4> +- **`aria-checked`** indique l’état d'une case à cocher ou d'un bouton radio, +- **`aria-disabled`** indique qu’un élément est visible, mais désactivé, +- **`aria-expanded`** indique qu’un élément est déroulé. -<p>Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple :</p> +La liste n’est pas exhaustive. Pour voir la liste complète, consulter [les spécifications des états et propriétés ARIA)](https://www.w3.org/TR/wai-aria-1.1/#introstates). -<ul> - <li><strong><code>aria-checked</code></strong> indique l’état d'une case à cocher ou d'un bouton radio,</li> - <li><strong><code>aria-disabled</code></strong> indique qu’un élément est visible, mais désactivé,</li> - <li><strong><code>aria-expanded</code></strong> indique qu’un élément est déroulé.</li> -</ul> +Les développeurs devraient se servir des états ARIA pour indiquer l'état des widgets et utiliser les sélecteurs d'attributs CSS pour en modifier l'apparence en fonction des changements d'états plutôt qu'au moyen d'un script qui modifierait des classes sur le widget. -<p>La liste n’est pas exhaustive. Pour voir la liste complète, consulter <a href="https://www.w3.org/TR/wai-aria-1.1/#introstates">les spécifications des états et propriétés ARIA)</a>.</p> +#### Les changements de visibilité -<p>Les développeurs devraient se servir des états ARIA pour indiquer l'état des widgets et utiliser les sélecteurs d'attributs CSS pour en modifier l'apparence en fonction des changements d'états plutôt qu'au moyen d'un script qui modifierait des classes sur le widget.</p> +Lorsque la visibilité du contenu est modifiée (c'est-à-dire qu'un élément est masqué ou affiché), les développeurs doivent modifier la valeur de la propriété **`aria-hidden`**. Les techniques décrites ci-dessus doivent être utilisées pour déclarer du CSS permettant de cacher visuellement un élément en utilisant `display:none`. -<h4 id="Les_changements_de_visibilité">Les changements de visibilité</h4> +Les parties pertinentes de l'exemple sont expliquées ci-dessous.Dans cet exemple, le code HTML de l’info-bulle a le format indiqué dans l'exemple 2a. La ligne 9 définit l’état **`aria-hidden`** à `true`. -<p>Lorsque la visibilité du contenu est modifiée (c'est-à-dire qu'un élément est masqué ou affiché), les développeurs doivent modifier la valeur de la propriété <strong><code>aria-hidden</code></strong>. Les techniques décrites ci-dessus doivent être utilisées pour déclarer du CSS permettant de cacher visuellement un élément en utilisant <code>display:none</code>.</p> - -<p>Les parties pertinentes de l'exemple sont expliquées ci-dessous.Dans cet exemple, le code HTML de l’info-bulle a le format indiqué dans l'exemple 2a. La ligne 9 définit l’état <strong><code>aria-hidden</code></strong> à <code>true</code>.</p> - -<pre class="brush: html"><div class="text"> - <label id="tp1-label" for="first">First Name:</label> - <input type="text" id="first" name="first" size="20" +```html +<div class="text"> + <label id="tp1-label" for="first">First Name:</label> + <input type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" - aria-required="false" /> - <div id="tp1" class="tooltip" + aria-required="false" /> + <div id="tp1" class="tooltip" role="tooltip" - aria-hidden="true">Your first name is optional</div> -</div> -</pre> + aria-hidden="true">Your first name is optional</div> +</div> +``` -<p>Le CSS pour ce balisage est montré dans l'exemple 2b. Notez qu’il n’y a pas de nom de classe personnalisé utilisé, seul le statut de l'attribut <strong><code>aria-hidden</code></strong> à la ligne 1<em>.<br> - Exemple 2b. Un attribut basé sur le sélecteur indiquant l'état.</em></p> +Le CSS pour ce balisage est montré dans l'exemple 2b. Notez qu’il n’y a pas de nom de classe personnalisé utilisé, seul le statut de l'attribut **`aria-hidden`** à la ligne 1*. +Exemple 2b. Un attribut basé sur le sélecteur indiquant l'état.* -<pre class="brush: css">div.tooltip[aria-hidden="true"] { +```css +div.tooltip[aria-hidden="true"] { display: none; } -</pre> +``` -<p>Le JavaScript à mettre à jour est la propriété <strong><code>aria-hidden</code></strong> du formulaire montré dans l'exemple 2c. Notez que le script met à jour seulement l'attribut <strong><code>aria-hidden</code></strong> à la (ligne 2) ; il n'y a pas besoin d'ajouter ou de supprimer un nom de classe personnalisé.</p> +Le JavaScript à mettre à jour est la propriété **`aria-hidden`** du formulaire montré dans l'exemple 2c. Notez que le script met à jour seulement l'attribut **`aria-hidden`** à la (ligne 2) ; il n'y a pas besoin d'ajouter ou de supprimer un nom de classe personnalisé. -<p><em>Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked.</em></p> +_Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked._ -<pre class="brush: js">var showTip = function(el) { +```js +var showTip = function(el) { el.setAttribute('aria-hidden', 'false'); -}</pre> +} +``` + +### Les changements de rôles + +ARIA permet aux développeurs de déclarer un rôle sémantique pour un élément qui produirait des sémantiques fausses. Par exemple, quand une liste non ordonnée est utilisée pour créer un menu, {{ HTMLElement("ul") }} devrait avoir un **`role`** de `menubar` et chaque {{ HTMLElement("li") }} devrait avoir un **`role`** de `menuitem`. Le **`role`** d'un élément ne doit pas changer. À la place, il faut supprimer l'élément original et le remplacer par un nouveau **`role`**. + +Considérons une zone d’écriture, soit une zone qui permet à l’utilisateur d’éditer une partie de son texte, sans changer de contexte. Cette zone a un mode "vue", dans lequel le texte n’est pas éditable, et un mode "édition", dans lequel le texte peut être modifié. Un développeur peut être tenté d’implémenter le mode "vue" avec un texte en lecture seule via l’élément {{ HTMLElement("input") }} et en configurant le **`role`** ARIA à `button`, puis passe au mode "édition" en rendant l’élément écrivable et en supprimant le **`role`** attribué dans le mode "édition" (puisque les éléments de type {{ HTMLElement("input") }} ont leur propre rôle sémantique). + +Ne faites pas ça. À la place, il vaut mieux implémenter le mode "vue" avec un autre élément, comme {{ HTMLElement("div") }} ou {{ HTMLElement("span") }} avec un **`role`** de `button`, et le mode "édition" avec un élément texte {{ HTMLElement("input") }}. + +## La navigation au clavier + +Souvent, les développeurs négligent la prise en charge du clavier lorsqu’ils créent des widgets personnalisés. Pour être accessible à une large gamme d’utilisateurs, toutes les fonctionnalités d’une application Web ou d’un widget doivent également pouvoir être contrôlées avec le clavier, sans nécessiter de souris. En pratique, cela implique généralement de suivre les conventions prises en charge par des widgets similaires sur le bureau, en tirant pleinement partie des touches <kbd>Tab</kbd>, <kbd>Entrée</kbd>, <kbd>Espace</kbd> et des flèches. + +Traditionnellement, la navigation au clavier sur le Web était limitée à la touche Tabulation. Un utilisateur appuie sur <kbd>Tab</kbd> pour faire la mise au point de chaque lien, bouton ou formulaire sur la page dans un ordre linéaire, en utilisant <kbd><kbd>Maj</kbd>+<kbd>Tab</kbd></kbd> pour revenir en arrière. C’est une forme unidimensionnelle de navigation en avant ou en arrière, un élément à la fois. Sur les pages assez denses, un utilisateur clavier doit souvent appuyer plusieurs fois sur la touche <kbd>Tab</kbd> avant d’accéder à la section requise. La mise en œuvre de conventions de clavier de type bureautique sur le Web peut considérablement accélérer la navigation pour de nombreux utilisateurs. + +Voici un résumé de la façon dont la navigation au clavier devrait fonctionner dans une application Web compatible ARIA : + +- La touche + + <kbd>Tab</kbd> + + devrait fournir le focus au widget dans son ensemble. Par exemple, la tabulation d’une barre de menu devrait mettre l’accent sur le premier élément du menu. + +- Les touches fléchées devraient permettre la sélection ou la navigation dans le widget. Par exemple, en utilisant les touches + + <kbd>←</kbd> + + et + + <kbd>→</kbd> + + , vous devez déplacer le focus sur les éléments de menu précédent et suivant. + +- Lorsque le widget n’est pas à l’intérieur d’un formulaire, les touches + + <kbd>Entrée</kbd> -<h3 id="Les_changements_de_rôles">Les changements de rôles</h3> + et -<p>ARIA permet aux développeurs de déclarer un rôle sémantique pour un élément qui produirait des sémantiques fausses. Par exemple, quand une liste non ordonnée est utilisée pour créer un menu, {{ HTMLElement("ul") }} devrait avoir un <strong><code>role</code></strong> de <code>menubar</code> et chaque {{ HTMLElement("li") }} devrait avoir un <strong><code>role</code></strong> de <code>menuitem</code>. Le <strong><code>role</code></strong> d'un élément ne doit pas changer. À la place, il faut supprimer l'élément original et le remplacer par un nouveau <strong><code>role</code></strong>.</p> + <kbd>Espace</kbd> -<p>Considérons une zone d’écriture, soit une zone qui permet à l’utilisateur d’éditer une partie de son texte, sans changer de contexte. Cette zone a un mode "vue", dans lequel le texte n’est pas éditable, et un mode "édition", dans lequel le texte peut être modifié. Un développeur peut être tenté d’implémenter le mode "vue" avec un texte en lecture seule via l’élément {{ HTMLElement("input") }} et en configurant le <strong><code>role</code></strong> ARIA à <code>button</code>, puis passe au mode "édition" en rendant l’élément écrivable et en supprimant le <strong><code>role</code></strong> attribué dans le mode "édition" (puisque les éléments de type {{ HTMLElement("input") }} ont leur propre rôle sémantique).</p> + permettent de sélectionner ou d’activer le contrôle. -<p>Ne faites pas ça. À la place, il vaut mieux implémenter le mode "vue" avec un autre élément, comme {{ HTMLElement("div") }} ou {{ HTMLElement("span") }} avec un <strong><code>role</code></strong> de <code>button</code>, et le mode "édition" avec un élément texte {{ HTMLElement("input") }}.</p> +- Dans un formulaire, la touche -<h2 id="La_navigation_au_clavier">La navigation au clavier</h2> + <kbd>Espace</kbd> -<p>Souvent, les développeurs négligent la prise en charge du clavier lorsqu’ils créent des widgets personnalisés. Pour être accessible à une large gamme d’utilisateurs, toutes les fonctionnalités d’une application Web ou d’un widget doivent également pouvoir être contrôlées avec le clavier, sans nécessiter de souris. En pratique, cela implique généralement de suivre les conventions prises en charge par des widgets similaires sur le bureau, en tirant pleinement partie des touches <kbd>Tab</kbd>, <kbd>Entrée</kbd>, <kbd>Espace</kbd> et des flèches.</p> + doit sélectionner ou activer le contrôle, tandis que la touche -<p>Traditionnellement, la navigation au clavier sur le Web était limitée à la touche Tabulation. Un utilisateur appuie sur <kbd>Tab</kbd> pour faire la mise au point de chaque lien, bouton ou formulaire sur la page dans un ordre linéaire, en utilisant <kbd><kbd>Maj</kbd>+<kbd>Tab</kbd></kbd> pour revenir en arrière. C’est une forme unidimensionnelle de navigation en avant ou en arrière, un élément à la fois. Sur les pages assez denses, un utilisateur clavier doit souvent appuyer plusieurs fois sur la touche <kbd>Tab</kbd> avant d’accéder à la section requise. La mise en œuvre de conventions de clavier de type bureautique sur le Web peut considérablement accélérer la navigation pour de nombreux utilisateurs.</p> + <kbd>Entrée</kbd> -<p>Voici un résumé de la façon dont la navigation au clavier devrait fonctionner dans une application Web compatible ARIA :</p> + doit soumettre l’action par défaut du formulaire. -<ul> - <li>La touche <kbd>Tab</kbd> devrait fournir le focus au widget dans son ensemble. Par exemple, la tabulation d’une barre de menu devrait mettre l’accent sur le premier élément du menu.</li> - <li>Les touches fléchées devraient permettre la sélection ou la navigation dans le widget. Par exemple, en utilisant les touches <kbd>←</kbd> et <kbd>→</kbd>, vous devez déplacer le focus sur les éléments de menu précédent et suivant.</li> - <li>Lorsque le widget n’est pas à l’intérieur d’un formulaire, les touches <kbd>Entrée</kbd> et <kbd>Espace</kbd> permettent de sélectionner ou d’activer le contrôle.</li> - <li>Dans un formulaire, la touche <kbd>Espace</kbd> doit sélectionner ou activer le contrôle, tandis que la touche <kbd>Entrée</kbd> doit soumettre l’action par défaut du formulaire.</li> - <li>En cas de doute, imitez le comportement standard du bureau du contrôle que vous créez.</li> -</ul> +- En cas de doute, imitez le comportement standard du bureau du contrôle que vous créez. -<p>Ainsi, pour l’exemple de widget Tabs ci-dessus, l’utilisateur devrait être capable de naviguer dans le conteneur du widget (le <ol> dans notre balisage) en utilisant les touches <kbd>Tab</kbd> et <kbd><kbd>Maj</kbd>+<kbd>Tab</kbd></kbd>. Une fois que le focus du clavier est à l’intérieur du conteneur, les touches fléchées devraient permettre à l’utilisateur de naviguer entre chaque onglet (les éléments <li>). De là, les conventions varient d’une plateforme à l’autre. Sous Windows, l’onglet suivant doit être automatiquement activé lorsque l’utilisateur appuie sur les touches fléchées. Sous Mac OS X, l’utilisateur peut appuyer sur <kbd>Entrée</kbd> ou sur <kbd>Espace</kbd> pour activer l’onglet suivant. Un tutoriel en profondeur pour créer <a href="/fr/docs/Contr%C3%B4les_DHTML_personnalis%C3%A9s_navigables_au_clavier">Widget navigables grâce à des contrôles Javascript </a>comme décrit ici afin de montrer comment avoir ce comportement en JS.</p> +Ainsi, pour l’exemple de widget Tabs ci-dessus, l’utilisateur devrait être capable de naviguer dans le conteneur du widget (le \<ol> dans notre balisage) en utilisant les touches <kbd>Tab</kbd> et <kbd><kbd>Maj</kbd>+<kbd>Tab</kbd></kbd>. Une fois que le focus du clavier est à l’intérieur du conteneur, les touches fléchées devraient permettre à l’utilisateur de naviguer entre chaque onglet (les éléments \<li>). De là, les conventions varient d’une plateforme à l’autre. Sous Windows, l’onglet suivant doit être automatiquement activé lorsque l’utilisateur appuie sur les touches fléchées. Sous Mac OS X, l’utilisateur peut appuyer sur <kbd>Entrée</kbd> ou sur <kbd>Espace</kbd> pour activer l’onglet suivant. Un tutoriel en profondeur pour créer [Widget navigables grâce à des contrôles Javascript ](/fr/docs/Contr%C3%B4les_DHTML_personnalis%C3%A9s_navigables_au_clavier)comme décrit ici afin de montrer comment avoir ce comportement en JS. -<p>Pour plus de détails à propos de ces conventions de navigation au clavier, un aperçu ici <a href="http://dev.aol.com/dhtml_style_guide">DHTML style guide</a> est disponible. Il délivre un aperçu de la façon dont la navigation au clavier devrait fonctionner pour chaque type de widget pris en charge par ARIA. Le W3C offre également un document utile <a href="http://www.w3.org/WAI/PF/aria-practices/Overview.html">ARIA Best Practices</a> qui inclut la navigation au clavier et les raccourcis pour une variété de widgets.</p> +Pour plus de détails à propos de ces conventions de navigation au clavier, un aperçu ici [DHTML style guide](http://dev.aol.com/dhtml_style_guide) est disponible. Il délivre un aperçu de la façon dont la navigation au clavier devrait fonctionner pour chaque type de widget pris en charge par ARIA. Le W3C offre également un document utile [ARIA Best Practices](http://www.w3.org/WAI/PF/aria-practices/Overview.html) qui inclut la navigation au clavier et les raccourcis pour une variété de widgets. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Accessibilit%C3%A9/ARIA">ARIA</a></li> - <li><a href="/fr/docs/Accessibilit%C3%A9/ARIA/FAQ_Applications_Web_et_ARIA">Des applications WEB et la FAQ ARIA</a></li> - <li><a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Spécification</a></li> - <li><a href="http://www.w3.org/WAI/PF/aria-practices/Overview.html">WAI-ARIA Best Practices</a></li> - <li><a href="http://dev.aol.com/dhtml_style_guide">DHTML Style Guide</a></li> -</ul> +- [ARIA](/fr/docs/Accessibilit%C3%A9/ARIA) +- [Des applications WEB et la FAQ ARIA](/fr/docs/Accessibilit%C3%A9/ARIA/FAQ_Applications_Web_et_ARIA) +- [WAI-ARIA Spécification](http://www.w3.org/TR/wai-aria/) +- [WAI-ARIA Best Practices](http://www.w3.org/WAI/PF/aria-practices/Overview.html) +- [DHTML Style Guide](http://dev.aol.com/dhtml_style_guide) diff --git a/files/fr/web/accessibility/aria/aria_guides/index.md b/files/fr/web/accessibility/aria/aria_guides/index.md index 6b5aaeb7d9..cc9585dc68 100644 --- a/files/fr/web/accessibility/aria/aria_guides/index.md +++ b/files/fr/web/accessibility/aria/aria_guides/index.md @@ -7,22 +7,20 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Guides original_slug: Accessibilité/ARIA/Guides_ARIA --- -<p><strong>ARIA</strong> (Accessible Rich Internet Applications ou Applications Internet riches accessibles) défini une manière de rendre le web plus accessible pour les personnes en situation de handicap. Les quelques principes suivant permettent de s'assurer d'une meilleure accessibilité :</p> +**ARIA** (Accessible Rich Internet Applications ou Applications Internet riches accessibles) défini une manière de rendre le web plus accessible pour les personnes en situation de handicap. Les quelques principes suivant permettent de s'assurer d'une meilleure accessibilité : -<ul> - <li>Traiter les erreurs dans les formulaires</li> - <li>Labelliser les composants d’interface</li> - <li>Labelliser les composants composés (Composite Widgets) et des zones (Regions)</li> - <li>Gérer le focus dans les composants composés (<code>aria-activedescendant</code> vs roving tabindex)</li> - <li>Utiliser les rôles de points de repère (Landmark Roles)</li> - <li>Traiter les actualisations dynamiques & des zones « Live »</li> - <li>Mode Virtuel contre mode non virtuel dans les produits de technologies d’assistance</li> - <li>Utiliser le Glisser & déposer</li> - <li>Notifier les utilisateurs sur les lecteurs d’écran non-ARIA</li> - <li>Arranger la structure avec le rôle <code>presentation</code></li> - <li>Masquer les trames des tableaux</li> - <li>Gérer les dialogues modaux et non modaux</li> - <li>Utiliser ARIA avec HTML5</li> - <li>Comment tester ARIA ?</li> - <li>ARIA sur les périphériques mobiles</li> -</ul> +- Traiter les erreurs dans les formulaires +- Labelliser les composants d’interface +- Labelliser les composants composés (Composite Widgets) et des zones (Regions) +- Gérer le focus dans les composants composés (`aria-activedescendant` vs roving tabindex) +- Utiliser les rôles de points de repère (Landmark Roles) +- Traiter les actualisations dynamiques & des zones « Live » +- Mode Virtuel contre mode non virtuel dans les produits de technologies d’assistance +- Utiliser le Glisser & déposer +- Notifier les utilisateurs sur les lecteurs d’écran non-ARIA +- Arranger la structure avec le rôle `presentation` +- Masquer les trames des tableaux +- Gérer les dialogues modaux et non modaux +- Utiliser ARIA avec HTML5 +- Comment tester ARIA ? +- ARIA sur les périphériques mobiles diff --git a/files/fr/web/accessibility/aria/aria_live_regions/index.md b/files/fr/web/accessibility/aria/aria_live_regions/index.md index 9c921bac5e..e13259bdd1 100644 --- a/files/fr/web/accessibility/aria/aria_live_regions/index.md +++ b/files/fr/web/accessibility/aria/aria_live_regions/index.md @@ -8,120 +8,82 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions original_slug: Accessibilité/ARIA/Zones_live_ARIA --- -<h2 id="Introduction_2">Introduction </h2> - -<p>Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement.</p> - -<h2 id="Zones_«_live_»_basiques">Zones « live » basiques</h2> - -<p>Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description.</p> - -<dl> - <dt>aria-live :</dt> - <dd>L’attribut <code>aria-live=VALEUR_POLITESSE</code> est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : <code>off</code>/<code>polite</code>/<code>assertive</code>. La valeur par défaut est <code>off</code>. Cet attribut est de loin le plus important.</dd> - <dt>aria-controls :</dt> - <dd><p>L’attribut <code>aria-controls=[LISTE_IDs]</code> est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un <code>ID</code> dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : <code>aria-controls="maZoneID1 maZoneID2"</code>.</p> - <div class="warning"> - <p><strong>Attention :</strong>Nous ne savons pas si <code>aria-controls</code> pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires. - </p> - </div> - </dd> -</dl> - -<p>Normalement, seul <code>aria-live="polite"</code> est utilisé. Toute zone recevant une mise à jour qu’il est important de faire suivre à l’utilisateur, mais pas au point de le déranger dans sa navigation, devrait recevoir cet attribut. Le lecteur d’écran lira les changements dès que l’utilisateur sera inoccupé.</p> - -<p>Pour les zones de moindre importance, ou qui seraient perturbantes à cause d’actualisations répétées et rapprochées ou toute autre raison, il est possible de les rendre silencieux avec <code>aria-live="off"</code>.</p> - -<h3 id="Cas_d’étude_simple_une_''combobox''_actualise_des_informations_utiles_à_l’écran">Cas d’étude simple : une ''combobox'' actualise des informations utiles à l’écran</h3> - -<p>Un site web spécialisé dans l’ornithologie fournit une liste déroulante avec des noms d’oiseaux. Lorsqu’un oiseau est sélectionné dans la liste, une zone de la page web est actualisée avec les détails concernant la famille d’oiseaux choisie.</p> - -<p><code><select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select></code></p> - -<pre class="brush: html"><div role="region" id="bird-info" aria-live="polite"></pre> - -<p>Lorsque l’utilisateur sélectionne un nouvel oiseau, l’information est lue. Du fait de la valeur <code>polite</code>, le lecteur d’écran attendra une pause de la part de l’utilisateur. Ainsi, descendre dans la liste ne déclenchera pas la lecture pour chaque oiseau visité par l’utilisateur, mais uniquement pour celui qui sera finalement choisi.</p> - -<h2 id="Préférences_de_rôles_pour_les_zones_«_live_»_spécialisées">Préférences de rôles pour les zones « live » spécialisées</h2> - -<p>Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni :</p> - -<table> - <thead> - <tr> - <th scope="col">Rôle</th> - <th scope="col">Description</th> - <th scope="col">Compatibilité</th> - </tr> - </thead> - <tbody> - <tr> - <td>log</td> - <td>Chat, erreur, jeux ou autres types de journalisation</td> - <td>Pour maximiser la compatibilité, ajouter un <code>aria-live="polite"</code> redondant lorsque vous utiliserez ce rôle.</td> - </tr> - <tr> - <td>status</td> - <td>Une barre d’état ou une zone de l’écran qui fournit un état actualisé de quelque chose. Les utilisateurs de lecteur d’écran ont à leur disposition une commande spéciale pour lire l’état courant.</td> - <td>Pour maximiser la compatibilité, ajouter un <code>aria-live="polite"</code> redondant lorsque vous utiliserez ce rôle.</td> - </tr> - <tr> - <td>alert</td> - <td>Message d’erreur ou avertissement souligné à l’écran. Les alertes sont particulièrement importantes pour la validation côté client notifiée à l’utilisateur. (TBD: lien vers un tutoriel sur les formulaires ARIA avec des informations plus complètes)</td> - <td>Pour maximiser la compatibilité, ajouter un <code>aria-live="assertive"</code> redondant lorsque vous utiliserez ce rôle. Attention, cette redondance occasionne un problème de double restitution orale dans VoiceOver sur iOS.</td> - </tr> - <tr> - <td>progressbar</td> - <td>Élément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs <code>aria-valuemin</code>, <code>aria-valuenow</code> et <code>aria-valuemax</code>. (TBD : Ajouter plus d’informations pour cet élément).</td> - <td> </td> - </tr> - <tr> - <td>marquee</td> - <td>Pour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique.</td> - <td> </td> - </tr> - <tr> - <td>timer</td> - <td>Pour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre.</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Zones_«_live_»_avancées">Zones « live » avancées</h2> - -<p>(TBD : Qu'est-ce qui est pris en charge par qui ?)</p> - -<p>Le support général des zones "Live" a été ajouté à JAWS à partir de la version 10.0. Windows Eyes supporte les zones "Live" depuis la version 8.0 "pour une utilisation en dehors du mode de navigation (Browse Mode) pour Microsoft Internet Explorer et Mozilla Firefox". NVDA a ajouté un support basique pour les zones "Live" pour Mozilla Firefox en 2008 et qui a été amélioré en 2010 et 2014. En 2015 un support basique fut également ajouté à Internet Explorer (MSHTML).</p> - -<p>The Paciello Group propose des <a href="https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/">informations sur l'état du support des zones "Live"</a>(2014). Paul Jadam s'est intéressé plus particulièrement au <a href="http://pauljadam.com/demos/aria-atomic-relevant.html">support des attributs aria-atomic and aria-relevant</a>.</p> - -<dl> - <dt>aria-atomic :</dt> - <dd>L’attribut <code>aria-atomic=BOOLÉEN</code> est utilisé pour définir si le lecteur d’écran doit ou non présenter la zone « Live » comme un ensemble, même si une partie seulement de la zone est modifiée – Les valeurs possibles sont <code>false</code>/<code>true</code>. La valeur par défaut est <code>false</code>.</dd> - <dt>aria-relevant :</dt> - <dd>L’attribut <code>aria-relevant=[LISTE_DES_CHANGEMENTS]</code> est utilisé pour définir quel type de changements est adéquat à une zone « Live » – les valeurs possibles sont <code>additions</code> (addition)/<code>removals</code> (suppression)/<code>text</code> (texte)/<code>all</code> (tous). La valeur par défaut est « <code>additions text</code>. »</dd> - <dt>aria-labelledby :</dt> - <dd>L’attribut <code>aria-labelledby=[LISTE_ID]</code> est utilisé pour associer un ou des libellés à une zone. Le fonctionnement est similaire à celui d'<code>aria-controls</code> mais les références d'id pointent vers les libellés associés aux blocs identifiés, et les références multiples sont également séparées par un espace.</dd> - <dt>aria-describedby :</dt> - <dd>L’attribut <code>aria-describedby=[LISTE_ID]</code> est utilisé pour associer une ou des descriptions à une zone. Le fonctionnement est similaire à celui d'<code>aria-controls </code>mais les références d'id pointent vers les textes descriptifs associés aux blocs identifiés, et les références multiples sont également séparées par un espace.</dd> -</dl> - -<h3 id="Cas_d’étude_avancé_liste_de_contacts">Cas d’étude avancé : liste de contacts</h3> - -<p>Un site de chat voudrait afficher la liste des utilisateurs actuellement connectés. L'affichage de la liste des utilisateurs doit alors refléter l’état de connexion ou de déconnexion des utilisateurs de manière dynamique (sans actualisation de la page).</p> - -<pre class="brush: html"><ul id="roster" aria-live="polite" aria-relevant="additions removals"> - <!-- utilisez JavaScript ici pour ajouter/supprimer des utilisateurs--> -</ul> -</pre> - -<h4 id="Détails_des_propriétés_«_live_»_d’ARIA">Détails des propriétés « live » d’ARIA :</h4> - -<ul> - <li>L’attribut <code>aria-live="polite"</code> indique au lecteur d’écran qu’il doit attendre que l’utilisateur soit inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur <code>assertive</code> briserait son flux de lecture.</li> - <li>L’attribut <code>aria-atomic</code> n’est pas défini (<code>false</code> par défaut), ainsi seuls les utilisateurs ajoutés ou supprimés devraient être lus et non l’intégralité de la liste, à chaque mise à jour.</li> - <li>L’attribut <code>aria-relevant="additions removals"</code> assure à la fois que les utilisateurs ajoutés et supprimés de la liste seront lus.</li> +## Introduction + +Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement. + +## Zones « live » basiques + +Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description. + +- aria-live : + - : L’attribut `aria-live=VALEUR_POLITESSE` est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : `off`/`polite`/`assertive`. La valeur par défaut est `off`. Cet attribut est de loin le plus important. +- aria-controls : + + - : L’attribut `aria-controls=[LISTE_IDs]` est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un `ID` dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : `aria-controls="maZoneID1 maZoneID2"`. + + > **Attention :**Nous ne savons pas si `aria-controls` pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires. + +Normalement, seul `aria-live="polite"` est utilisé. Toute zone recevant une mise à jour qu’il est important de faire suivre à l’utilisateur, mais pas au point de le déranger dans sa navigation, devrait recevoir cet attribut. Le lecteur d’écran lira les changements dès que l’utilisateur sera inoccupé. + +Pour les zones de moindre importance, ou qui seraient perturbantes à cause d’actualisations répétées et rapprochées ou toute autre raison, il est possible de les rendre silencieux avec `aria-live="off"`. + +### Cas d’étude simple : une ''combobox'' actualise des informations utiles à l’écran + +Un site web spécialisé dans l’ornithologie fournit une liste déroulante avec des noms d’oiseaux. Lorsqu’un oiseau est sélectionné dans la liste, une zone de la page web est actualisée avec les détails concernant la famille d’oiseaux choisie. + +`<select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select>` + +```html +<div role="region" id="bird-info" aria-live="polite"> +``` + +Lorsque l’utilisateur sélectionne un nouvel oiseau, l’information est lue. Du fait de la valeur `polite`, le lecteur d’écran attendra une pause de la part de l’utilisateur. Ainsi, descendre dans la liste ne déclenchera pas la lecture pour chaque oiseau visité par l’utilisateur, mais uniquement pour celui qui sera finalement choisi. + +## Préférences de rôles pour les zones « live » spécialisées + +Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni : + +| Rôle | Description | Compatibilité | +| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| log | Chat, erreur, jeux ou autres types de journalisation | Pour maximiser la compatibilité, ajouter un `aria-live="polite"` redondant lorsque vous utiliserez ce rôle. | +| status | Une barre d’état ou une zone de l’écran qui fournit un état actualisé de quelque chose. Les utilisateurs de lecteur d’écran ont à leur disposition une commande spéciale pour lire l’état courant. | Pour maximiser la compatibilité, ajouter un `aria-live="polite"` redondant lorsque vous utiliserez ce rôle. | +| alert | Message d’erreur ou avertissement souligné à l’écran. Les alertes sont particulièrement importantes pour la validation côté client notifiée à l’utilisateur. (TBD: lien vers un tutoriel sur les formulaires ARIA avec des informations plus complètes) | Pour maximiser la compatibilité, ajouter un `aria-live="assertive"` redondant lorsque vous utiliserez ce rôle. Attention, cette redondance occasionne un problème de double restitution orale dans VoiceOver sur iOS. | +| progressbar | Élément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs `aria-valuemin`, `aria-valuenow` et `aria-valuemax`. (TBD : Ajouter plus d’informations pour cet élément). | | +| marquee | Pour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique. | | +| timer | Pour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre. | | + +## Zones « live » avancées + +(TBD : Qu'est-ce qui est pris en charge par qui ?) + +Le support général des zones "Live" a été ajouté à JAWS à partir de la version 10.0. Windows Eyes supporte les zones "Live" depuis la version 8.0 "pour une utilisation en dehors du mode de navigation (Browse Mode) pour Microsoft Internet Explorer et Mozilla Firefox". NVDA a ajouté un support basique pour les zones "Live" pour Mozilla Firefox en 2008 et qui a été amélioré en 2010 et 2014. En 2015 un support basique fut également ajouté à Internet Explorer (MSHTML). + +The Paciello Group propose des [informations sur l'état du support des zones "Live"](https://www.paciellogroup.com/blog/2014/03/screen-reader-support-aria-live-regions/)(2014). Paul Jadam s'est intéressé plus particulièrement au [support des attributs aria-atomic and aria-relevant](http://pauljadam.com/demos/aria-atomic-relevant.html). + +- aria-atomic : + - : L’attribut `aria-atomic=BOOLÉEN` est utilisé pour définir si le lecteur d’écran doit ou non présenter la zone « Live » comme un ensemble, même si une partie seulement de la zone est modifiée – Les valeurs possibles sont `false`/`true`. La valeur par défaut est `false`. +- aria-relevant : + - : L’attribut `aria-relevant=[LISTE_DES_CHANGEMENTS]` est utilisé pour définir quel type de changements est adéquat à une zone « Live » – les valeurs possibles sont `additions` (addition)/`removals` (suppression)/`text` (texte)/`all` (tous). La valeur par défaut est « `additions text`. » +- aria-labelledby : + - : L’attribut `aria-labelledby=[LISTE_ID]` est utilisé pour associer un ou des libellés à une zone. Le fonctionnement est similaire à celui d'`aria-controls` mais les références d'id pointent vers les libellés associés aux blocs identifiés, et les références multiples sont également séparées par un espace. +- aria-describedby : + - : L’attribut `aria-describedby=[LISTE_ID]` est utilisé pour associer une ou des descriptions à une zone. Le fonctionnement est similaire à celui d'`aria-controls `mais les références d'id pointent vers les textes descriptifs associés aux blocs identifiés, et les références multiples sont également séparées par un espace. + +### Cas d’étude avancé : liste de contacts + +Un site de chat voudrait afficher la liste des utilisateurs actuellement connectés. L'affichage de la liste des utilisateurs doit alors refléter l’état de connexion ou de déconnexion des utilisateurs de manière dynamique (sans actualisation de la page). + +```html +<ul id="roster" aria-live="polite" aria-relevant="additions removals"> + <!-- utilisez JavaScript ici pour ajouter/supprimer des utilisateurs--> </ul> +``` + +#### Détails des propriétés « live » d’ARIA : + +- L’attribut `aria-live="polite"` indique au lecteur d’écran qu’il doit attendre que l’utilisateur soit inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur `assertive` briserait son flux de lecture. +- L’attribut `aria-atomic` n’est pas défini (`false` par défaut), ainsi seuls les utilisateurs ajoutés ou supprimés devraient être lus et non l’intégralité de la liste, à chaque mise à jour. +- L’attribut `aria-relevant="additions removals"` assure à la fois que les utilisateurs ajoutés et supprimés de la liste seront lus. -<p>TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true".</p> +TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true". diff --git a/files/fr/web/accessibility/aria/aria_techniques/index.md b/files/fr/web/accessibility/aria/aria_techniques/index.md index 58c2d37553..74687a3930 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/index.md @@ -9,111 +9,113 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques original_slug: Accessibilité/ARIA/Techniques_ARIA --- -<h3 id="Rôles">Rôles</h3> -<h4 id="Rôles_de_composant_d’interface">Rôles de composant d’interface</h4> -<ul> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert">Alert</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog">Alertdialog</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_button">Button</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox">Checkbox</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_dialog">Dialog</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link">Link</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log">Log</a></li> - <li>Marquee</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar">Progressbar</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio">Radio</a></li> - <li>Scrollbar</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider">Slider</a></li> - <li>Spinbutton</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status">status</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox">textbox</a></li> - <li>Timer</li> - <li>Tooltip</li> -</ul> -<h4 id="Rôles_composés">Rôles composés</h4> -<p>Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôles enfants obligatoires ou facultatifs.</p> -<ul> - <li>Grid (tableau, contenant les rôles <code>row</code> (ligne), <code>gridcell</code> (cellule), <code>rowheader</code> (en-tête de ligne) et <code>columnheader</code> (en-tête de colonne))</li> - <li>Menubar / Menu (contenant les rôles <code>menuitem</code>, <code>menuitemcheckbox</code> et <code>menuitemradio</code>)</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox">Listbox</a> (boîte de liste, contenant le rôle <code>option</code>)</li> - <li>Tablist (boîte à onglets, contenant les rôles <code>tab</code> et <code>tabpanel</code>)</li> - <li>Tree (arbre, contenant les rôles <code>group</code> et <code>treeitem</code>)</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio">Radiogroup (voir le rôle <code>Radio</code>)</a></li> - <li>Treegrid</li> -</ul> -<h4 id="Rôles_de_structure_de_document">Rôles de structure de document</h4> -<ul> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_article">Article</a></li> - <li>Definition</li> - <li>Directory</li> - <li>Document</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group">Group</a></li> - <li>Heading</li> - <li>Img</li> - <li>List, listitem</li> - <li>Math</li> - <li>Note</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation">Presentation</a></li> - <li>Region</li> - <li>Separator</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar">Toolbar</a></li> -</ul> -<h4 id="Rôles_de_points_de_repère">Rôles de points de repère</h4> -<ul> - <li>Application</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner">Banner</a></li> - <li>Complementary</li> - <li>Contentinfo</li> - <li>Form</li> - <li>Main</li> - <li>Navigation</li> - <li>Search</li> -</ul> -<h3 id="États_et_propriétés">États et propriétés</h3> -<h4 id="Attributs_de_composants_d’interface">Attributs de composants d’interface</h4> -<ul> - <li>aria-autocomplete</li> - <li>aria-checked</li> - <li>aria-disabled</li> - <li>aria-expanded</li> - <li>aria-haspopup</li> - <li>aria-hidden</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid">aria-invalid</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label">aria-label</a></li> - <li>aria-level</li> - <li>aria-multiline</li> - <li>aria-multiselectable</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation">aria-orientation</a></li> - <li>aria-pressed</li> - <li>aria-readonly</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required">aria-required</a></li> - <li>aria-selected</li> - <li>aria-sort</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax">aria-valuemax</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin">aria-valuemin</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow">aria-valuenow</a></li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext">aria-valuetext</a></li> -</ul> -<h4 id="Attributs_de_zones_«_live_»">Attributs de zones « live »</h4> -<ul> - <li>aria-live</li> - <li>aria-relevant</li> - <li>aria-atomic</li> - <li>aria-busy</li> -</ul> -<h4 id="Attributs_de_glisser-déposer">Attributs de glisser-déposer</h4> -<ul> - <li>aria-dropeffect</li> - <li>aria-dragged</li> -</ul> -<h4 id="Attributs_de_relation">Attributs de relation</h4> -<ul> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-activedescendant">aria-activedescendant</a></li> - <li>aria-controls</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">aria-describedby</a></li> - <li>aria-flowto</li> - <li><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby">aria-labelledby</a></li> - <li>aria-owns</li> - <li>aria-posinset</li> - <li>aria-setsize</li> -</ul> +### Rôles + +#### Rôles de composant d’interface + +- [Alert](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert) +- [Alertdialog](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog) +- [Button](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_button) +- [Checkbox](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox) +- [Dialog](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_dialog) +- [Link](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link) +- [Log](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log) +- Marquee +- [Progressbar](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar) +- [Radio](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio) +- Scrollbar +- [Slider](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider) +- Spinbutton +- [status](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status) +- [textbox](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox) +- Timer +- Tooltip + +#### Rôles composés + +Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôles enfants obligatoires ou facultatifs. + +- Grid (tableau, contenant les rôles `row` (ligne), `gridcell` (cellule), `rowheader` (en-tête de ligne) et `columnheader` (en-tête de colonne)) +- Menubar / Menu (contenant les rôles `menuitem`, `menuitemcheckbox` et `menuitemradio`) +- [Listbox](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox) (boîte de liste, contenant le rôle `option`) +- Tablist (boîte à onglets, contenant les rôles `tab` et `tabpanel`) +- Tree (arbre, contenant les rôles `group` et `treeitem`) +- [Radiogroup (voir le rôle `Radio`)](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_radio) +- Treegrid + +#### Rôles de structure de document + +- [Article](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_article) +- Definition +- Directory +- Document +- [Group](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group) +- Heading +- Img +- List, listitem +- Math +- Note +- [Presentation](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation) +- Region +- Separator +- [Toolbar](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_toolbar) + +#### Rôles de points de repère + +- Application +- [Banner](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner) +- Complementary +- Contentinfo +- Form +- Main +- Navigation +- Search + +### États et propriétés + +#### Attributs de composants d’interface + +- aria-autocomplete +- aria-checked +- aria-disabled +- aria-expanded +- aria-haspopup +- aria-hidden +- [aria-invalid](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid) +- [aria-label](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label) +- aria-level +- aria-multiline +- aria-multiselectable +- [aria-orientation](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation) +- aria-pressed +- aria-readonly +- [aria-required](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required) +- aria-selected +- aria-sort +- [aria-valuemax](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) +- [aria-valuemin](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) +- [aria-valuenow](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) +- [aria-valuetext](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) + +#### Attributs de zones « live » + +- aria-live +- aria-relevant +- aria-atomic +- aria-busy + +#### Attributs de glisser-déposer + +- aria-dropeffect +- aria-dragged + +#### Attributs de relation + +- [aria-activedescendant](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-activedescendant) +- aria-controls +- [aria-describedby](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby) +- aria-flowto +- [aria-labelledby](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby) +- aria-owns +- aria-posinset +- aria-setsize diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.md index 075b85ac58..f1858e0e89 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.md @@ -9,116 +9,110 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#alert"><code>alert</code> (en)</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +Cette technique présente l’utilisation du rôle [`alert` (en)](http://www.w3.org/TR/wai-aria/roles#alert) et décrit les effets produits sur les navigateurs et les technologies d’assistance. -<p>Le rôle <code>alert</code> est utilisé pour communiquer un message important et généralement avec une notion d'urgence à l’utilisateur. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement d'alerte accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. Le rôle <code>alert</code> est le plus utile lorsqu’il s’agit d’attirer l’attention de l’utilisateur, par exemple si :</p> +Le rôle `alert` est utilisé pour communiquer un message important et généralement avec une notion d'urgence à l’utilisateur. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement d'alerte accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. Le rôle `alert` est le plus utile lorsqu’il s’agit d’attirer l’attention de l’utilisateur, par exemple si : -<ul> - <li>Une valeur non valide a été saisie dans un champ de formulaire ;</li> - <li>La session d’un utilisateur est sur le point d’expirer ;</li> - <li>La connexion au serveur a été interrompue, les modifications locales ne seront pas sauvegardées.</li> -</ul> +- Une valeur non valide a été saisie dans un champ de formulaire ; +- La session d’un utilisateur est sur le point d’expirer ; +- La connexion au serveur a été interrompue, les modifications locales ne seront pas sauvegardées. -<p>De fait de sa nature intrusive, le rôle <code>alert</code> doit être utilisé avec parcimonie et uniquement dans les situations où l’attention de l’utilisateur est immédiatement requise. Les changements dynamiques de moindre urgence devraient utiliser une méthode moins agressive, telle que <code>aria-live="polite"</code> ou autres rôles de zone live.</p> +De fait de sa nature intrusive, le rôle `alert` doit être utilisé avec parcimonie et uniquement dans les situations où l’attention de l’utilisateur est immédiatement requise. Les changements dynamiques de moindre urgence devraient utiliser une méthode moins agressive, telle que `aria-live="polite"` ou autres rôles de zone live. -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Lorsque le rôle <code>alert</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> +Lorsque le rôle `alert` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -<ul> - <li>Présenter l’élément ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation ;</li> - <li>Déclencher un événement d'alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> -</ul> +- Présenter l’élément ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation ; +- Déclencher un événement d'alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -<p>Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence :</p> +Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence : -<ul> - <li>Les lecteurs d’écran peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ;</li> - <li>Les loupes ou agrandisseurs d’écran peuvent indiquer qu’une alerte est survenue et quel en est le texte.</li> -</ul> +- Les lecteurs d’écran peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ; +- Les loupes ou agrandisseurs d’écran peuvent indiquer qu’une alerte est survenue et quel en est le texte. -<div class="note"> - <p><strong>Note :</strong> plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> -</div> +> **Note :** plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1_Ajout_du_rôle_dans_le_code_HTML">Exemple 1 : Ajout du rôle dans le code HTML</h4> +#### Exemple 1 : Ajout du rôle dans le code HTML -<p>L’extrait de code ci-dessous montre comment le rôle <code>alert</code> est directement ajouté dans le code source HTML. Au moment où l’élément finit de se charger, le lecteur d’écran doit être notifié de l’alerte. Si l’élément était dans le code source original lorsque la page s’est chargée, le lecteur d’écran annonce immédiatement l’erreur après la lecture du titre de la page.</p> +L’extrait de code ci-dessous montre comment le rôle `alert` est directement ajouté dans le code source HTML. Au moment où l’élément finit de se charger, le lecteur d’écran doit être notifié de l’alerte. Si l’élément était dans le code source original lorsque la page s’est chargée, le lecteur d’écran annonce immédiatement l’erreur après la lecture du titre de la page. -<pre class="brush: html"><h2 role="alert">Votre formulaire ne peut être soumis à cause de 3 erreurs de validation.</h2> -</pre> +```html +<h2 role="alert">Votre formulaire ne peut être soumis à cause de 3 erreurs de validation.</h2> +``` -<h4 id="Exemple_2_Ajout_dynamique_d'un_élément_avec_le_rôle_alert">Exemple 2 : Ajout dynamique d'un élément avec le rôle <code>alert</code></h4> +#### Exemple 2 : Ajout dynamique d'un élément avec le rôle `alert` -<p>Cet extrait de code crée dynamiquement un élément avec un rôle <code>alert</code> et l’ajoute à la structure du document.</p> +Cet extrait de code crée dynamiquement un élément avec un rôle `alert` et l’ajoute à la structure du document. -<pre class="brush: js">var myAlert = document.createElement("p"); +```js +var myAlert = document.createElement("p"); myAlert.setAttribute("role", "alert"); var myAlertText = document.createTextNode("Vous devez accepter nos conditions d’utilisation pour créer un compte."); myAlert.appendChild(myAlertText); document.body.appendChild(myAlertText); -</pre> +``` -<p><strong>Note :</strong> le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que <em>jQuery</em> :</p> +**Note :** le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que *jQuery* : -<pre class="brush: js">$("<p role='alert'>Vous devez accepter nos conditions d’utilisation pour créer un compte.</p>").appendTo(document.body); -</pre> +```js +$("<p role='alert'>Vous devez accepter nos conditions d’utilisation pour créer un compte.</p>").appendTo(document.body); +``` -<h4 id="Exemple_3_Ajout_d'un_rôle_alert_à_un_élément_existant">Exemple 3 : Ajout d'un rôle <code>alert</code> à un élément existant</h4> +#### Exemple 3 : Ajout d'un rôle `alert` à un élément existant -<p>Parfois, il peut être utile d’ajouter un rôle <code>alert</code> à un élément déjà visible dans la page plutôt que de créer un nouvel élément. Ceci permet au développeur de répéter une information devenue plus pertinente ou urgente pour l’utilisateur. Par exemple, un contrôle de formulaire peut avoir des instructions sur les valeurs attendues. Si une valeur différente est saisie, <code>role="alert"</code> peut être ajouté au texte de l’instruction pour que le lecteur d’écran l’annonce comme une alerte. L'extrait de pseudo-code ci-dessous illustre cette approche :</p> +Parfois, il peut être utile d’ajouter un rôle `alert` à un élément déjà visible dans la page plutôt que de créer un nouvel élément. Ceci permet au développeur de répéter une information devenue plus pertinente ou urgente pour l’utilisateur. Par exemple, un contrôle de formulaire peut avoir des instructions sur les valeurs attendues. Si une valeur différente est saisie, `role="alert"` peut être ajouté au texte de l’instruction pour que le lecteur d’écran l’annonce comme une alerte. L'extrait de pseudo-code ci-dessous illustre cette approche : -<pre class="brush: html"><p id="formInstruction">Vous devez cocher au moins trois options</p> -</pre> +```html +<p id="formInstruction">Vous devez cocher au moins trois options</p> +``` -<pre class="brush: js">// Lorsque l’utilisateur essaye de soumettre le formulaire avec moins de 3 cases cochées : -document.getElementById("formInstruction").setAttribute("role", "alert");</pre> +```js +// Lorsque l’utilisateur essaye de soumettre le formulaire avec moins de 3 cases cochées : +document.getElementById("formInstruction").setAttribute("role", "alert"); +``` -<h4 id="Exemple_4_Rendre_visible_un_élément_avec_le_rôle_alert">Exemple 4 : Rendre visible un élément avec le rôle <code>alert</code></h4> +#### Exemple 4 : Rendre visible un élément avec le rôle `alert` -<p>Si un élément possède déjà <code>role="alert"</code> et qu’il est initialement caché par des règles CSS, le rendre visible déclenchera l’alerte comme si elle venait juste d’être ajoutée à la page. Cela signifie qu’une alerte existante peut être « réutilisée » plusieurs fois.</p> +Si un élément possède déjà `role="alert"` et qu’il est initialement caché par des règles CSS, le rendre visible déclenchera l’alerte comme si elle venait juste d’être ajoutée à la page. Cela signifie qu’une alerte existante peut être « réutilisée » plusieurs fois. -<p><strong>Note :</strong> dans la plupart des cas cette approche n’est pas recommandée, parce qu'il n'est pas idéal de masquer une erreur ou un texte d’alerte qui n’est pas applicable à ce moment précis. Les utilisateurs de technologies d’assistance plus anciennes pourraient toujours percevoir le texte d’alerte même si l’alerte ne s’applique pas à ce moment, faisant croire de façon erronée aux utilisateurs à l’existence d’un problème.</p> +**Note :** dans la plupart des cas cette approche n’est pas recommandée, parce qu'il n'est pas idéal de masquer une erreur ou un texte d’alerte qui n’est pas applicable à ce moment précis. Les utilisateurs de technologies d’assistance plus anciennes pourraient toujours percevoir le texte d’alerte même si l’alerte ne s’applique pas à ce moment, faisant croire de façon erronée aux utilisateurs à l’existence d’un problème. -<pre class="brush: css">.hidden { +```css +.hidden { display:none; } -</pre> +``` -<pre class="brush: html"><p id="expirationWarning" role="alert" class="hidden">Votre session expirera dans 2 minutes</p> -</pre> +```html +<p id="expirationWarning" role="alert" class="hidden">Votre session expirera dans 2 minutes</p> +``` -<pre class="brush: js">// suppression de la classe 'hidden' rend l’élément visible, ce qui entraînera l’annonce de l’alerte par le lecteur d’écran : -document.getElementById("expirationWarning").className = ""; </pre> +```js +// suppression de la classe 'hidden' rend l’élément visible, ce qui entraînera l’annonce de l’alerte par le lecteur d’écran : +document.getElementById("expirationWarning").className = ""; +``` -<h3 id="Notes">Notes </h3> +### Notes -<ul> - <li>L’utilisation du rôle <code>alert</code> sur un élément implique que cet élément a l’attribut <code>aria-live="assertive"</code> ;</li> - <li>Le rôle <code>alert</code> ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle <code>alert</code> ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ;</li> - <li>Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l’utilisateur de rectifier une erreur, ou un bouton <code>OK</code> pour annuler l’alerte – le rôle <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog"><code>alertdialog</code></a> est préférable.</li> -</ul> +- L’utilisation du rôle `alert` sur un élément implique que cet élément a l’attribut `aria-live="assertive"` ; +- Le rôle `alert` ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle `alert` ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ; +- Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l’utilisateur de rectifier une erreur, ou un bouton `OK` pour annuler l’alerte – le rôle [`alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) est préférable. -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +### Attributs ARIA utilisés -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/roles#alert">alert (en)</a></li> -</ul> +- [alert (en)](http://www.w3.org/TR/wai-aria/roles#alert) -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog">Utiliser le rôle <code>alertdialog</code></a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_la_propriété_aria-invalid">Utiliser la propriété <code>aria-invalid</code></a>.</li> -</ul> +- [Utiliser le rôle `alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) ; +- [Utiliser la propriété `aria-invalid`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_la_propriété_aria-invalid). -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li>Guide des bonnes pratiques ARIA - Rôle <code>Alert</code> : <a href="http://www.w3.org/TR/wai-aria-practices/#alert">http://www.w3.org/TR/wai-aria-practices/#alert (en)</a></li> -</ul> +- Guide des bonnes pratiques ARIA - Rôle `Alert` : [http://www.w3.org/TR/wai-aria-practices/#alert (en)](http://www.w3.org/TR/wai-aria-practices/#alert) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md index 70f746dff9..3a9521f0a3 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md @@ -9,74 +9,64 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation du rôle <code><a href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog">alertdialog</a></code> role.</p> +Cette technique présente l’utilisation du rôle [`alertdialog`](http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog) role. -<p>Le rôle <code>alertdialog</code> est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, <code>alertdialog</code> est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’<a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role">utilisation du rôle <code>dialog</code></a> s’appliquent également au rôle <code>alertdialog</code> :</p> +Le rôle `alertdialog` est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, `alertdialog` est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’[utilisation du rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role) s’appliquent également au rôle `alertdialog` : -<ul> - <li>La boîte de dialogue d’alerte doit toujours avoir un nom accessible (attribué à l’aide de <code>aria-labelledby</code> ou de <code>aria-label</code>) et, dans la plupart des cas, le texte d’alerte sera marqué comme étant la description accessible de la boîte de dialogue d’alerte (définie avec de l’attribut <code>aria-describedby</code>).</li> - <li>Contrairement aux alertes classiques, une boîte de dialogue d’alerte doit avoir au moins un contrôle pouvant recevoir le focus et ce dernier doit s’y placer lors de l’affichage de la boîte de dialogue. Généralement les boîtes de dialogues d’alertes ont au moins un bouton de confirmation, de fermeture ou d’annulation qui peut être utilisé pour recevoir le focus. De plus, les boîtes de dialogues d’alerte peuvent avoir d’autres contrôles interactifs tels que des champs de saisie, des onglets ou des cases à cocher. Le contrôle sur lequel placer le focus dépendra de l’objet de la boîte de dialogue.</li> - <li>L’ordre de tabulation dans la boite de dialogue de l’alerte doit boucler.</li> -</ul> +- La boîte de dialogue d’alerte doit toujours avoir un nom accessible (attribué à l’aide de `aria-labelledby` ou de `aria-label`) et, dans la plupart des cas, le texte d’alerte sera marqué comme étant la description accessible de la boîte de dialogue d’alerte (définie avec de l’attribut `aria-describedby`). +- Contrairement aux alertes classiques, une boîte de dialogue d’alerte doit avoir au moins un contrôle pouvant recevoir le focus et ce dernier doit s’y placer lors de l’affichage de la boîte de dialogue. Généralement les boîtes de dialogues d’alertes ont au moins un bouton de confirmation, de fermeture ou d’annulation qui peut être utilisé pour recevoir le focus. De plus, les boîtes de dialogues d’alerte peuvent avoir d’autres contrôles interactifs tels que des champs de saisie, des onglets ou des cases à cocher. Le contrôle sur lequel placer le focus dépendra de l’objet de la boîte de dialogue. +- L’ordre de tabulation dans la boite de dialogue de l’alerte doit boucler. -<p>La différence avec les boîtes de dialogues classiques réside dans le fait que le rôle <code>alertdialog</code> devrait uniquement être utilisé lorsque des alertes, des erreurs ou des avertissements ont lieu. En d’autres termes, lorsque les informations et les contrôles d’une boîte de dialogue nécessitent l’attention immédiate de l’utilisateur il est préférable d’utiliser le rôle <code>alertdialog</code> plutôt que <code>dialog.</code> Il revient au développeur de faire la distinction entre les deux.</p> +La différence avec les boîtes de dialogues classiques réside dans le fait que le rôle `alertdialog` devrait uniquement être utilisé lorsque des alertes, des erreurs ou des avertissements ont lieu. En d’autres termes, lorsque les informations et les contrôles d’une boîte de dialogue nécessitent l’attention immédiate de l’utilisateur il est préférable d’utiliser le rôle `alertdialog` plutôt que `dialog.` Il revient au développeur de faire la distinction entre les deux. -<p>Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujours être modales.</p> +Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujours être modales. -<div class="note"> - <p><strong>Note :</strong> ce rôle ne devrait être utilisé que pour des messages d’alertes associés à des contrôles interactifs. Si une boîte de dialogue d’alerte ne comporte que du contenu statique et qu’elle ne possède absolument aucun contrôle interactif, <code>alertdialog</code> n’est probablement pas le rôle le plus judicieux à utiliser. Le rôle <code>alert</code> est plus adapté pour ce cas (comme décrit dans l’article sur la technique d’<a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert">utilisation du rôle <code>alert</code></a>).</p> -</div> +> **Note :** ce rôle ne devrait être utilisé que pour des messages d’alertes associés à des contrôles interactifs. Si une boîte de dialogue d’alerte ne comporte que du contenu statique et qu’elle ne possède absolument aucun contrôle interactif, `alertdialog` n’est probablement pas le rôle le plus judicieux à utiliser. Le rôle `alert` est plus adapté pour ce cas (comme décrit dans l’article sur la technique d’[utilisation du rôle `alert`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alert)). -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Lorsque le rôle <code>alertdialog</code> est utilisé, l’agent utilisateur devrait suivre les étapes suivantes :</p> +Lorsque le rôle `alertdialog` est utilisé, l’agent utilisateur devrait suivre les étapes suivantes : -<ul> - <li>Présenter l’élément comme une boîte de dialogue à l’API d’accessibilité du système d’exploitation.</li> - <li>Déclencher un évènement d’alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> -</ul> +- Présenter l’élément comme une boîte de dialogue à l’API d’accessibilité du système d’exploitation. +- Déclencher un évènement d’alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -<p>Lorsque la boîte de dialogue de l’alerte apparaît, les lecteurs d’écran devraient annoncer l’alerte.</p> +Lorsque la boîte de dialogue de l’alerte apparaît, les lecteurs d’écran devraient annoncer l’alerte. -<p>Lorsque la boîte de dialogue est correctement labélisée et que le focus se place sur un contrôle qu’elle contient, les lecteurs d’écran devraient annoncer le rôle accessible de la boîte de dialogue, son nom et éventuellement sa description, avant d’annoncer l’élément qui a reçu le focus.</p> +Lorsque la boîte de dialogue est correctement labélisée et que le focus se place sur un contrôle qu’elle contient, les lecteurs d’écran devraient annoncer le rôle accessible de la boîte de dialogue, son nom et éventuellement sa description, avant d’annoncer l’élément qui a reçu le focus. -<div class="note"> - <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> -</div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1_Une_boîte_de_dialogue_d’alerte">Exemple 1 : Une boîte de dialogue d’alerte</h4> +#### Exemple 1 : Une boîte de dialogue d’alerte -<p>L’extrait de code ci-dessous présente la façon de baliser une boîte de dialogue d’alerte qui ne contient qu’un message et un bouton <code>OK</code>.</p> +L’extrait de code ci-dessous présente la façon de baliser une boîte de dialogue d’alerte qui ne contient qu’un message et un bouton `OK`. -<pre class="brush: html"><div role="alertdialog" aria-labelledby="dialog1Titre" aria-describedby="dialog1Desc"> - <div role="document" tabindex="0"> - <h2 id="dialog1Titre">Votre session est sur le point d’expirer</h2> - <p id="dialog1Desc">Pour prolonger votre session, cliquez sur le bouton OK</p> - <button>OK</button> - </div> -</div></pre> +```html +<div role="alertdialog" aria-labelledby="dialog1Titre" aria-describedby="dialog1Desc"> + <div role="document" tabindex="0"> + <h2 id="dialog1Titre">Votre session est sur le point d’expirer</h2> + <p id="dialog1Desc">Pour prolonger votre session, cliquez sur le bouton OK</p> + <button>OK</button> + </div> +</div> +``` -<h4 id="Exemples_concrets">Exemples concrets :</h4> +#### Exemples concrets : -<p>À définir</p> +À définir -<h3 id="Notes">Notes</h3> +### Notes -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +### Attributs ARIA utilisés -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/roles#dialog">alertdialog</a> ;</li> - <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby</a> ;</li> - <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a>.</li> -</ul> +- [alertdialog](http://www.w3.org/TR/wai-aria/roles#dialog) ; +- [aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) ; +- [aria-describedby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby). -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog">Utiliser le rôle <code>dialog</code></a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert">Utiliser le rôle <code>alert</code></a>.</li> -</ul> +- [Utiliser le rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog) ; +- [Utiliser le rôle `alert`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.md index 5a2a646678..20d9ded8d0 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.md @@ -8,78 +8,70 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby --- -<p>L'attribut <a href="https://www.w3.org/TR/wai-aria/#aria-describedby"><code>aria-describedby</code></a> est utilisé pour indiquer les identifiants des éléments qui décrivent l'objet. Il est utilisé pour établir une relation entre des composants ou des groupes et un texte les décrivant. Il est similaire à <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a> où un label décrit la nature d'un objet, tandis qu'une description fournit plus d'informations pouvant être utiles à l'utilisateur.</p> +L'attribut [`aria-describedby`](https://www.w3.org/TR/wai-aria/#aria-describedby) est utilisé pour indiquer les identifiants des éléments qui décrivent l'objet. Il est utilisé pour établir une relation entre des composants ou des groupes et un texte les décrivant. Il est similaire à [aria-labelledby](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) où un label décrit la nature d'un objet, tandis qu'une description fournit plus d'informations pouvant être utiles à l'utilisateur. -<p>L'attribut <code>aria-describedby</code> n'est pas uniquement utilisé pour des éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants graphiques, des groupes d'éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section <a href="#examples">Exemples</a> ci-dessous fournit plus d'informations sur l'utilisation de cet attribut dans ces cas précis.</p> +L'attribut `aria-describedby` n'est pas uniquement utilisé pour des éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants graphiques, des groupes d'éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section [Exemples](#examples) ci-dessous fournit plus d'informations sur l'utilisation de cet attribut dans ces cas précis. -<p>Cet attribut peut être utilisé avec n'importe quel élément de formulaire HTML ; il n'est pas limité aux éléments auxquels un rôle ARIA a été assigné.</p> +Cet attribut peut être utilisé avec n'importe quel élément de formulaire HTML ; il n'est pas limité aux éléments auxquels un rôle ARIA a été assigné. -<h2 id="value">Valeur</h2> +## Valeur -<p>La valeur de cet attribut est une liste d'identifiants d'éléments, séparés par des espaces</p> +La valeur de cet attribut est une liste d'identifiants d'éléments, séparés par des espaces -<h2 id="possible_effects_on_user_agents_and_assistive_technology">Effets possibles sur les agents utilisateurs et les technologies d'assistance</h2> +## Effets possibles sur les agents utilisateurs et les technologies d'assistance -<div class="note"> - <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative.</p> -</div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative. -<h2 id="examples">Exemples</h2> +## Exemples -<h3 id="example_1_application_landmark_descriptions">Exemple 1 : Descriptions des points de repère (landmarks) d'une application</h3> +### Exemple 1 : Descriptions des points de repère (landmarks) d'une application -<p>Dans l'exemple ci-dessous, un paragraphe d'introduction décrit une application de calendrier. <code>aria-describedby</code> est utilisé pour associer le paragraphe avec le conteneur de l'application.</p> +Dans l'exemple ci-dessous, un paragraphe d'introduction décrit une application de calendrier. `aria-describedby` est utilisé pour associer le paragraphe avec le conteneur de l'application. -<pre class="brush: html"> -<div role="applicaton" aria-labelledby="calendar" aria-describedby="info"> - <h1 id="calendar">Calendrier<h1> - <p id="info"> +```html +<div role="applicaton" aria-labelledby="calendar" aria-describedby="info"> + <h1 id="calendar">Calendrier<h1> + <p id="info"> Ce calendrier affiche les prévisions de match du Racing Métro. - </p> - <div role="grid"> + </p> + <div role="grid"> … - </div> -</div> -</pre> + </div> +</div> +``` -<h3 id="example_2_a_close_button">Exemple 2 : Un bouton de fermeture</h3> +### Exemple 2 : Un bouton de fermeture -<p>Dans l'exemple ci-dessous, un lien qui fonctionne comme le bouton <code>Fermer</code> d'une boîte de dialogue est décrit ailleurs dans le document. L'attribut <code>aria-describedby</code> est utilisé pour associer la description au lien.</p> +Dans l'exemple ci-dessous, un lien qui fonctionne comme le bouton `Fermer` d'une boîte de dialogue est décrit ailleurs dans le document. L'attribut `aria-describedby` est utilisé pour associer la description au lien. -<pre class="brush: html"> -<button aria-label="Fermer" aria-describedby="descriptionClose" - onclick="myDialog.close()">X</button> +```html +<button aria-label="Fermer" aria-describedby="descriptionClose" + onclick="myDialog.close()">X</button> … -<div id="descriptionClose"> +<div id="descriptionClose"> La fermeture de cette fenêtre entraînera la perte des informations saisies et vous renverra vers la page principale. -</div> -</pre> +</div> +``` -<h2 id="notes">Notes</h2> +## Notes -<ul> - <li>L'attribut <code>aria-describedby</code> n'est pas destiné à référencer les descriptions d'une ressource externe. Comme il s'agit d'un identifiant, il doit référencer un élément du DOM du document courant.</li> -</ul> +- L'attribut `aria-describedby` n'est pas destiné à référencer les descriptions d'une ressource externe. Comme il s'agit d'un identifiant, il doit référencer un élément du DOM du document courant. -<h2 id="used_by_aria_roles">Utilisé par les rôles ARIA</h2> +## Utilisé par les rôles ARIA -<p>Tous les éléments de balisage de base.</p> +Tous les éléments de balisage de base. -<h2 id="related_aria_techniques">Techniques ARIA connexes</h2> +## Techniques ARIA connexes -<ul> - <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Utiliser l'attribut <code>aria-labelledby</code></a></li> -</ul> +- [Utiliser l'attribut `aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) -<h2 id="compatibility">Compatibilité</h2> +## Compatibilité -<p>À faire : ajouter les informations de prise en charge pour les combinaisons les plus courantes d'agents utilisateurs et de produits de technologies d'assistance.</p> +À faire : ajouter les informations de prise en charge pour les combinaisons les plus courantes d'agents utilisateurs et de produits de technologies d'assistance. -<h2 id="additional_resources">Autres ressources</h2> +## Autres ressources -<ul> - <li><a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">Spécification WAI-ARIA de <code>aria-describedby</code></a></li> -</ul> +- [Spécification WAI-ARIA de `aria-describedby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md index c75af66bb9..ff0906e7fa 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md @@ -8,59 +8,57 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation de l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid"><code>aria-invalid</code></a>.</p> +Cette technique présente l’utilisation de l’attribut [`aria-invalid`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid). -<p>L’attribut <code>aria-invalid</code> est utilisé pour indiquer que la valeur saisie dans un champ de saisie n’est pas conforme au format attendu par l’application. Cela comprend les formats tels que les adresses électroniques ou les numéros de téléphone. <code>aria-invalid</code> peut également être utilisé pour indiquer qu’un champ obligatoire n’a pas été rempli. L’attribut devrait être programmatiquement défini comme étant le résultat du processus de validation.</p> +L’attribut `aria-invalid` est utilisé pour indiquer que la valeur saisie dans un champ de saisie n’est pas conforme au format attendu par l’application. Cela comprend les formats tels que les adresses électroniques ou les numéros de téléphone. `aria-invalid` peut également être utilisé pour indiquer qu’un champ obligatoire n’a pas été rempli. L’attribut devrait être programmatiquement défini comme étant le résultat du processus de validation. -<p>Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML typique ; il n’est pas limité aux éléments auxquels a été assigné un <code>rôle</code> ARIA.</p> +Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML typique ; il n’est pas limité aux éléments auxquels a été assigné un `rôle` ARIA. -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<h4 id="Vocabulaire">Vocabulaire</h4> +#### Vocabulaire -<dl> - <dt><code>false</code> (défaut)</dt> - <dd>Aucune erreur détectée</dd> - <dt><code>grammar</code></dt> - <dd>Une faute de grammaire a été détectée.</dd> - <dt><code>spelling</code></dt> - <dd>Une faute d’orthographe a été détectée.</dd> - <dt><code>true</code></dt> - <dd>La valeur n’a pas passé la validation.</dd> -</dl> +- `false` (défaut) + - : Aucune erreur détectée +- `grammar` + - : Une faute de grammaire a été détectée. +- `spelling` + - : Une faute d’orthographe a été détectée. +- `true` + - : La valeur n’a pas passé la validation. -<p>Toute valeur absente de ce vocabulaire devrait être traitée comme <code>true</code>.</p> +Toute valeur absente de ce vocabulaire devrait être traitée comme `true`. -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Les agents utilisateurs devraient informer l’utilisateur lorsqu’un champ n’est pas valide. Les développeurs d’applications devraient fournir des suggestions pour la correction du problème, lorsque c’est possible. Les auteurs devraient empêcher la soumission de formulaires contenant des erreurs.</p> +Les agents utilisateurs devraient informer l’utilisateur lorsqu’un champ n’est pas valide. Les développeurs d’applications devraient fournir des suggestions pour la correction du problème, lorsque c’est possible. Les auteurs devraient empêcher la soumission de formulaires contenant des erreurs. -<div class="note"> - <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournit ci-dessus est l’une de ces opinions et n’est pas normative.</p> -</div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournit ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1_validation_d’un_formulaire_de_base">Exemple 1 : validation d’un formulaire de base</h4> +#### Exemple 1 : validation d’un formulaire de base -<p>L’extrait de code suivant décrit une version simplifiée de deux champs de formulaire avec une fonction de validation de la saisie attachée à la perte de focus. Notez que la valeur par défaut de <code>aria-required</code> étant <code>false</code>, il n’est pas strictement nécessaire d’ajouter à entrer.</p> +L’extrait de code suivant décrit une version simplifiée de deux champs de formulaire avec une fonction de validation de la saisie attachée à la perte de focus. Notez que la valeur par défaut de `aria-required` étant `false`, il n’est pas strictement nécessaire d’ajouter à entrer. -<pre class="brush: html"><input name="nom" id="nom" aria-required="true" aria-invalid="false" - onblur="checkValidity('nom', ' ', 'Le nom saisi n’est pas valide (vous devez saisir un nom et un prénom)');"/> -<br /> -<input name="courriel" id="courriel" aria-required="true" aria-invalid="false" - onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie n’est pas valide');"/> -</pre> +```html +<input name="nom" id="nom" aria-required="true" aria-invalid="false" + onblur="checkValidity('nom', ' ', 'Le nom saisi n’est pas valide (vous devez saisir un nom et un prénom)');"/> +<br /> +<input name="courriel" id="courriel" aria-required="true" aria-invalid="false" + onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie n’est pas valide');"/> +``` -<p>Remarquez qu’il n’est pas nécessaire de valider les champs de saisie immédiatement à la perte de focus ; l’application peut attendre jusqu’à la soumission du formulaire (bien que ce ne soit pas particulièrement recommandé).</p> +Remarquez qu’il n’est pas nécessaire de valider les champs de saisie immédiatement à la perte de focus ; l’application peut attendre jusqu’à la soumission du formulaire (bien que ce ne soit pas particulièrement recommandé). -<p>L’extrait de code ci-dessous décrit une fonction de validation très simple qui ne vérifie que la présence d’un caractère particulier (en réalité, la validation sera un peu plus sophistiquée) :</p> +L’extrait de code ci-dessous décrit une fonction de validation très simple qui ne vérifie que la présence d’un caractère particulier (en réalité, la validation sera un peu plus sophistiquée) : -<pre class="brush: js">function checkValidity(aID, aSearchTerm, aMsg){ +```js +function checkValidity(aID, aSearchTerm, aMsg){ var elem = document.getElementById(aID); - var invalid = (elem.value.indexOf(aSearchTerm) < 0); + var invalid = (elem.value.indexOf(aSearchTerm) < 0); if (invalid) { elem.setAttribute("aria-invalid", "true"); updateAlert(aMsg); @@ -69,11 +67,12 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-inva updateAlert(); } } -</pre> +``` -<p>L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur :</p> +L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur : -<pre class="brush: js">function updateAlert(msg) { +```js +function updateAlert(msg) { var oldAlert = document.getElementById("alert"); if (oldAlert) { document.body.removeChild(oldAlert); @@ -88,31 +87,25 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-inva document.body.appendChild(newAlert); } } -</pre> +``` -<p>Remarquez que le <code>rôle</code> ARIA de l’alerte est définit comme étant <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert"><code>"alert"</code></a>.</p> +Remarquez que le `rôle` ARIA de l’alerte est définit comme étant [`"alert"`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert). -<h3 id="Notes">Notes</h3> +### Notes -<ul> - <li>Lorsque <code>aria-invalid</code> est utilisé en conjonction avec l’attribut <code>aria-required</code>, <code>aria-invalid</code> <strong>ne devrait pas</strong> être défini à <code>true</code> avant la soumission du formulaire – uniquement en réponse à la validation.</li> - <li>Les développements futurs pourraient ajouter des termes au vocabulaire utilisé pour cet attribut. Toute valeur absente du vocabulaire actuel devrait être traitée comme <code>true</code>.</li> -</ul> +- Lorsque `aria-invalid` est utilisé en conjonction avec l’attribut `aria-required`, `aria-invalid` **ne devrait pas** être défini à `true` avant la soumission du formulaire – uniquement en réponse à la validation. +- Les développements futurs pourraient ajouter des termes au vocabulaire utilisé pour cet attribut. Toute valeur absente du vocabulaire actuel devrait être traitée comme `true`. -<h3 id="Utilisé_dans_les_rôles_ARIA">Utilisé dans les rôles ARIA</h3> +### Utilisé dans les rôles ARIA -<p>Tous les éléments de balisage de base.</p> +Tous les éléments de balisage de base. -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required">Utiliser l’attribut <code>aria-required</code></a></li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert">Utiliser le rôle <code>alert</code></a></li> -</ul> +- [Utiliser l’attribut `aria-required`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required) +- [Utiliser le rôle `alert`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert) -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid">Spécification WAI-ARIA de la propriété <code>aria-invalid</code></a></li> - <li><a href="http://www.w3.org/TR/wai-aria-practices/#ariaform">WAI Authoring Practices for forms</a> (Règles WAI de création de formulaires)</li> -</ul> +- [Spécification WAI-ARIA de la propriété `aria-invalid`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-invalid) +- [WAI Authoring Practices for forms](http://www.w3.org/TR/wai-aria-practices/#ariaform) (Règles WAI de création de formulaires) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md index 54c971151f..2dd44fb491 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md @@ -9,63 +9,58 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label --- -<p>L’attribut <code>aria-label</code> est utilisé pour définir une légende non-visible associée à un élément HTML dont le sens est transmis uniquement par le visuel. Par exemple, une croix pour fermer une fenêtre modale.</p> +L’attribut `aria-label` est utilisé pour définir une légende non-visible associée à un élément HTML dont le sens est transmis uniquement par le visuel. Par exemple, une croix pour fermer une fenêtre modale. -<h2 id="Contexte">Contexte</h2> +## Contexte -<p>Pour la plupart des usagers, le contexte et l'apparence d'un élément suffisent à déterminer son rôle. Par exemple, une croix pour fermer une fenêtre modale ou une icône de hamburger pour ouvrir un menu.</p> +Pour la plupart des usagers, le contexte et l'apparence d'un élément suffisent à déterminer son rôle. Par exemple, une croix pour fermer une fenêtre modale ou une icône de hamburger pour ouvrir un menu. -<p>En revanche, certains usagers tels que les aveugles et malvoyants ne peuvent pas faire de même. Cet attribut permet aux développeurs d'indiquer une alternative textuelle à ces contrôles visuels, qui sera lue par les technologies d'assistance. En revanche, le contenu de l'attribut <code>aria-label</code> ne sera pas visible pour les autres usagers.</p> +En revanche, certains usagers tels que les aveugles et malvoyants ne peuvent pas faire de même. Cet attribut permet aux développeurs d'indiquer une alternative textuelle à ces contrôles visuels, qui sera lue par les technologies d'assistance. En revanche, le contenu de l'attribut `aria-label` ne sera pas visible pour les autres usagers. -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<div class="note"> - <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> -</div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<p>Les lecteurs d'écran lisent le contenu textuel de cet attribut.</p> +Les lecteurs d'écran lisent le contenu textuel de cet attribut. -<h2 id="Usage">Usage</h2> +## Usage -<p>L’attribut <code>aria-label</code> ne doit être utilisé que lorsque le texte d’un label <em>n’est pas</em> visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby">aria-labelledby</a>.</p> +L’attribut `aria-label` ne doit être utilisé que lorsque le texte d’un label _n’est pas_ visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut [aria-labelledby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby). -<p>Cet attribut peut être utilisé avec n’importe quel élément HTML. Néanmoins, il n'est pas nécessaire de l'utiliser si l'élément possède déjà un mécanisme pour légender son contenu. Par exemple l'élément <code><label></code> pour les éléments de formulaire, ou l'attribut <code>alt</code> pour les images.</p> +Cet attribut peut être utilisé avec n’importe quel élément HTML. Néanmoins, il n'est pas nécessaire de l'utiliser si l'élément possède déjà un mécanisme pour légender son contenu. Par exemple l'élément `<label>` pour les éléments de formulaire, ou l'attribut `alt` pour les images. -<h3 id="Valeur">Valeur</h3> +### Valeur -<p>Une légende sous forme de chaîne de caractère.</p> +Une légende sous forme de chaîne de caractère. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Un_bouton_sans_contenu_textuel_explicite">Un bouton sans contenu textuel explicite</h3> +### Un bouton sans contenu textuel explicite -<p>Dans l’exemple ci-dessous, un bouton est stylé pour ressembler à un bouton « <em>Fermer</em> » classique, avec un <code>X</code> en son centre. Comme il n’existe aucune information indiquant que la fonction du bouton est de fermer la boîte de dialogue, l’attribut <code>aria-label</code> est utilisé pour fournir un label aux technologies d’assistance.</p> +Dans l’exemple ci-dessous, un bouton est stylé pour ressembler à un bouton « *Fermer* » classique, avec un `X` en son centre. Comme il n’existe aucune information indiquant que la fonction du bouton est de fermer la boîte de dialogue, l’attribut `aria-label` est utilisé pour fournir un label aux technologies d’assistance. -<pre class="brush: html"> <button aria-label="Fermer" onclick="myDialog.close()">X</button> -</pre> +```html + <button aria-label="Fermer" onclick="myDialog.close()">X</button> +``` -<h3 id="Un_champ_de_saisie_utilisant_contentEditable">Un champ de saisie utilisant contentEditable</h3> +### Un champ de saisie utilisant contentEditable -<p>Pour proposer une expérience d'édition plus personnalisée, on pourrait utiliser une <code>div</code> avec l'attribut <code>contenteditable</code> à la place d'un élément de formulaire natif comme <code><textarea></code>. Cette situation ne permettrait pas d'associer un <code><label></code> à ce champ de saisie. Ainsi on pourrait utiliser <code>aria-label</code> à la place.</p> +Pour proposer une expérience d'édition plus personnalisée, on pourrait utiliser une `div` avec l'attribut `contenteditable` à la place d'un élément de formulaire natif comme `<textarea>`. Cette situation ne permettrait pas d'associer un `<label>` à ce champ de saisie. Ainsi on pourrait utiliser `aria-label` à la place. -<h2 id="Pour_aller_plus_loin">Pour aller plus loin</h2> +## Pour aller plus loin -<h3 id="Notes">Notes</h3> +### Notes -<p>L’affectation d’<em>API accessibilité</em> la plus courante pour un label est la propriété de <em>nom accessible</em>.</p> +L’affectation d’_API accessibilité_ la plus courante pour un label est la propriété de _nom accessible_. -<h3 id="Utilisé_par_les_rôles_ARIA">Utilisé par les rôles ARIA</h3> +### Utilisé par les rôles ARIA -<p>Tous les éléments de balisage de base.</p> +Tous les éléments de balisage de base. -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby">Utiliser l’attribut <code>aria-labelledby</code></a>.</li> -</ul> +- [Utiliser l’attribut `aria-labelledby`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby). -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li><a href="https://www.w3.org/TR/wai-aria/#aria-label">Spécification WAI-ARIA pour aria-label</a>.</li> -</ul> +- [Spécification WAI-ARIA pour aria-label](https://www.w3.org/TR/wai-aria/#aria-label). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md index 2602081deb..a7a35af681 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md @@ -8,141 +8,144 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation de l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>.</p> +Cette technique présente l’utilisation de l’attribut [`aria-labelledby`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby). -<p>L’attribut <code>aria-labelledby</code> est utilisé pour indiquer les ID des éléments qui labellisent l’objet. Il est utilisé pour établir une relation entre les composants, ou les groupes, et leurs labels. Les utilisateurs de technologies d’assistance telles que les lecteurs d’écran, naviguent généralement dans un document en tabulant entre les zones de l’écran. Si un label n’est pas associé à un élément de saisie, un composant ou un groupe, il ne sera pas lu par le lecteur d’écran.</p> +L’attribut `aria-labelledby` est utilisé pour indiquer les ID des éléments qui labellisent l’objet. Il est utilisé pour établir une relation entre les composants, ou les groupes, et leurs labels. Les utilisateurs de technologies d’assistance telles que les lecteurs d’écran, naviguent généralement dans un document en tabulant entre les zones de l’écran. Si un label n’est pas associé à un élément de saisie, un composant ou un groupe, il ne sera pas lu par le lecteur d’écran. -<p><code>aria-labelledby</code> est très similaire à l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">aria-describedby</a> : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur.</p> +`aria-labelledby` est très similaire à l’attribut [aria-describedby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby) : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur. -<p>L’attribut <code>aria-labelledby</code> n’est pas uniquement utilisé avec les éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis.</p> +L’attribut `aria-labelledby` n’est pas uniquement utilisé avec les éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis. -<p>L’attribut <code>aria-labelledby</code> peut être utilisé en conjonction avec l’élément {{ HTMLElement("label") }} (à l’aide de l’attribut <code>for</code>) pour améliorer la compatibilité avec les agents utilisateurs qui ne prennent pas encore en charge ARIA.</p> +L’attribut `aria-labelledby` peut être utilisé en conjonction avec l’élément {{ HTMLElement("label") }} (à l’aide de l’attribut `for`) pour améliorer la compatibilité avec les agents utilisateurs qui ne prennent pas encore en charge ARIA. -<p>Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné.</p> +Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné. -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<p>Une liste d’ID d’éléments séparés par des espaces</p> +Une liste d’ID d’éléments séparés par des espaces -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Lorsque les deux attributs <code>aria-labelledby</code> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_aria-label_attribute"><code>aria-label</code></a> sont utilisés, les agents utilisateurs donnent la priorité à <code>aria-labelledby</code> lors du calcul de la propriété de nom accessible.</p> +Lorsque les deux attributs `aria-labelledby` et [`aria-label`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_aria-label_attribute) sont utilisés, les agents utilisateurs donnent la priorité à `aria-labelledby` lors du calcul de la propriété de nom accessible. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1_Labels_multiples">Exemple 1 : Labels multiples</h4> +#### Exemple 1 : Labels multiples -<p>Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois avec son propre label individuel et avec le label pour le groupe :</p> +Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois avec son propre label individuel et avec le label pour le groupe : -<pre class="brush: html"><div id="facturation">Facturation</div> +```html +<div id="facturation">Facturation</div> -<div> - <div id="nom">Nom</div> +<div> + <div id="nom">Nom</div> - <input type="text" aria-labelledby="nom facturation"/> -</div> + <input type="text" aria-labelledby="nom facturation"/> +</div> -<div> - <div id="adresse">Adresse</div> +<div> + <div id="adresse">Adresse</div> - <input type="text" aria-labelledby="adresse facturation"/> -</div> -</pre> + <input type="text" aria-labelledby="adresse facturation"/> +</div> +``` -<h4 id="Exemple_2_Association_de_titres_et_de_zones">Exemple 2 : Association de titres et de zones</h4> +#### Exemple 2 : Association de titres et de zones -<p>Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec les contenus dont ils sont les intitulés. Notez que la zone référencée est celle qui <em>contient</em> l’en-tête.</p> +Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec les contenus dont ils sont les intitulés. Notez que la zone référencée est celle qui _contient_ l’en-tête. -<pre class="brush: html"><div role="main" aria-labelledby="foo"> - <h1 id="foo">Le feu devenu incontrôlable gagne les abords d’Aubagne</h1> +```html +<div role="main" aria-labelledby="foo"> + <h1 id="foo">Le feu devenu incontrôlable gagne les abords d’Aubagne</h1> Un fort mistral a propagé le feu de forêt qui s’est déclaré ce lundi soir suite aux fortes températures de ces derniers jours… -</div> -</pre> +</div> +``` -<h4 id="Exemple_3_Groupes_de_boutons_radio">Exemple 3 : Groupes de boutons radio</h4> +#### Exemple 3 : Groupes de boutons radio -<p>Dans l’exemple ci-dessous, le conteneur d’un <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup">radiogroup</a> est associé avec son label à l’aide de l’attribut <code>aria-labelledby</code> :</p> +Dans l’exemple ci-dessous, le conteneur d’un [radiogroup](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : -<pre class="brush: html"><div id="radio_label">My radio label</div> +```html +<div id="radio_label">My radio label</div> -<ul role="radiogroup" aria-labelledby="radio_label"> - <li role="radio">Élément №1</li> - <li role="radio">Élément №2</li> - <li role="radio">Élément №3</li> -</ul> -</pre> +<ul role="radiogroup" aria-labelledby="radio_label"> + <li role="radio">Élément №1</li> + <li role="radio">Élément №2</li> + <li role="radio">Élément №3</li> +</ul> +``` -<h4 id="Exemple_4_Titre_de_boite_de_dialogue">Exemple 4 : Titre de boite de dialogue</h4> +#### Exemple 4 : Titre de boite de dialogue -<p>Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite de dialogue y est relié par l’attribut <code>aria-labelledby</code> :</p> +Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite de dialogue y est relié par l’attribut `aria-labelledby` : -<pre class="brush: html"><div role="dialog" aria-labelledby="titreDialogue"> - <h2 id="titreDialogue">Choisir un fichier</h2> +```html +<div role="dialog" aria-labelledby="titreDialogue"> + <h2 id="titreDialogue">Choisir un fichier</h2> … Contenus de la boîte de dialogue -</div> -</pre> +</div> +``` -<h4 id="Exemple_5_Définition_intégrée">Exemple 5 : Définition intégrée</h4> +#### Exemple 5 : Définition intégrée -<p>Dans l’exemple ci-dessous, la définition d’un terme qui est décrit dans le flux naturel de la narration, est associée au terme lui-même à l’aide de l’attribut <strong>aria-labelledby</strong>:</p> +Dans l’exemple ci-dessous, la définition d’un terme qui est décrit dans le flux naturel de la narration, est associée au terme lui-même à l’aide de l’attribut **aria-labelledby**: -<pre class="brush: html"><p>Le docteur expliqua que c’était un <dfn id="placebo">placebo</dfn>, <span role="definition" aria-labelledby="placebo"> ou -une préparation inerte prescrite plus pour le soulagement mental du patient que ses effets possible sur une pathologie.</span> -</p> -</pre> +```html +<p>Le docteur expliqua que c’était un <dfn id="placebo">placebo</dfn>, <span role="definition" aria-labelledby="placebo"> ou +une préparation inerte prescrite plus pour le soulagement mental du patient que ses effets possible sur une pathologie.</span> +</p> +``` -<h4 id="Exemple_6_Listes_de_définitions">Exemple 6 : Listes de définitions</h4> +#### Exemple 6 : Listes de définitions -<p>Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut <code>aria-labelledby</code> :</p> +Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut `aria-labelledby` : -<pre class="brush: html"><dl> - <dt id="anatheme">anathème</dt> - <dd role="definition" aria-labelledby="anatheme">une interdiction ou une condamnation prononcée par une autorité ecclésiastique - et accompagnée de l’excommunication</dd> - <dd role="definition" aria-labelledby="anatheme">une dénonciation vigoureuse&nbsp;: condamnation</dd> +```html +<dl> + <dt id="anatheme">anathème</dt> + <dd role="definition" aria-labelledby="anatheme">une interdiction ou une condamnation prononcée par une autorité ecclésiastique + et accompagnée de l’excommunication</dd> + <dd role="definition" aria-labelledby="anatheme">une dénonciation vigoureuse : condamnation</dd> - <dt id="homelie">homélie</dt> - <dd role="definition" aria-labelledby="homelie">généralement un sermon court</dd> - <dd role="definition" aria-labelledby="homelie">une lecture ou un discours sur un thème moral</dd> + <dt id="homelie">homélie</dt> + <dd role="definition" aria-labelledby="homelie">généralement un sermon court</dd> + <dd role="definition" aria-labelledby="homelie">une lecture ou un discours sur un thème moral</dd> -</dl> -</pre> +</dl> +``` -<h4 id="Exemple_7_Menus">Exemple 7 : Menus</h4> +#### Exemple 7 : Menus -<p>Dans l’exemple ci-dessous, un <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup">menu contextuel</a> est associé avec son label à l’aide de l’attribut <code>aria-labelledby</code> :</p> +Dans l’exemple ci-dessous, un [menu contextuel](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : -<pre class="brush: html"><div role="menubar"> - <div role="menuitem" aria-haspopup="true" id="fichierMenu">Fichier</div> - <div role="menu" aria-labelledby="fichierMenu"> - <div role="menuitem">Ouvrir</div> - <div role="menuitem">Enregistrer</div> - <div role="menuitem">Enregistrer sous…</div> +```html +<div role="menubar"> + <div role="menuitem" aria-haspopup="true" id="fichierMenu">Fichier</div> + <div role="menu" aria-labelledby="fichierMenu"> + <div role="menuitem">Ouvrir</div> + <div role="menuitem">Enregistrer</div> + <div role="menuitem">Enregistrer sous…</div> … - </div> + </div> … -</div> -</pre> +</div> +``` -<h3 id="Notes">Notes</h3> +### Notes -<p>L’affectation d’<em>API accessibilité</em> la plus courante pour un label est la propriété de <em>nom accessible</em>.</p> +L’affectation d’_API accessibilité_ la plus courante pour un label est la propriété de _nom accessible_. -<h3 id="Utilisé_par_les_rôles_ARIA">Utilisé par les rôles ARIA</h3> +### Utilisé par les rôles ARIA -<p>Tous les éléments de balisage de base.</p> +Tous les éléments de balisage de base. -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label">Utiliser l’attribut <code>aria-label</code></a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby">Utiliser l’attribut <code>aria-describedby</code></a>.</li> -</ul> +- [Utiliser l’attribut `aria-label`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label) ; +- [Utiliser l’attribut `aria-describedby`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby). -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">Spécification WAI-ARIA pour aria-labelledby</a>.</li> -</ul> +- [Spécification WAI-ARIA pour aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md index e5ef3e789c..b69d64990b 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md @@ -8,55 +8,50 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation de l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation">aria-orientation</a>.</p> +Cette technique présente l’utilisation de l’attribut [aria-orientation](http://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation). -<p>L’attribut <code>aria-orientation</code> est utilisé pour indiquer si un élément est orienté verticalement ou horizontalement.</p> +L’attribut `aria-orientation` est utilisé pour indiquer si un élément est orienté verticalement ou horizontalement. -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<p>Vocabulaire</p> +Vocabulaire -<dl> - <dt>vertical</dt> - <dd>L’élément est orienté verticalement.</dd> - <dt>horizontal (défaut)</dt> - <dd>L’élément est orienté horizontalement.</dd> -</dl> +- vertical + - : L’élément est orienté verticalement. +- horizontal (défaut) + - : L’élément est orienté horizontalement. -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1">Exemple 1 :</h4> +#### Exemple 1 : -<p>L’extrait de code ci-dessous présente un curseur simple orienté verticalement.</p> +L’extrait de code ci-dessous présente un curseur simple orienté verticalement. -<pre class="brush: html"><a href="#" id="handle_zoomSlider" +```html +<a href="#" id="handle_zoomSlider" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="17" - aria-valuenow="14" > - <span>11</span> -</a> -</pre> + aria-valuenow="14" > + <span>11</span> +</a> +``` -<h3 id="Notes">Notes</h3> +### Notes -<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> +### Utilisé avec les rôles ARIA -<ul> - <li>scrollbar ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role">slider</a> ;</li> - <li>separator.</li> -</ul> +- scrollbar ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role) ; +- separator. -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation">Spécification WAI-ARIA pour l’attribut <code>aria-orientation</code></a>.</li> -</ul> +- [Spécification WAI-ARIA pour l’attribut `aria-orientation`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-orientation). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md index 8cc57e6365..f29b625d53 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md @@ -7,25 +7,21 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-relevant --- -<p>L’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">aria-relevant</a> est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a>, ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut <code>aria-live</code> n’était pas activé.</p> +L’attribut [aria-relevant](http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant) est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région [`aria-live`](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut `aria-live` n’était pas activé. -<p>L’attribut aria-relevant est habituellement utilisé lorsque le contenu d’une page web peut être mis à jour alors que la page est affichée.</p> +L’attribut aria-relevant est habituellement utilisé lorsque le contenu d’une page web peut être mis à jour alors que la page est affichée. -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<p>Une liste délimitée par des espaces avec une ou plusieurs des valeurs suivantes :</p> +Une liste délimitée par des espaces avec une ou plusieurs des valeurs suivantes : -<ul> - <li>« additions » L’insertion de noeuds au sein de la région live doit être considérée comme pertinente</li> - <li>« removals » La suppression de noeuds doit être considérée comme pertinente</li> - <li>« text » Des changements apportés au contenu texte de noeuds existants doivent être considérés comme pertinents</li> - <li>« all » Equivalent à « additions removals text »</li> -</ul> +- « additions » L’insertion de noeuds au sein de la région live doit être considérée comme pertinente +- « removals » La suppression de noeuds doit être considérée comme pertinente +- « text » Des changements apportés au contenu texte de noeuds existants doivent être considérés comme pertinents +- « all » Equivalent à « additions removals text » -<p><code>aria-relevant="additions text"</code> est la valeur par défaut d’une région live.</p> +`aria-relevant="additions text"` est la valeur par défaut d’une région live. -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li><a href="https://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant">Spécification WAI-ARIA pour aria-relevant</a></li> -</ul> +- [Spécification WAI-ARIA pour aria-relevant](https://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md index b1e4385b1b..3779f56201 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md @@ -8,66 +8,61 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation de l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required"><code>aria-required</code></a>.</p> +Cette technique présente l’utilisation de l’attribut [`aria-required`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-required). -<p>L’attribut <code>aria-required</code> est utilisé pour indiquer que l’utilisateur doit obligatoirement remplir un champ de formulaire avant de le soumettre. Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML ; il n’est pas limité aux éléments auxquels a été assigné un <code>rôle</code> ARIA.</p> +L’attribut `aria-required` est utilisé pour indiquer que l’utilisateur doit obligatoirement remplir un champ de formulaire avant de le soumettre. Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML ; il n’est pas limité aux éléments auxquels a été assigné un `rôle` ARIA. -<p>{{ HTMLVersionInline("5") }} a introduit l’attribut <a href="/fr/docs/Web/HTML/Attributes"><code>required</code></a>, mais <code>aria-required</code> est toujours utile pour les agents utilisateurs qui ne prennent pas encore en charge HTML5.</p> +{{ HTMLVersionInline("5") }} a introduit l’attribut [`required`](/fr/docs/Web/HTML/Attributes), mais `aria-required` est toujours utile pour les agents utilisateurs qui ne prennent pas encore en charge HTML5. -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<p><code>true</code> ou <code>false</code> (Valeur par défaut : <code>false</code>)</p> +`true` ou `false` (Valeur par défaut : `false`) -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Les lecteurs d’écran devraient annoncer le champ comme étant obligatoire.</p> +Les lecteurs d’écran devraient annoncer le champ comme étant obligatoire. -<p>Remarquez que cet attribut ne changera pas automatiquement la présentation du champ.</p> +Remarquez que cet attribut ne changera pas automatiquement la présentation du champ. -<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1_un_formulaire_simple">Exemple 1 : un formulaire simple</h4> +#### Exemple 1 : un formulaire simple -<pre class="brush: html"><form action="post"> - <label for="prenom">Prénom&nbsp;:</label> - <input id="prenom" type="text" aria-required="true"> - <br/> - <label for="nom">Nom&nbsp;:</label> - <input id="nom" type="text" aria-required="true"> - <br/> - <label for="adresse">Adresse&nbsp;:</label> - <input id="adresse" type="text"> -</form> -</pre> +```html +<form action="post"> + <label for="prenom">Prénom :</label> + <input id="prenom" type="text" aria-required="true"> + <br/> + <label for="nom">Nom :</label> + <input id="nom" type="text" aria-required="true"> + <br/> + <label for="adresse">Adresse :</label> + <input id="adresse" type="text"> +</form> +``` -<h3 id="Notes">Notes</h3> +### Notes -<h3 id="Utilisé_dans_les_rôles_ARIA">Utilisé dans les rôles ARIA</h3> +### Utilisé dans les rôles ARIA -<ul> - <li>Combobox ;</li> - <li>Gridcell ;</li> - <li>Listbox ;</li> - <li>Radiogroup ;</li> - <li>Spinbutton ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox">Textbox</a> ;</li> - <li>Tree.</li> -</ul> +- Combobox ; +- Gridcell ; +- Listbox ; +- Radiogroup ; +- Spinbutton ; +- [Textbox](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox) ; +- Tree. -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid">Utiliser l’attribut <code>aria-invalid</code></a></li> -</ul> +- [Utiliser l’attribut `aria-invalid`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid) -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required">Spécification WAI-ARIA pour <code>aria-required</code></a> ;</li> - <li><a href="http://www.w3.org/TR/wai-aria-practices/#ariaform">WAI-ARIA Authoring Practices for forms</a> (Règles WAI-ARIA de création de formulaires) ;</li> - <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation de condition</a> en {{ HTMLVersionInline("5") }}.</li> -</ul> +- [Spécification WAI-ARIA pour `aria-required`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-required) ; +- [WAI-ARIA Authoring Practices for forms](http://www.w3.org/TR/wai-aria-practices/#ariaform) (Règles WAI-ARIA de création de formulaires) ; +- [Validation de condition](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) en {{ HTMLVersionInline("5") }}. diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md index 5c9c26b05f..c5b15f8d43 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md @@ -8,54 +8,49 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation de l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax">aria-valuemax</a>.</p> +Cette technique présente l’utilisation de l’attribut [aria-valuemax](http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax). -<p>L’attribut <code>aria-valuemax</code> est utilisé pour définir la valeur maximale autorisée pour un composant à intervalle tels qu’une barre de progression <code>progressbar</code>, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>. Si <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow"><code>aria-valuenow</code></a> a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de <code>aria-valuemax</code> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin"><code>aria-valuemin</code></a>. La valeur de <code>aria-valuemax</code> <strong>DOIT</strong> être supérieure ou égale à celle de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin"><code>aria-valuemin</code></a>.</p> +L’attribut `aria-valuemax` est utilisé pour définir la valeur maximale autorisée pour un composant à intervalle tels qu’une barre de progression `progressbar`, un bouton rotatif `spinbutton` ou un curseur `slider`. Si [`aria-valuenow`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de `aria-valuemax` et [`aria-valuemin`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin). La valeur de `aria-valuemax` **DOIT** être supérieure ou égale à celle de [`aria-valuemin`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin). -<p><code>aria-valuemax</code> est un attribut <strong>obligatoire</strong> des rôles <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider">slider</a>, <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar">scrollbar</a> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton">spinbutton</a>.</p> +`aria-valuemax` est un attribut **obligatoire** des rôles [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider), [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) et [spinbutton](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton). -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<p>Représentation d’un nombre par une chaîne</p> +Représentation d’un nombre par une chaîne -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Si la valeur <code>aria-valuemax</code> n’est pas déterminée, ou si <code>aria-valuemin</code> n’est pas inférieure ou égale à la valeur de <code>aria-valuemax</code>, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.</p> +Si la valeur `aria-valuemax` n’est pas déterminée, ou si `aria-valuemin` n’est pas inférieure ou égale à la valeur de `aria-valuemax`, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance. -<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1">Exemple 1:</h4> +#### Exemple 1: -<p>L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10.</p> +L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10. -<pre class="brush: html"><div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> -</pre> +```html +<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> +``` -<h3 id="Notes">Notes</h3> +### Notes -<h3 id="Utilisés_avec_les_rôles_ARIA">Utilisés avec les rôles ARIA</h3> +### Utilisés avec les rôles ARIA -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar">progressbar</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar">scrollbar</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider">slider</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton">spinbutton</a>.</li> -</ul> +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; +- [spinbutton](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton). -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin">aria-valuemin</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow">aria-valuenow</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext">aria-valuetext</a>.</li> -</ul> +- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext). -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax">Spécification WAI-ARIA pour l’attribut <code>aria-valuemax</code></a>.</li> -</ul> +- [Spécification WAI-ARIA pour l’attribut `aria-valuemax`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemax). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md index 5443a16c0e..ed3cec7ca6 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md @@ -8,52 +8,47 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin --- -<h3 id="Description">Description</h3> +### Description -<p>L’attribut <code>aria-valuemin</code> est utilisé pour définir la valeur minimale autorisée pour un composant à intervalle tel qu’une barre de progression <code>progressbar</code>, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>. Si <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow"><code>aria-valuenow</code></a> a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax"><code>aria-valuemax</code></a> et <code>aria-valuemin</code>. La valeur de <code>aria-valuemin</code> <strong>DOIT</strong> être inférieure ou égale à celle de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax"><code>aria-valuemax</code></a>.</p> +L’attribut `aria-valuemin` est utilisé pour définir la valeur minimale autorisée pour un composant à intervalle tel qu’une barre de progression `progressbar`, un bouton rotatif `spinbutton` ou un curseur `slider`. Si [`aria-valuenow`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de [`aria-valuemax`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) et `aria-valuemin`. La valeur de `aria-valuemin` **DOIT** être inférieure ou égale à celle de [`aria-valuemax`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax). -<p><code>aria-valuemin</code> est un attribut <strong>obligatoire</strong> des rôles <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider">slider</a>, <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar">scrollbar</a> et <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton">spinbutton</a>.</p> +`aria-valuemin` est un attribut **obligatoire** des rôles [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider), [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) et [spinbutton](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton). -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<p>Représentation d’un nombre sous forme d'une chaîne</p> +Représentation d’un nombre sous forme d'une chaîne -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Si <code>aria-valuemin</code> n’est pas inférieure ou égale à la valeur de <code>aria-valuemax</code>, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance.</p> +Si `aria-valuemin` n’est pas inférieure ou égale à la valeur de `aria-valuemax`, cela créera une condition d’erreur qui sera gérée par la technologie d’assistance. -<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1">Exemple 1 :</h4> +#### Exemple 1 : -<p>L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1.</p> +L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1. -<pre class="brush: html"><div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> -</pre> +```html +<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> +``` -<h3 id="Notes">Notes</h3> +### Notes -<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> +### Utilisé avec les rôles ARIA -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar">progressbar</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar">scrollbar</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider">slider</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton">spinbutton</a>.</li> -</ul> +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; +- [spinbutton](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton). -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax">aria-valuemax</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow">aria-valuenow</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext">aria-valuetext</a>.</li> -</ul> +- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext). -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemin">Spécification WAI-ARIA pour l’attribut <code>aria-valuemin</code></a>.</li> -</ul> +- [Spécification WAI-ARIA pour l’attribut `aria-valuemin`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuemin). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md index 6d13e9a360..4cf525f585 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md @@ -8,82 +8,69 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow --- -<p>L'attribut <code>aria-valuenow</code> est utilisé pour définir la valeur courante de l'intervalle d'un composant tel qu'un curseur, un bouton tournant (potentiomètre) ou une barre de progression. Si la valeur courante n'est pas connue, l'attribut <code>aria-valuenow</code> ne devrait pas être défini. Si <code>aria-valuenow</code> a des valeurs minimale et maximale connues, on devrait définir les attributs <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a> et <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a>.</p> +L'attribut `aria-valuenow` est utilisé pour définir la valeur courante de l'intervalle d'un composant tel qu'un curseur, un bouton tournant (potentiomètre) ou une barre de progression. Si la valeur courante n'est pas connue, l'attribut `aria-valuenow` ne devrait pas être défini. Si `aria-valuenow` a des valeurs minimale et maximale connues, on devrait définir les attributs [`aria-valuemin`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) et [`aria-valuemax`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute). -<p>Lorsque la valeur rendue ne peut être précisément représentée par un nombre, les développeuses et développeurs <strong>DEVRAIENT</strong> utiliser l'attribut <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute"><code>aria-valuetext</code></a> en conjonction avec <code>aria-valuenow</code> pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme <code>"petite"</code>, <code>"moyenne"</code> et <code>"grande"</code>. Dans ce cas, les valeurs de <code>aria-valuenow</code> peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute"><code>aria-valuetext</code></a> sera l'une des chaînes : <code>"petite"</code>, <code>"moyenne"</code> ou <code>"grande"</code>.</p> +Lorsque la valeur rendue ne peut être précisément représentée par un nombre, les développeuses et développeurs **DEVRAIENT** utiliser l'attribut [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) en conjonction avec `aria-valuenow` pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme `"petite"`, `"moyenne"` et `"grande"`. Dans ce cas, les valeurs de `aria-valuenow` peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) sera l'une des chaînes : `"petite"`, `"moyenne"` ou `"grande"`. -<p>L'attribut <code>aria-valuenow</code> est <strong>obligatoire</strong> pour les rôles <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role"><code>slider</code></a>, <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role"><code>scrollbar</code></a> et <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role"><code>spinbutton</code></a>.</p> +L'attribut `aria-valuenow` est **obligatoire** pour les rôles [`slider`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role), [`scrollbar`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role) et [`spinbutton`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role). -<h2 id="value">Valeur</h2> +## Valeur -<p>Une chaîne de caractères qui représente le nombre.</p> +Une chaîne de caractères qui représente le nombre. -<h2 id="possible_effects_on_user_agents_and_assistive_technology">Effets possibles sur les agents utilisateurs et les technologies d'assistance</h2> +## Effets possibles sur les agents utilisateurs et les technologies d'assistance -<p>Pour les éléments possédant les rôles <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role"><code>progressbar</code></a> et <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role"><code>scrollbar</code></a>, les technologies d'assistance <strong>DEVRAIENT</strong> renvoyer la valeur courante sous forme de pourcentage, calculée comme étant la position dans l'intervalle compris entre <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute"><code>aria-valuemin</code></a> et <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute"><code>aria-valuemax</code></a> si les deux sont définies, sinon la valeur actuelle avec un pourcentage.</p> +Pour les éléments possédant les rôles [`progressbar`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role) et [`scrollbar`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role), les technologies d'assistance **DEVRAIENT** renvoyer la valeur courante sous forme de pourcentage, calculée comme étant la position dans l'intervalle compris entre [`aria-valuemin`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) et [`aria-valuemax`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute) si les deux sont définies, sinon la valeur actuelle avec un pourcentage. -<p>Pour les éléments possédant les rôles <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role"><code>slider</code></a> et <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role"><code>spinbutton</code></a>, les technologies d'assistance <strong>DEVRAIENT</strong> retourner la valeur courante à l'utilisateur.</p> +Pour les éléments possédant les rôles [`slider`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role) et [`spinbutton`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role), les technologies d'assistance **DEVRAIENT** retourner la valeur courante à l'utilisateur. -<div class="note"> - <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative.</p> -</div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d'assistance devraient traiter cette technique. L'information fournie ci-dessus est l'une de ces opinions et n'est pas normative. -<h2 id="examples">Exemples</h2> +## Exemples -<h3 id="example_1">Exemple 1</h3> +### Exemple 1 -<p>L'extrait de code ci-dessous affiche un curseur simple avec une valeur courante de 4.</p> +L'extrait de code ci-dessous affiche un curseur simple avec une valeur courante de 4. -<pre class="brush: html"><div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> -</pre> +```html +<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> +``` -<h3 id="working_examples">Exemples concrets</h3> +### Exemples concrets -<ul> - <li><code>progressbar</code> - <ul> - <li><a href="https://dequeuniversity.com/library/aria/progress-bar-bounded">Deque Code Library of Accessibility Examples: Progress Bar (Bounded)</a></li> - <li><a href="https://dequeuniversity.com/library/aria/progress-bar-unbounded">Deque Code Library of Accessibility Examples: Progress Bar (Unbounded)</a></li> - </ul> - </li> - <li><code>slider</code> - <ul> - <li><a href="https://w3c.github.io/aria-practices/examples/slider/multithumb-slider.html">WAI-ARIA Authoring Practices: Horizontal Multi-Thumb Slider Example</a></li> - <li><a href="https://dequeuniversity.com/library/aria/slider">Deque Code Library of Accessibility Examples: Slider</a></li> - <li><a href="https://dequeuniversity.com/library/aria/slider-multirange">Deque Code Library of Accessibility Examples: Slider (Multirange)</a></li> - </ul> - </li> - <li><code>spinbutton</code> - <ul> - <li><a href="https://w3c.github.io/aria-practices/examples/spinbutton/datepicker-spinbuttons.html">WAI-ARIA Authoring Practices: Date Picker Spin Button Example</a></li> - <li><a href="https://w3c.github.io/aria-practices/examples/toolbar/toolbar.html">WAI-ARIA Authoring Practices: Toolbar Example</a></li> - </ul> - </li> -</ul> +- `progressbar` -<h2 id="used_with_aria_roles">Rôles ARIA concernés</h2> + - [Deque Code Library of Accessibility Examples: Progress Bar (Bounded)](https://dequeuniversity.com/library/aria/progress-bar-bounded) + - [Deque Code Library of Accessibility Examples: Progress Bar (Unbounded)](https://dequeuniversity.com/library/aria/progress-bar-unbounded) -<ul> - <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role"><code>progressbar</code></a></li> - <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role"><code>scrollbar</code></a></li> - <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role"><code>slider</code></a></li> - <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role"><code>spinbutton</code></a></li> - </ul> +- `slider` -<h2 id="related_aria_techniques">Techniques ARIA connexes</h2> + - [WAI-ARIA Authoring Practices: Horizontal Multi-Thumb Slider Example](https://w3c.github.io/aria-practices/examples/slider/multithumb-slider.html) + - [Deque Code Library of Accessibility Examples: Slider](https://dequeuniversity.com/library/aria/slider) + - [Deque Code Library of Accessibility Examples: Slider (Multirange)](https://dequeuniversity.com/library/aria/slider-multirange) -<ul> - <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a> ;</li> - <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a> ;</li> - <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a>.</li> -</ul> +- `spinbutton` -<h2 id="compatibility">Compatibilité</h2> + - [WAI-ARIA Authoring Practices: Date Picker Spin Button Example](https://w3c.github.io/aria-practices/examples/spinbutton/datepicker-spinbuttons.html) + - [WAI-ARIA Authoring Practices: Toolbar Example](https://w3c.github.io/aria-practices/examples/toolbar/toolbar.html) -<p>À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d'agents utilisateurs et de produits de technologies d'assistance.</p> +## Rôles ARIA concernés -<h2 id="additional_resources">Autres ressources</h2> +- [`progressbar`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role) +- [`scrollbar`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role) +- [`slider`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role) +- [`spinbutton`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role) -<ul> - <li><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow">Spécification WAI-ARIA pour l'attribut <code>aria-valuenow</code></a>.</li> -</ul> +## Techniques ARIA connexes + +- [aria-valuemax](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute) ; +- [aria-valuemin](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) ; +- [aria-valuetext](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute). + +## Compatibilité + +À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d'agents utilisateurs et de produits de technologies d'assistance. + +## Autres ressources + +- [Spécification WAI-ARIA pour l'attribut `aria-valuenow`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md index f875cce058..4dd141cfd7 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md @@ -8,56 +8,51 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext --- -<h3 id="Description">Description</h3> +### Description -<p>L’attribut <code>aria-valuetext</code> est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow"><code>aria-valuenow</code></a> d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif <code>spinbutton</code> ou un curseur <code>slider</code>.</p> +L’attribut `aria-valuetext` est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur [`aria-valuenow`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif `spinbutton` ou un curseur `slider`. -<p>Les développeurs <strong>DEVRAIENT</strong> uniquement définir l’attribut <code>aria-valuetext</code> lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre.</p> +Les développeurs **DEVRAIENT** uniquement définir l’attribut `aria-valuetext` lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre. -<p>Par exemple, dans le cas d'un curseur qui peut retourner les valeurs <code>petite</code>, <code>moyenne</code>et <code>grand</code>, les valeurs de <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow"><code>aria-valuenow</code></a> pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de <code>aria-valuetext</code> sera l'une des chaînes suivantes : <code>petite</code>, <code>moyenne</code> ou <code>grande</code>.</p> +Par exemple, dans le cas d'un curseur qui peut retourner les valeurs `petite`, `moyenne`et `grand`, les valeurs de [`aria-valuenow`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de `aria-valuetext` sera l'une des chaînes suivantes : `petite`, `moyenne` ou `grande`. -<h3 id="Valeurs">Valeurs</h3> +### Valeurs -<p>Représentation d’un nombre sous forme d'une chaîne</p> +Représentation d’un nombre sous forme d'une chaîne -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Si l’attribut <code>aria-valuetext</code> est absent, les technologies d’assistance compteront uniquement sur l’attribut <a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow"><code>aria-valuenow</code></a> pour la valeur courante. Si <code>aria-valuetext</code> est spécifié, les technologies d’assistance <strong>DEVRAIENT</strong> retourner cette valeur plutôt que celle de <code>aria-valuenow</code>.</p> +Si l’attribut `aria-valuetext` est absent, les technologies d’assistance compteront uniquement sur l’attribut [`aria-valuenow`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) pour la valeur courante. Si `aria-valuetext` est spécifié, les technologies d’assistance **DEVRAIENT** retourner cette valeur plutôt que celle de `aria-valuenow`. -<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1">Exemple 1 :</h4> +#### Exemple 1 : -<p>L’extrait de code ci-dessous montre un curseur simple de sélection d’un jour de la semaine. La valeur du curseur est numérique, et l’attribut <code>aria-valuetext</code> est utilisé pour fournir le nom de jour. L’application actualisera programmatiquement <code>aria-valuetext</code> selon la valeur de <code>aria-valuenow</code>.</p> +L’extrait de code ci-dessous montre un curseur simple de sélection d’un jour de la semaine. La valeur du curseur est numérique, et l’attribut `aria-valuetext` est utilisé pour fournir le nom de jour. L’application actualisera programmatiquement `aria-valuetext` selon la valeur de `aria-valuenow`. -<pre class="brush: html"><div role="slider" aria-valuenow="1" +```html +<div role="slider" aria-valuenow="1" aria-valuemin="1" aria-valuemax="7" - aria-valuetext="Dimanche"> -</pre> + aria-valuetext="Dimanche"> +``` -<h4 id="Exemples_concrets">Exemples concrets :</h4> +#### Exemples concrets : -<h3 id="Notes">Notes</h3> +### Notes -<h3 id="Utilisé_avec_les_rôles_ARIA">Utilisé avec les rôles ARIA</h3> +### Utilisé avec les rôles ARIA -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar">progressbar</a> ;</li> - <li>scrollbar ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider">slider</a></li> - <li>spinbutton.</li> -</ul> +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- scrollbar ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) +- spinbutton. -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow">aria-valuenow</a>.</li> -</ul> +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow). -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext">Spécification WAI-ARIA pour l’attribut <code>aria-valuetext</code></a>.</li> -</ul> +- [Spécification WAI-ARIA pour l’attribut `aria-valuetext`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-valuetext). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md index 8a9a076f49..b67c6b261a 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md @@ -9,47 +9,46 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#article"><code>article</code> (en)</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +Cette technique présente l’utilisation du rôle [`article` (en)](http://www.w3.org/TR/wai-aria/roles#article) et décrit les effets produits sur les navigateurs et les technologies d’assistance. -<p>Le rôle <code>article</code> est utilisé pour identifier une section de page qui forme une partie indépendante d'un document, d'une page ou d'un site. Les exemples d'article peuvent être des billets de blogs ou des articles d'un magazine ou d'un journal ou encore les commentaires soumis par les utilisateurs. Ils sont <em>indépendants</em> dans le sens où leur contenu pourrait être autonome, par exemple pour un flux de syndication.</p> +Le rôle `article` est utilisé pour identifier une section de page qui forme une partie indépendante d'un document, d'une page ou d'un site. Les exemples d'article peuvent être des billets de blogs ou des articles d'un magazine ou d'un journal ou encore les commentaires soumis par les utilisateurs. Ils sont _indépendants_ dans le sens où leur contenu pourrait être autonome, par exemple pour un flux de syndication. -<p>Les articles peuvent être imbriqués. Par exemple, une entrée de blog sur un site acceptant les commentaires des visiteurs pourrait représenter ces commentaires comme des articles incluent dans l'article de l'entrée de blog.</p> +Les articles peuvent être imbriqués. Par exemple, une entrée de blog sur un site acceptant les commentaires des visiteurs pourrait représenter ces commentaires comme des articles incluent dans l'article de l'entrée de blog. -<p>Le rôle ARIA <code>article</code> est similaire à l'élément {{ HTMLVersionInline("5") }} {{ HTMLElement("article") }}. Cependant l'élément {{ HTMLElement("article") }} devrait toujours recevoir le rôle ARIA <code>article</code> car toutes les technologies d'assistance ne prennent pas encore en charge HTML5.</p> +Le rôle ARIA `article` est similaire à l'élément {{ HTMLVersionInline("5") }} {{ HTMLElement("article") }}. Cependant l'élément {{ HTMLElement("article") }} devrait toujours recevoir le rôle ARIA `article` car toutes les technologies d'assistance ne prennent pas encore en charge HTML5. -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Lorsque l'utilisateur navigue dans un élément ayant le rôle <code>article</code>, les technologies d'assistance qui interceptent généralement les événements clavier standards <strong>doivent</strong> basculer en mode de navigation du document, plutôt que de passer les événements clavier à l'application web.</p> +Lorsque l'utilisateur navigue dans un élément ayant le rôle `article`, les technologies d'assistance qui interceptent généralement les événements clavier standards **doivent** basculer en mode de navigation du document, plutôt que de passer les événements clavier à l'application web. -<p>Les technologies d'assistance <strong>doivent</strong> fournit une fonctionnalité permettant à l'utilisateur de naviguer dans la hiérarchie de chacun des éléments <code>article</code> imbriqués.</p> +Les technologies d'assistance **doivent** fournit une fonctionnalité permettant à l'utilisateur de naviguer dans la hiérarchie de chacun des éléments `article` imbriqués. -<div class="note"> - <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> -</div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Utilisation_du_role_article_sans_élément_article">Utilisation du role article sans élément article :</h4> +#### Utilisation du role article sans élément article : -<pre class="brush: html"><div role="article"> +```html +<div role="article"> - <h1>Une titre de billet de blog</h1> - <p>contenu du billet...</p> + <h1>Une titre de billet de blog</h1> + <p>contenu du billet...</p> - <div class="comments"> - <div role="article"> - <p>Un premier commentaire</p> - </div> - <div role="article"> - <p>Un deuxième commentaire</p> - </div> - </div> + <div class="comments"> + <div role="article"> + <p>Un premier commentaire</p> + </div> + <div role="article"> + <p>Un deuxième commentaire</p> + </div> + </div> -</div> -</pre> +</div> +``` -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<p><a href="http://www.w3.org/TR/wai-aria/roles#article">Spécification WAI-ARIA du rôle <code>article</code> (en)</a></p> +[Spécification WAI-ARIA du rôle `article` (en)](http://www.w3.org/TR/wai-aria/roles#article) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md index a69035dfb1..79d19d503d 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md @@ -8,116 +8,106 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#group">group</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +Cette technique présente l’utilisation du rôle [group](http://www.w3.org/TR/wai-aria/roles#group) et décrit les effets produits sur les navigateurs et les technologies d’assistance. -<p>Le rôle <code>group</code> est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une <a href="http://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a>, ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle <code>group</code> est ajouté à un élément, , le navigateur émettra un événement <code>group</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> +Le rôle `group` est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une [`region`](http://www.w3.org/TR/wai-aria/roles#region), ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle `group` est ajouté à un élément, , le navigateur émettra un événement `group` accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. -<p>Un groupe devrait utilisé pour former un ensemble logique d’éléments avec des fonctions connexes, tels que les enfants dans un composant d’arborescence formant un ensemble apparenté dans une hiérarchie, ou une collection d’éléments ayant le même conteneur dans un répertoire. Cependant, lorsqu’on utilise un groupe pour former une liste, les développeurs doivent limiter ses enfants aux éléments <a href="http://www.w3.org/TR/wai-aria/roles#listitem">listitem</a>. Les éléments de groupe devraient être imbriqués.</p> +Un groupe devrait utilisé pour former un ensemble logique d’éléments avec des fonctions connexes, tels que les enfants dans un composant d’arborescence formant un ensemble apparenté dans une hiérarchie, ou une collection d’éléments ayant le même conteneur dans un répertoire. Cependant, lorsqu’on utilise un groupe pour former une liste, les développeurs doivent limiter ses enfants aux éléments [listitem](http://www.w3.org/TR/wai-aria/roles#listitem). Les éléments de groupe devraient être imbriqués. -<p>La gestion correcte d’un groupe par les technologies d’assistance est déterminée par le contexte dans lequel il est fourni.</p> +La gestion correcte d’un groupe par les technologies d’assistance est déterminée par le contexte dans lequel il est fourni. -<p>Si un auteur pense qu’une section est suffisamment importante pour faire partie de la table des matières d’une page, il devrait assigner un rôle de <a href="http://www.w3.org/TR/wai-aria/roles#region"><code>region</code></a> ou un rôle standard de <a href="http://www.w3.org/TR/wai-aria/roles#landmark_roles">point de repère</a> à cette section.</p> +Si un auteur pense qu’une section est suffisamment importante pour faire partie de la table des matières d’une page, il devrait assigner un rôle de [`region`](http://www.w3.org/TR/wai-aria/roles#region) ou un rôle standard de [point de repère](http://www.w3.org/TR/wai-aria/roles#landmark_roles) à cette section. -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Lorsque le rôle <code>group</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> +Lorsque le rôle `group` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -<ul> - <li>Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ;</li> - <li>Déclencher un événement groupe accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> -</ul> +- Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ; +- Déclencher un événement groupe accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : -<ul> - <li>Les lecteurs d’écran devraient annoncer le groupe lorsque le focus atteint l’un des contrôles appartenant au groupe, et si <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby</a> a été défini, la description peut être lue. Après cela seulement le contrôle focalisé devrait être annoncé.</li> - <li>Les loupes d’écran devraient agrandir le groupe.</li> -</ul> +- Les lecteurs d’écran devraient annoncer le groupe lorsque le focus atteint l’un des contrôles appartenant au groupe, et si [aria-describedby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) a été défini, la description peut être lue. Après cela seulement le contrôle focalisé devrait être annoncé. +- Les loupes d’écran devraient agrandir le groupe. -<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1_Utiliser_le_rôle_group_avec_une_arborescence_HTML">Exemple 1 : Utiliser le rôle <code>group</code> avec une arborescence HTML</h4> +#### Exemple 1 : Utiliser le rôle `group` avec une arborescence HTML -<p>L’extrait de code ci-dessous montre comment le rôle <code>group</code> est ajouté directement dans le code source HTML.</p> +L’extrait de code ci-dessous montre comment le rôle `group` est ajouté directement dans le code source HTML. -<pre class="brush: html"><div id="tree1" class="tree" role="tree" tabindex="-1"> - <div id="animals" class="groupHeader" role="presentation" aria-owns="animalGroup" aria-expanded="true"> - <img class="headerImg" role="presentation" tabindex="-1" src="images/treeExpanded.gif" /> - <span role="treeitem" tabindex="0">Animaux</span> - </div> +```html +<div id="tree1" class="tree" role="tree" tabindex="-1"> + <div id="animals" class="groupHeader" role="presentation" aria-owns="animalGroup" aria-expanded="true"> + <img class="headerImg" role="presentation" tabindex="-1" src="images/treeExpanded.gif" /> + <span role="treeitem" tabindex="0">Animaux</span> + </div> - <div id="animalGroup" class="group" role="group"> - <div id="birds" class="treeitem" role="presentation"> - <span role="treeitem" tabindex="-1">Oiseaux</span> - </div> + <div id="animalGroup" class="group" role="group"> + <div id="birds" class="treeitem" role="presentation"> + <span role="treeitem" tabindex="-1">Oiseaux</span> + </div> - <div id="cats" class="groupHeader" role="presentation" aria-owns="catGroup" aria-expanded="false"> - <img class="headerImg" role="presentation" tabindex="-1" src="images/treeContracted.gif" /> - <span role="treeitem" tabindex="0">Chats</span> - </div> + <div id="cats" class="groupHeader" role="presentation" aria-owns="catGroup" aria-expanded="false"> + <img class="headerImg" role="presentation" tabindex="-1" src="images/treeContracted.gif" /> + <span role="treeitem" tabindex="0">Chats</span> + </div> - <div id="catGroup" class="group" role="group"> - <div id="siamese" class="treeitem" role="presentation"> - <span role="treeitem" tabindex="-1">Siamois</span> - </div> - <div id="tabby" class="treeitem" role="presentation"> - <span role="treeitem" tabindex="-1">Tigré</span> - </div> - </div> - </div> -</div></pre> + <div id="catGroup" class="group" role="group"> + <div id="siamese" class="treeitem" role="presentation"> + <span role="treeitem" tabindex="-1">Siamois</span> + </div> + <div id="tabby" class="treeitem" role="presentation"> + <span role="treeitem" tabindex="-1">Tigré</span> + </div> + </div> + </div> +</div> +``` -<h4 id="Exemple_2_Utiliser_le_rôle_group_avec_un_menu_déroulant_HTML">Exemple 2 : Utiliser le rôle <code>group</code> avec un menu déroulant HTML</h4> +#### Exemple 2 : Utiliser le rôle `group` avec un menu déroulant HTML -<p>L’extrait de code ci-dessous montre comment le rôle <code>group</code> est ajouté directement au code source HTML.</p> +L’extrait de code ci-dessous montre comment le rôle `group` est ajouté directement au code source HTML. -<pre class="brush: html"><div role="menu"> - <ul role="group"> - <li role="menuitem">Courrier entrant</li> - <li role="menuitem">Archive</li> - <li role="menuitem">Corbeille</li> - </ul> - <ul role="group"> - <li role="menuitem">Dossier personnalisé 1</li> - <li role="menuitem">Dossier personnalisé 2</li> - <li role="menuitem">Dossier personnalisé 3</li> - </ul> +```html +<div role="menu"> + <ul role="group"> + <li role="menuitem">Courrier entrant</li> + <li role="menuitem">Archive</li> + <li role="menuitem">Corbeille</li> + </ul> + <ul role="group"> + <li role="menuitem">Dossier personnalisé 1</li> + <li role="menuitem">Dossier personnalisé 2</li> + <li role="menuitem">Dossier personnalisé 3</li> + </ul> - <ul role="group"> - <li role="menuitem">Nouveau dossier</li> - </ul> -</div></pre> + <ul role="group"> + <li role="menuitem">Nouveau dossier</li> + </ul> +</div> +``` -<h4 id="Exemples_concrets">Exemples concrets :</h4> +#### Exemples concrets : -<ul> - <li><a href="http://test.cita.illinois.edu/aria/tree/tree2.php">http://test.cita.illinois.edu/aria/tree/tree2.php</a></li> -</ul> +- <http://test.cita.illinois.edu/aria/tree/tree2.php> -<h3 id="Notes">Notes</h3> +### Notes -<ul> - <li>Les membres du groupe qui se trouve à l’extérieur du sous-arbre DOM du groupe doivent avoir leurs relations avec ce dernier explicitement assignées afin de participer au groupe.</li> -</ul> +- Les membres du groupe qui se trouve à l’extérieur du sous-arbre DOM du groupe doivent avoir leurs relations avec ce dernier explicitement assignées afin de participer au groupe. -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +### Attributs ARIA utilisés -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/roles#group">group (en)</a></li> -</ul> +- [group (en)](http://www.w3.org/TR/wai-aria/roles#group) -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<ul> - <li>Rôle <a href="http://www.w3.org/TR/wai-aria/roles#region">region (en)</a></li> -</ul> +- Rôle [region (en)](http://www.w3.org/TR/wai-aria/roles#region) -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li>Bonnes pratiques ARIA – Répertoires, groupes et zones : <a href="http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading">Directories, Groups, and Regions (en)</a></li> -</ul> +- Bonnes pratiques ARIA – Répertoires, groupes et zones : [Directories, Groups, and Regions (en)](http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md index 6decbf1edb..08b116042f 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md @@ -8,32 +8,42 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link --- -<h3 id="Description">Description</h3> - -<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#link">link</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> - -<p>Le rôle <code>link</code> est utilisé pour identifier un élément qui crée un hyperlien vers une ressource qui peut être dans l’application ou à l’extérieur. Lorsque ce rôle est ajouté à un élément, la tabulation peut être utilisée pour donner le focus au lien et la barre d’espace ou la touche Entrée peuvent exécuter le lien.</p> -<p>L’attribut <a href="http://www.w3.org/TR/wai-aria-practices/#focus_tabindex">tabindex</a> peut éventuellement être utilisé avec ce rôle pour spécifier directement la position de l’élément dans l’ordre de tabulation.</p> -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> -<p>Lorsque le rôle <code>link</code> est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> -<ul> - <li>Présenter l’élément comme un lien à l’API accessibilité du système d’exploitation.</li> - <li>Déclencher un événement lien accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> -</ul> -<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> -<ul> - <li>Les lecteurs d'écran devraient annoncer le texte du lien ou son label lorsque l'élément avec le rôle <code>link</code>reçoit le focus, en plus du fait ce que c'est un lien. Les liens ARIA devraient être intégré dans la fonction « lister les liens » (<em>List Links</em>) des lecteurs d'écran de la même façon que les liens ordinaires, et les actions dans cette liste de dialogue, tels que « Activer le lien » ou « Déplacer le lien », devraient se comporter de la meme façon qu'avec des liens ordinaires. </li> - <li>Les loupes d’écran devraient agrandir le lien.</li> -</ul> -<div class="note"> - <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> -<h3 id="Exemples">Exemples</h3> -<h4 id="Exemple_1_Ajoute_le_rôle_dans_le_code_HTML">Exemple 1 : <strong>Ajoute le rôle dans le code HTML</strong></h4> -<p>L’extrait de code ci-dessous montre comment le rôle <code>link</code> est ajouté dans le code source HTML. </p> -<pre class="brush: html"><div role=”link”>Un lien</div> -</pre> -<h4 id="Exemple_2_Lien_accessible_créé_depuis_une_application_à_l'aide_d'un_<span>"><strong>Exemple 2 : Lien accessible créé depuis une application à l'aide d'un <span></strong></h4> -<pre class="brush: html"><script type="text/javascript"> +### Description + +Cette technique présente l’utilisation du rôle [link](http://www.w3.org/TR/wai-aria/roles#link) et décrit les effets produits sur les navigateurs et les technologies d’assistance. + +Le rôle `link` est utilisé pour identifier un élément qui crée un hyperlien vers une ressource qui peut être dans l’application ou à l’extérieur. Lorsque ce rôle est ajouté à un élément, la tabulation peut être utilisée pour donner le focus au lien et la barre d’espace ou la touche Entrée peuvent exécuter le lien. + +L’attribut [tabindex](http://www.w3.org/TR/wai-aria-practices/#focus_tabindex) peut éventuellement être utilisé avec ce rôle pour spécifier directement la position de l’élément dans l’ordre de tabulation. + +### Effets possibles sur les agents utilisateurs et les technologies d’assistance + +Lorsque le rôle `link` est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes : + +- Présenter l’élément comme un lien à l’API accessibilité du système d’exploitation. +- Déclencher un événement lien accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. + +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : + +- Les lecteurs d'écran devraient annoncer le texte du lien ou son label lorsque l'élément avec le rôle `link`reçoit le focus, en plus du fait ce que c'est un lien. Les liens ARIA devraient être intégré dans la fonction « lister les liens » (_List Links_) des lecteurs d'écran de la même façon que les liens ordinaires, et les actions dans cette liste de dialogue, tels que « Activer le lien » ou « Déplacer le lien », devraient se comporter de la meme façon qu'avec des liens ordinaires. +- Les loupes d’écran devraient agrandir le lien. + +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. + +### Exemples + +#### Exemple 1 : **Ajoute le rôle dans le code HTML** + +L’extrait de code ci-dessous montre comment le rôle `link` est ajouté dans le code source HTML. + +```html +<div role=”link”>Un lien</div> +``` + +#### **Exemple 2 : Lien accessible créé depuis une application à l'aide d'un \<span>** + +```html +<script type="text/javascript"> sap = {ui:{keycodes:{SPACE:32, ENTER:13 }}}; //gère les clics et les événement clavier sur le lien function navigateLink(evt) { @@ -44,32 +54,34 @@ function navigateLink(evt) { if (ref) window.open(ref.getAttribute("href"),"_blank"); } } -</script> +</script> -<body role="application"> +<body role="application"> - <h3>Lien simple créé avec un <span></h3> - <span href="http://www.w3c.org" onkeydown="navigateLink(event)" onclick="navigateLink(event)" tabindex="0" id="link1" role="link" class="link"> + <h3>Lien simple créé avec un <span></h3> + <span href="http://www.w3c.org" onkeydown="navigateLink(event)" onclick="navigateLink(event)" tabindex="0" id="link1" role="link" class="link"> Activez ce lien en appuyant sur la barre d’espace ou la touche Entrée - </span> -</body></pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> -<ul> - <li><a href="http://codetalks.org/source/widgets/link/link.html">http://codetalks.org/source/widgets/link/link.html</a></li> - <li><a href="http://codetalks.org/source/widgets/link/link.sample.html">http://codetalks.org/source/widgets/link/link.sample.html</a></li> -</ul> -<h3 id="Notes">Notes</h3> -<p>Si l'activation du lien déclenche une action mais ne déplace pas le focus du navigateur ou que cela ouvre une nouvelle page, vous devriez considérer l'utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#button">button</a> au lieu du rôle <code>link</code>.</p> -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/roles#link"><code>link</code></a></li> -</ul> -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> -<ul> - <li>Rôle <a href="http://www.w3.org/TR/wai-aria/roles#button">button</a>.</li> -</ul> - -<h3 id="Autres_ressources">Autres ressources</h3> -<ul> - <li>Bonnes pratiques ARIA - Rôle <code>Link</code> : <a href="http://www.w3.org/TR/wai-aria-practices/#link">#link</a></li> -</ul> + </span> +</body> +``` + +#### Exemples concrets : + +- <http://codetalks.org/source/widgets/link/link.html> +- <http://codetalks.org/source/widgets/link/link.sample.html> + +### Notes + +Si l'activation du lien déclenche une action mais ne déplace pas le focus du navigateur ou que cela ouvre une nouvelle page, vous devriez considérer l'utilisation du rôle [button](http://www.w3.org/TR/wai-aria/roles#button) au lieu du rôle `link`. + +### Attributs ARIA utilisés + +- [`link`](http://www.w3.org/TR/wai-aria/roles#link) + +### Techniques ARIA connexes + +- Rôle [button](http://www.w3.org/TR/wai-aria/roles#button). + +### Autres ressources + +- Bonnes pratiques ARIA - Rôle `Link` : [#link](http://www.w3.org/TR/wai-aria-practices/#link) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md index 34d8e47e12..350f5f7ebe 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md @@ -8,85 +8,74 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#log"><code>log</code></a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +Cette technique présente l’utilisation du rôle [`log`](http://www.w3.org/TR/wai-aria/roles#log) et décrit les effets produits sur les navigateurs et les technologies d’assistance. -<p>Le rôle <code>log</code> est utilisé pour identifier un élément qui crée <a href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">une zone live</a> où de nouvelles informations sont ajoutées dans un ordre significatif et où les anciennes informations peuvent être supprimées. Par exemple, un journal de salon de discussion, l’historique d’une messagerie ou un fichier d’erreurs. Contrairement aux autres types de zones live, ce rôle est ordonné de façon séquentielle et les nouvelles informations sont uniquement ajoutées à la fin de l’enregistrement. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement <code>log</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> +Le rôle `log` est utilisé pour identifier un élément qui crée [une zone live](http://www.w3.org/WAI/PF/aria/terms#def_liveregion) où de nouvelles informations sont ajoutées dans un ordre significatif et où les anciennes informations peuvent être supprimées. Par exemple, un journal de salon de discussion, l’historique d’une messagerie ou un fichier d’erreurs. Contrairement aux autres types de zones live, ce rôle est ordonné de façon séquentielle et les nouvelles informations sont uniquement ajoutées à la fin de l’enregistrement. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement `log` accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. -<p>Par défaut, les mises à jour ne contiennent que les changements apportés à la zone live et elles sont annoncées à l'utilisateur lorsqu'il est inactif. Si l'utilisateur a besoin d'entendre l'ensemble de la zone live lorsqu'un changement se produit, il faut utiliser <code>aria-atomic="true"</code>. Pour faire les annonces le plus tôt possible et lorsque l'utilisateur peut être interrompu, <code>aria-live="assertive"</code> peut être défini pour lancer des mises à jour plus agressives.</p> +Par défaut, les mises à jour ne contiennent que les changements apportés à la zone live et elles sont annoncées à l'utilisateur lorsqu'il est inactif. Si l'utilisateur a besoin d'entendre l'ensemble de la zone live lorsqu'un changement se produit, il faut utiliser `aria-atomic="true"`. Pour faire les annonces le plus tôt possible et lorsque l'utilisateur peut être interrompu, `aria-live="assertive"` peut être défini pour lancer des mises à jour plus agressives. -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Lorsque le rôle <code>log</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> +Lorsque le rôle `log` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -<ul> - <li>Présenter l’élément ayant un rôle de journal à l’API d’accessibilité du système d’exploitation ;</li> - <li>Déclencher un événement journal accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> -</ul> +- Présenter l’élément ayant un rôle de journal à l’API d’accessibilité du système d’exploitation ; +- Déclencher un événement journal accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. -<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : -<ul> - <li>Les lecteurs d'écran devraient annoncer les changements intervenus dans le fichier de journalisation lorsque l'utilisateur est inactif, à moins que <code>aria-live="assertive"</code> soit défini, dans quel cas l'utilisateur peut être interrompu.</li> - <li>Les loupes d'écran devraient indiquer visuellement la disponibilité d'une mise à jour du fichier de journalisation.</li> -</ul> +- Les lecteurs d'écran devraient annoncer les changements intervenus dans le fichier de journalisation lorsque l'utilisateur est inactif, à moins que `aria-live="assertive"` soit défini, dans quel cas l'utilisateur peut être interrompu. +- Les loupes d'écran devraient indiquer visuellement la disponibilité d'une mise à jour du fichier de journalisation. -<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1_Ajout_du_rôle_dans_du_code_HTML">Exemple 1 : Ajout du rôle dans du code HTML</h4> +#### Exemple 1 : Ajout du rôle dans du code HTML -<p>L’extrait de code ci-dessous montre comment le rôle <code>log</code> est ajouté directement dans le code source HTML.</p> +L’extrait de code ci-dessous montre comment le rôle `log` est ajouté directement dans le code source HTML. -<pre class="brush: html"><div id=”liveregion” class=”region” role=”log”></div> -</pre> +```html +<div id=”liveregion” class=”region” role=”log”></div> +``` -<h4 id="Exemple_2_Extrait_d’un_exemple_d’application">Exemple 2 : Extrait d’un exemple d’application</h4> +#### Exemple 2 : Extrait d’un exemple d’application -<p>Cet extrait de code crée le journal dans une application de chat AJAX.</p> +Cet extrait de code crée le journal dans une application de chat AJAX. -<pre class="brush: html"><div id="chatArea" role="log"> - <ul id="chatRegion" aria-live="polite" aria-atomic="false"> - <li>Veuillez choisir un pseudo pour commencer à utiliser AJAX Chat.</li> - </ul> +```html +<div id="chatArea" role="log"> + <ul id="chatRegion" aria-live="polite" aria-atomic="false"> + <li>Veuillez choisir un pseudo pour commencer à utiliser AJAX Chat.</li> + </ul> - <ul id="userListRegion" aria-live="off" aria-relevant="additions removals text"> - </ul> -</div></pre> + <ul id="userListRegion" aria-live="off" aria-relevant="additions removals text"> + </ul> +</div> +``` -<p>Voir l’<a href="http://codetalks.org/source/live/chat.html">exemple</a> sur CodeTalks pour plus d’informations.</p> +Voir l’[exemple](http://codetalks.org/source/live/chat.html) sur CodeTalks pour plus d’informations. -<h4 id="Exemples_concrets">Exemples concrets :</h4> +#### Exemples concrets : -<ul> - <li><a href="http://test.cita.illinois.edu/aria/live/live1.php">http://test.cita.illinois.edu/aria/live/live1.php</a> ;</li> - <li><a href="http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/">http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/</a> ;</li> - <li><a href="http://codetalks.org/source/live/chat.html">http://codetalks.org/source/live/chat.html</a> [<a href="http://codetalks.org/source/live/chat_notes.html">notes</a>].</li> -</ul> +- <http://test.cita.illinois.edu/aria/live/live1.php> ; +- <http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/> ; +- <http://codetalks.org/source/live/chat.html> \[[notes](http://codetalks.org/source/live/chat_notes.html)]. -<h3 id="Notes">Notes</h3> +### Notes -<ul> - <li>L'utilisation du rôle <code>log</code> sur un élément implique que cet élément possède l'attribut <code>aria-live="polite"</code>.</li> - <li>Pour une zone avec un défilement de texte, comme un bandeau défilant, il est préférable d'utiliser le rôle <code>marquee</code>.</li> -</ul> +- L'utilisation du rôle `log` sur un élément implique que cet élément possède l'attribut `aria-live="polite"`. +- Pour une zone avec un défilement de texte, comme un bandeau défilant, il est préférable d'utiliser le rôle `marquee`. -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +### Attributs ARIA utilisés -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/roles#log">log</a>.</li> -</ul> +- [log](http://www.w3.org/TR/wai-aria/roles#log). -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<ul> - <li>Rôle <a href="http://www.w3.org/TR/wai-aria/roles#marquee">marquee</a>.</li> -</ul> +- Rôle [marquee](http://www.w3.org/TR/wai-aria/roles#marquee). -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li>Bonnes pratiques ARIA – Implémentation des zones live : <a href="http://www.w3.org/TR/wai-aria-practices/#LiveRegions">#LiveRegions</a>.</li> -</ul> +- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md index 25bf9addfd..9287c5f81e 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md @@ -8,45 +8,49 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation --- -<p>Cette page présente l'usage du rôle <code><a href="https://www.w3.org/TR/wai-aria-practices-1.1/#presentation_role">presentation</a></code> et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.</p> +Cette page présente l'usage du rôle [`presentation`](https://www.w3.org/TR/wai-aria-practices-1.1/#presentation_role) et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance. -<h2 id="Description">Description</h2> +## Description -<p>Le rôle <code>presentation</code> est utilisé pour retirer toute représentation sémantique pour un élément donné ainsi que pour ses descendants. Par exemple, un tableau utilisé pour la mise en page pourrait avoir un rôle <code>presentation</code> appliqué sur l'élément <code>table</code> pour retirer la sémantique de l'élément en lui-même ainsi que tout ses sous-éléments, comme l'en-tête de tableau ou même les données de tableau elles-mêmes.</p> +Le rôle `presentation` est utilisé pour retirer toute représentation sémantique pour un élément donné ainsi que pour ses descendants. Par exemple, un tableau utilisé pour la mise en page pourrait avoir un rôle `presentation` appliqué sur l'élément `table` pour retirer la sémantique de l'élément en lui-même ainsi que tout ses sous-éléments, comme l'en-tête de tableau ou même les données de tableau elles-mêmes. -<h2 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h2> +## Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle <code>presentation</code>.</p> +Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle `presentation`. -<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Exemple_1_Les_icônes-fontes">Exemple 1: Les icônes-fontes</h3> +### Exemple 1: Les icônes-fontes -<p>Une des recommandations d'accessibilité propose que les couleurs ou les représentations imagées (icônes par exemple) ne soient pas l'unique méthode pour transmettre une information. Ainsi nous pouvons partir du postula que votre icône est un complément décoratif à un texte explicite. Il faut donc lui appliquer un rôle <code>presentation</code>.</p> +Une des recommandations d'accessibilité propose que les couleurs ou les représentations imagées (icônes par exemple) ne soient pas l'unique méthode pour transmettre une information. Ainsi nous pouvons partir du postula que votre icône est un complément décoratif à un texte explicite. Il faut donc lui appliquer un rôle `presentation`. -<pre class="brush: html"><i class="icon-user" role="presentation"></i> -</pre> +```html +<i class="icon-user" role="presentation"></i> +``` -<h4 id="Exemples_concrets">Exemples concrets :</h4> +#### Exemples concrets : -<p>Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire.</p> +Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire. -<pre class="brush: html"><button type="button" aria-haspopup="true"> +```html +<button type="button" aria-haspopup="true"> Technologies - <span class="main-menu-arrow" role="presentation">▼</span> -</button> -</pre> + <span class="main-menu-arrow" role="presentation">▼</span> +</button> +``` -<h3 id="Exemple_2_Inline_SVG">Exemple 2 : Inline SVG</h3> +### Exemple 2 : Inline SVG -<p>De plus en plus d'images sont proposées sous la forme de compositions SVG directement insérées dans le document HTML. À l'image de l'attribut <code>alt</code> vide sur un élément <code>img</code>, il est possible d'indiquer qu'un élément SVG est purement décoratif grâce au rôle <code>presentation</code>.</p> +De plus en plus d'images sont proposées sous la forme de compositions SVG directement insérées dans le document HTML. À l'image de l'attribut `alt` vide sur un élément `img`, il est possible d'indiquer qu'un élément SVG est purement décoratif grâce au rôle `presentation`. -<pre class="brush: html"><svg role="presentation"> +```html +<svg role="presentation"> … -</svg></pre> +</svg> +``` -<h2 id="Autres_ressources">Autres ressources</h2> +## Autres ressources -<p>Using Aria - 2.9 Use of Role=presentation or Role=none: <a href="https://www.w3.org/TR/using-aria/#presentation">https://www.w3.org/TR/using-aria/#presentation</a></p> +Using Aria - 2.9 Use of Role=presentation or Role=none: <https://www.w3.org/TR/using-aria/#presentation> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md index 6a12160b24..2473934478 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md @@ -8,56 +8,52 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation du rôle <a href="https://www.w3.org/TR/wai-aria/#progressbar"><code>progressbar</code></a>.</p> +Cette technique présente l’utilisation du rôle [`progressbar`](https://www.w3.org/TR/wai-aria/#progressbar). -<p>Le rôle <code>progressbar</code> devrait être utilisé pour un élément qui affiche la progression d’un tâche prenant un certain temps ou s’effectuant en plusieurs étapes.</p> +Le rôle `progressbar` devrait être utilisé pour un élément qui affiche la progression d’un tâche prenant un certain temps ou s’effectuant en plusieurs étapes. -<p>Une barre de progression indique que la requête de l’utilisateur a été prise en compte et que l’application progresse vers la finalisation de l’action demandée. Si la valeur courante de la barre de progression peut être connue, le développeur pourra indiquer la progression à l’aide des attributs <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a>, <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin"><code>aria-valuemin</code></a> et <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax"><code>aria-valuemax</code></a>. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a>.</p> +Une barre de progression indique que la requête de l’utilisateur a été prise en compte et que l’application progresse vers la finalisation de l’action demandée. Si la valeur courante de la barre de progression peut être connue, le développeur pourra indiquer la progression à l’aide des attributs [`aria-valuenow`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow), [`aria-valuemin`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin) et [`aria-valuemax`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax). Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut [`aria-valuenow`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow). -<p>Lorsqu’une tâche progresse, la valeur <code>aria-valuenow</code> doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d’assistance.</p> +Lorsqu’une tâche progresse, la valeur `aria-valuenow` doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d’assistance. -<p>Si le rôle <code>progressbar</code> décrit la progression du chargement d’une zone particulière d’une page, l’auteur <strong>DOIT</strong> utiliser l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby"><code>aria-describedby</code></a> pour pointer vers l’état courant, et définir l’attribut <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-busy"><code>aria-busy</code></a> à <code>true</code> pour la zone jusqu’à la fin du chargement. Il n’est pas possible à l’utilisateur de modifier la valeur de <code>progressbar</code> car elle est toujours en lecture seule.</p> +Si le rôle `progressbar` décrit la progression du chargement d’une zone particulière d’une page, l’auteur **DOIT** utiliser l’attribut [`aria-describedby`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) pour pointer vers l’état courant, et définir l’attribut [`aria-busy`](https://www.w3.org/TR/wai-aria-1.1/#aria-busy) à `true` pour la zone jusqu’à la fin du chargement. Il n’est pas possible à l’utilisateur de modifier la valeur de `progressbar` car elle est toujours en lecture seule. -<div class="note"> - <p><strong>Note :</strong> généralement les technologies d’assistance retourneront la valeur de l’attribut <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow"><code>aria-valuenow</code></a> sous la forme d’un pourcentage d’une plage de valeurs comprise entre <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin"><code>aria-valuemin</code></a> et <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax"><code>aria-valuemax</code></a>, sauf si <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext"><code>aria-valuetext</code></a> est spécifié. Il est préférable de définir les valeurs pour les attributs <code>aria-valuemin</code>, <code>aria-valuemax</code> et <code>aria-valuenow</code> de façon appropriée pour ce calcul.</p></div> +> **Note :** généralement les technologies d’assistance retourneront la valeur de l’attribut [`aria-valuenow`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow) sous la forme d’un pourcentage d’une plage de valeurs comprise entre [`aria-valuemin`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin) et [`aria-valuemax`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax), sauf si [`aria-valuetext`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext) est spécifié. Il est préférable de définir les valeurs pour les attributs `aria-valuemin`, `aria-valuemax` et `aria-valuenow` de façon appropriée pour ce calcul. -<div class="note"> - <p><strong>Note :</strong> les éléments possédant le rôle <code>progressbar</code> ont une valeur <code>aria-readonly</code> implicite définie à <code>true</code>.</p> -</div> +> **Note :** les éléments possédant le rôle `progressbar` ont une valeur `aria-readonly` implicite définie à `true`. -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Les lecteurs devraient annoncer les mises à jour de la progression dès qu’elles se produisent. Si la barre de progression a un label, il devrait également être mentionné.</p> +Les lecteurs devraient annoncer les mises à jour de la progression dès qu’elles se produisent. Si la barre de progression a un label, il devrait également être mentionné. -<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1_barre_de_progression_simple_avec_pourcentage_de_progression">Exemple 1 : barre de progression simple avec pourcentage de progression</h4> +#### Exemple 1 : barre de progression simple avec pourcentage de progression -<pre class="brush: html"><div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div> -</pre> +```html +<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div> +``` -<h4 id="Exemple_2_Utilisation_de_aria-valuetext">Exemple 2 : Utilisation de <code>aria-valuetext</code></h4> +#### Exemple 2 : Utilisation de `aria-valuetext` -<pre class="brush: html"><div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2 : Copie des fichiers…" aria-valuemax="100"> +```html +<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2 : Copie des fichiers…" aria-valuemax="100"> Étape 2 : Copie des fichiers… -</div> - -</pre> +</div> +``` -<h4 id="Exemples_concrets">Exemples concrets :</h4> +#### Exemples concrets : -<h3 id="Notes">Notes</h3> +### Notes -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +### Attributs ARIA utilisés -<ul> - <li><a href="https://www.w3.org/TR/wai-aria/#progressbar">progressbar</a></li> - <li><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow">aria-valuenow</a></li> - <li><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a></li> - <li><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a></li> - <li><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext">aria-valuetext</a></li> -</ul>
\ No newline at end of file +- [progressbar](https://www.w3.org/TR/wai-aria/#progressbar) +- [aria-valuenow](https://www.w3.org/TR/wai-aria-1.1/#aria-valuenow) +- [aria-valuemin](https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin) +- [aria-valuemax](https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax) +- [aria-valuetext](https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md index 16da9c8804..9612cd75c3 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md @@ -8,100 +8,82 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#slider">slider</a>.</p> +Cette technique présente l’utilisation du rôle [slider](http://www.w3.org/TR/wai-aria/roles#slider). -<p>Le rôle <code>slider</code> est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle <code>slider</code> est assigné à la « <em>molette</em> », le contrôle qui est ajusté pour modifier la valeur. Typiquement, un autre élément est stylé pour représenter visuellement l'intervalle de valeurs possibles, et le curseur est positionné visuellement pour représenter la valeur dans cet intervalle. Lorsque l'utilisateur interagit avec la molette, l'application doit programmatiquement ajuster l'attribut <code>aria-valuenow</code> du curseur de défilement (et si possible <code>aria-valuetext</code>) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations.</p> +Le rôle `slider` est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle `slider` est assigné à la « *molette* », le contrôle qui est ajusté pour modifier la valeur. Typiquement, un autre élément est stylé pour représenter visuellement l'intervalle de valeurs possibles, et le curseur est positionné visuellement pour représenter la valeur dans cet intervalle. Lorsque l'utilisateur interagit avec la molette, l'application doit programmatiquement ajuster l'attribut `aria-valuenow` du curseur de défilement (et si possible `aria-valuetext`) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations. -<h4 id="Clavier_et_focus">Clavier et focus</h4> +#### Clavier et focus -<p>Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsque l'utilisateur tabule pour amener le focus sur le curseur, il doit arriver sur la molette : le contrôle qu'un utilisateur de souris fera glisser. Les touches flèches doivent agir de la façon suivante (attention toutefois, dans les applications, aux directions de flèches pour les langues s'écrivant de droite à gauche) :</p> +Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsque l'utilisateur tabule pour amener le focus sur le curseur, il doit arriver sur la molette : le contrôle qu'un utilisateur de souris fera glisser. Les touches flèches doivent agir de la façon suivante (attention toutefois, dans les applications, aux directions de flèches pour les langues s'écrivant de droite à gauche) : -<table> - <thead> - <tr> - <th scope="col">Touche(s)</th> - <th scope="col">Action</th> - </tr> - </thead> - <tbody> - <tr> - <td>Flèches haut et droite</td> - <td>Augmente la valeur sélectionnée</td> - </tr> - <tr> - <td>Flèches bas et gauche</td> - <td>Baisse la valeur sélectionnée</td> - </tr> - <tr> - <td>Page haut et Page bas</td> - <td>Augmente ou baisse facultativement la valeur selon un pas prédéfini (par exemple de 10 en 10 dans un intervalle de 0 à 100)</td> - </tr> - </tbody> -</table> +| Touche(s) | Action | +| ---------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| Flèches haut et droite | Augmente la valeur sélectionnée | +| Flèches bas et gauche | Baisse la valeur sélectionnée | +| Page haut et Page bas | Augmente ou baisse facultativement la valeur selon un pas prédéfini (par exemple de 10 en 10 dans un intervalle de 0 à 100) | -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1_Intervalle_numérique_simple">Exemple 1 : Intervalle numérique simple</h4> +#### Exemple 1 : Intervalle numérique simple -<p>Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une valeur entre 1 et 100. Le volume courant est 60. L'application actualisera programmatiquement la valeur de <code>aria-valuenow</code> en réponse à l'action de l'utilisateur.</p> +Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une valeur entre 1 et 100. Le volume courant est 60. L'application actualisera programmatiquement la valeur de `aria-valuenow` en réponse à l'action de l'utilisateur. -<pre class="brush: html"><div id="slider-label">Volume</div> +```html +<div id="slider-label">Volume</div> -<div class="vol-slider"> - <a href="#" id="vol-handle" class="handle" role="slider" aria-labelledby="slider-label" +<div class="vol-slider"> + <a href="#" id="vol-handle" class="handle" role="slider" aria-labelledby="slider-label" aria-valuemin="1" aria-valuemax="100" - aria-valuenow="60"> - </a> -</div> -</pre> + aria-valuenow="60"> + </a> +</div> +``` -<h4 id="Exemple_2_Valeurs_texte">Exemple 2 : Valeurs texte</h4> +#### Exemple 2 : Valeurs texte -<p>Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémantiquement , un nombre. Dans ces cas là, l'attribut <code>aria-valuetext</code> est utilisé pour donner le texte approprié pour la valeur sélectionnée. Dans l'exemple ci-dessous, le slider est utilisé pour sélectionner un jour de la semaine .</p> +Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémantiquement , un nombre. Dans ces cas là, l'attribut `aria-valuetext` est utilisé pour donner le texte approprié pour la valeur sélectionnée. Dans l'exemple ci-dessous, le slider est utilisé pour sélectionner un jour de la semaine . -<pre class="brush: html"><div id="slider-label">Jour de la semaine :</div> +```html +<div id="slider-label">Jour de la semaine :</div> -<div class="day-slider"> - <a href="#" id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="slider-label" +<div class="day-slider"> + <a href="#" id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="slider-label" aria-valuemin="1" aria-valuemax="7" aria-valuenow="2" - aria-valuetext="Lundi"> - </a> -</div> -</pre> + aria-valuetext="Lundi"> + </a> +</div> +``` -<p>L'extrait de code ci-dessous décrit une fonction qui répond à l'action de l'utilisateur et actualise les attributs <code>aria-valuenow</code> et <code>aria-valuetext</code> :</p> +L'extrait de code ci-dessous décrit une fonction qui répond à l'action de l'utilisateur et actualise les attributs `aria-valuenow` et `aria-valuetext` : -<pre class="brush: js">var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]; +```js +var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]; var updateSlider = function (newValue) { var handle = document.getElementById("day-handle"); handle.setAttribute("aria-valuenow", newValue.toString()); handle.setAttribute("aria-valuetext", dayNames[newValue]); }; -</pre> +``` -<h3 id="Notes">Notes</h3> +### Notes -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +### Attributs ARIA utilisés -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin">aria-valuemin</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax">aria-valuemax</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow">aria-valuenow</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext">aria-valuetext</a> ;</li> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation">aria-orientation</a>.</li> -</ul> +- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; +- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) ; +- [aria-orientation](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation). -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/roles#slider">Spécifications WAI-ARIA pour le rôle <code>slider</code></a></li> -</ul> +- [Spécifications WAI-ARIA pour le rôle `slider`](http://www.w3.org/TR/wai-aria/roles#slider) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md index 38827d4db1..2c2e2acb40 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md @@ -8,43 +8,52 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status --- -<h3 id="Description">Description</h3> - -<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#status">status</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> - -<p>Le rôle <code>status</code> est un type de <a href="http://www.w3.org/WAI/PF/aria/terms#def_liveregion">zone live</a> et un conteneur dont le contenu est un message d’informations destiné à l’utilisateur. Ce message n’est pas assez important pour justifier une <a href="http://www.w3.org/TR/wai-aria/roles#alert">alerte</a>. Il est souvent présenté comme une barre d’état. Lorsque le rôle est ajouté à un élément, le navigateur émettra un événement <code>status</code> accessible aux produits de technologies d’assistance qui pourront alors le notifier à l’utilisateur.</p> -<p>Le contenu des informations d’état doit être fourni dans un objet d’état et il faut s’assurer que cet objet ne reçoive pas le focus. Si une autre partie de la page contrôle ce qui s’affiche dans l’objet d’état, la relation doit être explicitement définie à l’aide de l’attribut <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls">aria-controls</a>.</p> -<p>Les technologies d’assistance devraient réserver des cellules dans la grille Braille pour rendre l’état.</p> -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> -<p>Lorsque le rôle <code>status</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> -<ul> - <li>Présenter l’élément ayant un rôle de <code>status</code> à l’API d’accessibilité du système d’exploitation ;</li> - <li>Déclencher un événement <code>status</code> accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> -</ul> -<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> -<ul> - <li>Les lecteurs d’écran peuvent fournir une touche spécifique pour annoncer l’état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut <code>aria-live=”assertive”</code> soit défini dans quel cas l'utilisateur peut être interrompu ;</li> - <li>Les loupes d’écran devraient agrandir l’objet d’état.</li> -</ul> -<div class="note"> - <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> -</div> -<h3 id="Exemples">Exemples</h3> -<h4 id="Exemple_1_ajout_du_rôle_status_dans_le_code_HTML">Exemple 1 : ajout du rôle <code>status</code> dans le code HTML</h4> -<p>L’extrait de code ci-dessous montre comment le rôle <code>status</code> est ajouté directement dans le code source HTML.</p> -<pre class="brush: html"><p role="status">Vos modifications ont été automatiquement enregistrées.</p> -</pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> -<h3 id="Notes">Notes</h3> -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/roles#status">status</a>.</li> -</ul> -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> -<ul> - <li>Rôle <a href="http://www.w3.org/TR/wai-aria/roles#alert">alert</a>.</li> -</ul> -<h3 id="Autres_ressources">Autres ressources</h3> -<ul> - <li>Bonnes pratiques ARIA – Implémentation des zones live : <a href="http://www.w3.org/TR/wai-aria-practices/#LiveRegions">#LiveRegions</a>.</li> -</ul> +### Description + +Cette technique présente l’utilisation du rôle [status](http://www.w3.org/TR/wai-aria/roles#status) et décrit les effets produits sur les navigateurs et les technologies d’assistance. + +Le rôle `status` est un type de [zone live](http://www.w3.org/WAI/PF/aria/terms#def_liveregion) et un conteneur dont le contenu est un message d’informations destiné à l’utilisateur. Ce message n’est pas assez important pour justifier une [alerte](http://www.w3.org/TR/wai-aria/roles#alert). Il est souvent présenté comme une barre d’état. Lorsque le rôle est ajouté à un élément, le navigateur émettra un événement `status` accessible aux produits de technologies d’assistance qui pourront alors le notifier à l’utilisateur. + +Le contenu des informations d’état doit être fourni dans un objet d’état et il faut s’assurer que cet objet ne reçoive pas le focus. Si une autre partie de la page contrôle ce qui s’affiche dans l’objet d’état, la relation doit être explicitement définie à l’aide de l’attribut [aria-controls](http://www.w3.org/TR/wai-aria/states_and_properties#aria-controls). + +Les technologies d’assistance devraient réserver des cellules dans la grille Braille pour rendre l’état. + +### Effets possibles sur les agents utilisateurs et les technologies d’assistance + +Lorsque le rôle `status` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : + +- Présenter l’élément ayant un rôle de `status` à l’API d’accessibilité du système d’exploitation ; +- Déclencher un événement `status` accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. + +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : + +- Les lecteurs d’écran peuvent fournir une touche spécifique pour annoncer l’état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut `aria-live=”assertive”` soit défini dans quel cas l'utilisateur peut être interrompu ; +- Les loupes d’écran devraient agrandir l’objet d’état. + +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. + +### Exemples + +#### Exemple 1 : ajout du rôle `status` dans le code HTML + +L’extrait de code ci-dessous montre comment le rôle `status` est ajouté directement dans le code source HTML. + +```html +<p role="status">Vos modifications ont été automatiquement enregistrées.</p> +``` + +#### Exemples concrets : + +### Notes + +### Attributs ARIA utilisés + +- [status](http://www.w3.org/TR/wai-aria/roles#status). + +### Techniques ARIA connexes + +- Rôle [alert](http://www.w3.org/TR/wai-aria/roles#alert). + +### Autres ressources + +- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). diff --git a/files/fr/web/accessibility/aria/forms/alerts/index.md b/files/fr/web/accessibility/aria/forms/alerts/index.md index 588633fad9..fa0f7bcd60 100644 --- a/files/fr/web/accessibility/aria/forms/alerts/index.md +++ b/files/fr/web/accessibility/aria/forms/alerts/index.md @@ -9,62 +9,62 @@ tags: translation_of: Web/Accessibility/ARIA/forms/alerts original_slug: Accessibilité/ARIA/formulaires/Alertes --- -<h2 id="Le_problème">Le problème</h2> +## Le problème -<p>Vous avez un formulaire – par exemple un formulaire de contact – pour lequel vous voulez ajouter des contrôles d’erreurs accessibles. Les problèmes les plus courants sont une adresse électronique non valide, ou un nom qui ne contient pas un nom de famille ou un prénom.</p> +Vous avez un formulaire – par exemple un formulaire de contact – pour lequel vous voulez ajouter des contrôles d’erreurs accessibles. Les problèmes les plus courants sont une adresse électronique non valide, ou un nom qui ne contient pas un nom de famille ou un prénom. -<h2 id="Le_formulaire">Le formulaire</h2> +## Le formulaire -<p>Tout d’abord, veuillez lire la <a href="/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires" rel="nofollow">technique <code>aria-required</code></a> pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.</p> +Tout d’abord, veuillez lire la [technique `aria-required`](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement. -<p>Voici un formulaire simple :</p> +Voici un formulaire simple : -<pre class="brush: html"><form method="post" action="post.php"> -<fieldset> - <legend>Veuillez saisir les détails du contact</legend> - <label for="nom">Votre nom (obligatoire):</label> - <input name="nom" id="nom" aria-required="true"/> - <br /> - <label for="courriel">Adresse électronique (obligatoire):</label> - <input name="courriel" id="courriel" aria-required="true"/> - <br /> - <label for="siteweb">Site Web (facultatif):</label> - <input name="siteweb" id="siteweb"/> -</fieldset> -<label for="message">Veuillez saisir votre message (obligatoire):</label> -<br /> -<textarea name="message" id="message" rows="5" cols="80" - aria-required="true"></textarea> -<br /> -<input type="submit" name="submit" value="Envoyer le message"/> -<input type="reset" name="reset" value="Réinitialiser le formulaire"/> -</form> -</pre> +```html +<form method="post" action="post.php"> +<fieldset> + <legend>Veuillez saisir les détails du contact</legend> + <label for="nom">Votre nom (obligatoire):</label> + <input name="nom" id="nom" aria-required="true"/> + <br /> + <label for="courriel">Adresse électronique (obligatoire):</label> + <input name="courriel" id="courriel" aria-required="true"/> + <br /> + <label for="siteweb">Site Web (facultatif):</label> + <input name="siteweb" id="siteweb"/> +</fieldset> +<label for="message">Veuillez saisir votre message (obligatoire):</label> +<br /> +<textarea name="message" id="message" rows="5" cols="80" + aria-required="true"></textarea> +<br /> +<input type="submit" name="submit" value="Envoyer le message"/> +<input type="reset" name="reset" value="Réinitialiser le formulaire"/> +</form> +``` -<p>Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-)</p> +Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-) -<h2 id="Vérification_de_la_validité_et_avertissement_de_l’utilisateur">Vérification de la validité et avertissement de l’utilisateur</h2> +## Vérification de la validité et avertissement de l’utilisateur -<p>Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes :</p> +Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes : -<ol> - <li>Vérifions que l’adresse électronique pour le nom saisi sont valides. Pour rester simple, nous vérifions si l’adresse contient un symbole « @ », et si le nom saisi contient au moins une espace « [ ] ».</li> - <li>Définissons l’attribut <code>aria-invalid</code> du champ et donnons lui la valeur <code>true</code>.</li> - <li>Notifions à l’utilisateur via une alerte que la valeur saisie n’est pas correcte. Plutôt que d’utiliser la boîte de dialogue envahissante créée par la fonction JavaScript <code>alert</code>, nous utiliserons pour ceci un simple composant WAI-ARIA. Cela avertira l’utilisateur, mais le laissera continuer à interagir avec le formulaire sans l’interrompre.</li> -</ol> +1. Vérifions que l’adresse électronique pour le nom saisi sont valides. Pour rester simple, nous vérifions si l’adresse contient un symbole « @ », et si le nom saisi contient au moins une espace « \[ ] ». +2. Définissons l’attribut `aria-invalid` du champ et donnons lui la valeur `true`. +3. Notifions à l’utilisateur via une alerte que la valeur saisie n’est pas correcte. Plutôt que d’utiliser la boîte de dialogue envahissante créée par la fonction JavaScript `alert`, nous utiliserons pour ceci un simple composant WAI-ARIA. Cela avertira l’utilisateur, mais le laissera continuer à interagir avec le formulaire sans l’interrompre. -<p>Tout ceci se passe lorsque le champ de saisi perd le focus, c’est-à-dire dans le gestionnaire d’événements <code>onblur</code>.</p> +Tout ceci se passe lorsque le champ de saisi perd le focus, c’est-à-dire dans le gestionnaire d’événements `onblur`. -<p>La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} :</p> +La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} : -<pre class="brush: js"><script type="application/javascript"> +```js +<script type="application/javascript"> function removeOldAlert() { var oldAlert = document.getElementById("alert"); if (oldAlert) document.body.removeChild(oldAlert); } -<br/> +<br/> function addAlert(aMsg) { removeOldAlert(); @@ -75,11 +75,11 @@ function addAlert(aMsg) newAlert.appendChild(msg); document.body.appendChild(newAlert); } -<br/> +<br/> function checkValidity(aID, aSearchTerm, aMsg) { var elem = document.getElementById(aID); - var invalid = (elem.value.indexOf(aSearchTerm) < 0); + var invalid = (elem.value.indexOf(aSearchTerm) < 0); if (invalid) { elem.setAttribute("aria-invalid", "true"); addAlert(aMsg); @@ -88,65 +88,60 @@ function checkValidity(aID, aSearchTerm, aMsg) removeOldAlert(); } } -</script> -</pre> +</script> +``` -<h2 id="La_fonction_checkValidity_2">La fonction <code>checkValidity</code></h2> +## La fonction `checkValidity` -<p>Le cœur est la fonction <code>checkValidity</code>. Elle accepte trois paramètres : l’ID du champ de saisi qui doit être validé, le terme à recherche pour assurer la validité, et le message d’erreur à insérer dans l’alerte.</p> +Le cœur est la fonction `checkValidity`. Elle accepte trois paramètres : l’ID du champ de saisi qui doit être validé, le terme à recherche pour assurer la validité, et le message d’erreur à insérer dans l’alerte. -<p>Pour déterminer la validité, la fonction vérifie si l’<code>indexOf</code> de la valeur d’entrée est plus grande que <code>-1</code>. Une valeur de <code>-1</code> ou moins est retournée si l’index du terme recherché n’a pas pu être trouvée dans la valeur.</p> +Pour déterminer la validité, la fonction vérifie si l’`indexOf` de la valeur d’entrée est plus grande que `-1`. Une valeur de `-1` ou moins est retournée si l’index du terme recherché n’a pas pu être trouvée dans la valeur. -<p>Si non valide, la fonction fait deux choses :</p> +Si non valide, la fonction fait deux choses : -<ol> - <li>Elle définit l’attribut <code>aria-invalid</code> de l’élément à <code>true</code>, ce qui indiquera au lecteur d’écran que le contenu n’est pas correct.</li> - <li>Elle appellera la fonction <code>addAlert</code> pour ajouter une alerte avec le message d’erreur donné.</li> -</ol> +1. Elle définit l’attribut `aria-invalid` de l’élément à `true`, ce qui indiquera au lecteur d’écran que le contenu n’est pas correct. +2. Elle appellera la fonction `addAlert` pour ajouter une alerte avec le message d’erreur donné. -<p>Si le terme recherché est trouvé, l’attribut <code>aria-invalid</code> est réinitialisé à <code>true</code>. De plus, toute alerte qui subsisterait serait supprimée.</p> +Si le terme recherché est trouvé, l’attribut `aria-invalid` est réinitialisé à `true`. De plus, toute alerte qui subsisterait serait supprimée. -<h2 id="La_fonction_addAlert_2">La fonction <code>addAlert</code></h2> +## La fonction `addAlert` -<p>Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant <code>alert</code>, et si elle en trouve un, l’enlève du modèle objet de document (DOM).</p> +Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant `alert`, et si elle en trouve un, l’enlève du modèle objet de document (DOM). -<p>Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID <code>alert</code>. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module <a href="http://www.w3.org/TR/xhtml-role/">XHTML Role Attribut</a> qui a été tout simplement porté sur HTML pour plus de simplicité.</p> +Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID `alert`. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module [XHTML Role Attribut](http://www.w3.org/TR/xhtml-role/) qui a été tout simplement porté sur HTML pour plus de simplicité. -<p>Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document.</p> +Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document. -<p>Au moment où cela se produira, Firefox déclenchera un événement « alert » pour la technologie d’assistance lorsque la {{ HTMLElement("div") }} apparaîtra. La plupart des lecteurs d’écran prendront celui-ci automatiquement et le liront. C’est similaire à la barre de notification de Firefox qui apparaît lorsque vous désirez mémoriser un mot de passe. Cette alerte que nous venons de créer n’a pas de bouton sur lequel cliquer, elle se contente de nous dire ce qui est erroné.</p> +Au moment où cela se produira, Firefox déclenchera un événement « alert » pour la technologie d’assistance lorsque la {{ HTMLElement("div") }} apparaîtra. La plupart des lecteurs d’écran prendront celui-ci automatiquement et le liront. C’est similaire à la barre de notification de Firefox qui apparaît lorsque vous désirez mémoriser un mot de passe. Cette alerte que nous venons de créer n’a pas de bouton sur lequel cliquer, elle se contente de nous dire ce qui est erroné. -<h2 id="Ajouter_de_la_magie_à_l’événement_onblur">Ajouter de la magie à l’événement <code>onblur</code></h2> +## Ajouter de la magie à l’événement `onblur` -<p>Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. Nous avons besoin de modifier les deux {{ HTMLElement("input") }} de l’adresse électronique et du nom par ce qui suit :</p> +Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. Nous avons besoin de modifier les deux {{ HTMLElement("input") }} de l’adresse électronique et du nom par ce qui suit : -<pre class="brush: html"><input name="nom" id="nom" aria-required="true" - onblur="checkValidity('nom', ' ', 'Le nom saisi est invalide&nbsp;!');"/> -<br /> -<input name="courriel" id="courriel" aria-required="true" - onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie est invalide&nbsp;!');"/> -</pre> +```html +<input name="nom" id="nom" aria-required="true" + onblur="checkValidity('nom', ' ', 'Le nom saisi est invalide !');"/> +<br /> +<input name="courriel" id="courriel" aria-required="true" + onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie est invalide !');"/> +``` -<p><strong>Test de l’exemple</strong></p> +**Test de l’exemple** -<p>Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit :</p> +Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit : -<ol> - <li>Saisissez uniquement votre prénom dans le champ « Nom ». Lorsque vous changerez de champ avec la touche tabulation, vous entendrez une alerte vous avertissant que vous avez saisi un nom invalide. Vous pourrez alors revenir en arrière et corriger l’erreur.</li> - <li>Saisissez une adresse électronique sans le symbole « @ ». Lorsque vous changerez de champ avec la touche tabulation, vous devriez entendre un avertissement vous indiquant que vous avez saisi une adresse électronique invalide.</li> -</ol> +1. Saisissez uniquement votre prénom dans le champ « Nom ». Lorsque vous changerez de champ avec la touche tabulation, vous entendrez une alerte vous avertissant que vous avez saisi un nom invalide. Vous pourrez alors revenir en arrière et corriger l’erreur. +2. Saisissez une adresse électronique sans le symbole « @ ». Lorsque vous changerez de champ avec la touche tabulation, vous devriez entendre un avertissement vous indiquant que vous avez saisi une adresse électronique invalide. -<p>Dans les deux cas, lorsque le focus revient sur le champ concerné, votre lecteur d’écran devrait vous dire que le champ est invalide. JAWS 9 prend en charge cette fonction, mais pas JAWS 8, aussi il se peut que ça ne fonctionne pas pour toutes les versions des lecteurs d’écran pris en charge.</p> +Dans les deux cas, lorsque le focus revient sur le champ concerné, votre lecteur d’écran devrait vous dire que le champ est invalide. JAWS 9 prend en charge cette fonction, mais pas JAWS 8, aussi il se peut que ça ne fonctionne pas pour toutes les versions des lecteurs d’écran pris en charge. -<h2 id="Quelques_questions_qu’on_peut_se_poser">Quelques questions qu’on peut se poser</h2> +## Quelques questions qu’on peut se poser -<dl> - <dt>Q. Pourquoi mettre à la fois un <code>(required)</code> dans le texte du label et l’attribut <code>aria-required</code> sur certains éléments {{ HTMLElement("input") }} ?</dt> - <dd>R. Si nous avions un véritable formulaire dynamique et que le site était visité par un navigateur ne prenant pas en charge ARIA, nous voudrions tout de même donner une indication sur l’obligation de remplir le champ.</dd> - <dt>Q. Pourquoi ne remettez-vous pas automatiquement le focus sur le champ invalide ?</dt> - <dd>R. Cela n’est pas autorisé par, au moins, la spécification de l’API Windows, et probablement par d’autres. De plus, laisser le focus se déplacer sans réelle intervention de l’utilisateur n’est généralement pas considéré comme une chose à faire.</dd> -</dl> +- Q. Pourquoi mettre à la fois un `(required)` dans le texte du label et l’attribut `aria-required` sur certains éléments {{ HTMLElement("input") }} ? + - : R. Si nous avions un véritable formulaire dynamique et que le site était visité par un navigateur ne prenant pas en charge ARIA, nous voudrions tout de même donner une indication sur l’obligation de remplir le champ. +- Q. Pourquoi ne remettez-vous pas automatiquement le focus sur le champ invalide ? + - : R. Cela n’est pas autorisé par, au moins, la spécification de l’API Windows, et probablement par d’autres. De plus, laisser le focus se déplacer sans réelle intervention de l’utilisateur n’est généralement pas considéré comme une chose à faire. -<h2 id="Conclusion">Conclusion</h2> +## Conclusion -<p>L’accessibilité des sites web est grandement améliorée lorsqu’on fournit des alertes accessibles pour la validation côté client. Il n’y a rien de plus frustrant pour un utilisateur que de remplir un formulaire d’une vingtaine de champs, voire plus, de le soumettre, de constater que seuls quelques champs ne sont pas correctement renseignés et de devoir tout recommencer depuis le début pour s’assurer que les valeurs sont correctement mémorisées, ou de fournir des informations redondantes.</p> +L’accessibilité des sites web est grandement améliorée lorsqu’on fournit des alertes accessibles pour la validation côté client. Il n’y a rien de plus frustrant pour un utilisateur que de remplir un formulaire d’une vingtaine de champs, voire plus, de le soumettre, de constater que seuls quelques champs ne sont pas correctement renseignés et de devoir tout recommencer depuis le début pour s’assurer que les valeurs sont correctement mémorisées, ou de fournir des informations redondantes. diff --git a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md index bee7b3fe5e..c56dc26119 100644 --- a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md +++ b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md @@ -8,113 +8,119 @@ tags: translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les_formulaires --- -<h2 id="Labels_de_formulaire">Labels de formulaire</h2> - -<p>Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant.</p> - -<p>L’exemple ci-dessous montre un formulaire basique avec des labels. Remarquez que chaque élément {{ HTMLElement("input") }} possède un <code>id</code>, et chaque élément {{ HTMLElement("label") }} a un attribut <code>for</code> indiquant l’<code>id</code> de l’{{ HTMLElement("input") }} associé.</p> - -<p><em>Exemple 1. Formulaire basique avec labels</em></p> - -<pre class="brush: html"><form> - <ul> - <li> - <input id="vin-1" type="checkbox" value="riesling"/> - <label for="vin-1">Berg Rottland Riesling</label> - </li> - <li> - <input id="vin-2" type="checkbox" value="weissbergunder"/> - <label for="vin-2">Weissbergunder</label> - </li> - <li> - <input id="vin-3" type="checkbox" value="pinot-grigio"/> - <label for="vin-3">Pinot Grigio</label> - </li> - <li> - <input id="vin-4" type="checkbox" value="gewurztraminer"/> - <label for="vin-4">Gewürztraminer</label> - </li> - </ul> -</form> -</pre> - -<h2 id="Labelliser_avec_ARIA">Labelliser avec ARIA</h2> - -<p>L’élément HTML {{ HTMLElement("label") }} est approprié pour les éléments liés aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques et utilisent les éléments {{ HTMLElement("div") }} ou {{ HTMLElement("span") }}. <a href="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, la spécification <strong>Accessible Rich Internet Applications</strong> (Applications Internet Riches Accessibles) de la <a href="http://www.w3.org/WAI/">Web Accessibility Initiative</a> (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a> dans ces cas de figure.</p> - -<p>L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut <code>aria-labelledby</code> de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’<code>id</code> de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio.</p> - -<p><em>Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée </em></p> - -<pre class="brush: html"><h3 id="rg1_label">Options du déjeuner</h3> - -<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"> - <li id="r1" tabindex="-1" role="radio" aria-checked="false"> - <img role="presentation" src="radio-unchecked.gif" /> Thaï - </li> - <li id="r2" tabindex="-1" role="radio" aria-checked="false"> - <img role="presentation" src="radio-unchecked.gif" /> Subway - </li> - <li id="r3" tabindex="0" role="radio" aria-checked="true"> - <img role="presentation" src="radio-checked.gif" /> Libanais - </li> -</ul> -</pre> +## Labels de formulaire + +Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant. + +L’exemple ci-dessous montre un formulaire basique avec des labels. Remarquez que chaque élément {{ HTMLElement("input") }} possède un `id`, et chaque élément {{ HTMLElement("label") }} a un attribut `for` indiquant l’`id` de l’{{ HTMLElement("input") }} associé. + +_Exemple 1. Formulaire basique avec labels_ + +```html +<form> + <ul> + <li> + <input id="vin-1" type="checkbox" value="riesling"/> + <label for="vin-1">Berg Rottland Riesling</label> + </li> + <li> + <input id="vin-2" type="checkbox" value="weissbergunder"/> + <label for="vin-2">Weissbergunder</label> + </li> + <li> + <input id="vin-3" type="checkbox" value="pinot-grigio"/> + <label for="vin-3">Pinot Grigio</label> + </li> + <li> + <input id="vin-4" type="checkbox" value="gewurztraminer"/> + <label for="vin-4">Gewürztraminer</label> + </li> + </ul> +</form> +``` + +## Labelliser avec ARIA + +L’élément HTML {{ HTMLElement("label") }} est approprié pour les éléments liés aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques et utilisent les éléments {{ HTMLElement("div") }} ou {{ HTMLElement("span") }}. [WAI-ARIA](http://www.w3.org/WAI/intro/aria.php), la spécification **Accessible Rich Internet Applications** (Applications Internet Riches Accessibles) de la [Web Accessibility Initiative](http://www.w3.org/WAI/) (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut [`aria-labelledby`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby) dans ces cas de figure. + +L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut `aria-labelledby` de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’`id` de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio. + +_Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée_ + +```html +<h3 id="rg1_label">Options du déjeuner</h3> + +<ul class="radiogroup" id="rg1" role="radiogroup" aria-labelledby="rg1_label"> + <li id="r1" tabindex="-1" role="radio" aria-checked="false"> + <img role="presentation" src="radio-unchecked.gif" /> Thaï + </li> + <li id="r2" tabindex="-1" role="radio" aria-checked="false"> + <img role="presentation" src="radio-unchecked.gif" /> Subway + </li> + <li id="r3" tabindex="0" role="radio" aria-checked="true"> + <img role="presentation" src="radio-checked.gif" /> Libanais + </li> +</ul> +``` -<h2 id="Decrire_avec_ARIA">Décrire avec ARIA</h2> +## Décrire avec ARIA -<p>Les contrôles de formulaire peuvent parfois avoir une description qui leur est associée, en plus du label. ARIA fournit l’attribut <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby"><code>aria-describedby</code></a> pour associer directement une description à un contrôle donné.</p> +Les contrôles de formulaire peuvent parfois avoir une description qui leur est associée, en plus du label. ARIA fournit l’attribut [`aria-describedby`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby) pour associer directement une description à un contrôle donné. -<p>L’exemple ci-dessous montre un élément {{ HTMLElement("button") }} décrit par une phrase contenue dans un élément {{ HTMLElement("div") }} séparé. L’attribut <code>aria-describedby</code> du {{ HTMLElement("button") }} fait référence à l’<code>id</code> de l’élément {{ HTMLElement("div") }}.</p> +L’exemple ci-dessous montre un élément {{ HTMLElement("button") }} décrit par une phrase contenue dans un élément {{ HTMLElement("div") }} séparé. L’attribut `aria-describedby` du {{ HTMLElement("button") }} fait référence à l’`id` de l’élément {{ HTMLElement("div") }}. -<p><em>Exemple 3. Un bouton décrit par un élément séparé.</em></p> +_Exemple 3. Un bouton décrit par un élément séparé._ -<pre class="brush: html"><button aria-describedby="descriptionRevert">Annuler</button> -<div id="descriptionRevert">L’annulation supprimera toutes les modifications - intervenues depuis le dernier enregistrement.</div></pre> +```html +<button aria-describedby="descriptionRevert">Annuler</button> +<div id="descriptionRevert">L’annulation supprimera toutes les modifications + intervenues depuis le dernier enregistrement.</div> +``` -<p>(Notez que l’attribut <code>aria-describedby</code> est utilisé de différentes façons, en plus des contrôles de formulaires.)</p> +(Notez que l’attribut `aria-describedby` est utilisé de différentes façons, en plus des contrôles de formulaires.) -<h2 id="Champs_obligatoires_et_invalides">Champs obligatoires et invalides</h2> +## Champs obligatoires et invalides -<p>Les développeur Web utilisent souvant des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu :</p> +Les développeur Web utilisent souvant des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu : -<ul> - <li>La propriété <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><code>aria-required</code></a> peut être appliquée à un élément de formulaire pour indiquer à une technologie d’assistance qu’il est obligatoire pour compléter le formulaire.</li> - <li>L’état <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><code>aria-invalid</code></a> peut être programmatiquement appliquée pour indiquer à une technologie d’assistance quel champ contient des données incorrectes, afin que l’utilisateur sache qu’il a saisi des données invalides.</li> -</ul> +- La propriété [`aria-required`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required) peut être appliquée à un élément de formulaire pour indiquer à une technologie d’assistance qu’il est obligatoire pour compléter le formulaire. +- L’état [`aria-invalid`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid) peut être programmatiquement appliquée pour indiquer à une technologie d’assistance quel champ contient des données incorrectes, afin que l’utilisateur sache qu’il a saisi des données invalides. -<p>L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs <code>aria-required</code> sont définis à <code>true</code> (en plus de l’astérisque en début de champ) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut <code>aria-invalid</code> du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément).</p> +L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs `aria-required` sont définis à `true` (en plus de l’astérisque en début de champ) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut `aria-invalid` du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément). -<p><em>Exemple 4a. Un formulaire avec des champs obligatoires.</em></p> +_Exemple 4a. Un formulaire avec des champs obligatoires._ -<pre class="brush: html"><form> - <div> - <label for="nom">* Nom :</label> - <input type="text" value="nom" id="nom" aria-required="true"/> - </div> - <div> - <label for="telephone">Téléphone :</label> - <input type="text" value="telephone" id="telephone" aria-required="false"/> - </div> - <div> - <label for="courriel">* Courriel :</label> - <input type="text" value="courriel" id="courriel" aria-required="true"/> - </div> -</form></pre> +```html +<form> + <div> + <label for="nom">* Nom :</label> + <input type="text" value="nom" id="nom" aria-required="true"/> + </div> + <div> + <label for="telephone">Téléphone :</label> + <input type="text" value="telephone" id="telephone" aria-required="false"/> + </div> + <div> + <label for="courriel">* Courriel :</label> + <input type="text" value="courriel" id="courriel" aria-required="true"/> + </div> +</form> +``` -<p><em>Exemple 4b. Portion d’un script qui valide une entrée de formulaire.</em></p> +_Exemple 4b. Portion d’un script qui valide une entrée de formulaire._ -<pre class="brush: js">var validate = function () { +```js +var validate = function () { var emailElement = document.getElementById(emailFieldId); var valid = emailValid(formData.email); // retourne true si valide, false dans le cas contraire emailElement.setAttribute("aria-invalid", !valid); setElementBorderColour(emailElement, valid); // colore la bordure en rouge sur le second argument est false -};</pre> +}; +``` -<h2 id="Fournir_des_messages_d_erreur_utiles">Fournir des messages d’erreur utiles</h2> +## Fournir des messages d’erreur utiles -<p>Découvrez comment utiliser <a href="/fr/docs/Accessibilité/ARIA/formulaires/Alertes">les alertes ARIA pour améliorer les formulaires</a>.</p> +Découvrez comment utiliser [les alertes ARIA pour améliorer les formulaires](/fr/docs/Accessibilité/ARIA/formulaires/Alertes). -<p>Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document <a href="http://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices</a>.</p> +Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document [WAI-ARIA Authoring Practices](http://www.w3.org/TR/wai-aria-practices/). diff --git a/files/fr/web/accessibility/aria/forms/index.md b/files/fr/web/accessibility/aria/forms/index.md index 8759c01cbe..c6ae6daf13 100644 --- a/files/fr/web/accessibility/aria/forms/index.md +++ b/files/fr/web/accessibility/aria/forms/index.md @@ -9,12 +9,10 @@ tags: translation_of: Web/Accessibility/ARIA/forms original_slug: Accessibilité/ARIA/formulaires --- -<p>Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web :</p> +Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web : -<ul> - <li><a href="/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires">Indications élémentaires pour les formulaires</a> : ajouter des suggestions et des descriptions pour les champs invalides ou obligatoires</li> - <li><a href="/fr/Accessibilité/ARIA/formulaires/Alertes">Alertes</a> : Utiliser les alertes pour fournir des messages d'erreur de validation côté client</li> - <li><a href="/fr/Accessibilité/ARIA/formulaires/Labels_multi-options">Labels multi-options</a>: fournir des labels de formulaire complexes avec un contrôle pour chaque label</li> -</ul> +- [Indications élémentaires pour les formulaires](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) : ajouter des suggestions et des descriptions pour les champs invalides ou obligatoires +- [Alertes](/fr/Accessibilité/ARIA/formulaires/Alertes) : Utiliser les alertes pour fournir des messages d'erreur de validation côté client +- [Labels multi-options](/fr/Accessibilité/ARIA/formulaires/Labels_multi-options): fournir des labels de formulaire complexes avec un contrôle pour chaque label -<p>Voir également l’<a href="https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais)</a> (version archivée par archive.org), couvrant pour une bonne part le même sujet.</p> +Voir également l’[article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais)](https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html) (version archivée par archive.org), couvrant pour une bonne part le même sujet. diff --git a/files/fr/web/accessibility/aria/forms/multipart_labels/index.md b/files/fr/web/accessibility/aria/forms/multipart_labels/index.md index 5cb8dfa611..569ba26a3c 100644 --- a/files/fr/web/accessibility/aria/forms/multipart_labels/index.md +++ b/files/fr/web/accessibility/aria/forms/multipart_labels/index.md @@ -9,30 +9,31 @@ tags: translation_of: Web/Accessibility/ARIA/forms/Multipart_labels original_slug: Accessibilité/ARIA/formulaires/Labels_multi-options --- -<h2 id="Utiliser_ARIA_avec_des_labels_comportant_des_champs">Utiliser ARIA avec des labels comportant des champs</h2> +## Utiliser ARIA avec des labels comportant des champs -<h3 id="Problem_2">Problème</h3> +### Problème -<p>Un formulaire pose une question à un utilisateur, mais la zone de réponse est une partie de la phrase qui constitue la question. Un exemple classique que nous connaissons tous dans notre navigateur, c’est la paramètre des préférences « <code>Effacer l’historique après [x] jours</code>. » « <code>Effacer l’historique après</code> » est à la gauche de la boîte texte, « <code>x</code> » est le nombre, par exemple 21, et le mot « <code>jours</code> » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre.</p> +Un formulaire pose une question à un utilisateur, mais la zone de réponse est une partie de la phrase qui constitue la question. Un exemple classique que nous connaissons tous dans notre navigateur, c’est la paramètre des préférences « `Effacer l’historique après [x] jours`. » « `Effacer l’historique après` » est à la gauche de la boîte texte, « `x` » est le nombre, par exemple 21, et le mot « `jours` » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre. -<p>Si vous utilisez un lecteur d’écran, vous devez avoir remarqué que, lorsque vous allez à ce paramètre dans Firefox, il est actuellement écrit « <code>Effacer l’historique après 21 jours</code> ? », suivi par l’annonce que vous vous trouvez dans un boîte texte et qu’elle contient le nombre 21. C’est sympa, non ? Vous n’avez pas besoin de naviguer alentours pour trouver l’unité. « Jours » peut aisément être remplacé par « mois » ou « années », et dans de nombreuses boîtes de dialogues ordinaires, il n’y a aucun autre moyen de le savoir que de naviguer alentours avec les commandes d’examen de l’écran.</p> +Si vous utilisez un lecteur d’écran, vous devez avoir remarqué que, lorsque vous allez à ce paramètre dans Firefox, il est actuellement écrit « `Effacer l’historique après 21 jours` ? », suivi par l’annonce que vous vous trouvez dans un boîte texte et qu’elle contient le nombre 21. C’est sympa, non ? Vous n’avez pas besoin de naviguer alentours pour trouver l’unité. « Jours » peut aisément être remplacé par « mois » ou « années », et dans de nombreuses boîtes de dialogues ordinaires, il n’y a aucun autre moyen de le savoir que de naviguer alentours avec les commandes d’examen de l’écran. -<p>La solution se trouve dans l'attribut ARIA <code>aria-labelledby</code>. Son paramètre est une chaîne qui est la liste des identifiants des éléments HTML que vous voulez concaténer en un seul nom accessible.</p> +La solution se trouve dans l'attribut ARIA `aria-labelledby`. Son paramètre est une chaîne qui est la liste des identifiants des éléments HTML que vous voulez concaténer en un seul nom accessible. -<p><code>aria-labelledby</code> et <code>aria-describedby</code> sont tous deux spécifiés dans l’élément de formulaire à labelliser, par exemple, un élément {{ HTMLElement("input") }}. Dans les deux cas, les liaisons d’un contrôle <code><label for></code>/<code><label></code> pouvant exister, sont neutralisées par <code>aria-labelledby</code>. Si, dans une page HTML vous fournissez <code>aria-labelledby</code>, vous devriez également fournir un <code><label for></code> afin d’également prendre en charge les anciens navigateurs qui ne prennent pas encore en charge ARIA. Avec Firefox 3, vos utilisateurs malvoyants auront automatiquement une meilleure accessibilité avec le nouvel attribut, mais les utilisateurs de navigateurs plus anciens ne seront pas pour autant laissé dans le noir.</p> +`aria-labelledby` et `aria-describedby` sont tous deux spécifiés dans l’élément de formulaire à labelliser, par exemple, un élément {{ HTMLElement("input") }}. Dans les deux cas, les liaisons d’un contrôle `<label for>`/`<label>` pouvant exister, sont neutralisées par `aria-labelledby`. Si, dans une page HTML vous fournissez `aria-labelledby`, vous devriez également fournir un `<label for>` afin d’également prendre en charge les anciens navigateurs qui ne prennent pas encore en charge ARIA. Avec Firefox 3, vos utilisateurs malvoyants auront automatiquement une meilleure accessibilité avec le nouvel attribut, mais les utilisateurs de navigateurs plus anciens ne seront pas pour autant laissé dans le noir. -<p>Exemple :</p> +Exemple : -<pre class="brush: html"> <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" /> - <span id="labelShutdown">Éteindre l’ordinateur après</span> - <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" /> - <span id="shutdownUnit"> minutes</span> -</pre> +```html + <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" /> + <span id="labelShutdown">Éteindre l’ordinateur après</span> + <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" /> + <span id="shutdownUnit"> minutes</span> +``` -<h3 id="A_Note_for_JAWS_8_users_2">Pour les utilisateurs de JAWS 8</h3> +### Pour les utilisateurs de JAWS 8 -<p>JAWS 8.0 possède sa propre logique pour trouver les labels, ce qui lui fait systématiquement supplanter le <code>nomAccessible</code> que peut avoir une boîte texte dans un document HTML. Avec JAWS 8, je n’ai trouvé aucun moyen de lui faire accepter le label de l’exemple ci-dessus. Mais NVDA et Window-Eyes le font très bien, et Orca sur Linux n’a aucun problème non plus.</p> +JAWS 8.0 possède sa propre logique pour trouver les labels, ce qui lui fait systématiquement supplanter le `nomAccessible` que peut avoir une boîte texte dans un document HTML. Avec JAWS 8, je n’ai trouvé aucun moyen de lui faire accepter le label de l’exemple ci-dessus. Mais NVDA et Window-Eyes le font très bien, et Orca sur Linux n’a aucun problème non plus. -<h3 id="Can_this_be_done_without_ARIA.3F_2">Peut-on faire la même chose sans ARIA ?</h3> +### Peut-on faire la même chose sans ARIA ? -<p>Ben Millard fait remarquer dans un billet que <a href="http://projectcerbera.com/blog/2008/03#day24" rel="nofollow">les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4</a>, simplement en imbriquant l'élément <code>input</code> dans le <code>label</code>. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de <code>aria-labelledby</code> est encore la meilleure approche.</p> +Ben Millard fait remarquer dans un billet que [les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4](http://projectcerbera.com/blog/2008/03#day24), simplement en imbriquant l'élément `input` dans le `label`. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de `aria-labelledby` est encore la meilleure approche. diff --git a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md index e06f116df6..712a870da3 100644 --- a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md +++ b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md @@ -7,93 +7,147 @@ tags: translation_of: Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs original_slug: Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA --- -<p>L'état de la technologie ARIA a toujours dépendu de la communauté. Si vous remarquez un problème d'implémentation, veuillez prendre un instant pour en informer les développeurs. Voici comment déposer les bugs :</p> +L'état de la technologie ARIA a toujours dépendu de la communauté. Si vous remarquez un problème d'implémentation, veuillez prendre un instant pour en informer les développeurs. Voici comment déposer les bugs : -<div class="note"> - <p><strong>Note :</strong> Quand vous trouvez un bug, veuillez en aviser les tables de compatibilité liées dans la <a href="/fr/ARIA/examples">page des exemples.</a></p> -</div> +> **Note :** Quand vous trouvez un bug, veuillez en aviser les tables de compatibilité liées dans la [page des exemples.](/fr/ARIA/examples) -<p>A faire : ajouter la bon lien d'accessibilité à la table</p> +A faire : ajouter la bon lien d'accessibilité à la table <table> - <thead> - <tr> - <th>Genre</th> - <th>Programme</th> - <th>Où déposer</th> - <th>Notes</th> - </tr> - </thead> - <tbody> - <tr> - <td colspan="1" rowspan="4">Lecteurs d'écran</td> - <td> - <p><a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp">Freedom Scientific JAWS</a></p> - </td> - <td><a href="http://www.freedomscientific.com/Support">formulaire de support technique JAWS</a></td> - </tr> - <tr> - <td><a href="/fr/Inner_and_outer_windows">GW Micro Window Eyes</a></td> - <td><a href="mailto:support@gwmicro.com">commentaires, questions et retours Window-Eyes </a>(email)</td> - <td> </td> - </tr> - <tr> - <td><a href="http://www.nvda-project.org/">Non Visual Desktop Access (NVDA)</a></td> - <td><a href="http://www.nvda-project.org/wiki/ReportingIssues">Déposer un bug NVDA</a> (github)</td> - <td><a href="/fr/Accessibility/JAWS_Issues_with_Firefox">Discuter des problèmes NVDA</a></td> - </tr> - <tr> - <td><a href="/User:orca.clock">Orca</a></td> - <td><a href="/fr/DOM/File">Déposer un bug Orca</a></td> - <td> </td> - </tr> - <tr> - <td colspan="1" rowspan="5">Navigateurs</td> - <td>Apple Safari</td> - <td><a href="http://www.webkit.org/quality/reporting.html">Déposer un bug WebKit.org</a></td> - <td> </td> - </tr> - <tr> - <td>Google Chrome</td> - <td><a href="http://code.google.com/p/chromium/issues/list">Déposer un bug Chromium</a></td> - <td> </td> - </tr> - <tr> - <td> - <p>Microsoft Internet Explorer</p> - </td> - <td><a class="link-https" href="https://connect.microsoft.com/IE/Feedback">Déposer un bug IE</a></td> - <td><a href="https://bugzilla.mozilla.org/showdependencytree.cgi?id=343213&hide_resolved=1" rel="nofollow">Voir les bugs ARIA Firefox existants</a></td> - </tr> - <tr> - <td>Mozilla Firefox</td> - <td> - <p><a href="http://bugzilla.mozilla.org/">Déposer un bug Firefox</a></p> - </td> - <td> - <p>Utiliser le composant : Disability Access APIs</p> - </td> - </tr> - <tr> - <td>Opera</td> - <td><a class="link-https" href="https://bugs.opera.com/wizard/">Déposer un bug Opera</a></td> - <td>Marquer [ARIA] dans le sommaire</td> - </tr> - <tr> - <td colspan="1" rowspan="3">Librairies JS</td> - <td>Dojo Toolkit</td> - <td><a href="http://dojotoolkit.org/blog/how-file-dojo-bug-report">Déposer un bug Dojo</a></td> - <td>Marquer [Accessibilité] dans le champ composant</td> - </tr> - <tr> - <td>Google Web Toolkit (GWT)</td> - <td><a href="/fr/DOM/File">Déposer un bug GWT</a></td> - <td> </td> - </tr> - <tr> - <td>Yahoo User Interface</td> - <td><a href="http://sourceforge.net/tracker/?func=add&group_id=165715&atid=836476">Déposer un bug YUI</a></td> - <td>Déposer contre le composant associé dans la combobox catégorie et inclure [ARIA] dans le sommaire</td> - </tr> - </tbody> + <thead> + <tr> + <th>Genre</th> + <th>Programme</th> + <th>Où déposer</th> + <th>Notes</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="4">Lecteurs d'écran</td> + <td> + <p> + <a + href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" + >Freedom Scientific JAWS</a + > + </p> + </td> + <td> + <a href="http://www.freedomscientific.com/Support" + >formulaire de support technique JAWS</a + > + </td> + </tr> + <tr> + <td><a href="/fr/Inner_and_outer_windows">GW Micro Window Eyes</a></td> + <td> + <a href="mailto:support@gwmicro.com" + >commentaires, questions et retours Window-Eyes </a + >(email) + </td> + <td> </td> + </tr> + <tr> + <td> + <a href="http://www.nvda-project.org/" + >Non Visual Desktop Access (NVDA)</a + > + </td> + <td> + <a href="http://www.nvda-project.org/wiki/ReportingIssues" + >Déposer un bug NVDA</a + > + (github) + </td> + <td> + <a href="/fr/Accessibility/JAWS_Issues_with_Firefox" + >Discuter des problèmes NVDA</a + > + </td> + </tr> + <tr> + <td><a href="/User:orca.clock">Orca</a></td> + <td><a href="/fr/DOM/File">Déposer un bug Orca</a></td> + <td> </td> + </tr> + <tr> + <td colspan="1" rowspan="5">Navigateurs</td> + <td>Apple Safari</td> + <td> + <a href="http://www.webkit.org/quality/reporting.html" + >Déposer un bug WebKit.org</a + > + </td> + <td> </td> + </tr> + <tr> + <td>Google Chrome</td> + <td> + <a href="http://code.google.com/p/chromium/issues/list" + >Déposer un bug Chromium</a + > + </td> + <td> </td> + </tr> + <tr> + <td><p>Microsoft Internet Explorer</p></td> + <td> + <a class="link-https" href="https://connect.microsoft.com/IE/Feedback" + >Déposer un bug IE</a + > + </td> + <td> + <a + href="https://bugzilla.mozilla.org/showdependencytree.cgi?id=343213&hide_resolved=1" + rel="nofollow" + >Voir les bugs ARIA Firefox existants</a + > + </td> + </tr> + <tr> + <td>Mozilla Firefox</td> + <td> + <p><a href="http://bugzilla.mozilla.org/">Déposer un bug Firefox</a></p> + </td> + <td><p>Utiliser le composant : Disability Access APIs</p></td> + </tr> + <tr> + <td>Opera</td> + <td> + <a class="link-https" href="https://bugs.opera.com/wizard/" + >Déposer un bug Opera</a + > + </td> + <td>Marquer [ARIA] dans le sommaire</td> + </tr> + <tr> + <td colspan="1" rowspan="3">Librairies JS</td> + <td>Dojo Toolkit</td> + <td> + <a href="http://dojotoolkit.org/blog/how-file-dojo-bug-report" + >Déposer un bug Dojo</a + > + </td> + <td>Marquer [Accessibilité] dans le champ composant</td> + </tr> + <tr> + <td>Google Web Toolkit (GWT)</td> + <td><a href="/fr/DOM/File">Déposer un bug GWT</a></td> + <td> </td> + </tr> + <tr> + <td>Yahoo User Interface</td> + <td> + <a + href="http://sourceforge.net/tracker/?func=add&group_id=165715&atid=836476" + >Déposer un bug YUI</a + > + </td> + <td> + Déposer contre le composant associé dans la combobox catégorie et + inclure [ARIA] dans le sommaire + </td> + </tr> + </tbody> </table> 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 --- -<p><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.</p> +_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. -<p>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 <em>widgets</em> JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.</p> +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. -<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> +> **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. -<p>Voici un <em>widget</em> utilisé pour une barre de progression :</p> +Voici un _widget_ utilisé pour une barre de progression : -<pre class="brush: html"><div id="percent-loaded" role="progressbar" aria-valuenow="75" - aria-valuemin="0" aria-valuemax="100" /></pre> +```html +<div id="percent-loaded" role="progressbar" aria-valuenow="75" + aria-valuemin="0" aria-valuemax="100" /> +``` -<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> +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. -<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> +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 : -<pre class="brush: js"><code>// Trouver la barre de progression <div> dans le DOM. - var progressBar = document.getElementById("percent-loaded");</code> +```js +// Trouver la barre de progression <div> dans le DOM. + var progressBar = document.getElementById("percent-loaded"); -<code>// 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</code> +// 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); - }</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> +> **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 (`<main>`, `<header>`, `<nav>` etc.) possèdent des rôles ARIA natifs et il n'est pas nécessaire de les dupliquer. -<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> +## Prise en charge -<h2 id="Prise_en_charge">Prise en charge</h2> +À 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>À 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> +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. -<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> +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>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> +## Tutoriels -<h2 id="Tutoriels">Tutoriels</h2> +- [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. -<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 href="https://dev.opera.com/articles/introduction-to-wai-aria/">l'introduction à ARIA de Gez Lemon</a> en 2008</dd> - <dt><a 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 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> +## Améliorations légères avec ARIA -<h2 id="Améliorations_légères_avec_ARIA">Améliorations légères avec ARIA</h2> +- [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. -<dl> - <dt><a 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 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> +## ARIA pour les _widgets_ scriptés -<h2 id="ARIA_pour_les_widgets_scriptés">ARIA pour les <em>widgets</em> scriptés</h2> +- [Concevoir des _widgets_ JavaScript navigables au clavier](/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier) + - : Les éléments tels que `<input>`, `<button>` disposent de fonctionnalités natives pour l'utilisation au clavier. Si on triche en utilisant des `<div>` et ARIA, on doit s'assurer que l'accessibilité au clavier soit préservée. +- [Régions dynamiques](/fr/docs/Accessibilité/ARIA/Zones_live_ARIA) (_live regions_) + - : 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. +- [Utiliser les régions dynamiques ARIA afin d'indiquer une modification de contenu](https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm) + - : 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. -<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 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> +## Processus de standardisation -<h2 id="Processus_de_standardisation">Processus de standardisation</h2> +- [La spécification WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) + - : La spécification rédigée par le W3C. +- [Bonnes pratiques afin d'écrire avec WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.1/) + - : Les documents officiels décrivant les meilleurs pratiques pour appliquer ARIA aux _widgets_ et aux mécanismes interactifs. -<dl> - <dt><a 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 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> +## Videos -<h2 id="Videos">Videos</h2> +[ARIA, les API pour l'accessibilité : coder comme si ça vous intéressait ! de Léonie Watson (en anglais)](https://www.youtube.com/watch?v=qdB8SRhqvFc) -<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> +## Rapporter des bogues -<h2 id="Rapporter_des_bogues">Rapporter des bogues</h2> +[Rapporter des bogues d'accessibilté/ARIA sur les navigateurs, les lecteurs d'écran et les bibliothèques JavaScript.](/fr/docs/Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA) -<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> +## Voir aussi -<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> +- [Accessibilité](/fr/docs/Web/Accessibilité) +- [AJAX](/fr/docs/Web/Guide/AJAX) +- [JavaScript](/fr/docs/Web/JavaScript) +- [Accessibilité et Mozilla](/fr/docs/Mozilla/Accessibility) diff --git a/files/fr/web/accessibility/aria/roles/banner_role/index.md b/files/fr/web/accessibility/aria/roles/banner_role/index.md index 8c3d63a9d1..5b5d1c59ee 100644 --- a/files/fr/web/accessibility/aria/roles/banner_role/index.md +++ b/files/fr/web/accessibility/aria/roles/banner_role/index.md @@ -9,32 +9,34 @@ tags: translation_of: Web/Accessibility/ARIA/Roles/Banner_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation du rôle <a href="https://www.w3.org/TR/wai-aria/roles#banner"><code>banner</code> (en)</a>.</p> +Cette technique présente l’utilisation du rôle [`banner` (en)](https://www.w3.org/TR/wai-aria/roles#banner). -<p>La zone d’entête principale d'un site devrait être structurée avec <code><header role="banner"></code>. Cette zone peut contenir le logo du site, sa description, le moteur de recherche.</p> +La zone d’entête principale d'un site devrait être structurée avec `<header role="banner">`. Cette zone peut contenir le logo du site, sa description, le moteur de recherche. -<p>Une page web ne doit pas contenir plus d'un rôle <code>banner</code>, mais il est tout à fait possible d'utiliser plusieurs éléments <code><header></code> dans une page.</p> +Une page web ne doit pas contenir plus d'un rôle `banner`, mais il est tout à fait possible d'utiliser plusieurs éléments `<header>` dans une page. -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p> </p> -<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> -<h3 id="Exemples">Exemples</h3> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h4 id="Une_zone_d'entête_typique_de_site">Une zone d'entête typique de site </h4> +### Exemples -<pre class="brush: html"><header role="banner"> - <p><img src="logo.png" alt="Nom du site"></p> - <p>Description du site</p> - <div role="search"> +#### Une zone d'entête typique de site + +```html +<header role="banner"> + <p><img src="logo.png" alt="Nom du site"></p> + <p>Description du site</p> + <div role="search"> ... - </div> -</header> </pre> + </div> +</header> +``` -<h2 id="Autres_ressources">Autres ressources</h2> +## Autres ressources -<p>La <a href="http://www.accede-web.com/notices/html-css-javascript/1-structure/1-1-header-role-banner/">fiche accede-web</a>.</p> +La [fiche accede-web](http://www.accede-web.com/notices/html-css-javascript/1-structure/1-1-header-role-banner/). diff --git a/files/fr/web/accessibility/aria/roles/button_role/index.md b/files/fr/web/accessibility/aria/roles/button_role/index.md index 1ededd8194..39b311fdb0 100644 --- a/files/fr/web/accessibility/aria/roles/button_role/index.md +++ b/files/fr/web/accessibility/aria/roles/button_role/index.md @@ -11,120 +11,114 @@ tags: translation_of: Web/Accessibility/ARIA/Roles/button_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button --- -<p>Le rôle <strong><a href="https://www.w3.org/WAI/PF/aria/roles#button">button</a></strong> devrait être utilisé pour les éléments cliquables qui déclenchent une réponse lorsqu'activés par l'utilisateur. Ajouter <code>role="button"</code> permettra à un élément d'apparaître comme un bouton de contrôle pour un lecteur d'écran. Ce rôle peut être utilisé avec l'attribut <code>aria-pressed</code> afin de créer des boutons interrupteurs.</p> +Le rôle **[button](https://www.w3.org/WAI/PF/aria/roles#button)** devrait être utilisé pour les éléments cliquables qui déclenchent une réponse lorsqu'activés par l'utilisateur. Ajouter `role="button"` permettra à un élément d'apparaître comme un bouton de contrôle pour un lecteur d'écran. Ce rôle peut être utilisé avec l'attribut `aria-pressed` afin de créer des boutons interrupteurs. -<pre class="brush: html"><div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Enregistrer</div></pre> +```html +<div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Enregistrer</div> +``` -<p>L'exemple précédent crée un bouton simple qui sera le premier à obtenir le focus. Toutefois, on devrait plutôt utiliser les éléments <a href="/fr/docs/Web/HTML/Element/Button"><code><button></code></a> ou <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a> avec <code>type="button"</code> pour représenter des boutons :</p> +L'exemple précédent crée un bouton simple qui sera le premier à obtenir le focus. Toutefois, on devrait plutôt utiliser les éléments [`<button>`](/fr/docs/Web/HTML/Element/Button) ou [`<input>`](/fr/docs/Web/HTML/Element/Input) avec `type="button"` pour représenter des boutons : -<pre class="brush: html"><button id="saveChanges">Enregistrer</button></pre> +```html +<button id="saveChanges">Enregistrer</button> +``` -<div class="note"> -<p><strong>Note :</strong> Si on utilise <code>role="button"</code> plutôt que les éléments sémantiques <code><button></code> ou <code><input type="button"></code>, il faudra : permettre à l'élément de recevoir le focus, définir des gestionnaires d'évènements pour <a href="/fr/docs/Web/API/Element/click_event"><code>click</code></a> et <a href="/fr/docs/Web/API/Document/keydown_event"><code>keydown</code></a>, y compris la gestion des touches <kbd>Entrée</kbd> et <kbd>Espace</kbd>, afin de traiter la saisie de l'utilisateur. Voir <a href="https://www.w3.org/TR/wai-aria-practices/examples/button/button.html">l'exemple de code officiel de WAI-ARIA</a>.</p> -</div> +> **Note :** Si on utilise `role="button"` plutôt que les éléments sémantiques `<button>` ou `<input type="button">`, il faudra : permettre à l'élément de recevoir le focus, définir des gestionnaires d'évènements pour [`click`](/fr/docs/Web/API/Element/click_event) et [`keydown`](/fr/docs/Web/API/Document/keydown_event), y compris la gestion des touches <kbd>Entrée</kbd> et <kbd>Espace</kbd>, afin de traiter la saisie de l'utilisateur. Voir [l'exemple de code officiel de WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/examples/button/button.html). -<h2 id="description">Description</h2> +## Description -<p>Le rôle <code>button</code> identifie un élément comme étant un bouton pour les lecteurs d'écran. Un bouton est un contrôle graphique qui permet d'effectuer des actions comme soumettre un formulaire, ouvrir une boîte de dialogue, annuler une action ou effectuer une commande (par exemple ajouter un nouvel enregistrement ou afficher des informations).</p> +Le rôle `button` identifie un élément comme étant un bouton pour les lecteurs d'écran. Un bouton est un contrôle graphique qui permet d'effectuer des actions comme soumettre un formulaire, ouvrir une boîte de dialogue, annuler une action ou effectuer une commande (par exemple ajouter un nouvel enregistrement ou afficher des informations). -<p>Pour indiquer qu'un bouton déclenchera l'ouverture d'une boîte de dialogue, on pourra utiliser la convention qui consiste à ajouter une ellipse (…) après l'étiquette du bouton, par exemple : "Enregistrer sous…".</p> +Pour indiquer qu'un bouton déclenchera l'ouverture d'une boîte de dialogue, on pourra utiliser la convention qui consiste à ajouter une ellipse (…) après l'étiquette du bouton, par exemple : "Enregistrer sous…". -<p>En complément <code>role="button"</code> devrait également être utilisé pour les interrupteurs ou les menus qui n'utilisent pas l'élément HTML <code><button></code>. Un interrupteur est un bouton à deux états qui peut être éteint ou actif. Les valeurs de l'attribut <code>aria-pressed</code> : <code>true</code> ou <code>false</code> permettront d'identifier un bouton comme étant un interrupteur. Un bouton de menu permet, comme son nom l'indique, de contrôler un menu et possède un attribut <code>aria-haspopup</code> qui vaut <code>menu</code> ou <code>true</code>.</p> +En complément `role="button"` devrait également être utilisé pour les interrupteurs ou les menus qui n'utilisent pas l'élément HTML `<button>`. Un interrupteur est un bouton à deux états qui peut être éteint ou actif. Les valeurs de l'attribut `aria-pressed` : `true` ou `false` permettront d'identifier un bouton comme étant un interrupteur. Un bouton de menu permet, comme son nom l'indique, de contrôler un menu et possède un attribut `aria-haspopup` qui vaut `menu` ou `true`. -<h3 id="associated_aria_roles_states_and_properties">Rôles, propriétés et états ARIA associés</h3> +### Rôles, propriétés et états ARIA associés -<dl> - <dt><code>aria-pressed</code></dt> - <dd>Définit le bouton comme étant un interrupteur. La valeur de <code>aria-pressed</code> décrit l'état du bouton. Les valeurs utilisables incluent <code>aria-pressed="false"</code> pour indiquer qu'un bouton n'est pas pressé, <code>aria-pressed="true"</code> pour indiquer qu'un bouton est pressé et <code>aria-pressed="mixed"</code> pour indiquer que le bouton est partiellement pressé. Si cet attribut est omis ou qu'il utilise la valeur par défaut <code>aria-pressed="undefined"</code>, on ne pourra pas appuyer sur l'élément.</dd> - <dt><code>aria-expanded</code></dt> - <dd>Si le bouton contrôle un groupe d'autres éléments, l'état <code>aria-expanded</code> indique si le groupe contrôlé est développé ou replié. Si le bouton a <code>aria-expanded="false"</code>, le groupe n'est pas développé ; si le bouton a <code>aria-expanded="true"</code>, cela indique qu'il est actuellement développé ; si le bouton a <code>aria-expanded="undefined"</code> ou que l'attribut est absent, cela indique que le groupe ne peut pas être développé.</dd> -</dl> +- `aria-pressed` + - : Définit le bouton comme étant un interrupteur. La valeur de `aria-pressed` décrit l'état du bouton. Les valeurs utilisables incluent `aria-pressed="false"` pour indiquer qu'un bouton n'est pas pressé, `aria-pressed="true"` pour indiquer qu'un bouton est pressé et `aria-pressed="mixed"` pour indiquer que le bouton est partiellement pressé. Si cet attribut est omis ou qu'il utilise la valeur par défaut `aria-pressed="undefined"`, on ne pourra pas appuyer sur l'élément. +- `aria-expanded` + - : Si le bouton contrôle un groupe d'autres éléments, l'état `aria-expanded` indique si le groupe contrôlé est développé ou replié. Si le bouton a `aria-expanded="false"`, le groupe n'est pas développé ; si le bouton a `aria-expanded="true"`, cela indique qu'il est actuellement développé ; si le bouton a `aria-expanded="undefined"` ou que l'attribut est absent, cela indique que le groupe ne peut pas être développé. -<h3 id="basic_buttons">Boutons simples</h3> +### Boutons simples -<p>Les boutons devraient toujours avoir un nom accessible. Pour la plupart des boutons, le nom sera le même que le texte écrit à l'intérieur du bouton. Dans certains cas, par exemple pour les boutons représentés par une icône, le nom accessible pourra être fourni par l'attribut <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">aria-label</a></code> ou <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code>.</p> +Les boutons devraient toujours avoir un nom accessible. Pour la plupart des boutons, le nom sera le même que le texte écrit à l'intérieur du bouton. Dans certains cas, par exemple pour les boutons représentés par une icône, le nom accessible pourra être fourni par l'attribut [`aria-label`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) ou [`aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute). -<h3 id="toggle_buttons">Interrupteurs</h3> +### Interrupteurs -<p>Un interrupteur possède généralement deux états : activé ou désactivé. Un troisième état hybride est disponible pour les interrupteurs qui contrôlent d'autres éléments tels que d'autres interrupteurs ou cases à cocher qui n'ont pas tous la même valeur. On pourra indiquer qu'un élément est un interrupteur ou non via l'attribut <code>aria-pressed</code> en complément du rôle <code>button</code> (si l'élément n'est pas déjà un élément de bouton natif) :</p> +Un interrupteur possède généralement deux états : activé ou désactivé. Un troisième état hybride est disponible pour les interrupteurs qui contrôlent d'autres éléments tels que d'autres interrupteurs ou cases à cocher qui n'ont pas tous la même valeur. On pourra indiquer qu'un élément est un interrupteur ou non via l'attribut `aria-pressed` en complément du rôle `button` (si l'élément n'est pas déjà un élément de bouton natif) : -<ul> - <li>Si <code>aria-pressed</code> n'est pas utilisé ou qu'il est défini avec l'état <code>"undefined"</code>, le bouton n'est pas un interrupteur.</li> - <li>Si <code>aria-pressed="false"</code> est utilisé, le bouton est un interrupteur qui n'est pas actif/pressé.</li> - <li>Si <code>aria-pressed="true"</code> est utilisé, le bouton est un interrupteur qui est actif/pressé.</li> - <li>Si <code>aria-pressed="mixed"</code> est utilisé, le bouton est considéré comme partiellement actif.</li> -</ul> +- Si `aria-pressed` n'est pas utilisé ou qu'il est défini avec l'état `"undefined"`, le bouton n'est pas un interrupteur. +- Si `aria-pressed="false"` est utilisé, le bouton est un interrupteur qui n'est pas actif/pressé. +- Si `aria-pressed="true"` est utilisé, le bouton est un interrupteur qui est actif/pressé. +- Si `aria-pressed="mixed"` est utilisé, le bouton est considéré comme partiellement actif. -<p>On peut, par exemple, avoir un bouton « Couper le son » sur un lecteur audio. Dans ce cas, on peut indiquer que le son est éteint lorsque l'état <code>aria-pressed</code> vaut <code>true</code>. Le libellé utilisé pour un interrupteur ne doit pas changer lorsque l'état change. Dans notre exemple, le libellé reste « Couper le son » et un lecteur d'écran indiquera « L'interrupteur couper le son est actif" ou « L'interrupteur couper le son est inactif » selon la valeur de <code>aria-pressed</code>. Si on souhaite avoir un changement de libellé et passer de « Couper le son » à « Réactiver le son », un interrupteur ne serait pas approprié et <code>aria-pressed</code> devrait alors être évité.</p> +On peut, par exemple, avoir un bouton « Couper le son » sur un lecteur audio. Dans ce cas, on peut indiquer que le son est éteint lorsque l'état `aria-pressed` vaut `true`. Le libellé utilisé pour un interrupteur ne doit pas changer lorsque l'état change. Dans notre exemple, le libellé reste « Couper le son » et un lecteur d'écran indiquera « L'interrupteur couper le son est actif" ou « L'interrupteur couper le son est inactif » selon la valeur de `aria-pressed`. Si on souhaite avoir un changement de libellé et passer de « Couper le son » à « Réactiver le son », un interrupteur ne serait pas approprié et `aria-pressed` devrait alors être évité. -<h3 id="keyboard_interactions">Interactions au clavier</h3> +### Interactions au clavier -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Touche</th> - <th scope="col">Fonction</th> - </tr> - <tr> - <td><kbd>Entrée</kbd></td> - <td>Activer le bouton</td> - </tr> - <tr> - <td><kbd>Espace</kbd></td> - <td>Activer le bouton</td> - </tr> - </tbody> -</table> +| Touche | Fonction | +| ----------------- | ----------------- | +| <kbd>Entrée</kbd> | Activer le bouton | +| <kbd>Espace</kbd> | Activer le bouton | -<p>Une fois le bouton activé, la gestion du focus dépendra du type d'action effectuée par le bouton. Ainsi, si cliquer sur le bouton déclenche l'ouverture d'une boîte de dialogue, le focus doit passer à cette boîte de dialogue. Si le bouton ferme une boîte de dialogue, le focus doit revenir sur le bouton qui permet d'ouvrir la boîte à moins que la fonction de la boîte de dialogue mène logiquement à un autre élément. Si le bouton modifie le contexte courant, le focus reste généralement sur le bouton (par exemple pour couper/remettre le son).</p> +Une fois le bouton activé, la gestion du focus dépendra du type d'action effectuée par le bouton. Ainsi, si cliquer sur le bouton déclenche l'ouverture d'une boîte de dialogue, le focus doit passer à cette boîte de dialogue. Si le bouton ferme une boîte de dialogue, le focus doit revenir sur le bouton qui permet d'ouvrir la boîte à moins que la fonction de la boîte de dialogue mène logiquement à un autre élément. Si le bouton modifie le contexte courant, le focus reste généralement sur le bouton (par exemple pour couper/remettre le son). -<h3 id="required_javascript_features">Fonctionnalités JavaScript nécessaires</h3> +### Fonctionnalités JavaScript nécessaires -<h4 id="required_event_handlers">Gestionnaires d'évènements nécessaires</h4> +#### Gestionnaires d'évènements nécessaires -<p>Les boutons peuvent être manipulés avec une souris, le toucher et le clavier. Pour les éléments HTML natifs <code><button></code>, l'évènement <code>onclick</code> du bouton est déclenché lors du clic de la souris ou lorsque l'utilisateur utilise la touche <kbd>Espace</kbd> ou <kbd>Entrée</kbd> lorsque le bouton a le focus. Si un autre élément est utilisé pour créer un bouton, l'évènement <code>onclick </code> ne se déclenche qu'au clic de la souris, y compris lorsqu'on utilise <code>role="button"</code>. C'est pour cette raison qu'on doit ajouter des gestionnaires d'évènements distincts à l'élément afin de réagir aux appuis sur les touches <kbd>Espace</kbd> ou <kbd>Entrée</kbd>.</p> +Les boutons peuvent être manipulés avec une souris, le toucher et le clavier. Pour les éléments HTML natifs `<button>`, l'évènement `onclick` du bouton est déclenché lors du clic de la souris ou lorsque l'utilisateur utilise la touche <kbd>Espace</kbd> ou <kbd>Entrée</kbd> lorsque le bouton a le focus. Si un autre élément est utilisé pour créer un bouton, l'évènement `onclick `ne se déclenche qu'au clic de la souris, y compris lorsqu'on utilise `role="button"`. C'est pour cette raison qu'on doit ajouter des gestionnaires d'évènements distincts à l'élément afin de réagir aux appuis sur les touches <kbd>Espace</kbd> ou <kbd>Entrée</kbd>. -<dl> - <dt><code>onclick</code></dt> - <dd>Gère l'évènement déclenché lorsque le bouton est activé avec un clic de souris ou au toucher.</dd> - <dt><code>onKeyDown</code></dt> - <dd>Gère l'évènement déclenché lorsque le bouton est activé à l'aide de la touche <kbd>Espace</kbd> ou <kbd>Entrée</kbd> du clavier (attention, il ne s'agit pas de l'évènement déprécié <a href="/fr/docs/Web/API/Document/keypress_event"><code>onKeyPress</code></a>).</dd> -</dl> +- `onclick` + - : Gère l'évènement déclenché lorsque le bouton est activé avec un clic de souris ou au toucher. +- `onKeyDown` -<h4 id="changing_attribute_values">Modifier les valeurs des attributs</h4> + - : Gère l'évènement déclenché lorsque le bouton est activé à l'aide de la touche -<h5 id="aria-pressed">aria-pressed</h5> + <kbd>Espace</kbd> -<p>La valeur de <code>aria-pressed</code> définit l'état d'un interrupteur. Cet attribut peut avoir l'une des quatre valeurs suivantes :</p> + ou -<ul> - <li><code>true</code>,</li> - <li><code>false</code>,</li> - <li><code>mixed</code>,</li> - <li><code>undefined</code>.</li> -</ul> + <kbd>Entrée</kbd> -<h2 id="examples">Exemples</h2> + du clavier (attention, il ne s'agit pas de l'évènement déprécié [`onKeyPress`](/fr/docs/Web/API/Document/keypress_event)). -<h3 id="basic_button_example">Exemple de bouton simple</h3> +#### Modifier les valeurs des attributs -<p>Dans cet exemple, on a un élément <code><span></code> pour lequel on a mis le rôle <code>button</code>. Comme il s'agit d'un élément <code><span></code>, l'attribut <code>tabindex</code> est nécessaire pour permettre au bouton de recevoir le focus et de s'inscrire dans l'ordre des tabulations. Le style CSS inclus permet de transformer visuellement l'élément <code><span></code> afin qu'il ressemble à un bouton et pour fournir une indication visuelle lorsque celui-ci a le focus.</p> +##### aria-pressed -<p>Les gestionnaires d'évènements <code>handleBtnClick</code> et <code>handleBtnKeyDown</code> exécutent l'action du bouton lorsqu'il est activé avec un clic de souris ou au clavier avec la touche <kbd>Espace</kbd> ou <kbd>Entrée</kbd>. Dans cet exemple, l'action consiste à ajouter un nouveau nom à une liste de noms.</p> +La valeur de `aria-pressed` définit l'état d'un interrupteur. Cet attribut peut avoir l'une des quatre valeurs suivantes : -<p>Vous pouvez essayer l'exemple en ajoutant un nom dans le champ texte. Le bouton ajoutera ensuite le nom à la liste.</p> +- `true`, +- `false`, +- `mixed`, +- `undefined`. -<h4 id="html">HTML</h4> +## Exemples -<pre class="brush: html"><h1>Exemple de bouton avec ARIA</h1> -<ul id="nameList"></ul> -<label for="newName">Saisissez votre nom :</label> -<input type="text" id="newName"> -<span role="button" tabindex="0" onclick="handleCommand(event)" onKeyDown="handleCommand(event)">Ajouter le nom</span></pre> +### Exemple de bouton simple -<h4 id="css">CSS</h4> +Dans cet exemple, on a un élément `<span>` pour lequel on a mis le rôle `button`. Comme il s'agit d'un élément `<span>`, l'attribut `tabindex` est nécessaire pour permettre au bouton de recevoir le focus et de s'inscrire dans l'ordre des tabulations. Le style CSS inclus permet de transformer visuellement l'élément `<span>` afin qu'il ressemble à un bouton et pour fournir une indication visuelle lorsque celui-ci a le focus. -<pre class="brush: css">[role="button"] { +Les gestionnaires d'évènements `handleBtnClick` et `handleBtnKeyDown` exécutent l'action du bouton lorsqu'il est activé avec un clic de souris ou au clavier avec la touche <kbd>Espace</kbd> ou <kbd>Entrée</kbd>. Dans cet exemple, l'action consiste à ajouter un nouveau nom à une liste de noms. + +Vous pouvez essayer l'exemple en ajoutant un nom dans le champ texte. Le bouton ajoutera ensuite le nom à la liste. + +#### HTML + +```html +<h1>Exemple de bouton avec ARIA</h1> +<ul id="nameList"></ul> +<label for="newName">Saisissez votre nom :</label> +<input type="text" id="newName"> +<span role="button" tabindex="0" onclick="handleCommand(event)" onKeyDown="handleCommand(event)">Ajouter le nom</span> +``` + +#### CSS + +```css +[role="button"] { padding: 2px; background-color: navy; color: white; @@ -138,17 +132,19 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button } ul { list-style: none; -}</pre> +} +``` -<h4 id="javascript">JavaScript</h4> +#### JavaScript -<pre class="brush: js">function handleCommand(event) { +```js +function handleCommand(event) { // Gère à la fois l'activation à la souris // et au clavier - + // Les touches autres que Entrée et Espace ne devraient // déclencher de commande - if (event instanceof KeyboardEvent && event.key !== 'Enter' && event.key !== ' ') { + if (event instanceof KeyboardEvent && event.key !== 'Enter' && event.key !== ' ') { return; } @@ -161,7 +157,7 @@ ul { // permettre la saisie d'un autre nom // On évite d'ajouter des noms vides à la liste - if(name.length > 0) { + if(name.length > 0) { listItem = document.createElement('li'); listItem.appendChild(document.createTextNode(name)); @@ -169,35 +165,37 @@ ul { let list = document.getElementById('nameList'); list.appendChild(listItem); } -}</pre> +} +``` -<p>{{EmbedLiveSample("basic_button_example")}}</p> +{{EmbedLiveSample("basic_button_example")}} -<h3 id="toggle_button_example">Exemple d'interrupteur</h3> +### Exemple d'interrupteur -<p>Dans le fragment qui suit, on convertit un élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a> en interrupteur grâce au rôle <code>button</code> et à l'attribut <code>aria-pressed</code>. Lorsque le bouton est activé, <code>aria-pressed</code> change de valeur et alterne entre <code>true</code> et <code>false</code>.</p> +Dans le fragment qui suit, on convertit un élément [`<span>`](/fr/docs/Web/HTML/Element/span) en interrupteur grâce au rôle `button` et à l'attribut `aria-pressed`. Lorsque le bouton est activé, `aria-pressed` change de valeur et alterne entre `true` et `false`. -<h4 id="html_2">HTML</h4> +#### HTML -<pre class="brush: html"><button type="button" onclick="handleBtnClick()" onKeyDown="handleBtnKeyDown()"> +```html +<button type="button" onclick="handleBtnClick()" onKeyDown="handleBtnKeyDown()"> Couper le son -</button> +</button> -<span role="button" tabindex="0" +<span role="button" tabindex="0" aria-pressed="false" onclick="handleBtnClick(event)" - onKeyDown="handleBtnKeyDown(event)"> + onKeyDown="handleBtnKeyDown(event)"> Couper le son -</span> +</span> -<audio id="audio" src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3"> - Votre navigateur ne prend pas en charge l'élément <code>audio</code>. -</audio> +<audio id="audio" src="https://soundbible.com/mp3/Tyrannosaurus%20Rex%20Roar-SoundBible.com-807702404.mp3"> + Votre navigateur ne prend pas en charge l'élément <code>audio</code>. +</audio> +``` -</pre> +#### CSS -<h4 id="css_2">CSS</h4> - -<pre class="brush: css">button, +```css +button, [role="button"] { padding: 3px; border: 2px solid transparent; @@ -208,17 +206,18 @@ button:focus, [role="button"][aria-pressed="true"] { border: 2px solid #000; } -</pre> +``` -<h4 id="javascript_2">JavaScript</h4> +#### JavaScript -<pre class="brush: js">function handleBtnClick(event) { +```js +function handleBtnClick(event) { toggleButton(event.target); } function handleBtnKeyDown(event) { // On vérifie si les touches Entrée ou Espace sont pressées - if (event.key === " " || event.key === "Enter" || event.key === "Spacebar") { // <a href="/fr/docs/Web/API/KeyboardEvent/key/Key_Values#whitespace_keys">Prise en charge de "Spacebar" pour IE11</a> + if (event.key === " " || event.key === "Enter" || event.key === "Spacebar") { // Prise en charge de "Spacebar" pour IE11 // On empêche le défilement par défaut lorsque // la touche espace est utilisée event.preventDefault(); @@ -238,64 +237,45 @@ function toggleButton(element) { } else { audio.play(); } -}</pre> +} +``` -<h4 id="result">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample('toggle_button_example')}}</p> +{{EmbedLiveSample('toggle_button_example')}} -<h2 id="accessibility_concerns">Accessibilité</h2> +## Accessibilité -<p>Les boutons sont des contrôles interactifs et, à ce titre, peuvent recevoir le focus. Si le rôle <code>button</code> est ajouté à un élément qui ne peut recevoir le focus nativement (comme <code><span></code>, <code><div></code> ou <code><p></code>), l'attribut <code>tabindex</code> devra être utilisé afin de permettre le focus sur le bouton.</p> +Les boutons sont des contrôles interactifs et, à ce titre, peuvent recevoir le focus. Si le rôle `button` est ajouté à un élément qui ne peut recevoir le focus nativement (comme `<span>`, `<div>` ou `<p>`), l'attribut `tabindex` devra être utilisé afin de permettre le focus sur le bouton. -<div class="warning"> -<p><strong>Attention :</strong> Lorsqu'on utilise des liens avec le rôle <code>button</code>, il faut rajouter un gestionnaire d'évènement pour la touche <kbd>Espace</kbd>. En effet, les boutons s'activent avec <kbd>Espace</kbd> ou <kbd>Entrée</kbd> tandis que, nativement, les liens ne se déclenchent qu'avec <kbd>Entrée</kbd>.</p> -</div> +> **Attention :** Lorsqu'on utilise des liens avec le rôle `button`, il faut rajouter un gestionnaire d'évènement pour la touche <kbd>Espace</kbd>. En effet, les boutons s'activent avec <kbd>Espace</kbd> ou <kbd>Entrée</kbd> tandis que, nativement, les liens ne se déclenchent qu'avec <kbd>Entrée</kbd>. -<p>Lorsqu'on utilise le rôle <code>button</code>, les lecteurs d'écran annonce l'élément comme un bouton, généralement en énonçant « clic » suivi du nom accessible du bouton. Le nom accessible correspond au contenu de l'élément ou à la valeur de <code>aria-label</code> ou à l'élément référencé avec l'attribut <code>aria-labelledby</code>, ou à une description si elle existe.</p> +Lorsqu'on utilise le rôle `button`, les lecteurs d'écran annonce l'élément comme un bouton, généralement en énonçant « clic » suivi du nom accessible du bouton. Le nom accessible correspond au contenu de l'élément ou à la valeur de `aria-label` ou à l'élément référencé avec l'attribut `aria-labelledby`, ou à une description si elle existe. -<h2 id="best_practices">Bonnes pratiques</h2> +## Bonnes pratiques -<p>Si un lien effectue l'action d'un bouton, fournir <code>role="button"</code> à l'élément permettra aux outils d'assistance de comprendre la fonction de l'élément. Toutefois, une meilleure solution consiste à ajuster l'aspect visuel afin qu'il corresponde à la fonction et au rôle ARIA. Lorsque c'est possible, il est recommandé d'utiliser les boutons HTML natifs (<code><button></code>, <code><input type="button"></code>, <code><input type="submit"></code>, <code><input type="reset"></code> et <code><input type="image"></code>) plutôt que le rôle <code>button</code>. En effet, les boutons HTML natifs sont pris en charge par l'ensemble des agents utilisateurs et outils d'assistance et satisfont aux règles de gestion du focus et du clavier, sans qu'il soit nécessaire d'ajouter des adaptations.</p> +Si un lien effectue l'action d'un bouton, fournir `role="button"` à l'élément permettra aux outils d'assistance de comprendre la fonction de l'élément. Toutefois, une meilleure solution consiste à ajuster l'aspect visuel afin qu'il corresponde à la fonction et au rôle ARIA. Lorsque c'est possible, il est recommandé d'utiliser les boutons HTML natifs (`<button>`, `<input type="button">`, `<input type="submit">`, `<input type="reset">` et `<input type="image">`) plutôt que le rôle `button`. En effet, les boutons HTML natifs sont pris en charge par l'ensemble des agents utilisateurs et outils d'assistance et satisfont aux règles de gestion du focus et du clavier, sans qu'il soit nécessaire d'ajouter des adaptations. -<h2 id="specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("ARIA","#button","button")}}</td> - <td>{{Spec2('ARIA')}}</td> - </tr> - <tr> - <td>{{SpecName("ARIA Authoring Practices","#button","button")}}</td> - <td>{{Spec2('ARIA Authoring Practices')}}</td> - </tr> - </tbody> -</table> +| Spécification | État | +| -------------------------------------------------------------------------------- | ------------------------------------------------ | +| {{SpecName("ARIA","#button","button")}} | {{Spec2('ARIA')}} | +| {{SpecName("ARIA Authoring Practices","#button","button")}} | {{Spec2('ARIA Authoring Practices')}} | -<h2 id="Notes">Notes</h2> +## Notes -<h3 id="aria_attributes_used">Attributs ARIA utilisés</h3> +### Attributs ARIA utilisés -<ul> - <li><code><a href="https://www.w3.org/TR/wai-aria/roles#button">button</a></code></li> - <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-pressed">aria-pressed</a></code></li> - <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded">aria-expanded</a></code></li> - <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup">aria-haspopup</a></code></li> -</ul> +- [`button`](https://www.w3.org/TR/wai-aria/roles#button) +- [`aria-pressed`](https://www.w3.org/TR/wai-aria-1.1/#aria-pressed) +- [`aria-expanded`](https://www.w3.org/TR/wai-aria-1.1/#aria-expanded) +- [`aria-haspopup`](https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup) -<h3 id="Additional_resources">Ressources complémentaires</h3> +### Ressources complémentaires -<ul> - <li><a href="https://www.w3.org/TR/html5/dom.html#aria-usage-note">Sémantique native forte en HTML5</a></li> - <li><a href="https://www.w3.org/TR/aria-in-html/">Notes sur l'utilisation d'ARIA en HTML</a></li> - <li><a href="https://www.w3.org/TR/wai-aria-practices/examples/button/button.html">Exemple de code officiel WAI-ARIA</a></li> - <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/menubutton_role">Rôle ARIA <code>menubutton</code></a></li> - <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles"><strong>Rôles WAI-ARIA</strong></a>{{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}}</li> -</ul>
\ No newline at end of file +- [Sémantique native forte en HTML5](https://www.w3.org/TR/html5/dom.html#aria-usage-note) +- [Notes sur l'utilisation d'ARIA en HTML](https://www.w3.org/TR/aria-in-html/) +- [Exemple de code officiel WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/examples/button/button.html) +- [Rôle ARIA `menubutton`](/fr/docs/Web/Accessibility/ARIA/Roles/menubutton_role) +- [**Rôles WAI-ARIA**](/fr/docs/Web/Accessibility/ARIA/Roles){{ListSubpagesForSidebar("/en-US/docs/Web/Accessibility/ARIA/Roles")}} diff --git a/files/fr/web/accessibility/aria/roles/checkbox_role/index.md b/files/fr/web/accessibility/aria/roles/checkbox_role/index.md index 7b6168e783..0ce97c7f82 100644 --- a/files/fr/web/accessibility/aria/roles/checkbox_role/index.md +++ b/files/fr/web/accessibility/aria/roles/checkbox_role/index.md @@ -8,45 +8,53 @@ tags: translation_of: Web/Accessibility/ARIA/Roles/checkbox_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox --- -<h3 id="Description">Description</h3> - -<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#checkbox">checkbox</a>.</p> - -<p>Le rôle <code>checkbox</code> est utilisé pour des contrôles interactifs à cocher. Si un élément utilise <code>role="checkbox",</code> il est obligatoire pour cet élément d’avoir également un attribut <code>aria-checked</code> qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif <code>checkbox</code> ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle <code>role=checkbox</code> peut présenter trois états pour l'attribut <code>aria-checked</code> :</p> -<ul> - <li><code>aria-checked="true"</code> : la case est cochée ;</li> - <li><code>aria-checked="false"</code> : la case est décochée ;</li> - <li><code>aria-checked="mixed"</code> : la case est partiellement cochée.</li> -</ul> -<p>Le développeur doit modifier dynamiquement la valeur de l’attribut <code>aria-checked</code> lorsque la case est cochée.</p> -<p>Comme une case à cocher est un contrôle interactif, elle doit pouvoir recevoir le focus et être accessible au clavier. Si le rôle est appliqué à un élément qui ne peut recevoir le focus, l’attribut <code>tabindex</code> devra être utilisé pour corriger cela. Le raccourci clavier attendu pour activer une case à cocher est la barre d’espace.</p> -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> -<p>Lorsque le rôle <code>checkbox</code> est ajouté à un élément, l’agent utilisateur devrait suivre les étapes suivantes :</p> -<ul> - <li>Présenter l’élément comme ayant un rôle de case à cocher à l’API d’accessibilité du système d’exploitation ;</li> - <li>Lorsque la valeur de l’attribut <code>aria-checked</code> change, envoyer un événement accessible de changement d’état.</li> -</ul> -<p>Les technologies d’assistance doivent faire la chose suivante :</p> -<ul> - <li>Les lecteurs d’écran devraient annoncer l’élément comme une case à cocher, et, éventuellement, fournir des instructions sur les façons de l’activer.</li> -</ul> -<div class="note"> - <p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> -</div> -<h3 id="Exemples">Exemples</h3> -<h4 id="Exemple_1_Ajout_du_rôle_ARIA_checkbox">Exemple 1 : Ajout du rôle ARIA <code>checkbox</code></h4> -<pre class="brush: html"><span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span> -<label for="chk1">Enregistrer mes préférences</label> -</pre> -<h4 id="Exemples_concrets">Exemples concrets :</h4> -<ul> - <li><a href="http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php">http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php</a></li> -</ul> -<h3 id="Notes">Notes</h3> -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/roles#checkbox">checkbox</a></li> - <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked">aria-checked</a></li> -</ul> -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> -<h3 id="Autres_ressources">Autres ressources</h3> +### Description + +Cette technique présente l’utilisation du rôle [checkbox](http://www.w3.org/TR/wai-aria/roles#checkbox). + +Le rôle `checkbox` est utilisé pour des contrôles interactifs à cocher. Si un élément utilise `role="checkbox",` il est obligatoire pour cet élément d’avoir également un attribut `aria-checked` qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif `checkbox` ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle `role=checkbox` peut présenter trois états pour l'attribut `aria-checked` : + +- `aria-checked="true"` : la case est cochée ; +- `aria-checked="false"` : la case est décochée ; +- `aria-checked="mixed"` : la case est partiellement cochée. + +Le développeur doit modifier dynamiquement la valeur de l’attribut `aria-checked` lorsque la case est cochée. + +Comme une case à cocher est un contrôle interactif, elle doit pouvoir recevoir le focus et être accessible au clavier. Si le rôle est appliqué à un élément qui ne peut recevoir le focus, l’attribut `tabindex` devra être utilisé pour corriger cela. Le raccourci clavier attendu pour activer une case à cocher est la barre d’espace. + +### Effets possibles sur les agents utilisateurs et les technologies d’assistance + +Lorsque le rôle `checkbox` est ajouté à un élément, l’agent utilisateur devrait suivre les étapes suivantes : + +- Présenter l’élément comme ayant un rôle de case à cocher à l’API d’accessibilité du système d’exploitation ; +- Lorsque la valeur de l’attribut `aria-checked` change, envoyer un événement accessible de changement d’état. + +Les technologies d’assistance doivent faire la chose suivante : + +- Les lecteurs d’écran devraient annoncer l’élément comme une case à cocher, et, éventuellement, fournir des instructions sur les façons de l’activer. + +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. + +### Exemples + +#### Exemple 1 : Ajout du rôle ARIA `checkbox` + +```html +<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span> +<label for="chk1">Enregistrer mes préférences</label> +``` + +#### Exemples concrets : + +- <http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php> + +### Notes + +### Attributs ARIA utilisés + +- [checkbox](http://www.w3.org/TR/wai-aria/roles#checkbox) +- [aria-checked](http://www.w3.org/TR/wai-aria/states_and_properties#aria-checked) + +### Techniques ARIA connexes + +### Autres ressources diff --git a/files/fr/web/accessibility/aria/roles/dialog_role/index.md b/files/fr/web/accessibility/aria/roles/dialog_role/index.md index 57386e4f2a..14ed9da8d9 100644 --- a/files/fr/web/accessibility/aria/roles/dialog_role/index.md +++ b/files/fr/web/accessibility/aria/roles/dialog_role/index.md @@ -9,141 +9,126 @@ tags: translation_of: Web/Accessibility/ARIA/Roles/dialog_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation du rôle <code><a href="http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog">dialog (en)</a></code>.</p> +Cette technique présente l’utilisation du rôle [`dialog (en)`](http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#dialog). -<p>Le rôle <code>dialog</code> est utilisé pour marquer une fenêtre ou une boîte de dialogue d’application web qui sépare le contenu ou l’UI du reste de l’application web ou de la page. Visuellement, les boîtes de dialogues sont généralement placées par dessus le contenu de la page, à l’aide d’un calque (ou « Overlay »). Les boîtes de dialogue peuvent être non-modales (ce qui signifie qu’il est toujours possible d’interagir avec le contenu situé hors de la boîte de dialogue) ou modales (ce qui signifie qu’on ne peut interagir qu’avec le contenu de la boîte de dialogue).</p> +Le rôle `dialog` est utilisé pour marquer une fenêtre ou une boîte de dialogue d’application web qui sépare le contenu ou l’UI du reste de l’application web ou de la page. Visuellement, les boîtes de dialogues sont généralement placées par dessus le contenu de la page, à l’aide d’un calque (ou « Overlay »). Les boîtes de dialogue peuvent être non-modales (ce qui signifie qu’il est toujours possible d’interagir avec le contenu situé hors de la boîte de dialogue) ou modales (ce qui signifie qu’on ne peut interagir qu’avec le contenu de la boîte de dialogue). -<p>Marquer un élément de dialogue avec le rôle <code>dialog</code> aide les technologies d’assistance à identifier le contenu des boîtes de dialogue comme étant regroupé et séparé du reste du contenu de la page. Cependant, le seul ajout de <code>role="dialog"</code> n’est pas suffisant pour rendre une boîte de dialogue accessible. De plus, il faut veiller à ce qui suit :</p> +Marquer un élément de dialogue avec le rôle `dialog` aide les technologies d’assistance à identifier le contenu des boîtes de dialogue comme étant regroupé et séparé du reste du contenu de la page. Cependant, le seul ajout de `role="dialog"` n’est pas suffisant pour rendre une boîte de dialogue accessible. De plus, il faut veiller à ce qui suit : -<ul> - <li>La boîte de dialogue doit être correctement labélisée ;</li> - <li>Le focus clavier doit être géré correctement.</li> -</ul> +- La boîte de dialogue doit être correctement labélisée ; +- Le focus clavier doit être géré correctement. -<p>Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites.</p> +Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites. -<h4 id="Labélisation">Labélisation</h4> +#### Labélisation -<p>Bien qu’il ne soit pas obligatoire que la boîte de dialogue elle-même reçoive le focus, elle doit quand même besoin d’être labélisée. Le label donné à la boîte de dialogue fournira des informations contextuelles pour les contrôles interactifs qu’elle contient. En d’autres termes, le label de la boîte de dialogue agit comme label de regroupement pour les contrôles qu’elle contient. On peut comparer cela à la façon dont un élément <code><legend></code> fournit un label de regroupement pour les contrôles contenus dans un élément <code><fieldset></code>.</p> +Bien qu’il ne soit pas obligatoire que la boîte de dialogue elle-même reçoive le focus, elle doit quand même besoin d’être labélisée. Le label donné à la boîte de dialogue fournira des informations contextuelles pour les contrôles interactifs qu’elle contient. En d’autres termes, le label de la boîte de dialogue agit comme label de regroupement pour les contrôles qu’elle contient. On peut comparer cela à la façon dont un élément `<legend>` fournit un label de regroupement pour les contrôles contenus dans un élément `<fieldset>`. -<p>Si une boîte de dialogue a une barre de titre visible, le texte de cette barre peut être utilisé comme label pour la boîte elle-même. La meilleure façon de le faire est d’utiliser l’attribut <code>aria-labelledby</code> pour l’élément <code>role="dialog"</code>. De plus, si la boîte de dialogue contient une description supplémentaire, en plus du titre de la boîte, le texte de la description peut être associé avec la boîte de dialogue à l’aide de l’attribut <code>aria-describedby</code>. Cette approche est illustrée dans l’extrait de code ci-dessous :</p> +Si une boîte de dialogue a une barre de titre visible, le texte de cette barre peut être utilisé comme label pour la boîte elle-même. La meilleure façon de le faire est d’utiliser l’attribut `aria-labelledby` pour l’élément `role="dialog"`. De plus, si la boîte de dialogue contient une description supplémentaire, en plus du titre de la boîte, le texte de la description peut être associé avec la boîte de dialogue à l’aide de l’attribut `aria-describedby`. Cette approche est illustrée dans l’extrait de code ci-dessous : -<pre class="brush: html"><div <strong>role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"</strong>> - <h2 <strong>id="dialog1Title"</strong>>Vos informations personnelles ont correctement été actualisées.</h2> +```html +<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> + <h2 id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</h2> - <p <strong>id="dialog1Desc"</strong>>Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur. »</p> + <p id="dialog1Desc">Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur. »</p> - <button>Fermer</button> -</div> -</pre> - -<div class="note"> - <p><strong>Note :</strong> Gardez en tête que le titre d’une boîte de dialogue et sa description ne doivent pas être focalisables afin de toujours être perçus par les lecteurs d’écran opérant en mode non-virtuel. La combinaison du rôle ARIA <code>dialog</code> et des techniques de labélisation devrait permettre aux lecteurs d’écran d’annoncer les informations de la boîte de dialogue lorsque le focus arrive sur cette dernière.</p> + <button>Fermer</button> </div> +``` -<h4 id="Gestion_du_focus">Gestion du focus</h4> +> **Note :** Gardez en tête que le titre d’une boîte de dialogue et sa description ne doivent pas être focalisables afin de toujours être perçus par les lecteurs d’écran opérant en mode non-virtuel. La combinaison du rôle ARIA `dialog` et des techniques de labélisation devrait permettre aux lecteurs d’écran d’annoncer les informations de la boîte de dialogue lorsque le focus arrive sur cette dernière. -<p>Une boîte de dialogue a des exigences particulières concernant la façon dont le focus clavier doit être géré :</p> +#### Gestion du focus -<ul> - <li>Les boîtes de dialogue doivent avoir au moins un contrôle focalisable. Pour de nombreuses boîtes de dialogues, ce contrôle sera un bouton « Fermer », « OK » ou « Annuler. » En plus de cela, les boîtes de dialogue peuvent contenir n’importe quelle quantité d’éléments focalisables, même des formulaires ou d'autres composants conteneurs comme des onglets.</li> - <li>Quand la boîte de dialogue s’affiche à l’écran, le focus clavier devrait être placé sur le contrôle focalisable par défaut de la boîte de dialogue. Ce contrôle dépend de la fonction des boîtes de dialogue. Pour les boîtes de dialogue ne fournissant qu’un texte simple, ce pourra être un bouton « OK ». Pour les boîtes de dialogue contenant un formulaire, ce pourra être le premier champ à renseigner du formulaire.</li> - <li>Pour la plupart des boîtes de dialogue, le comportement attendu est que l’ordre de tabulation de la boîte <em>tourne</em>, c’est-à-dire que le premier élément focalisable sera focalisé après que le dernier élément focalisable de la boîte de dialogue aura été atteint lorsque l’utilisateur tabule. En d’autres termes, l’ordre de tabulation doit être contenu par la boîte de dialogue.</li> - <li>Si la boîte de dialogue peut être déplacée ou redimensionnée, assurez-vous que ces actions peuvent être exécutées par les utilisateurs de clavier tout comme les utilisateurs de souris. De la même façon, si une boîte de dialogue fournit certaines fonctionnalités, comme des barres d’outils ou des menus contextuels, celles-ci doivent également être accessibles et pouvoir être actionnées par les utilisateurs de clavier.</li> - <li>Les boîtes de dialogue peuvent être modales ou non modales. Lorsqu’une boîte de dialogue <em>modale</em> s’affiche à l’écran, il n’est pas possible d’interagir avec le reste du contenu de la page. En d’autres termes, l’UI principale de l’application ou le contenu de la page est considéré comme temporairement désactivé tant que la boîte de dialogue modale est affichée. Pour les boîtes de dialogue <em>non modales</em> il est toujours possible d’interagir avec du contenu extérieur à la boîte lorsqu’elle est affichée. Pour les boîtes de dialogue non modales, il y devra toujours y avoir un raccourci clavier global permettant de déplacer le focus entre les boîtes de dialogue ouvertes et la page principale. Pour plus d’informations, lisez le guide <a href="/fr/docs/ARIA/Guides_ARIA/Gérer_les_dialogues_modaux_et_non_modaux">Gérer les dialogues modaux et non modaux</a>.</li> -</ul> +Une boîte de dialogue a des exigences particulières concernant la façon dont le focus clavier doit être géré : -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +- Les boîtes de dialogue doivent avoir au moins un contrôle focalisable. Pour de nombreuses boîtes de dialogues, ce contrôle sera un bouton « Fermer », « OK » ou « Annuler. » En plus de cela, les boîtes de dialogue peuvent contenir n’importe quelle quantité d’éléments focalisables, même des formulaires ou d'autres composants conteneurs comme des onglets. +- Quand la boîte de dialogue s’affiche à l’écran, le focus clavier devrait être placé sur le contrôle focalisable par défaut de la boîte de dialogue. Ce contrôle dépend de la fonction des boîtes de dialogue. Pour les boîtes de dialogue ne fournissant qu’un texte simple, ce pourra être un bouton « OK ». Pour les boîtes de dialogue contenant un formulaire, ce pourra être le premier champ à renseigner du formulaire. +- Pour la plupart des boîtes de dialogue, le comportement attendu est que l’ordre de tabulation de la boîte _tourne_, c’est-à-dire que le premier élément focalisable sera focalisé après que le dernier élément focalisable de la boîte de dialogue aura été atteint lorsque l’utilisateur tabule. En d’autres termes, l’ordre de tabulation doit être contenu par la boîte de dialogue. +- Si la boîte de dialogue peut être déplacée ou redimensionnée, assurez-vous que ces actions peuvent être exécutées par les utilisateurs de clavier tout comme les utilisateurs de souris. De la même façon, si une boîte de dialogue fournit certaines fonctionnalités, comme des barres d’outils ou des menus contextuels, celles-ci doivent également être accessibles et pouvoir être actionnées par les utilisateurs de clavier. +- Les boîtes de dialogue peuvent être modales ou non modales. Lorsqu’une boîte de dialogue _modale_ s’affiche à l’écran, il n’est pas possible d’interagir avec le reste du contenu de la page. En d’autres termes, l’UI principale de l’application ou le contenu de la page est considéré comme temporairement désactivé tant que la boîte de dialogue modale est affichée. Pour les boîtes de dialogue _non modales_ il est toujours possible d’interagir avec du contenu extérieur à la boîte lorsqu’elle est affichée. Pour les boîtes de dialogue non modales, il y devra toujours y avoir un raccourci clavier global permettant de déplacer le focus entre les boîtes de dialogue ouvertes et la page principale. Pour plus d’informations, lisez le guide [Gérer les dialogues modaux et non modaux](/fr/docs/ARIA/Guides_ARIA/Gérer_les_dialogues_modaux_et_non_modaux). -<p>Lorsque le rôle <code>dialog</code> est utilisé, l’agent utilisateur doit faire la chose suivante :</p> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<ul> - <li>Présenter l’élément comme une boîte de dialogue à l’API accessibilité du système d’exploitation.</li> -</ul> +Lorsque le rôle `dialog` est utilisé, l’agent utilisateur doit faire la chose suivante : -<p>Lorsque la boîte de dialogue est correctement labélisée et que le focus est déplacé vers un contrôle à l’intérieur de la boîte, les lecteurs d’écran devraient annoncer le rôle accessible du dialogue, son nom et éventuellement sa description avant d’annoncer l’élément qui a reçu le focus.</p> +- Présenter l’élément comme une boîte de dialogue à l’API accessibilité du système d’exploitation. -<div class="note"> - <p><strong>Note :</strong> plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p> -</div> +Lorsque la boîte de dialogue est correctement labélisée et que le focus est déplacé vers un contrôle à l’intérieur de la boîte, les lecteurs d’écran devraient annoncer le rôle accessible du dialogue, son nom et éventuellement sa description avant d’annoncer l’élément qui a reçu le focus. -<h3 id="Exemples">Exemples</h3> +> **Note :** plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h4 id="Exemple_1_une_boîte_de_dialogue_contenant_un_formulaire">Exemple 1 : une boîte de dialogue contenant un formulaire</h4> +### Exemples -<pre class="brush: html"><div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> - <h2 id="dialog1Title">Formulaire de souscription</h2> +#### Exemple 1 : une boîte de dialogue contenant un formulaire - <p id="dialog1Desc">Nous ne partageons pas ces informations avec des tierces parties.</p> +```html +<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> + <h2 id="dialog1Title">Formulaire de souscription</h2> - <form> - <p> - <label for="firstName">Prénom</label> - <input id="firstName" type="text" /> - </p> + <p id="dialog1Desc">Nous ne partageons pas ces informations avec des tierces parties.</p> - <p> - <label for="lastName">Nom</label> - <input id="lastName" type="text" /> - </p> + <form> + <p> + <label for="firstName">Prénom</label> + <input id="firstName" type="text" /> + </p> - <p> - <label for="interests">Intérêts</label> - <textarea id="interests"></textarea> - </p> + <p> + <label for="lastName">Nom</label> + <input id="lastName" type="text" /> + </p> - <p> - <input type="checkbox" id="autoLogin" /> - <label for="autoLogin">Intérêts</label> - </p> + <p> + <label for="interests">Intérêts</label> + <textarea id="interests"></textarea> + </p> - <p> - <input type="submit" value="Enregistrer les informations"/> - </p> - </form> -</div> -</pre> + <p> + <input type="checkbox" id="autoLogin" /> + <label for="autoLogin">Intérêts</label> + </p> -<h4 id="Exemple_2_une_boîte_de_dialogue_basée_sur_un_Fieldset_comme_contenu_alternatif">Exemple 2 : une boîte de dialogue basée sur un <code>Fieldset</code> comme contenu alternatif</h4> + <p> + <input type="submit" value="Enregistrer les informations"/> + </p> + </form> +</div> +``` -<p>Pour prendre en charge les navigateurs ou les produits de technologies d’assistance qui ne prennent pas ARIA en charge, il est également possible d’appliquer le balisage <code>dialog</code> à un élément <code>fieldset</code> comme contenu alternatif. Ainsi le titre de la boîte de dialogue sera toujours annoncé correctement :</p> +#### Exemple 2 : une boîte de dialogue basée sur un `Fieldset` comme contenu alternatif -<pre class="brush: html"><strong><fieldset role="dialog"</strong> aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> - <strong><legend></strong> - <span id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</span> - <span id="dialog1Desc">Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur ».</span> - </legend> +Pour prendre en charge les navigateurs ou les produits de technologies d’assistance qui ne prennent pas ARIA en charge, il est également possible d’appliquer le balisage `dialog` à un élément `fieldset` comme contenu alternatif. Ainsi le titre de la boîte de dialogue sera toujours annoncé correctement : - <button>Fermer</button> -</fieldset> -</pre> +```html +<fieldset role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> + <legend> + <span id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</span> + <span id="dialog1Desc">Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur ».</span> + </legend> -<h4 id="Exemples_concrets">Exemples concrets :</h4> + <button>Fermer</button> +</fieldset> +``` -<ul> - <li><a href="http://jqueryui.com/demos/dialog/">jQuery-UI Dialog</a></li> -</ul> +#### Exemples concrets : -<h3 id="Notes">Notes</h3> +- [jQuery-UI Dialog](http://jqueryui.com/demos/dialog/) -<div class="note"> - <p><strong>Note :</strong> bien qu'il soit possible d’empêcher les utilisateurs de clavier de bouger le focus vers des éléments en dehors des boîtes de dialogues, les utilisateurs de lecteurs d’écran ont toujours la possibilité de parcourir ce contenu pratiquement en utilisant le curseur virtuel du lecteur d’écran. À cause de cela, les boîtes de dialogue sont considérées comme des cas spéciaux du rôle <code>application</code> : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran.</p> -</div> +### Notes + +> **Note :** bien qu'il soit possible d’empêcher les utilisateurs de clavier de bouger le focus vers des éléments en dehors des boîtes de dialogues, les utilisateurs de lecteurs d’écran ont toujours la possibilité de parcourir ce contenu pratiquement en utilisant le curseur virtuel du lecteur d’écran. À cause de cela, les boîtes de dialogue sont considérées comme des cas spéciaux du rôle `application` : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran. -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +### Attributs ARIA utilisés -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/roles#dialog">dialog (en)</a></li> - <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">aria-labelledby (en)</a></li> - <li><a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby">aria-describedby (en)</a></li> -</ul> +- [dialog (en)](http://www.w3.org/TR/wai-aria/roles#dialog) +- [aria-labelledby (en)](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) +- [aria-describedby (en)](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<ul> - <li><a href="/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog">Utiliser le rôle <code>alertdialog</code></a></li> -</ul> +- [Utiliser le rôle `alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources diff --git a/files/fr/web/accessibility/aria/roles/listbox_role/index.md b/files/fr/web/accessibility/aria/roles/listbox_role/index.md index a3abd6cb40..a454806a8c 100644 --- a/files/fr/web/accessibility/aria/roles/listbox_role/index.md +++ b/files/fr/web/accessibility/aria/roles/listbox_role/index.md @@ -8,85 +8,72 @@ tags: translation_of: Web/Accessibility/ARIA/Roles/listbox_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#listbox">listbox</a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +Cette technique présente l’utilisation du rôle [listbox](http://www.w3.org/TR/wai-aria/roles#listbox) et décrit les effets produits sur les navigateurs et les technologies d’assistance. -<p>Le rôle <code>listbox</code> est utilisé pour identifier un élément qui crée une liste à partir de laquelle un utilisateur peut sélectionner un ou plusieurs éléments statiques et peut contenir des images, contrairement à l’élément HTML {{ HTMLElement("select") }}. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement accessible <code>listbox</code> aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> +Le rôle `listbox` est utilisé pour identifier un élément qui crée une liste à partir de laquelle un utilisateur peut sélectionner un ou plusieurs éléments statiques et peut contenir des images, contrairement à l’élément HTML {{ HTMLElement("select") }}. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement accessible `listbox` aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. -<p>Chaque entrée de la boîte liste devrait avoir un rôle d’<a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option">option</a> et devrait être une descendante de la boîte liste dans l’arbre DOM. Si une ou plusieurs entrées ne sont pas des descendantes de la boîte liste dans le DOM, référez-vous aux <a href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">Bonnes pratiques ARIA</a> pour obtenir plus de détails sur les propriétés additionnelles qui doivent être définies.</p> +Chaque entrée de la boîte liste devrait avoir un rôle d’[option](http://www.w3.org/TR/2010/WD-wai-aria-20100916/roles#option) et devrait être une descendante de la boîte liste dans l’arbre DOM. Si une ou plusieurs entrées ne sont pas des descendantes de la boîte liste dans le DOM, référez-vous aux [Bonnes pratiques ARIA](http://www.w3.org/TR/wai-aria-practices/#listbox_div) pour obtenir plus de détails sur les propriétés additionnelles qui doivent être définies. -<p>Lorsqu’on navigue entre les différents éléments d’une liste, le premier élément de la liste sera sélectionné par défaut en l’absence de sélection existante. Les flèches haut et bas permettent de naviguer dans la liste, et appuyer sur <kbd>Maj+Flèche haut/bas</kbd> déplacera et développera la sélection. Saisir un ou plusieurs lettres permet de naviguer dans la liste des éléments (une seule et même lettre positionnera la sélection sur chacun des éléments qui commence par elle, plusieurs lettres placeront la sélection sur le premier élément commençant par la chaîne). Si l’élément courant est associé à un menu contextuel, <kbd>Maj+F10</kbd> affichera ce menu. Si les éléments de la liste peuvent être cochés, <kbd>Espace</kbd> peut être utilisée pour basculer l’état de la <a href="http://www.w3.org/TR/wai-aria-practices/#checkbox">checkboxes</a>. Pour les éléments de liste sélectionnables, <kbd>Espace</kbd> bascule l’état de sélection, <kbd>Maj+Espace</kbd> peut être utilisé pour sélection des éléments contigus, <kbd>Ctrl+Flèche</kbd> déplace le curseur sans sélectionner d’élément, et <kbd>Ctrl+Espace</kbd> peut être utilisé pour sélectionner des éléments non-contigus. Il est recommandé d’utiliser une case à cocher, un lien ou tout autre méthode pour permettre la sélection de tous les éléments, et <kbd>Ctrl+A</kbd> peut être utilisé comme raccourci pour cela.</p> +Lorsqu’on navigue entre les différents éléments d’une liste, le premier élément de la liste sera sélectionné par défaut en l’absence de sélection existante. Les flèches haut et bas permettent de naviguer dans la liste, et appuyer sur <kbd>Maj+Flèche haut/bas</kbd> déplacera et développera la sélection. Saisir un ou plusieurs lettres permet de naviguer dans la liste des éléments (une seule et même lettre positionnera la sélection sur chacun des éléments qui commence par elle, plusieurs lettres placeront la sélection sur le premier élément commençant par la chaîne). Si l’élément courant est associé à un menu contextuel, <kbd>Maj+F10</kbd> affichera ce menu. Si les éléments de la liste peuvent être cochés, <kbd>Espace</kbd> peut être utilisée pour basculer l’état de la [checkboxes](http://www.w3.org/TR/wai-aria-practices/#checkbox). Pour les éléments de liste sélectionnables, <kbd>Espace</kbd> bascule l’état de sélection, <kbd>Maj+Espace</kbd> peut être utilisé pour sélection des éléments contigus, <kbd>Ctrl+Flèche</kbd> déplace le curseur sans sélectionner d’élément, et <kbd>Ctrl+Espace</kbd> peut être utilisé pour sélectionner des éléments non-contigus. Il est recommandé d’utiliser une case à cocher, un lien ou tout autre méthode pour permettre la sélection de tous les éléments, et <kbd>Ctrl+A</kbd> peut être utilisé comme raccourci pour cela. -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Lorsque le rôle <code>listbox</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> +Lorsque le rôle `listbox` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -<ul> - <li>Présenter l’élément comme ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation. Alternativement, s’il est un enfant de ou s’il appartient à une boîte combinée <a href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a>, présenter l’élément comme un <a href="http://www.w3.org/TR/wai-aria/roles#menu">menu</a> ;</li> - <li>Déclencher un événement liste (ou dans les cas spéciaux, un événement menu) accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> -</ul> +- Présenter l’élément comme ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation. Alternativement, s’il est un enfant de ou s’il appartient à une boîte combinée [combobox](http://www.w3.org/TR/wai-aria/roles#combobox), présenter l’élément comme un [menu](http://www.w3.org/TR/wai-aria/roles#menu) ; +- Déclencher un événement liste (ou dans les cas spéciaux, un événement menu) accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : -<ul> - <li>Les lecteurs d’écran devraient annoncer le label et le rôle de la boîte liste lorsqu’elle obtient le focus. Si un élément de la liste obtient le focus, il devrait être annoncé après, suivi par une indication de la position de l’élément dans la liste si le lecteur d’écran prend en charge cette fonction. Lorsque le focus se déplace dans la liste, le lecteur d’écran devrait annoncer les éléments de la liste appropriés.</li> - <li>Les loupes d’écran devraient agrandir la boîte liste.</li> -</ul> +- Les lecteurs d’écran devraient annoncer le label et le rôle de la boîte liste lorsqu’elle obtient le focus. Si un élément de la liste obtient le focus, il devrait être annoncé après, suivi par une indication de la position de l’élément dans la liste si le lecteur d’écran prend en charge cette fonction. Lorsque le focus se déplace dans la liste, le lecteur d’écran devrait annoncer les éléments de la liste appropriés. +- Les loupes d’écran devraient agrandir la boîte liste. -<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1_une_liste_de_sélection_simple_qui_utilise_l’attribut_aria-activedescendant">Exemple 1 : une liste de sélection simple qui utilise l’attribut <code>aria-activedescendant</code></h4> +#### Exemple 1 : une liste de sélection simple qui utilise l’attribut `aria-activedescendant` -<p>L’extrait de code ci-dessous montre comment le rôle <code>listbox</code> est ajouté directement dans le code source HTML :</p> +L’extrait de code ci-dessous montre comment le rôle `listbox` est ajouté directement dans le code source HTML : -<pre class="brush: html"><div role="listbox" tabindex="0" id="listbox1" onclick="return listItemClick(event);" +```html +<div role="listbox" tabindex="0" id="listbox1" onclick="return listItemClick(event);" onkeydown="return listItemKeyEvent(event);" onkeypress="return listItemKeyEvent(event);" - onfocus="this.className='focus';" onblur="this.className='blur';" aria-activedescendant="listbox1-1"> - <div role="option" id="listbox1-1" class="selected">Vert</div> - <div role="option" id="listbox1-2">Orange</div> - <div role="option" id="listbox1-3">Rouge</div> - <div role="option" id="listbox1-4">Bleu</div> - <div role="option" id="listbox1-5">Violet</div> - <div role="option" id="listbox1-6">Pervenche</div> -</div> -</pre> + onfocus="this.className='focus';" onblur="this.className='blur';" aria-activedescendant="listbox1-1"> + <div role="option" id="listbox1-1" class="selected">Vert</div> + <div role="option" id="listbox1-2">Orange</div> + <div role="option" id="listbox1-3">Rouge</div> + <div role="option" id="listbox1-4">Bleu</div> + <div role="option" id="listbox1-5">Violet</div> + <div role="option" id="listbox1-6">Pervenche</div> +</div> +``` -<p>Voir l’<a href="http://codetalks.org/source/widgets/listbox/listbox.html">exemple</a> CodeTalks pour plus de détails.</p> +Voir l’[exemple](http://codetalks.org/source/widgets/listbox/listbox.html) CodeTalks pour plus de détails. -<h4 id="Exemples_concrets">Exemples concrets :</h4> +#### Exemples concrets : -<ul> - <li><a href="https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox.html">https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox.html</a></li> -</ul> +- <https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox.html> -<h3 id="Notes">Notes</h3> +### Notes -<ul> - <li>Pour être accessible au clavier, les développeurs doivent <a href="http://www.w3.org/TR/wai-aria/roles#option">gérer le focus</a> de chaque descendant de ce rôle.</li> - <li>Il est recommandé aux développeurs d’utiliser différents styles pour la sélection lorsque la liste n’a pas le focus, par exemple, une sélection inactive est parfois affichée avec une couleur d’arrière-plan plus claire.</li> - <li>Si la boîte liste ne fait pas partie d’un autre composant, il faut définir sa propriété <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>.</li> - <li>Si une ou plusieurs entrées ne sont pas des descendants DOM de la boîte liste, il faudra définir des propriétés <code>aria-*</code> supplémentaires (voir <a href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">Bonnes pratiques ARIA</a>).</li> - <li>S’il existe une bonne raison pour <a href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded">étendre</a> la boîte liste, le rôle <a href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a> peut être plus approprié.</li> -</ul> +- Pour être accessible au clavier, les développeurs doivent [gérer le focus](http://www.w3.org/TR/wai-aria/roles#option) de chaque descendant de ce rôle. +- Il est recommandé aux développeurs d’utiliser différents styles pour la sélection lorsque la liste n’a pas le focus, par exemple, une sélection inactive est parfois affichée avec une couleur d’arrière-plan plus claire. +- Si la boîte liste ne fait pas partie d’un autre composant, il faut définir sa propriété [`aria-labelledby`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby). +- Si une ou plusieurs entrées ne sont pas des descendants DOM de la boîte liste, il faudra définir des propriétés `aria-*` supplémentaires (voir [Bonnes pratiques ARIA](http://www.w3.org/TR/wai-aria-practices/#listbox_div)). +- S’il existe une bonne raison pour [étendre](http://www.w3.org/TR/wai-aria/states_and_properties#aria-expanded) la boîte liste, le rôle [combobox](http://www.w3.org/TR/wai-aria/roles#combobox) peut être plus approprié. -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +### Attributs ARIA utilisés -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/roles#listbox">listbox</a></li> -</ul> +- [listbox](http://www.w3.org/TR/wai-aria/roles#listbox) -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<ul> - <li>Rôle <a href="http://www.w3.org/TR/wai-aria/roles#combobox">combobox</a>.</li> -</ul> +- Rôle [combobox](http://www.w3.org/TR/wai-aria/roles#combobox). -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources -<ul> - <li>Bonnes pratiques ARIA – Listbox : <a href="http://www.w3.org/TR/wai-aria-practices/#listbox_div">#listbox_div</a></li> - <li>Le modèle de rôles ARIA – Listbox : <a href="http://www.w3.org/TR/wai-aria/roles#listbox">#listbox</a></li> -</ul> +- Bonnes pratiques ARIA – Listbox : [#listbox_div](http://www.w3.org/TR/wai-aria-practices/#listbox_div) +- Le modèle de rôles ARIA – Listbox : [#listbox](http://www.w3.org/TR/wai-aria/roles#listbox) diff --git a/files/fr/web/accessibility/aria/roles/switch_role/index.md b/files/fr/web/accessibility/aria/roles/switch_role/index.md index ec25d40d10..1dd2f5d17e 100644 --- a/files/fr/web/accessibility/aria/roles/switch_role/index.md +++ b/files/fr/web/accessibility/aria/roles/switch_role/index.md @@ -9,6 +9,6 @@ tags: translation_of: Web/Accessibility/ARIA/Roles/Switch_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_switch --- -<p>Le rôle ARIA switch est très similaire au <a href="/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox">role checkbox</a>, à la sémantique près — il a deux états représentant on/off, au lieu de checked/unchecked.</p> +Le rôle ARIA switch est très similaire au [role checkbox](/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox), à la sémantique près — il a deux états représentant on/off, au lieu de checked/unchecked. -<p>Extrait des <a href="http://rawgit.com/w3c/aria/master/aria/aria.html#switch">spec ARIA 1.1 </a>: l'attribut <code>aria-checked</code> d'un <code>switch</code> indique si l'entrée est on (<code>true</code>) ou off (<code>false</code>). La valeur <code>mixed</code> n'est pas supportée, et les agents utilisateurs <em>DOIVENT</em> la traiter comme équivalente à <code>false</code> pour ce rôle.</p> +Extrait des [spec ARIA 1.1 ](http://rawgit.com/w3c/aria/master/aria/aria.html#switch): l'attribut `aria-checked` d'un `switch` indique si l'entrée est on (`true`) ou off (`false`). La valeur `mixed` n'est pas supportée, et les agents utilisateurs _DOIVENT_ la traiter comme équivalente à `false` pour ce rôle. diff --git a/files/fr/web/accessibility/aria/roles/textbox_role/index.md b/files/fr/web/accessibility/aria/roles/textbox_role/index.md index f0c6824c54..ce0aeb8362 100644 --- a/files/fr/web/accessibility/aria/roles/textbox_role/index.md +++ b/files/fr/web/accessibility/aria/roles/textbox_role/index.md @@ -8,70 +8,65 @@ tags: translation_of: Web/Accessibility/ARIA/Roles/textbox_role original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox --- -<h3 id="Description">Description</h3> +### Description -<p>Cette technique présente l’utilisation du rôle <a href="http://www.w3.org/TR/wai-aria/roles#textbox"><code>textbox</code></a> et décrit les effets produits sur les navigateurs et les technologies d’assistance.</p> +Cette technique présente l’utilisation du rôle [`textbox`](http://www.w3.org/TR/wai-aria/roles#textbox) et décrit les effets produits sur les navigateurs et les technologies d’assistance. -<p>Le rôle <code>textbox</code> est utilisé pour identifier un élément permettant la saisie d’un texte librement formaté. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement <code>textbox</code> accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur.</p> +Le rôle `textbox` est utilisé pour identifier un élément permettant la saisie d’un texte librement formaté. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement `textbox` accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. -<p>L’utilisation par défaut est pour un champ de saisie monoligne où <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, enverra le formulaire, par exemple, comme avec le HTML <code><input type="text"></code>. Lorsqu’on a un champ multilignes et que les retours à la ligne sont pris en charge, par exemple avec l’utilisation d’un élément HTML <code><textarea></code>, il est également nécessaire de définir l’attribut <code>aria-multiline="true"</code>.</p> +L’utilisation par défaut est pour un champ de saisie monoligne où <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, enverra le formulaire, par exemple, comme avec le HTML `<input type="text">`. Lorsqu’on a un champ multilignes et que les retours à la ligne sont pris en charge, par exemple avec l’utilisation d’un élément HTML `<textarea>`, il est également nécessaire de définir l’attribut `aria-multiline="true"`. -<p>Lorsqu’un champ texte est en lecture seule, cela devrait être indiqué en utilisant l’attribut <code>aria-readonly="true"</code> sur l’élément concerné.</p> +Lorsqu’un champ texte est en lecture seule, cela devrait être indiqué en utilisant l’attribut `aria-readonly="true"` sur l’élément concerné. -<h3 id="Effets_possibles_sur_les_agents_utilisateurs_et_les_technologies_d’assistance">Effets possibles sur les agents utilisateurs et les technologies d’assistance</h3> +### Effets possibles sur les agents utilisateurs et les technologies d’assistance -<p>Lorsque le rôle <code>textbox</code> est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes :</p> +Lorsque le rôle `textbox` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -<ul> - <li>Présenter l’élément comme ayant un rôle <code>textbox</code> à l’API d’accessibilité du système d’exploitation ;</li> - <li>Déclencher un événement <code>textbox</code> accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge.</li> -</ul> +- Présenter l’élément comme ayant un rôle `textbox` à l’API d’accessibilité du système d’exploitation ; +- Déclencher un événement `textbox` accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. -<p>Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :</p> +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : -<ul> - <li>Les lecteurs d’écran devraient annoncer son label et son rôle lorsque le focus est sur la boite de texte. Si elle contient également du contenu, il devrait être annoncé comme avec une boite de texte régulière ;</li> - <li>Les loupes d’écran devraient agrandir la boite de texte.</li> -</ul> +- Les lecteurs d’écran devraient annoncer son label et son rôle lorsque le focus est sur la boite de texte. Si elle contient également du contenu, il devrait être annoncé comme avec une boite de texte régulière ; +- Les loupes d’écran devraient agrandir la boite de texte. -<div class="note"><p><strong>Note :</strong> il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative.</p></div> +> **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. -<h3 id="Exemples">Exemples</h3> +### Exemples -<h4 id="Exemple_1_ajout_du_rôle_textbox_dans_le_code_HTML_d’un_champ_de_saisie_monoligne_<input>">Exemple 1 : ajout du rôle <code>textbox</code> dans le code HTML d’un champ de saisie monoligne <code><input></code></h4> +#### Exemple 1 : ajout du rôle `textbox` dans le code HTML d’un champ de saisie monoligne `<input>` -<p>L’extrait de code ci-dessous montre comment le rôle <code>textbox</code> est ajouté directement dans le code source HTML.</p> +L’extrait de code ci-dessous montre comment le rôle `textbox` est ajouté directement dans le code source HTML. -<pre class="brush: html"><input type="text" role="textbox" value="Voici du texte" /></pre> +```html +<input type="text" role="textbox" value="Voici du texte" /> +``` -<h4 id="Exemple_2_ajout_du_rôle_textbox_dans_le_code_HTML_d’un_champ_de_saisie_multilignes_<textarea>">Exemple 2 : ajout du rôle <code>textbox</code> dans le code HTML d’un champ de saisie multilignes <code><textarea></code></h4> +#### Exemple 2 : ajout du rôle `textbox` dans le code HTML d’un champ de saisie multilignes `<textarea>` -<p>L’extrait de code ci-dessous montre comment le rôle <code>textbox</code> est ajouté directement dans le code source HTML.</p> +L’extrait de code ci-dessous montre comment le rôle `textbox` est ajouté directement dans le code source HTML. -<pre class="brush: html"><textarea role="textbox" aria-multiline="true"> +```html +<textarea role="textbox" aria-multiline="true"> Voici du texte … sur plusieurs lignes. -</textarea> -</pre> +</textarea> +``` -<h4 id="Exemples_concrets">Exemples concrets :</h4> +#### Exemples concrets : -<h3 id="Notes">Notes</h3> +### Notes -<ul> - <li>Les développeurs doivent connaitre la distinction qui existe entre les champs de saisie monolignes et les champs de saisie multilignes lorsqu’ils créent un champ ;</li> - <li>Les champs en lecture seule devraient être indiqués avec l’attribut <code>aria-readonly</code>.</li> -</ul> +- Les développeurs doivent connaitre la distinction qui existe entre les champs de saisie monolignes et les champs de saisie multilignes lorsqu’ils créent un champ ; +- Les champs en lecture seule devraient être indiqués avec l’attribut `aria-readonly`. -<h3 id="Attributs_ARIA_utilisés">Attributs ARIA utilisés</h3> +### Attributs ARIA utilisés -<ul> - <li><a href="http://www.w3.org/TR/wai-aria/roles#textbox">textbox</a>.</li> -</ul> +- [textbox](http://www.w3.org/TR/wai-aria/roles#textbox). -<h3 id="Techniques_ARIA_connexes">Techniques ARIA connexes</h3> +### Techniques ARIA connexes -<p>N/A</p> +N/A -<h3 id="Autres_ressources">Autres ressources</h3> +### Autres ressources diff --git a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md index 4c4f1a433a..c9815e24a0 100644 --- a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md +++ b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md @@ -9,149 +9,82 @@ tags: translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA --- -<h2 id="Qu’est-ce_qu’ARIA">Qu’est-ce qu’ARIA ?</h2> - -<p>WAI-ARIA est la spécification <a href="http://www.w3.org/WAI/intro/aria.php">Applications Internet Riches Accessibles</a> de la <a href="http://www.w3.org/WAI/">Web Accessibility Initiative</a> (Initiative pour l’accessibilité du Web) du <a href="http://www.w3.org/">W3C</a>. ARIA fournit des moyens de rendre plus accessible les applications Web et les composants dynamiques à une plus grande part des utilisateurs, y compris ceux utilisant des technologies d’assistance telles que les lecteurs d’écrans ou les agrandisseurs.</p> - -<p>ARIA fournit des éléments sémantiques additionnels afin de décrire les rôles, les états et la fonction de nombreux contrôles d’interfaces utilisateurs répandus, tels que les menus, les curseurs, les arbres et les dialogues. Il fournit également des informations structurelles supplémentaires, permettant aux auteurs d’identifier des points de repère, des zones et des grilles dans leurs pages Web. ARIA permet aux applications et aux composants JavaScript dynamiques d’interagir avec une grande variété de technologies d’assistance de bureau.</p> - -<p>Pour plus d’informations sur la création de composants dynamiques accessibles avec ARIA, lire l’article <a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles">Aperçu d’applications Web et de composants dynamiques accessibles</a>.</p> - -<h2 id="Où_ARIA_est-il_pris_en_charge">Où ARIA est-il pris en charge ?</h2> - -<p>ARIA est une spécification relativement récente, mais son implémentation se développe. Une large variété de navigateurs communément utilisés, de technologies d’assistance, de kits de développements JavaScript et d’applications prennent maintenant en charge ARIA. Toutefois, de nombreux utilisateurs peuvent encore utiliser d’anciennes versions de ces technologies. Vous devrez sans doute considérer l’implémentation d’ARIA à l’aide des techniques d’améliorations progressives – telle qu’ajouter ARIA en utilisant JavaScript, mais pas directement dans votre balisage – afin de prendre en charge de manière plus élégante les vieux navigateurs et les anciennes technologies d’assistance.</p> - -<h3 id="Navigateurs">Navigateurs</h3> - -<p>ARIA est pris en charge dans les navigateurs suivants :</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Navigateur</th> - <th>Version minimale</th> - <th>Notes</th> - </tr> - <tr> - <td>Firefox</td> - <td>3.0+</td> - <td>Fonctionne avec NVDA, JAWS 10+ et Orca</td> - </tr> - <tr> - <td><a href="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support">Chrome</a></td> - <td>Dernière</td> - <td>Prise en charge encore expérimentale des lecteurs d’écran jusqu’à Chrome 15</td> - </tr> - <tr> - <td>Safari</td> - <td>4+</td> - <td>La prise en charge par Safari 5 est grandement améliorée.<br> - La prise en charge des zones live requiert Safari 5 avec VoiceOver sur iOS5 ou OS X Lion</td> - </tr> - <tr> - <td><a href="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/">Opera</a></td> - <td>9.5+</td> - <td>Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ?</td> - </tr> - <tr> - <td><a href="http://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx">Internet Explorer</a></td> - <td>8+</td> - <td>Fonctionne avec JAWS 10+ et NVDA. Pas de prise en charge des zones live dans NVDA.<br> - La prise en charge dans IE9 est grandement améliorée.</td> - </tr> - </tbody> -</table> - -<p>Dans certains cas, les versions les plus jeunes peuvent prendre en charge certaines fonctionnalités d’ARIA. Des tableaux de compatibilité des navigateurs peuvent être consultés depuis différentes sources :</p> - -<ul> - <li><a href="http://caniuse.com/wai-aria">caniuse.com</a></li> - <li><a href="http://www.paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF-update2.html">Le groupe Paciello</a></li> -</ul> - -<h3 id="Technologies_d’assistance">Technologies d’assistance</h3> - -<p>Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont :</p> - -<table class="standard-table"> - <tbody> - <tr> - <th>Technologies d’assistance</th> - <th>Version minimale pour un ARIA de base</th> - <th>Version minimale pour la prise en charge des zones live et des alertes</th> - </tr> - <tr> - <td>NVDA</td> - <td>2010.2<br> - (NVDA propose toujours des mises à jour gratuites)</td> - <td>2011.1 pour Firefox, pas de prise en charge des zones live dans IE avant 2011.2.</td> - </tr> - <tr> - <td>Orca</td> - <td>? (À définir)</td> - <td>? (À définir)</td> - </tr> - <tr> - <td>VoiceOver</td> - <td>OSX 10.5,<br> - iOS 4</td> - <td>OS X 10.7<br> - iOS 5</td> - </tr> - <tr> - <td>JAWS</td> - <td>8</td> - <td>10</td> - </tr> - <tr> - <td>Window-Eyes</td> - <td>7</td> - <td>Pas de prise en charge des zones live</td> - </tr> - <tr> - <td>ZoomText</td> - <td>?</td> - <td>Pas de prise en charge des zones live</td> - </tr> - </tbody> -</table> - -<p>Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes.</p> - -<p>For notes on JAWS support for ARIA as of JAWS 10, lire cet article du <em>groupe Paciello</em> : <a href="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/">JAWS Support for ARIA</a>.</p> - -<h3 id="Kits_de_développement_JavaScript">Kits de développement JavaScript</h3> - -<p>Les rôles, les états et les propriétés ARIA ont été ajoutées à de nombreux kits de développements d’interfaces utilisateur JavaScript, y compris :</p> - -<ul> - <li>Dojo/Dijit</li> - <li>jQuery UI</li> - <li>Fluid Infusion</li> - <li>Google Closure</li> - <li>Google Web Toolkit</li> - <li>BBC Glow</li> - <li>Yahoo! User Interface Library (YUI)</li> -</ul> - -<p>Pour plus d’informations sur l’accessibilité des kits de développement JavaScript :</p> - -<ul> - <li><a href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">WAI-ARIA Implementation in JavaScript UI Libraries</a> (Implémentation de WAI-ARIA dans les bibliothèques JavaScript d’UI) de Steve Faulkner</li> -</ul> - -<h2 id="Pouvez-vous_me_montrez_un_exemple_d’ARIA_en_action">Pouvez-vous me montrez un exemple d’ARIA en action ?</h2> - -<p>Voici le code HTML 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 est construite à l’aide de l’élément <code><div></code>, qui n’est pas des plus descriptif. Malheureusement, en HTML4 il n’existe pas de balise plus sémantique pour les développeurs, aussi avons nous besoin d’inclure les rôles et les propriétés ARIA. Ils sont spécifiés en ajoutant des attributs à l’élément <code><div></code>. Dans cet exemple, l’attribut <code>role="progressbar"</code> informe le navigateur que cet élément est actuellement un composant de barre de progression codé en JavaScript. Les attributs <code>aria-valuemin</code> et <code>aria-valuemax</code> spécifient les valeurs limites de la barre de progression, et <code>aria-valuenow</code> décrit a valeur courante.</p> - -<p>Plutôt que de les intégrer directement dans le balisage, les attributs ARIA sont généralement ajoutés à l’élément et dynamiquement actualisés à l’aide de code JavaScript tel que celui-ci :</p> - -<pre class="brush: js">// Trouver le <div> de la barre de progression dans le DOM. +## Qu’est-ce qu’ARIA ? + +WAI-ARIA est la spécification [Applications Internet Riches Accessibles](http://www.w3.org/WAI/intro/aria.php) de la [Web Accessibility Initiative](http://www.w3.org/WAI/) (Initiative pour l’accessibilité du Web) du [W3C](http://www.w3.org/). ARIA fournit des moyens de rendre plus accessible les applications Web et les composants dynamiques à une plus grande part des utilisateurs, y compris ceux utilisant des technologies d’assistance telles que les lecteurs d’écrans ou les agrandisseurs. + +ARIA fournit des éléments sémantiques additionnels afin de décrire les rôles, les états et la fonction de nombreux contrôles d’interfaces utilisateurs répandus, tels que les menus, les curseurs, les arbres et les dialogues. Il fournit également des informations structurelles supplémentaires, permettant aux auteurs d’identifier des points de repère, des zones et des grilles dans leurs pages Web. ARIA permet aux applications et aux composants JavaScript dynamiques d’interagir avec une grande variété de technologies d’assistance de bureau. + +Pour plus d’informations sur la création de composants dynamiques accessibles avec ARIA, lire l’article [Aperçu d’applications Web et de composants dynamiques accessibles](/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles). + +## Où ARIA est-il pris en charge ? + +ARIA est une spécification relativement récente, mais son implémentation se développe. Une large variété de navigateurs communément utilisés, de technologies d’assistance, de kits de développements JavaScript et d’applications prennent maintenant en charge ARIA. Toutefois, de nombreux utilisateurs peuvent encore utiliser d’anciennes versions de ces technologies. Vous devrez sans doute considérer l’implémentation d’ARIA à l’aide des techniques d’améliorations progressives – telle qu’ajouter ARIA en utilisant JavaScript, mais pas directement dans votre balisage – afin de prendre en charge de manière plus élégante les vieux navigateurs et les anciennes technologies d’assistance. + +### Navigateurs + +ARIA est pris en charge dans les navigateurs suivants : + +| Navigateur | Version minimale | Notes | +| ------------------------------------------------------------------------------------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| Firefox | 3.0+ | Fonctionne avec NVDA, JAWS 10+ et Orca | +| [Chrome](http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support) | Dernière | Prise en charge encore expérimentale des lecteurs d’écran jusqu’à Chrome 15 | +| Safari | 4+ | La prise en charge par Safari 5 est grandement améliorée. La prise en charge des zones live requiert Safari 5 avec VoiceOver sur iOS5 ou OS X Lion | +| [Opera](http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/) | 9.5+ | Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ? | +| [Internet Explorer](http://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx) | 8+ | Fonctionne avec JAWS 10+ et NVDA. Pas de prise en charge des zones live dans NVDA. La prise en charge dans IE9 est grandement améliorée. | + +Dans certains cas, les versions les plus jeunes peuvent prendre en charge certaines fonctionnalités d’ARIA. Des tableaux de compatibilité des navigateurs peuvent être consultés depuis différentes sources : + +- [caniuse.com](http://caniuse.com/wai-aria) +- [Le groupe Paciello](http://www.paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF-update2.html) + +### Technologies d’assistance + +Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont : + +| Technologies d’assistance | Version minimale pour un ARIA de base | Version minimale pour la prise en charge des zones live et des alertes | +| ------------------------- | --------------------------------------------------------- | -------------------------------------------------------------------------------- | +| NVDA | 2010.2 (NVDA propose toujours des mises à jour gratuites) | 2011.1 pour Firefox, pas de prise en charge des zones live dans IE avant 2011.2. | +| Orca | ? (À définir) | ? (À définir) | +| VoiceOver | OSX 10.5, iOS 4 | OS X 10.7 iOS 5 | +| JAWS | 8 | 10 | +| Window-Eyes | 7 | Pas de prise en charge des zones live | +| ZoomText | ? | Pas de prise en charge des zones live | + +Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes. + +For notes on JAWS support for ARIA as of JAWS 10, lire cet article du *groupe Paciello* : [JAWS Support for ARIA](http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/). + +### Kits de développement JavaScript + +Les rôles, les états et les propriétés ARIA ont été ajoutées à de nombreux kits de développements d’interfaces utilisateur JavaScript, y compris : + +- Dojo/Dijit +- jQuery UI +- Fluid Infusion +- Google Closure +- Google Web Toolkit +- BBC Glow +- Yahoo! User Interface Library (YUI) + +Pour plus d’informations sur l’accessibilité des kits de développement JavaScript : + +- [WAI-ARIA Implementation in JavaScript UI Libraries](http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/) (Implémentation de WAI-ARIA dans les bibliothèques JavaScript d’UI) de Steve Faulkner + +## Pouvez-vous me montrez un exemple d’ARIA en action ? + +Voici le code HTML pour une barre de progression : + +```html +<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> +``` + +Cette barre de progression est construite à l’aide de l’élément `<div>`, qui n’est pas des plus descriptif. Malheureusement, en HTML4 il n’existe pas de balise plus sémantique pour les développeurs, aussi avons nous besoin d’inclure les rôles et les propriétés ARIA. Ils sont spécifiés en ajoutant des attributs à l’élément `<div>`. Dans cet exemple, l’attribut `role="progressbar"` informe le navigateur que cet élément est actuellement un composant de barre de progression codé en JavaScript. Les attributs `aria-valuemin` et `aria-valuemax` spécifient les valeurs limites de la barre de progression, et `aria-valuenow` décrit a valeur courante. + +Plutôt que de les intégrer directement dans le balisage, les attributs ARIA sont généralement ajoutés à l’élément et dynamiquement actualisés à l’aide de code JavaScript tel que celui-ci : + +```js +// Trouver le <div> de la barre de progression dans le DOM. var progressBar = document.getElementById("percent-loaded"); // Définition de ses rôles et états ARIA , @@ -164,59 +97,63 @@ progressBar.setAttribute("aria-valuemax", 100); // pour actualiser la valeur de la barre de progression. function updateProgress(percentComplete) { progressBar.setAttribute("aria-valuenow", percentComplete); -}</pre> +} +``` -<h2 id="L’ajout_d’ARIA_changera-t-il_le_style_ou_le_comportement_de_mes_pages">L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ?</h2> +## L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ? -<p>Non, ARIA n’est rendu disponible que pour les APIs des technologies d’assistance, et n’affecte pas les fonctionnalités natives du navigateur en respectant le DOM ou les styles. Du point de vue des navigateurs, le HTML natif définit le sens et le comportement sémantique d’un élément, et les attributs ARIA agissent comme une surcouche permettant de prendre en charge les APIs des technologies d’assistance. Bien qu’ARIA ne modifiera aucun style par lui-même, comme pour tous les attributs HTML les CSS peuvent profiter des attributs ARIA comme sélecteurs d’élément. Ceci peut fournir un mécanisme pratique pour styles les composants intégrant ARIA.</p> +Non, ARIA n’est rendu disponible que pour les APIs des technologies d’assistance, et n’affecte pas les fonctionnalités natives du navigateur en respectant le DOM ou les styles. Du point de vue des navigateurs, le HTML natif définit le sens et le comportement sémantique d’un élément, et les attributs ARIA agissent comme une surcouche permettant de prendre en charge les APIs des technologies d’assistance. Bien qu’ARIA ne modifiera aucun style par lui-même, comme pour tous les attributs HTML les CSS peuvent profiter des attributs ARIA comme sélecteurs d’élément. Ceci peut fournir un mécanisme pratique pour styles les composants intégrant ARIA. -<pre class="brush: css">.tab-panel[aria-hidden="true"] { +```css +.tab-panel[aria-hidden="true"] { display: none; } .tab-panel[aria-hidden="false"] { display: block; } -</pre> +``` -<h2 id="Qu'en_est-il_de_la_validation">Qu'en est-il de la validation ?</h2> +## Qu'en est-il de la validation ? -<p>Les nouveaux attributs introduits dans ARIA, tels que les <strong><code>role</code></strong> et ceux préfixés avec <strong><code>aria-</code></strong>, ne font pas officiellement partie des spécification HTML 4 ou XHTML 4. À ce titre, les pages comportant des éléments ARIA peuvent ne pas être valides lorsqu’on les soumet au <a href="http://validator.w3.org/">validateur du W3C</a>.</p> +Les nouveaux attributs introduits dans ARIA, tels que les **`role`** et ceux préfixés avec **`aria-`**, ne font pas officiellement partie des spécification HTML 4 ou XHTML 4. À ce titre, les pages comportant des éléments ARIA peuvent ne pas être valides lorsqu’on les soumet au [validateur du W3C](http://validator.w3.org/). -<p>La première solution possible à ce problème est d’éviter de placer les rôles et les états ARIA directement dans le code HTML. À la place, il faut utiliser JavaScript pour ajouter dynamiquement ARIA à votre page, tel que montré dans la réponse à la question Pouvez-vous me montrez un exemple d’ARIA en action ? ci-dessus. Votre page sera toujours théoriquement invalide, mais elle passera correctement toutes les contrôles de validation statiques.</p> +La première solution possible à ce problème est d’éviter de placer les rôles et les états ARIA directement dans le code HTML. À la place, il faut utiliser JavaScript pour ajouter dynamiquement ARIA à votre page, tel que montré dans la réponse à la question Pouvez-vous me montrez un exemple d’ARIA en action ? ci-dessus. Votre page sera toujours théoriquement invalide, mais elle passera correctement toutes les contrôles de validation statiques. -<p>Une autre alternative est l’utilisation d’un <em>doctype</em> HTML5, qui prend nativement en charge . Le validateur HTML5 du W3C trouvera même pour vous les utilisations non valides d’ARIA dans les pages HTML5.</p> +Une autre alternative est l’utilisation d’un _doctype_ HTML5, qui prend nativement en charge . Le validateur HTML5 du W3C trouvera même pour vous les utilisations non valides d’ARIA dans les pages HTML5. -<h2 id="Comment_HTML5_s’associe-t-il_avec_ARIA">Comment HTML5 s’associe-t-il avec ARIA ?</h2> +## Comment HTML5 s’associe-t-il avec ARIA ? -<p>HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entre elles recoupent les rôles ARIA, tel que le nouvelle élément <code><progress></code>. Dans le cas où le navigateur prend en charge une balise HTML5 qui existe également dans ARIA, il n’est généralement pas nécessaire d’ajouter les rôles et les états ARIA à l’élément. ARIA comprend de nombreux rôles, états et propriétés qui ne sont pas disponibles en HTML5, aussi continueront-ils d’être utiles aux développeurs HTML5. Pour plus d’informations, Steve Faulkner a écrit un très bon <a href="http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/">aperçu des relations entre HTML5 et ARIA</a>.</p> +HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entre elles recoupent les rôles ARIA, tel que le nouvelle élément `<progress>`. Dans le cas où le navigateur prend en charge une balise HTML5 qui existe également dans ARIA, il n’est généralement pas nécessaire d’ajouter les rôles et les états ARIA à l’élément. ARIA comprend de nombreux rôles, états et propriétés qui ne sont pas disponibles en HTML5, aussi continueront-ils d’être utiles aux développeurs HTML5. Pour plus d’informations, Steve Faulkner a écrit un très bon [aperçu des relations entre HTML5 et ARIA](http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/). -<h4 id="Dégradation_élégante_de_HTML5_vers_ARIA">Dégradation élégante de HTML5 vers ARIA</h4> +#### Dégradation élégante de HTML5 vers ARIA -<p>Pour fournir du contenu aux navigateurs qui n’implémentent pas HTML5, vous pouvez considérer une dégradation élégante de l’utilisation d’ARIA là où c’est nécessaire. Ainsi, en utilisant l’exemple de la barre de progression, vous pouvez dégrader élégamment un <code>role="progressbar"</code> pour les cas où la balise <code><progressbar></code> n’est pas prise en charge.</p> +Pour fournir du contenu aux navigateurs qui n’implémentent pas HTML5, vous pouvez considérer une dégradation élégante de l’utilisation d’ARIA là où c’est nécessaire. Ainsi, en utilisant l’exemple de la barre de progression, vous pouvez dégrader élégamment un `role="progressbar"` pour les cas où la balise `<progressbar>` n’est pas prise en charge. -<p>Voici un exemple de code utilisé pour une barre de progression en HTML5 :</p> +Voici un exemple de code utilisé pour une barre de progression en HTML5 : -<pre class="brush: html"><!DOCTYPE html> -<html> - <head><title>Dégrader élégamment la barre de progression</title></head> - <body> - <progress id="progress-bar" value="0" max="100">0% complété(s)</progress> - <button id="update-button">Actualiser</button> - </body> -</html> -</pre> +```html +<!DOCTYPE html> +<html> + <head><title>Dégrader élégamment la barre de progression</title></head> + <body> + <progress id="progress-bar" value="0" max="100">0% complété(s)</progress> + <button id="update-button">Actualiser</button> + </body> +</html> +``` -<p>… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens :</p> +… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens : -<pre class="brush: js">var progressBar = document.getElementById("progress-bar"); +```js +var progressBar = document.getElementById("progress-bar"); -// Vérifions que le navigateur implémente la balise HTML5 <progress>. +// Vérifions que le navigateur implémente la balise HTML5 <progress>. var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined"); function setupProgress() { if (!supportsHTML5Progress) { - // HTML5 <progress> n’est pas implémenté dans ce navigateur, aussi + // HTML5 <progress> n’est pas implémenté dans ce navigateur, aussi // avons-nous besoin d’ajouter des rôles et des états ARIA à l’élément. progressBar.setAttribute("role", "progressbar"); progressBar.setAttribute("aria-valuemin", 0); @@ -226,11 +163,11 @@ function setupProgress() { function updateProgress(percentComplete) { if (!supportsHTML5Progress) { - // HTML5 <progress> n’est pas implémenté dans ce navigateur, + // HTML5 <progress> n’est pas implémenté dans ce navigateur, // aussi avons-nous besoin de mettre à jour l’attribut aria-valuenow progressBar.setAttribute("aria-valuenow", percentComplete); } else { - // HTML5 <progress> is supported, so update the value attribute instead. + // HTML5 <progress> is supported, so update the value attribute instead. progressBar.setAttribute("value", percentComplete); } @@ -247,60 +184,48 @@ function initDemo() { }, false); } initDemo(); -</pre> +``` -<h2 id="Comment_fonctionnent_les_technologies_d’assistance">Comment fonctionnent les technologies d’assistance ?</h2> +## Comment fonctionnent les technologies d’assistance ? -<p>Les technologies d’assistance utilisent une API intégrée à chaque système d’exploitation spécifiquement conçue pour décrire les rôles, les états et la structure de l’interface utilisateur d’une application. Par exemple, un lecteur d’écran utilise cette API pour lire l’interface utilisateur avec un moteur de synthèse vocale (text-to-speech), une loupe l’utilise pour mettre en évidence les zones importantes ou actives de l’écran et un clavier virtuel peut s’en servir pour fournir la disposition de clavier la plus efficace dans un contexte donné ou au contrôle d’une interface utilisateur. Les technologies d’assistance accèdent souvent au DOM d’une page au travers de cette API afin de comprendre la sémantique et les attributs de la page.</p> +Les technologies d’assistance utilisent une API intégrée à chaque système d’exploitation spécifiquement conçue pour décrire les rôles, les états et la structure de l’interface utilisateur d’une application. Par exemple, un lecteur d’écran utilise cette API pour lire l’interface utilisateur avec un moteur de synthèse vocale (text-to-speech), une loupe l’utilise pour mettre en évidence les zones importantes ou actives de l’écran et un clavier virtuel peut s’en servir pour fournir la disposition de clavier la plus efficace dans un contexte donné ou au contrôle d’une interface utilisateur. Les technologies d’assistance accèdent souvent au DOM d’une page au travers de cette API afin de comprendre la sémantique et les attributs de la page. -<p>ARIA fournit un pont entre le monde du DOM et le bureau. Les navigateurs exposent les éléments ARIA aux API des technologies d’assistance comme s’ils étaient des composants natifs. En conséquence, l’utilisateur a potentiellement une expérience plus cohérente là où les composants dynamiques JavaScript sont comparables sur le Web à leurs équivalents bureau.</p> +ARIA fournit un pont entre le monde du DOM et le bureau. Les navigateurs exposent les éléments ARIA aux API des technologies d’assistance comme s’ils étaient des composants natifs. En conséquence, l’utilisateur a potentiellement une expérience plus cohérente là où les composants dynamiques JavaScript sont comparables sur le Web à leurs équivalents bureau. -<h2 id="Comment_tester_mon_utilisation_d’ARIA_Existe-t-il_des_outils_libres_ou_gratuits">Comment tester mon utilisation d’ARIA ? Existe-t-il des outils libres ou gratuits ?</h2> +## Comment tester mon utilisation d’ARIA ? Existe-t-il des outils libres ou gratuits ? -<p>Il existe plusieurs outils d’inspection et de débogage pour vous aider à tester le comportement d’ARIA :</p> +Il existe plusieurs outils d’inspection et de débogage pour vous aider à tester le comportement d’ARIA : -<ul> - <li><em>Object Inspector</em> sur Windows</li> - <li><em>Accessibility Inspector</em> sur Mac OS X</li> - <li><em>AccProbe</em> sur Linux</li> - <li><em>Inspecteur DOM</em> de Firebug</li> - <li>L’<a href="http://code.google.com/p/ainspector/"><em>Inspecteur d’accessibilité</em> de Firebug</a></li> -</ul> +- _Object Inspector_ sur Windows +- _Accessibility Inspector_ sur Mac OS X +- _AccProbe_ sur Linux +- _Inspecteur DOM_ de Firebug +- L’[_Inspecteur d’accessibilité_ de Firebug](http://code.google.com/p/ainspector/) -<p>Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve :</p> +Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve : -<ul> - <li><a href="http://live.gnome.org/Orca">Orca</a> pour Linux</li> - <li><a href="http://www.nvda-project.org/">NVDA</a> pour Windows</li> - <li><a href="http://www.apple.com/accessibility/voiceover/">VoiceOver</a> est intégré à Mac OS X</li> -</ul> +- [Orca](http://live.gnome.org/Orca) pour Linux +- [NVDA](http://www.nvda-project.org/) pour Windows +- [VoiceOver](http://www.apple.com/accessibility/voiceover/) est intégré à Mac OS X -<p>Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête :</p> +Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête : -<ol> - <li>Les tests occasionnels avec un lecteur d’écran ne pourront jamais remplacer les retours d’expérience, les tests ou l’aide de véritables utilisateurs au quotidien.</li> - <li>L’accessibilité est plus vaste que la simple prise en charge des lecteurs d’écran. Essayez de mener des tests avec divers cas d’utilisation et techniques d’accessibilité.</li> -</ol> +1. Les tests occasionnels avec un lecteur d’écran ne pourront jamais remplacer les retours d’expérience, les tests ou l’aide de véritables utilisateurs au quotidien. +2. L’accessibilité est plus vaste que la simple prise en charge des lecteurs d’écran. Essayez de mener des tests avec divers cas d’utilisation et techniques d’accessibilité. -<p>Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA :</p> +Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA : -<ul> - <li><a href="http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html">Yahoo!'s ARIA bookmarklets</a></li> - <li><a href="http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol">simple accessibility evaluation techniques</a> du <em>Fluid Project</em> (techniques simples d’évaluation de l’accessibilité)</li> -</ul> +- [Yahoo!'s ARIA bookmarklets](http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html) +- [simple accessibility evaluation techniques](http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol) du _Fluid Project_ (techniques simples d’évaluation de l’accessibilité) -<h2 id="Où_se_tiennent_les_discussion_concernant_ARIA">Où se tiennent les discussion concernant ARIA ?</h2> +## Où se tiennent les discussion concernant ARIA ? -<ul> - <li><a href="http://lists.w3.org/Archives/Public/wai-xtech/">Liste de diffusion Wai-xtech</a> – Discussions sur les spécification d’ARIA.</li> - <li><a href="http://groups.google.com/group/free-aria">groupe Google Free-ARIA</a> – pour les développeurs et les utilisateurs d’outils et de ressources libres.</li> -</ul> +- [Liste de diffusion Wai-xtech](http://lists.w3.org/Archives/Public/wai-xtech/) – Discussions sur les spécification d’ARIA. +- [groupe Google Free-ARIA](http://groups.google.com/group/free-aria) – pour les développeurs et les utilisateurs d’outils et de ressources libres. -<h2 id="Où_peut-on_en_apprendre_davantage_à_propos_d’ARIA">Où peut-on en apprendre davantage à propos d’ARIA ?</h2> +## Où peut-on en apprendre davantage à propos d’ARIA ? -<ul> - <li><a href="/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles">Aperçu d’applications Web et de composants dynamiques accessibles</a></li> - <li><a href="/fr/docs/Accessibilité/Formulaires_accessibles">Formulaires accessibles</a></li> - <li>La <a href="http://www.w3.org/WAI/aria/faq">FAQ WAI-ARIA</a> du W3C.</li> - <li><a href="http://webaim.org/techniques/aria/">Accessibility of Rich Internet Applications</a> (Accessibilité des applications Internet riches) de WebAIM.</li> -</ul> +- [Aperçu d’applications Web et de composants dynamiques accessibles](/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles) +- [Formulaires accessibles](/fr/docs/Accessibilité/Formulaires_accessibles) +- La [FAQ WAI-ARIA](http://www.w3.org/WAI/aria/faq) du W3C. +- [Accessibility of Rich Internet Applications](http://webaim.org/techniques/aria/) (Accessibilité des applications Internet riches) de WebAIM. diff --git a/files/fr/web/accessibility/aria/widgets/index.md b/files/fr/web/accessibility/aria/widgets/index.md index b343f06bf7..728cce4433 100644 --- a/files/fr/web/accessibility/aria/widgets/index.md +++ b/files/fr/web/accessibility/aria/widgets/index.md @@ -5,4 +5,4 @@ tags: - Accessibility translation_of: Web/Accessibility/ARIA/widgets --- -<p>Cette page s'est auto-générée parce qu'un utilisateur a créé une sous-page à cette page.</p> +Cette page s'est auto-générée parce qu'un utilisateur a créé une sous-page à cette page. diff --git a/files/fr/web/accessibility/community/index.md b/files/fr/web/accessibility/community/index.md index bf05404332..28cadcb774 100644 --- a/files/fr/web/accessibility/community/index.md +++ b/files/fr/web/accessibility/community/index.md @@ -6,13 +6,11 @@ tags: translation_of: Web/Accessibility/Community original_slug: Accessibilité/Communauté --- -<p>Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité.</p> +Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité. -<p>Si vous connaissez d'autres, ressources utiles n'hésitez pas à ajouter un lien ci-dessous.</p> +Si vous connaissez d'autres, ressources utiles n'hésitez pas à ajouter un lien ci-dessous. -<ul> - <li><a href="news://news.mozilla.org/netscape.public.mozilla.accessibility">Newsgroup Mozilla Accessibility</a></li> - <li><a href="http://www.w3.org/WAI/IG/">Liste de discussion du groupe WAI</a></li> - <li><a href="http://www.mozilla.org/projects/ui/accessibility/unix">Projet d'accessibilité d'Unix</a> (référence en anglais)</li> - <li><a href="http://www.mozilla.org/access/resources">SUN Mozilla Accessibility Task Force</a></li> -</ul> +- [Newsgroup Mozilla Accessibility](news://news.mozilla.org/netscape.public.mozilla.accessibility) +- [Liste de discussion du groupe WAI](http://www.w3.org/WAI/IG/) +- [Projet d'accessibilité d'Unix](http://www.mozilla.org/projects/ui/accessibility/unix) (référence en anglais) +- [SUN Mozilla Accessibility Task Force](http://www.mozilla.org/access/resources) diff --git a/files/fr/web/accessibility/index.md b/files/fr/web/accessibility/index.md index 0ce3096545..fe021c34d4 100644 --- a/files/fr/web/accessibility/index.md +++ b/files/fr/web/accessibility/index.md @@ -9,57 +9,49 @@ tags: translation_of: Web/Accessibility original_slug: Accessibilité --- -<p>L’accessibilité dans le développement web signifie permettre l'utilisation des sites web par le plus grand nombre de personnes, même lorsque les capacités de ces personnes sont limitées d’une manière ou d'une autre. Voici quelques informations qui vous permettront de développer du contenu accessible.</p> +L’accessibilité dans le développement web signifie permettre l'utilisation des sites web par le plus grand nombre de personnes, même lorsque les capacités de ces personnes sont limitées d’une manière ou d'une autre. Voici quelques informations qui vous permettront de développer du contenu accessible. -<p>« <strong>L'accessibilité du web</strong> signifie que les personnes handicapées peuvent l'utiliser. Plus spécifiquement, elle signifie que ces gens peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer. L'accessibilité du web bénéficie également à d'autres, notamment les personnes âgées ayant des capacités diminuées dues au vieillissement. » ( <a href="http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web">L'accessibilité du Web définie dans Wikipédia</a>)</p> +« **L'accessibilité du web** signifie que les personnes handicapées peuvent l'utiliser. Plus spécifiquement, elle signifie que ces gens peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer. L'accessibilité du web bénéficie également à d'autres, notamment les personnes âgées ayant des capacités diminuées dues au vieillissement. » ( [L'accessibilité du Web définie dans Wikipédia](http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web)) -<p>« <strong>L'accessibilité numérique est la mise à la disposition de tous les individus</strong> – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » <a href="http://www.w3.org/standards/webdesign/accessibility">W3C Accessibility</a></p> +« **L'accessibilité numérique est la mise à la disposition de tous les individus** – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » [W3C Accessibility](http://www.w3.org/standards/webdesign/accessibility) -<h2>Tutoriels clefs</h2> +## Tutoriels clefs -<p>La documentation MDN <a href="/fr/docs/Accessibilit%C3%A9">Accessibilité</a> contient des tutoriaux modernes et à jour en ce qui concerne les points essentiels de l'accessibilité:</p> +La documentation MDN [Accessibilité](/fr/docs/Accessibilit%C3%A9) contient des tutoriaux modernes et à jour en ce qui concerne les points essentiels de l'accessibilité: -<dl> - <dt><a href="/fr/docs/Apprendre/a11y/What_is_accessibility">Qu'est-ce que l'accessibilité?</a></dt> - <dd>Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela inclut ce que des groupes de personnes ont besoin de considérer et pourquoi, quels outils ils utilisent afin d'interagir avec les pages web et comment rendre accessible la partie de notre espace de travail web.</dd> - <dt><a href="/fr/docs/Apprendre/a11y/HTML">HTML: Une bonne base pour l'accessibilité</a></dt> - <dd>Un nombre important de ressources du web peuvent être accessibles juste en utilisant correctement les éléments HTML dans leur usage approprié. Cet article résume en détail comment le HTML peut être utilisé afin de garantir une accessibilité maximum.</dd> - <dt><a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript">Meilleure pratiques d'accessibilité CSS et JavaScript </a></dt> - <dd>CSS et JavaScript, quand ils sont utilisés convenablement, ont le potentiel de permettre des expériences Web accessibles… ou bien ils peuvent significativement nuire à celle-ci si mal utilisés. Cet article décrit certaines pratiques exemplaires en langages CSS et JavaScript qui devraient être prises en compte pour garantir que le contenu, même complexe, soit aussi accessible que possible.</dd> - <dt><a href="/fr/docs/Apprendre/a11y/WAI-ARIA_basics">Les bases de WAI-ARIA</a></dt> - <dd>Dans la continuité de l'article précédent, créer des interactions d'interface utilisateur (UX) complexes impliquant un HTML non sémantique et un contenu dynamique mis à jour par JavaScript peut être parfois compliqué. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant d'autres sémantiques que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs d’être informés correctement. Ici, nous allons montrer comment l'utiliser à un niveau de base pour améliorer l'accessibilité.</dd> - <dt><a href="/fr/docs/Apprendre/a11y/Multimedia">Multimédia accessible </a></dt> - <dd>Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire.</dd> - <dt><a href="/fr/docs/Apprendre/a11y/Mobile">Accessibilité sur mobile</a></dt> - <dd>Étant donné que l'accès au Web sur les appareils mobiles est très populaire, et que les plates‑formes populaires telles que iOS et Android disposent d'outils d'accessibilité à part entière, il est important de considérer l'accessibilité de votre contenu Web sur ces plates‑formes. Cet article examine les considérations d'accessibilité spécifiques aux mobiles.</dd> -</dl> +- [Qu'est-ce que l'accessibilité?](/fr/docs/Apprendre/a11y/What_is_accessibility) + - : Cet article présente un module général sur ce que l'accessibilité est actuellement — Cela inclut ce que des groupes de personnes ont besoin de considérer et pourquoi, quels outils ils utilisent afin d'interagir avec les pages web et comment rendre accessible la partie de notre espace de travail web. +- [HTML: Une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML) + - : Un nombre important de ressources du web peuvent être accessibles juste en utilisant correctement les éléments HTML dans leur usage approprié. Cet article résume en détail comment le HTML peut être utilisé afin de garantir une accessibilité maximum. +- [Meilleure pratiques d'accessibilité CSS et JavaScript](/fr/docs/Apprendre/a11y/CSS_and_JavaScript) + - : CSS et JavaScript, quand ils sont utilisés convenablement, ont le potentiel de permettre des expériences Web accessibles… ou bien ils peuvent significativement nuire à celle-ci si mal utilisés. Cet article décrit certaines pratiques exemplaires en langages CSS et JavaScript qui devraient être prises en compte pour garantir que le contenu, même complexe, soit aussi accessible que possible. +- [Les bases de WAI-ARIA](/fr/docs/Apprendre/a11y/WAI-ARIA_basics) + - : Dans la continuité de l'article précédent, créer des interactions d'interface utilisateur (UX) complexes impliquant un HTML non sémantique et un contenu dynamique mis à jour par JavaScript peut être parfois compliqué. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant d'autres sémantiques que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs d’être informés correctement. Ici, nous allons montrer comment l'utiliser à un niveau de base pour améliorer l'accessibilité. +- [Multimédia accessible](/fr/docs/Apprendre/a11y/Multimedia) + - : Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire. +- [Accessibilité sur mobile](/fr/docs/Apprendre/a11y/Mobile) + - : Étant donné que l'accès au Web sur les appareils mobiles est très populaire, et que les plates‑formes populaires telles que iOS et Android disposent d'outils d'accessibilité à part entière, il est important de considérer l'accessibilité de votre contenu Web sur ces plates‑formes. Cet article examine les considérations d'accessibilité spécifiques aux mobiles. -<h2>Documentation</h2> +## Documentation -<dl> - <dt><a href="/fr/docs/Accessibilité/Développement_Web">Développement web</a></dt> - <dd>Un ensemble d'articles soulignant les problèmes d'accessibilité dans le développement web.</dd> - <dt><a href="/fr/docs/Accessibilité/ARIA">ARIA</a></dt> - <dd>Un ensemble d'articles pour apprendre à utiliser ARIA pour améliorer l'accessibilité de vos documents HTML.</dd> - <dt><a href="/fr/docs/Accessibilité/Développement_TA">Développement de Technologie d'assistance (TA)</a></dt> - <dd>Un ensemble d'articles destiné aux développeurs de technologies d'assistance.</dd> - <dt><a href="/fr/docs/Accessibilité/Checklist_accessibilite_mobile">Check-list pour l'accessibilité mobile</a></dt> - <dd>Ce document fournit une liste concise des requis accessibilité pour les développeurs d’applications mobiles.</dd> -</dl> +- [Développement web](/fr/docs/Accessibilité/Développement_Web) + - : Un ensemble d'articles soulignant les problèmes d'accessibilité dans le développement web. +- [ARIA](/fr/docs/Accessibilité/ARIA) + - : Un ensemble d'articles pour apprendre à utiliser ARIA pour améliorer l'accessibilité de vos documents HTML. +- [Développement de Technologie d'assistance (TA)](/fr/docs/Accessibilité/Développement_TA) + - : Un ensemble d'articles destiné aux développeurs de technologies d'assistance. +- [Check-list pour l'accessibilité mobile](/fr/docs/Accessibilité/Checklist_accessibilite_mobile) + - : Ce document fournit une liste concise des requis accessibilité pour les développeurs d’applications mobiles. -<h2>Outils pour les développeurs web</h2> +## Outils pour les développeurs web -<ul> - <li><a href="http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html">Tests d'accessibilité automatisés</a></li> - <li><a href="http://www.standards-schmandards.com/index.php?show/fangs">Fangs, un émulateur de lecteur d'écran</a></li> -</ul> +- [Tests d'accessibilité automatisés](http://www-archive.mozilla.org/quality/embed/plans/accessibility/nsIAccessibleTestPlan.html) +- [Fangs, un émulateur de lecteur d'écran](http://www.standards-schmandards.com/index.php?show/fangs) -<h2>Autres ressources</h2> +## Autres ressources -<ul> - <li><a href="https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we">Liste des lecteurs d'écran</a></li> - <li><a href="http://openweb.eu.org/">OpenWeb</a> — Très bon site offrant à la fois un regard expert sur le web et des exemples concrets d'utilisation des normes du W3C.</li> - <li><a href="http://opquast.com/">Opquast.com</a> — Bonnes pratiques qualité pour les services en ligne.</li> - <li><a href="http://www.accessiweb.org/index.php/accessiweb_2.2_liste_generale.html">AccessiWeb</a> — Référentiel AccessiWeb pour l'accessibilité.</li> - <li><a href="http://accede-web.com/fr/projet-accede-web/">AcceDe Web</a> — Documents adaptés aux principaux intervenants d’un projet web.</li> -</ul> +- [Liste des lecteurs d'écran](https://support.mozilla.org/kb/accessibility-features-firefox-make-firefox-and-we) +- [OpenWeb](http://openweb.eu.org/) — Très bon site offrant à la fois un regard expert sur le web et des exemples concrets d'utilisation des normes du W3C. +- [Opquast.com](http://opquast.com/) — Bonnes pratiques qualité pour les services en ligne. +- [AccessiWeb](http://www.accessiweb.org/index.php/accessiweb_2.2_liste_generale.html) — Référentiel AccessiWeb pour l'accessibilité. +- [AcceDe Web](http://accede-web.com/fr/projet-accede-web/) — Documents adaptés aux principaux intervenants d’un projet web. diff --git a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md index 967ed7852c..51dce2b52b 100644 --- a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md +++ b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md @@ -8,84 +8,87 @@ tags: translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets original_slug: Contrôles_DHTML_personnalisés_navigables_au_clavier --- -<p> </p> -<h3 id="Le_probl.C3.A8me_:_les_pages_DHTML_actuelles_ne_sont_pas_accessibles_au_clavier">Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier</h3> -<p>Un nombre croissant d'applications Web utilise <a href="fr/JavaScript">JavaScript</a> pour imiter des contrôles ( - <i> - widgets</i> - ) applicatifs comme des menus, des vues arborescentes, des champs de texte enrichis et des panneaux à onglets. Les développeurs Web innovent constamment et les applications futures contiendront des éléments complexes et interactifs comme des feuilles de calcul, des calendriers, des graphes organisationnels et plus encore. Jusqu'à présent, les développeurs désirant rendre leurs contrôles basés sur des <code><div></code> et autres <code><span></code> stylés ne disposaient pas des techniques nécessaires. Pourtant, l'accessibilité au clavier fait partie des nécessités dont tout développeur Web devrait tenir compte.</p> -<p>Prenons un exemple concret : la plupart des menus <a href="fr/DHTML">DHTML</a> ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément <code><a></code>). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets.</p> -<p>Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : <a href="fr/ARIA/Applications_riches_Internet_accessibles">ARIA : Applications riches Internet accessibles</a>.</p> -<h3 id="La_solution_:_modifier_le_comportement_standard_de_tabindex">La solution : modifier le comportement standard de <code>tabindex</code></h3> -<p>Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut <code>tabindex</code> pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le <a href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/tabindex.asp">système d'IE pour <code>tabindex</code></a>, il devient possible de permettre aux contrôles <a href="fr/DHTML">DHTML</a>, déjà accessibles au clavier dans IE, de l'être également dans Firefox 1.5. Les règles doivent subir quelques petites entorses afin de permettre aux auteurs de rendre leurs contrôles personnalisés accessibles.</p> -<p>Le tableau qui suit décrit le nouveau comportement de <code>tabindex</code> :</p> -<table> - <tbody> - <tr> - <th>Attribut <code>tabindex</code></th> - <th>Focus disponible à la souris ou par JavaScript via <code>element.focus()</code></th> - <th>Navigable avec tabulation</th> - </tr> - <tr> - <td>non présent</td> - <td>Suit le comportement par défaut de l'élément (oui pour les contrôles de formulaires, les liens, etc).</td> - <td>Suit le comportement par défaut de l'élément.</td> - </tr> - <tr> - <td>Négatif<br> - (par exemple <code>tabindex="-1"</code>)</td> - <td>Oui</td> - <td>Non, l'auteur doit donner le focus avec <code>element.focus()</code> suite à l'utilisation des flèches ou d'autres touches.</td> - </tr> - <tr> - <td>Zéro<br> - (par exemple <code>tabindex="0"</code>)</td> - <td>Oui</td> - <td>Dans l'ordre de tabulation relativement à la position de l'élément dans le document.</td> - </tr> - <tr> - <td>Positif<br> - (par exemple <code>tabindex="33"</code>)</td> - <td>Oui</td> - <td>La valeur <code>tabindex</code> change manuellement lorsque cet élément est positionné dans l'ordre de tabulation. Ces éléments seront positionnés dans l'ordre de tabulation avant les éléments ayant <code>tabindex="0"</code> ou qui sont naturellement - <i> - tabulables</i> - .</td> - </tr> - </tbody> -</table> -<h3 id="Utilisation_du_nouveau_syst.C3.A8me">Utilisation du nouveau système</h3> -<p>Pour rendre un contrôle simple navigable avec tabulation, la solution est d'utiliser <code>tabindex="0"</code> sur l'élément <code><div>></code> ou <code><span></code> le représentant. Vous pouvez consulter un exemple d'une <a href="http://www.mozilla.org/access/dhtml/class/checkbox">case à cocher basée sur un <code><span></code></a> accessible au clavier tant dans Firefox 1.5 que dans IE (bien que la règle <code>:before</code> pour l'image de la case à cocher ne fonctionne pas dans IE).</p> -<p>Pour les contrôles de groupe (comme les menus, les panneaux à onglets, grilles ou vues arborescentes) l'élément parent doit avoir <code>tabindex="0"</code>, et chaque choix descendant (onglet/cellule/ligne) doit avoir <code>tabindex="-1"</code>. Un évènement <code>keydown</code> surveillant les flèches directionnelles peut ensuite utiliser <code>element.focus()</code> pour donner le focus au contrôle descendant approprié et lui donner un style lui donnant un aspect particulier montrant qu'il a le focus. Vous pouvez consulter un exemple d'une <a href="http://www.mozilla.org/access/dhtml/class/tree">vue arborescente DHTML</a> accessible au clavier et aux lecteurs d'écran dans Firefox ( - <i> - nightlies</i> - ). Le travail pour le faire fonctionner dans IE est encore en cours.</p> -<p>N'oubliez pas que ceci ne fait pas encore partie d'un standard W3C ou autre organisme officiel. Pour l'instant, il est nécessaire de faire quelques entorses aux règles afin d'obtenir une pleine accessibilité au clavier.</p> -<h3 id="Astuces_d.27.C3.A9criture">Astuces d'écriture</h3> -<h4 id="Utilisation_d.27onfocus_pour_suivre_le_focus">Utilisation d'<code>onfocus</code> pour suivre le focus</h4> -<p>Les attributs de gestion d'évènements <code>onfocus</code> et <code>onblur</code> peuvent à présent être utilisés sur tous les éléments. Il n'y a pas d'interface <a href="fr/DOM">DOM</a> standard pour obtenir l'élément ayant actuellement le focus dans le document, par conséquent il est nécessaire d'utiliser une variable <a href="fr/JavaScript">JavaScript</a> pour le suivre.</p> -<p>Ne supposez pas que tous les changements de focus viendront des évènements clavier ou souris, car les technologies d'assistance, comme les lecteurs d'écran, peuvent donner le focus à n'importe quel élément pouvant en disposer et cela doit être traité élégamment par le contrôle JavaScript.</p> -<h4 id="Changement_dynamique_de_la_possibilit.C3.A9_d.27obtenir_le_focus_.C3.A0_l.27aide_de_la_propri.C3.A9t.C3.A9_tabIndex">Changement dynamique de la possibilité d'obtenir le focus à l'aide de la propriété <code>tabIndex</code></h4> -<p>Ceci peut être utile à réaliser si un contrôle personnalisé devient actif ou inactif. Les contrôles inactifs ne doivent pas être dans l'ordre de tabulation. Cependant, il est typiquement possible de les atteindre avec les flèches s'ils font partie d'un contrôle de navigation groupé.</p> -<h4 id="Utilisation_de_setTimeout_avec_element.focus.28.29_pour_donner_le_focus">Utilisation de <code>setTimeout</code> avec <code>element.focus()</code> pour donner le focus</h4> -<p>N'utilisez pas <code>createEvent()</code>, <code>initEvent()</code> et <code>dispatchEvent()</code> pour donner le focus à un élément, parce que les évènements DOM <code>focus</code> sont seulement considérés comme informels — générés par le système après que quelque chose ait reçu le focus, mais pas réellement pour donner le focus. Le retardateur est nécessaire, tant dans IE que dans Firefox 1.5, pour empêcher les scripts de faire des choses étranges et inattendues si l'utilisateur clique sur des boutons ou d'autres contrôles. Concrètement, le code pour donner le focus à un élément ressemblera à quelque chose comme ceci :</p> -<pre class="eval">setTimeout("gFocusItem.focus();",0); // gFocusItem doit être une variable globale -</pre> -<h4 id="Ne_pas_utiliser_:focus_ou_des_s.C3.A9lecteurs_d.27attribut_pour_styler_le_focus">Ne pas utiliser <code>:focus</code> ou des sélecteurs d'attribut pour styler le focus</h4> -<p>Il ne sera pas possible d'utiliser <code>:focus</code> ou des sélecteurs d'attribut pour styler l'élément ayant le focus, si vous voulez que cela apparaisse également dans IE. Changez plutôt le style dans un gestionnaire d'évènement <code>onfocus</code>. Par exemple, pour le traitement du focus d'un élément de menu, ajoutez <code>this.style.backgroundColor = "gray";</code>.</p> -<h4 id="Toujours_dessiner_le_focus_pour_les_.C3.A9l.C3.A9ments_avec_tabindex.3D.22-1.22_et_qui_re.C3.A7oivent_le_focus_par_programmation">Toujours dessiner le focus pour les éléments avec <code>tabindex="-1"</code> et qui reçoivent le focus par programmation</h4> -<p>IE ne dessinera pas automatiquement l'encadrement du focus pour les éléments qui reçoivent le focus de manière programmée. Choisissez entre changer la couleur de fond via quelque chose comme <code>this.style.backgroundColor = "gray";</code> ou ajoutez une bordure pointillée via <code>this.style.border = "1px dotted invert"</code>. Dans le cas d'une bordure pointillée, il sera nécessaire de s'assurer que ces éléments aient une bordure invisible de <tt>1px</tt> au départ, afin que l'élément ne change pas de taille lorsque le style de bordure est appliqué (les bordures prennent de la place et IE n'implémente pas les encadrements CSS).</p> -<h4 id="Utilisation_de_onkeydown_pour_les_.C3.A9v.C3.A8nements_clavier.2C_plut.C3.B4t_que_onkeypress">Utilisation de <code>onkeydown</code> pour les évènements clavier, plutôt que <code>onkeypress</code></h4> -<p>IE ne déclenchera pas les évènements <code>keypress</code> pour les touches non alphanumériques.</p> -<h4 id="Emp.C3.AAcher_les_.C3.A9v.C3.A8nements_clavier_d.27effectuer_des_fonctions_du_navigateur">Empêcher les évènements clavier d'effectuer des fonctions du navigateur</h4> -<p>Si une touche comme une flèche directionnelle est utilisée, empêchez le navigateur d'utiliser cette touche pour faire quelque chose d'autre (comme faire défiler la page) en utilisant un code similaire à ce qui suit :</p> -<pre class="eval"><span tabindex="-1" onkeydown="return handleKeyDown();"> -</pre> -<p>Si <code>handleKeyDown()</code> renvoie <code>false</code>, l'évènement sera consommé, empêchant le navigateur d'effectuer quelque action que ce soit, basée sur la touche pressée.</p> -<h4 id="Utilisation_d.27.C3.A9v.C3.A8nements_clavier_pour_permettre_l.27activation_de_l.27.C3.A9l.C3.A9ment">Utilisation d'évènements clavier pour permettre l'activation de l'élément</h4> -<p>Pour chaque gestionnaire d'évènement lié à la souris, un évènement clavier correspondant est nécessaire. Par exemple, si vous avez <code>onclick="faireQuelqueChose()"</code> vous aurez aussi besoin de <code>onkeydown="return event.keyCode != 13 || faireQuelqueChose();"</code> afin de permettre à la touche Entrée d'activer cet élément.</p> -<h4 id="Utilisation_de_try.2Fcatch_pour_.C3.A9viter_les_erreurs_JavaScript">Utilisation de try/catch pour éviter les erreurs JavaScript</h4> -<p>Ce système n'est actuellement pas supporté par Opera, Safari et les versions anciennes de Mozilla (1.7 et précédentes). Comme certains navigateurs ne supportent pas les nouvelles possibilités comme la propriété <code>tabIndex</code> sur tous les éléments, utilisez try/catch aux endroits appropriés. Les contrôles doivent rester utilisables avec la souris sur les navigateurs ne supportant pas le système DHTML de navigation au clavier. Son support est déjà planifié pour Opera et Safari (via les spécifications du <a href="http://whatwg.org/">WHATWG</a>).</p> -<h4 id="Ne_pas_se_baser_sur_un_comportement_coh.C3.A9rent_de_la_r.C3.A9p.C3.A9tition_d.27une_touche.2C_pour_l.27instant">Ne pas se baser sur un comportement cohérent de la répétition d'une touche, pour l'instant</h4> -<p>Malheureusement, <code>onkeydown</code> peut ou non être répété suivant le système d'exploitation utilisé. Consultez le {{ Bug(91592) }} dans la base de données Bugzilla.</p> -<p>{{ languages( { "en": "en/Key-navigable_custom_DHTML_widgets", "ja": "ja/Key-navigable_custom_DHTML_widgets" } ) }}</p> +### Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier + +Un nombre croissant d'applications Web utilise [JavaScript](fr/JavaScript) pour imiter des contrôles ( +_widgets_ +) applicatifs comme des menus, des vues arborescentes, des champs de texte enrichis et des panneaux à onglets. Les développeurs Web innovent constamment et les applications futures contiendront des éléments complexes et interactifs comme des feuilles de calcul, des calendriers, des graphes organisationnels et plus encore. Jusqu'à présent, les développeurs désirant rendre leurs contrôles basés sur des `<div>` et autres `<span>` stylés ne disposaient pas des techniques nécessaires. Pourtant, l'accessibilité au clavier fait partie des nécessités dont tout développeur Web devrait tenir compte. + +Prenons un exemple concret : la plupart des menus [DHTML](fr/DHTML) ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément `<a>`). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets. + +Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : [ARIA : Applications riches Internet accessibles](fr/ARIA/Applications_riches_Internet_accessibles). + +### La solution : modifier le comportement standard de `tabindex` + +Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut `tabindex` pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le [système d'IE pour `tabindex`](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/tabindex.asp), il devient possible de permettre aux contrôles [DHTML](fr/DHTML), déjà accessibles au clavier dans IE, de l'être également dans Firefox 1.5. Les règles doivent subir quelques petites entorses afin de permettre aux auteurs de rendre leurs contrôles personnalisés accessibles. + +Le tableau qui suit décrit le nouveau comportement de `tabindex` : + +| Attribut `tabindex` | Focus disponible à la souris ou par JavaScript via `element.focus()` | Navigable avec tabulation | +| ------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| non présent | Suit le comportement par défaut de l'élément (oui pour les contrôles de formulaires, les liens, etc). | Suit le comportement par défaut de l'élément. | +| Négatif (par exemple `tabindex="-1"`) | Oui | Non, l'auteur doit donner le focus avec `element.focus()` suite à l'utilisation des flèches ou d'autres touches. | +| Zéro (par exemple `tabindex="0"`) | Oui | Dans l'ordre de tabulation relativement à la position de l'élément dans le document. | +| Positif (par exemple `tabindex="33"`) | Oui | La valeur `tabindex` change manuellement lorsque cet élément est positionné dans l'ordre de tabulation. Ces éléments seront positionnés dans l'ordre de tabulation avant les éléments ayant `tabindex="0"` ou qui sont naturellement _tabulables_ . | + +### Utilisation du nouveau système + +Pour rendre un contrôle simple navigable avec tabulation, la solution est d'utiliser `tabindex="0"` sur l'élément `<div>>` ou `<span>` le représentant. Vous pouvez consulter un exemple d'une [case à cocher basée sur un `<span>`](http://www.mozilla.org/access/dhtml/class/checkbox) accessible au clavier tant dans Firefox 1.5 que dans IE (bien que la règle `:before` pour l'image de la case à cocher ne fonctionne pas dans IE). + +Pour les contrôles de groupe (comme les menus, les panneaux à onglets, grilles ou vues arborescentes) l'élément parent doit avoir `tabindex="0"`, et chaque choix descendant (onglet/cellule/ligne) doit avoir `tabindex="-1"`. Un évènement `keydown` surveillant les flèches directionnelles peut ensuite utiliser `element.focus()` pour donner le focus au contrôle descendant approprié et lui donner un style lui donnant un aspect particulier montrant qu'il a le focus. Vous pouvez consulter un exemple d'une [vue arborescente DHTML](http://www.mozilla.org/access/dhtml/class/tree) accessible au clavier et aux lecteurs d'écran dans Firefox ( +_nightlies_ +). Le travail pour le faire fonctionner dans IE est encore en cours. + +N'oubliez pas que ceci ne fait pas encore partie d'un standard W3C ou autre organisme officiel. Pour l'instant, il est nécessaire de faire quelques entorses aux règles afin d'obtenir une pleine accessibilité au clavier. + +### Astuces d'écriture + +#### Utilisation d'`onfocus` pour suivre le focus + +Les attributs de gestion d'évènements `onfocus` et `onblur` peuvent à présent être utilisés sur tous les éléments. Il n'y a pas d'interface [DOM](fr/DOM) standard pour obtenir l'élément ayant actuellement le focus dans le document, par conséquent il est nécessaire d'utiliser une variable [JavaScript](fr/JavaScript) pour le suivre. + +Ne supposez pas que tous les changements de focus viendront des évènements clavier ou souris, car les technologies d'assistance, comme les lecteurs d'écran, peuvent donner le focus à n'importe quel élément pouvant en disposer et cela doit être traité élégamment par le contrôle JavaScript. + +#### Changement dynamique de la possibilité d'obtenir le focus à l'aide de la propriété `tabIndex` + +Ceci peut être utile à réaliser si un contrôle personnalisé devient actif ou inactif. Les contrôles inactifs ne doivent pas être dans l'ordre de tabulation. Cependant, il est typiquement possible de les atteindre avec les flèches s'ils font partie d'un contrôle de navigation groupé. + +#### Utilisation de `setTimeout` avec `element.focus()` pour donner le focus + +N'utilisez pas `createEvent()`, `initEvent()` et `dispatchEvent()` pour donner le focus à un élément, parce que les évènements DOM `focus` sont seulement considérés comme informels — générés par le système après que quelque chose ait reçu le focus, mais pas réellement pour donner le focus. Le retardateur est nécessaire, tant dans IE que dans Firefox 1.5, pour empêcher les scripts de faire des choses étranges et inattendues si l'utilisateur clique sur des boutons ou d'autres contrôles. Concrètement, le code pour donner le focus à un élément ressemblera à quelque chose comme ceci : + + setTimeout("gFocusItem.focus();",0); // gFocusItem doit être une variable globale + +#### Ne pas utiliser `:focus` ou des sélecteurs d'attribut pour styler le focus + +Il ne sera pas possible d'utiliser `:focus` ou des sélecteurs d'attribut pour styler l'élément ayant le focus, si vous voulez que cela apparaisse également dans IE. Changez plutôt le style dans un gestionnaire d'évènement `onfocus`. Par exemple, pour le traitement du focus d'un élément de menu, ajoutez `this.style.backgroundColor = "gray";`. + +#### Toujours dessiner le focus pour les éléments avec `tabindex="-1"` et qui reçoivent le focus par programmation + +IE ne dessinera pas automatiquement l'encadrement du focus pour les éléments qui reçoivent le focus de manière programmée. Choisissez entre changer la couleur de fond via quelque chose comme `this.style.backgroundColor = "gray";` ou ajoutez une bordure pointillée via `this.style.border = "1px dotted invert"`. Dans le cas d'une bordure pointillée, il sera nécessaire de s'assurer que ces éléments aient une bordure invisible de \<tt>1px\</tt> au départ, afin que l'élément ne change pas de taille lorsque le style de bordure est appliqué (les bordures prennent de la place et IE n'implémente pas les encadrements CSS). + +#### Utilisation de `onkeydown` pour les évènements clavier, plutôt que `onkeypress` + +IE ne déclenchera pas les évènements `keypress` pour les touches non alphanumériques. + +#### Empêcher les évènements clavier d'effectuer des fonctions du navigateur + +Si une touche comme une flèche directionnelle est utilisée, empêchez le navigateur d'utiliser cette touche pour faire quelque chose d'autre (comme faire défiler la page) en utilisant un code similaire à ce qui suit : + + <span tabindex="-1" onkeydown="return handleKeyDown();"> + +Si `handleKeyDown()` renvoie `false`, l'évènement sera consommé, empêchant le navigateur d'effectuer quelque action que ce soit, basée sur la touche pressée. + +#### Utilisation d'évènements clavier pour permettre l'activation de l'élément + +Pour chaque gestionnaire d'évènement lié à la souris, un évènement clavier correspondant est nécessaire. Par exemple, si vous avez `onclick="faireQuelqueChose()"` vous aurez aussi besoin de `onkeydown="return event.keyCode != 13 || faireQuelqueChose();"` afin de permettre à la touche Entrée d'activer cet élément. + +#### Utilisation de try/catch pour éviter les erreurs JavaScript + +Ce système n'est actuellement pas supporté par Opera, Safari et les versions anciennes de Mozilla (1.7 et précédentes). Comme certains navigateurs ne supportent pas les nouvelles possibilités comme la propriété `tabIndex` sur tous les éléments, utilisez try/catch aux endroits appropriés. Les contrôles doivent rester utilisables avec la souris sur les navigateurs ne supportant pas le système DHTML de navigation au clavier. Son support est déjà planifié pour Opera et Safari (via les spécifications du [WHATWG](http://whatwg.org/)). + +#### Ne pas se baser sur un comportement cohérent de la répétition d'une touche, pour l'instant + +Malheureusement, `onkeydown` peut ou non être répété suivant le système d'exploitation utilisé. Consultez le {{ Bug(91592) }} dans la base de données Bugzilla. + +{{ languages( { "en": "en/Key-navigable_custom_DHTML_widgets", "ja": "ja/Key-navigable_custom_DHTML_widgets" } ) }} diff --git a/files/fr/web/accessibility/mobile_accessibility_checklist/index.md b/files/fr/web/accessibility/mobile_accessibility_checklist/index.md index 9844156521..29dda3d796 100644 --- a/files/fr/web/accessibility/mobile_accessibility_checklist/index.md +++ b/files/fr/web/accessibility/mobile_accessibility_checklist/index.md @@ -10,92 +10,73 @@ tags: translation_of: Web/Accessibility/Mobile_accessibility_checklist original_slug: Accessibilité/Checklist_accessibilite_mobile --- -<p>Ce document fournit une liste concise des points à vérifier par les développeuses et développeurs pour garantir l'accessibilité d'une application mobile. Ce document est amené à évoluer pour tenir compte de nouvelles bonnes pratiques.</p> - -<h2 id="colour">La couleur</h2> - -<ul> - <li>Le contraste des couleurs <strong>DOIT</strong> être conforme aux <a href="https://www.w3.org/TR/WCAG/#contrast-minimum">exigences du niveau AA du WCAG 2.1</a> : - <ul> - <li>Un contraste dont le ratio est de 4.5:1 pour les textes normaux (dont la fonte est inférieure à 18 points ou 14 points en gras) ;</li> - <li>Un contraste dont le ratio est de 3:1 pour les grands textes (18 points minimum ou 14 points en gras).</li> - </ul> - </li> - <li>L'information transmise par la couleur <strong>DOIT</strong> également être disponible par d'autres moyens (texte souligné pour les liens, etc.).</li> -</ul> - -<h2 id="visibility">La visibilité</h2> - -<ul> - <li>Les techniques de masquage du contenu, telles que l'opacité nulle, l'ordre d'indexation en « z » et le placement hors écran, <strong>NE DOIVENT PAS</strong> être utilisées exclusivement pour gérer la visibilité.</li> - <li>Tout ce qui est autre, que l'écran actuellement visible, <strong>DOIT</strong> être <em>vraiment</em> invisible (particulièrement pertinent pour les apps à page unique avec plusieurs « <em>cartes</em> ») : - <ul> - <li>Utilisez l'attribut <code>hidden</code> ou les propriétés de style <code>visibility</code> ou <code>display</code>.</li> - <li>Sauf si cela est absolument inévitable, l'attribut <code>aria-hidden</code> <strong>NE DOIT PAS</strong> être utilisé.</li> - </ul> - </li> -</ul> - -<h2 id="focus">Le focus</h2> - -<ul> - <li>Tous les éléments activables <strong>DOIVENT</strong> être focusables : - <ul> - <li>Les contrôles standard tels que les liens, les boutons et les champs de formulaire sont accessibles par défaut.</li> - <li>Les contrôles non standard <strong>DOIVENT</strong> avoir un <a href="/fr/docs/Web/Accessibility/ARIA/Roles">rôle ARIA</a> approprié qui leur est attribué, comme <code>button</code>, <code>link</code> ou <code>checkbox</code>.</li> - </ul> - </li> - <li>Le focus <strong>DOIT</strong> être traité dans un ordre logique et de manière cohérente.</li> -</ul> - -<h2 id="text_equivalents">Les équivalents textuels</h2> - -<ul> - <li>Un équivalent textuel <strong>DOIT</strong> être fourni pour chaque élément non textuel non strictement présenté dans l'application. - <ul> - <li>Utilisez <em>alt</em> et <em>title</em> lorsque cela est approprié (voir l'article de Steve Faulkner sur l'<a href="https://www.tpgi.com/using-the-html-title-attribute-updated/">Utilisation de l'attribut HTML title</a>).</li> - <li>Si les attributs ci-dessus ne sont pas applicables, utilisez les <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">États et propriétés ARIA</a> appropriés tels que <code>aria-label</code>, <code>aria-labelledby</code>, ou <code>aria-describedby</code>.</li> - </ul> - </li> - <li>Les images de texte <strong>DOIVENT</strong> être évitées.</li> - <li>Tous les composants de l'interface utilisateur ayant un texte visible (ou une image de texte) comme étiquette <strong>DOIVENT</strong> avoir le même texte disponible dans le <a href="https://www.w3.org/TR/WCAG21/#dfn-name">nom</a> programmatique du composant. <a href="https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html">WCAG 2.1 : Étiquette dans le nom.</a></li> - <li>Tous les contrôles de formulaire <strong>DOIVENT</strong> avoir des étiquettes (éléments <a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a>) pour le bénéfice des utilisateurs de lecteurs d'écran.</li> -</ul> - -<h2 id="handling_state">La gestion des états</h2> - -<ul> - <li>Les contrôles standard tels que les boutons radio et les cases à cocher sont gérés par le système d'exploitation. Cependant, pour d'autres contrôles personnalisés, les changements d'état <strong>DOIVENT</strong> être fournis via <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">les états ARIA</a> tels que <code>aria-checked</code>, <code>aria-disabled</code>, <code>aria-selected</code>, <code>aria-expanded</code> et <code>aria-pressed</code>.</li> -</ul> - -<h2 id="orientation">L'orientation</h2> - -<ul> - <li>Le contenu <strong>NE DOIT PAS</strong> être limité à une seule orientation, comme le portrait ou le paysage, sauf si cela est essentiel. <a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">WCAG 2.1 : Orientation</a> - <ul> - <li>Des exemples de cas où une orientation est essentielle sont une application pour un piano ou un chèque de banque.</li> - </ul> - </li> -</ul> - -<h2 id="general_guidelines">Directives générales</h2> - -<ul> - <li>Un titre d'application <strong>DOIT</strong> être fourni.</li> - <li>Les titres <strong>NE DOIVENT PAS</strong> rompre la structure hiérarchique - <pre class="brush: html"><h1>Titre de premier niveau</h1> - <h2>Titre secondaire</h2> - <h2>Un autre titre secondaire</h2> - <h3>Titre de bas niveau</h3></pre> - </li> - <li>L'<a href="https://www.washington.edu/accessibility/web/landmarks/">ARIA Landmark Roles</a> <strong>DOIT</strong> être utilisé pour décrire une structure d'application ou de document, telle que <code>banner</code>, <code>complementary</code>, <code>contentinfo</code>, <code>main</code>, <code>navigation</code>, <code>search</code>.</li> - <li>Pour les événements tactiles, au moins un des éléments suivants <strong>DOIT</strong> être vrai (<a href="https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation.html">WCAG 2.1 : Annulation du pointeur</a>) : - <ul> - <li>L'événement de descente <strong>NE DOIT PAS</strong> être utilisé pour déclencher une action.</li> - <li>L'action est déclenchée par l'événement « up » et une option permettant d'interrompre l'action avant son achèvement est disponible ou une option permettant d'annuler l'action après son achèvement.</li> - <li>L'événement de montée annulera toute action déclenchée par un événement de descente.</li> - <li>Il est essentiel de déclencher l'action sur l'événement de descente. Par exemple, pour jouer à un jeu ou à une application de piano.</li> - </ul> - </li> - <li>Les cibles tactiles <strong>DOIVENT</strong> être suffisamment grandes pour que l'utilisateur puisse interagir avec elles (voir <a href="https://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size">BBC Mobile Accessibility Guidelines</a> pour des directives utiles sur la taille des cibles tactiles).</li> -</ul> +Ce document fournit une liste concise des points à vérifier par les développeuses et développeurs pour garantir l'accessibilité d'une application mobile. Ce document est amené à évoluer pour tenir compte de nouvelles bonnes pratiques. + +## La couleur + +- Le contraste des couleurs **DOIT** être conforme aux [exigences du niveau AA du WCAG 2.1](https://www.w3.org/TR/WCAG/#contrast-minimum) : + + - Un contraste dont le ratio est de 4.5:1 pour les textes normaux (dont la fonte est inférieure à 18 points ou 14 points en gras) ; + - Un contraste dont le ratio est de 3:1 pour les grands textes (18 points minimum ou 14 points en gras). + +- L'information transmise par la couleur **DOIT** également être disponible par d'autres moyens (texte souligné pour les liens, etc.). + +## La visibilité + +- Les techniques de masquage du contenu, telles que l'opacité nulle, l'ordre d'indexation en « z » et le placement hors écran, **NE DOIVENT PAS** être utilisées exclusivement pour gérer la visibilité. +- Tout ce qui est autre, que l'écran actuellement visible, **DOIT** être _vraiment_ invisible (particulièrement pertinent pour les apps à page unique avec plusieurs « _cartes_ ») : + + - Utilisez l'attribut `hidden` ou les propriétés de style `visibility` ou `display`. + - Sauf si cela est absolument inévitable, l'attribut `aria-hidden` **NE DOIT PAS** être utilisé. + +## Le focus + +- Tous les éléments activables **DOIVENT** être focusables : + + - Les contrôles standard tels que les liens, les boutons et les champs de formulaire sont accessibles par défaut. + - Les contrôles non standard **DOIVENT** avoir un [rôle ARIA](/fr/docs/Web/Accessibility/ARIA/Roles) approprié qui leur est attribué, comme `button`, `link` ou `checkbox`. + +- Le focus **DOIT** être traité dans un ordre logique et de manière cohérente. + +## Les équivalents textuels + +- Un équivalent textuel **DOIT** être fourni pour chaque élément non textuel non strictement présenté dans l'application. + + - Utilisez _alt_ et _title_ lorsque cela est approprié (voir l'article de Steve Faulkner sur l'[Utilisation de l'attribut HTML title](https://www.tpgi.com/using-the-html-title-attribute-updated/)). + - Si les attributs ci-dessus ne sont pas applicables, utilisez les [États et propriétés ARIA](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def) appropriés tels que `aria-label`, `aria-labelledby`, ou `aria-describedby`. + +- Les images de texte **DOIVENT** être évitées. +- Tous les composants de l'interface utilisateur ayant un texte visible (ou une image de texte) comme étiquette **DOIVENT** avoir le même texte disponible dans le [nom](https://www.w3.org/TR/WCAG21/#dfn-name) programmatique du composant. [WCAG 2.1 : Étiquette dans le nom.](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html) +- Tous les contrôles de formulaire **DOIVENT** avoir des étiquettes (éléments [`<label>`](/fr/docs/Web/HTML/Element/Label)) pour le bénéfice des utilisateurs de lecteurs d'écran. + +## La gestion des états + +- Les contrôles standard tels que les boutons radio et les cases à cocher sont gérés par le système d'exploitation. Cependant, pour d'autres contrôles personnalisés, les changements d'état **DOIVENT** être fournis via [les états ARIA](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def) tels que `aria-checked`, `aria-disabled`, `aria-selected`, `aria-expanded` et `aria-pressed`. + +## L'orientation + +- Le contenu **NE DOIT PAS** être limité à une seule orientation, comme le portrait ou le paysage, sauf si cela est essentiel. [WCAG 2.1 : Orientation](https://www.w3.org/WAI/WCAG21/Understanding/orientation.html) + + - Des exemples de cas où une orientation est essentielle sont une application pour un piano ou un chèque de banque. + +## Directives générales + +- Un titre d'application **DOIT** être fourni. +- Les titres **NE DOIVENT PAS** rompre la structure hiérarchique + + ```html + <h1>Titre de premier niveau</h1> + <h2>Titre secondaire</h2> + <h2>Un autre titre secondaire</h2> + <h3>Titre de bas niveau</h3> + ``` + +- L'[ARIA Landmark Roles](https://www.washington.edu/accessibility/web/landmarks/) **DOIT** être utilisé pour décrire une structure d'application ou de document, telle que `banner`, `complementary`, `contentinfo`, `main`, `navigation`, `search`. +- Pour les événements tactiles, au moins un des éléments suivants **DOIT** être vrai ([WCAG 2.1 : Annulation du pointeur](https://www.w3.org/WAI/WCAG21/Understanding/pointer-cancellation.html)) : + + - L'événement de descente **NE DOIT PAS** être utilisé pour déclencher une action. + - L'action est déclenchée par l'événement « up » et une option permettant d'interrompre l'action avant son achèvement est disponible ou une option permettant d'annuler l'action après son achèvement. + - L'événement de montée annulera toute action déclenchée par un événement de descente. + - Il est essentiel de déclencher l'action sur l'événement de descente. Par exemple, pour jouer à un jeu ou à une application de piano. + +- Les cibles tactiles **DOIVENT** être suffisamment grandes pour que l'utilisateur puisse interagir avec elles (voir [BBC Mobile Accessibility Guidelines](https://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/design/touch-target-size) pour des directives utiles sur la taille des cibles tactiles). diff --git a/files/fr/web/accessibility/understanding_wcag/index.md b/files/fr/web/accessibility/understanding_wcag/index.md index 23805dc3ca..07b8abfe58 100644 --- a/files/fr/web/accessibility/understanding_wcag/index.md +++ b/files/fr/web/accessibility/understanding_wcag/index.md @@ -7,52 +7,45 @@ tags: - Web Content Accessibility Guidelines translation_of: Web/Accessibility/Understanding_WCAG --- -<p>Cet ensemble d'articles fournit des explications rapides pour vous aider à comprendre les étapes à suivre pour vous conformer aux recommandations décrites dans les Directives d'accessibilité du contenu Web 2.0 ou 2.1 du W3C (ou simplement WCAG, aux fins de cet article).</p> +Cet ensemble d'articles fournit des explications rapides pour vous aider à comprendre les étapes à suivre pour vous conformer aux recommandations décrites dans les Directives d'accessibilité du contenu Web 2.0 ou 2.1 du W3C (ou simplement WCAG, aux fins de cet article). -<p>Les WCAG 2.0 et 2.1 fournissent un ensemble détaillé de lignes directrices pour rendre le contenu Web plus accessible aux personnes ayant une grande variété de handicaps. Il est complet mais incroyablement détaillé et assez difficile à comprendre rapidement. Pour cette raison, nous avons résumé les étapes pratiques que vous devez suivre pour satisfaire les différentes recommandations, avec d'autres liens vers plus de détails si nécessaire.</p> +Les WCAG 2.0 et 2.1 fournissent un ensemble détaillé de lignes directrices pour rendre le contenu Web plus accessible aux personnes ayant une grande variété de handicaps. Il est complet mais incroyablement détaillé et assez difficile à comprendre rapidement. Pour cette raison, nous avons résumé les étapes pratiques que vous devez suivre pour satisfaire les différentes recommandations, avec d'autres liens vers plus de détails si nécessaire. -<h2 id="Les_quatre_principes">Les quatre principes</h2> +## Les quatre principes -<p>Les WCAG sont globalement divisés en quatre principes — éléments majeurs que le contenu Web <strong>doit être</strong> pour être considéré comme accessible (voir <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head">Comprendre les Quatre Principes d'Accessibilité </a>pour les définitons des WCAG).</p> +Les WCAG sont globalement divisés en quatre principes — éléments majeurs que le contenu Web **doit être** pour être considéré comme accessible (voir [Comprendre les Quatre Principes d'Accessibilité ](https://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html#introduction-fourprincs-head)pour les définitons des WCAG). -<p>Chacun des liens ci-dessous vous mènera à des pages qui développent davantage ces domaines, vous donnant des conseils pratiques sur la façon de rédiger votre contenu Web afin qu'il soit conforme aux critères de succès décrits dans chacune des directives WCAG 2.0 et 2.1 qui se subdivisent davantage en chaque principe.</p> +Chacun des liens ci-dessous vous mènera à des pages qui développent davantage ces domaines, vous donnant des conseils pratiques sur la façon de rédiger votre contenu Web afin qu'il soit conforme aux critères de succès décrits dans chacune des directives WCAG 2.0 et 2.1 qui se subdivisent davantage en chaque principe. -<ul> - <li><a href="/fr/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable">Perceptile:</a> Les utilisateurs doivent pouvoir le percevoir d'une manière ou d'une autre, en utilisant un ou plusieurs de leurs sens.</li> - <li><a href="/fr/docs/user:chrisdavidmills/Understanding_WCAG/Operable">Opérable</a>: Les utilisateurs doivent pouvoir contrôler les éléments de l'interface utilisateur (par exemple, les boutons doivent être cliquables d'une manière ou d'une autre - souris, clavier, commande vocale, etc.).</li> - <li><a href="/fr/docs/user:chrisdavidmills/Understanding_WCAG/Understandable">Compréhensible</a>: Le contenu doit être compréhensible pour ses utilisateurs.</li> - <li><a href="/fr/docs/user:chrisdavidmills/Understanding_WCAG/Robust">Robuste</a>: Le contenu doit être développé à l'aide de normes Web bien adoptées qui fonctionneront sur différents navigateurs, maintenant et à l'avenir.</li> -</ul> +- [Perceptile:](/fr/docs/user:chrisdavidmills/Understanding_WCAG/Perceivable) Les utilisateurs doivent pouvoir le percevoir d'une manière ou d'une autre, en utilisant un ou plusieurs de leurs sens. +- [Opérable](/fr/docs/user:chrisdavidmills/Understanding_WCAG/Operable): Les utilisateurs doivent pouvoir contrôler les éléments de l'interface utilisateur (par exemple, les boutons doivent être cliquables d'une manière ou d'une autre - souris, clavier, commande vocale, etc.). +- [Compréhensible](/fr/docs/user:chrisdavidmills/Understanding_WCAG/Understandable): Le contenu doit être compréhensible pour ses utilisateurs. +- [Robuste](/fr/docs/user:chrisdavidmills/Understanding_WCAG/Robust): Le contenu doit être développé à l'aide de normes Web bien adoptées qui fonctionneront sur différents navigateurs, maintenant et à l'avenir. -<h2 id="Dois-je_utiliser_WCAG_2.0_ou_2.1">Dois-je utiliser WCAG 2.0 ou 2.1?</h2> +## Dois-je utiliser WCAG 2.0 ou 2.1? -<p>WCAG 2.1 est la norme d'accessibilité la plus récente et la plus pertinente. Utilisez WCAG 2.1 pour aider plus de personnes handicapées et réduire le risque juridique futur pour les propriétaires de sites Web. Ciblez d'abord WCAG 2.0 lors de l'allocation des ressources. Passez ensuite à WCAG 2.1. </p> +WCAG 2.1 est la norme d'accessibilité la plus récente et la plus pertinente. Utilisez WCAG 2.1 pour aider plus de personnes handicapées et réduire le risque juridique futur pour les propriétaires de sites Web. Ciblez d'abord WCAG 2.0 lors de l'allocation des ressources. Passez ensuite à WCAG 2.1. -<h3 id="Quest-ce_que_WCAG_2.1">Qu'est-ce que WCAG 2.1?</h3> +### Qu'est-ce que WCAG 2.1? -<p>WCAG 2.1 a été publié en tant que recommandation officielle le 5 juin 2018. L'Union européenne (UE) a adopté WCAG 2.1 comme norme d'accessibilité numérique en septembre 2018. Le W3C a publié un communiqué de presse <a href="https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/">WCAG 2.1 Adoption en Europe</a>. </p> +WCAG 2.1 a été publié en tant que recommandation officielle le 5 juin 2018. L'Union européenne (UE) a adopté WCAG 2.1 comme norme d'accessibilité numérique en septembre 2018. Le W3C a publié un communiqué de presse [WCAG 2.1 Adoption en Europe](https://www.w3.org/blog/2018/09/wcag-2-1-adoption-in-europe/). -<p>WCAG 2.1 comprend:</p> +WCAG 2.1 comprend: -<ul> - <li>tous les WCAG 2.0 (textuellement, mot-à-mot)</li> - <li>17 nouveaux critères de succès aux niveaux A / AA / AAA répondant principalement aux besoins des utilisateurs dans ces domaines: - <ul> - <li>Accessibilité mobile</li> - <li>Vision faible</li> - <li>Cognitive</li> - </ul> - </li> - <li>En savoir plus sur WCAG 2.1: - <ul> - <li>Deque: <a href="https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/">WCAG 2.1: Quelle est la suite des directives d'accessibilité</a></li> - <li>TPG: <a href="https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/">Directives pour l'Accessibilité des Contenus Web (WCAG) 2.1</a></li> - </ul> - </li> -</ul> +- tous les WCAG 2.0 (textuellement, mot-à-mot) +- 17 nouveaux critères de succès aux niveaux A / AA / AAA répondant principalement aux besoins des utilisateurs dans ces domaines: -<h2 id="Statut_juridique">Statut juridique</h2> + - Accessibilité mobile + - Vision faible + - Cognitive -<p>Ce guide est destiné à fournir des informations pratiques pour vous aider à créer de meilleurs sites Web plus accessibles. Cependant, nous ne sommes pas des avocats et rien de tout cela ne constitue un avis juridique. Si vous êtes préoccupé par les implications juridiques de l'accessibilité du Web, nous vous recommandons de vérifier la législation spécifique régissant l'accessibilité du Web / des ressources publiques dans votre pays ou région, et de demander l'avis d'un avocat qualifié.</p> +- En savoir plus sur WCAG 2.1: -<p><a href="/fr/docs/Learn/Accessibility/What_is_accessibility">Qu'est ce que l'accessibilité?</a> et particularité, <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law">les directives d'Accessibility et la section sur la loi</a> fournissent des informations complémentaires.</p> + - Deque: [WCAG 2.1: Quelle est la suite des directives d'accessibilité](https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/) + - TPG: [Directives pour l'Accessibilité des Contenus Web (WCAG) 2.1](https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/) + +## Statut juridique + +Ce guide est destiné à fournir des informations pratiques pour vous aider à créer de meilleurs sites Web plus accessibles. Cependant, nous ne sommes pas des avocats et rien de tout cela ne constitue un avis juridique. Si vous êtes préoccupé par les implications juridiques de l'accessibilité du Web, nous vous recommandons de vérifier la législation spécifique régissant l'accessibilité du Web / des ressources publiques dans votre pays ou région, et de demander l'avis d'un avocat qualifié. + +[Qu'est ce que l'accessibilité?](/fr/docs/Learn/Accessibility/What_is_accessibility) et particularité, [les directives d'Accessibility et la section sur la loi](/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_guidelines_and_the_law) fournissent des informations complémentaires. diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md index 98d4766bd9..819174941c 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md @@ -8,53 +8,35 @@ tags: translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_couleur --- -<p>Le <a href="https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio">contraste de la couleur</a> entre l'arrière-plan et le contenu de premier-plan (qui est en général du texte) doit être assez prononcé pour assurer la lisibilité.</p> - -<p>Lors de la conception d'interfaces lisibles pour différentes capacités de vision, les directives WCAG recommandent les rapports de contraste suivants:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Type de contenu</th> - <th scope="col">Ratio minimum (Note AA)</th> - <th scope="col">Ratio amélioré (Note AAA)</th> - </tr> - </thead> - <tbody> - <tr> - <td>Corps</td> - <td>4.5 : 1</td> - <td>7 : 1</td> - </tr> - <tr> - <td>Texte grande échelle (120-150% plus large que le corps)</td> - <td>3 : 1</td> - <td>4.5 : 1</td> - </tr> - <tr> - <td>Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques</td> - <td>3 : 1</td> - <td>Non défini</td> - </tr> - </tbody> -</table> - -<p>Ces ratios ne s'appliquent pas au texte "accessoire", comme les contrôles inactifs, les logotypes ou le texte purement décoratif.</p> - -<p>Voir la section {{anch("Solution")}} ci-dessous pour plus d'informations.</p> - -<p>Un bon contraste des couleurs sur votre site profite à tous vos utilisateurs, mais celà est particulièrement intéressant pour les utilisateurs souffrant de certains types de daltonisme et d'autres particularités similaires, qui rencontrent un faible contraste et ont du mal à faire la différence entre des couleurs proches. En effet, ces utilisateurs ne voient pas les zones claires et sombres aussi facilement que ceux sans ces particularités et ont donc du mal à voir les bords, les bordures et d'autres détails.</p> - -<p>C'est bien d'avoir un design cool sur votre site, mais le design ne vaut rien si vos utilisateurs ne peuvent pas lire votre contenu.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Jetons un coup d'œil à du code HTML et CSS assez simple:</p> - -<pre class="brush: html"><div class="bon">Bon contraste</div> -<div class="mauvais">Mauvais contraste</div></pre> - -<pre class="brush: css">div { +Le [contraste de la couleur](https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio) entre l'arrière-plan et le contenu de premier-plan (qui est en général du texte) doit être assez prononcé pour assurer la lisibilité. + +Lors de la conception d'interfaces lisibles pour différentes capacités de vision, les directives WCAG recommandent les rapports de contraste suivants: + +| Type de contenu | Ratio minimum (Note AA) | Ratio amélioré (Note AAA) | +| ---------------------------------------------------------------------------------------------------- | ----------------------- | ------------------------- | +| Corps | 4.5 : 1 | 7 : 1 | +| Texte grande échelle (120-150% plus large que le corps) | 3 : 1 | 4.5 : 1 | +| Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques | 3 : 1 | Non défini | + +Ces ratios ne s'appliquent pas au texte "accessoire", comme les contrôles inactifs, les logotypes ou le texte purement décoratif. + +Voir la section {{anch("Solution")}} ci-dessous pour plus d'informations. + +Un bon contraste des couleurs sur votre site profite à tous vos utilisateurs, mais celà est particulièrement intéressant pour les utilisateurs souffrant de certains types de daltonisme et d'autres particularités similaires, qui rencontrent un faible contraste et ont du mal à faire la différence entre des couleurs proches. En effet, ces utilisateurs ne voient pas les zones claires et sombres aussi facilement que ceux sans ces particularités et ont donc du mal à voir les bords, les bordures et d'autres détails. + +C'est bien d'avoir un design cool sur votre site, mais le design ne vaut rien si vos utilisateurs ne peuvent pas lire votre contenu. + +## Exemples + +Jetons un coup d'œil à du code HTML et CSS assez simple: + +```html +<div class="bon">Bon contraste</div> +<div class="mauvais">Mauvais contraste</div> +``` + +```css +div { /* Styles généraux de div ici */ } @@ -64,17 +46,21 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ .mauvais { background-color: #400064; -}</pre> +} +``` -<p>Les deux textes ont leur couleur noire par défaut. La "bonne" <code><div></code> a un fond violet clair, ce qui rend le texte facile à lire:</p> +Les deux textes ont leur couleur noire par défaut. La "bonne" `<div>` a un fond violet clair, ce qui rend le texte facile à lire: -<h3 id="Bon_exemple">Bon exemple</h3> +### Bon exemple -<pre class="brush: html"> <div class="bon"> +```html + <div class="bon"> Bon contraste - </div></pre> + </div> +``` -<pre class="brush: css">div { +```css +div { font-family: sans-serif; text-align: center; font-size: 2rem; @@ -87,18 +73,23 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ .bon { background-color: #fae6fa; -}</pre> +} +``` + +{{EmbedLiveSample('Bon_exemple', '100%', '100')}} -<p>{{EmbedLiveSample('Bon_exemple', '100%', '100')}}</p> +### Mauvais exemple -<h3 id="Mauvais_exemple">Mauvais exemple</h3> -<p>La "mauvaise" <code><div></code>, en revanche, a un fond violet très foncé, ce qui rend le texte beaucoup plus difficile à lire:</p> +La "mauvaise" `<div>`, en revanche, a un fond violet très foncé, ce qui rend le texte beaucoup plus difficile à lire: -<pre class="brush: html"> <div class="mauvais"> +```html + <div class="mauvais"> Mauvais contraste - </div></pre> + </div> +``` -<pre class="brush: css">div { +```css +div { font-family: sans-serif; text-align: center; font-size: 2rem; @@ -111,46 +102,42 @@ original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_ .mauvais { background-color: #400064; -}</pre> +} +``` + +{{EmbedLiveSample('Mauvais_exemple', '100%', '100')}} + +## Solution + +Lorsque vous choisissez un jeu de couleurs pour votre site Web, choisissez des couleurs de premier plan et d'arrière-plan qui offrent un bon contraste. Faites en sorte que le contraste des couleurs soit aussi bon que possible dans vos contraintes de conception - optez idéalement pour la note AAA (voir paragraphe 1.4.6 ci-dessous), mais répondez au moins à la note AA (voir paragraphe 1.4.3 ci-dessous). + +Si vous incluez du contenu non textuel tel qu'une vidéo ou une animation, vous devrez suivre le paragraphe 1.4.11 (encore une fois, voir ci-dessous). + +Pour vérifier votre contraste lorsque vous effectuez un choix de couleurs, vous pouvez utiliser le [Vérificateur de Contraste des Couleurs](https://webaim.org/resources/contrastchecker/) de WebAIM. -<p>{{EmbedLiveSample('Mauvais_exemple', '100%', '100')}}</p> +Vous pouvez également vérifier le contraste des couleurs directement via les outils de développement de Firefox — consultez notre guide de l'[Inspecteur de l'accessibilité](/fr/docs/Tools/Accessibility_inspector), et en particulier la section [Vérifier les problèmes d'accessibilité](/fr/docs/Outils/Inspecteur_accessibilite#S%C3%A9lecteur_d'accessibilit%C3%A9). Essayez de les utiliser sur les exemples dans la section de description. +## Critères de réussite associés aux WCAG -<h2 id="Solution">Solution</h2> +- [1.4.3 Contraste minimum (AA)](https://www.w3.org/TR/WCAG21/#contrast-minimum) -<p>Lorsque vous choisissez un jeu de couleurs pour votre site Web, choisissez des couleurs de premier plan et d'arrière-plan qui offrent un bon contraste. Faites en sorte que le contraste des couleurs soit aussi bon que possible dans vos contraintes de conception - optez idéalement pour la note AAA (voir paragraphe 1.4.6 ci-dessous), mais répondez au moins à la note AA (voir paragraphe 1.4.3 ci-dessous).</p> + - : Le contraste des couleurs entre le contenu d'arrière-plan et de premier plan doit être au minimum pour garantir la lisibilité: -<p>Si vous incluez du contenu non textuel tel qu'une vidéo ou une animation, vous devrez suivre le paragraphe 1.4.11 (encore une fois, voir ci-dessous).</p> + - Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 4.5:1. + - Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 3:1. Le texte "plus grand" est défini comme au moins 18pt, ou 14pt en gras. -<p>Pour vérifier votre contraste lorsque vous effectuez un choix de couleurs, vous pouvez utiliser le <a href="https://webaim.org/resources/contrastchecker/">Vérificateur de Contraste des Couleurs</a> de WebAIM.</p> +- [1.4.6 Contraste amélioré (AAA)](https://www.w3.org/TR/WCAG21/#contrast-enhanced) -<p>Vous pouvez également vérifier le contraste des couleurs directement via les outils de développement de Firefox — consultez notre guide de l'<a href="/fr/docs/Tools/Accessibility_inspector">Inspecteur de l'accessibilité</a>, et en particulier la section <a href="/fr/docs/Outils/Inspecteur_accessibilite#S%C3%A9lecteur_d'accessibilit%C3%A9">Vérifier les problèmes d'accessibilité</a>. Essayez de les utiliser sur les exemples dans la section de description.</p> + - : Cela suit et s'appuie sur le critère 1.4.3. -<h2 id="Critères_de_réussite_associés_aux_WCAG">Critères de réussite associés aux WCAG</h2> + - Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 7:1. + - Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 4.5:1. -<dl> - <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-minimum">1.4.3 Contraste minimum (AA)</a></dt> - <dd>Le contraste des couleurs entre le contenu d'arrière-plan et de premier plan doit être au minimum pour garantir la lisibilité: - <ul> - <li>Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 4.5:1.</li> - <li>Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 3:1. Le texte "plus grand" est défini comme au moins 18pt, ou 14pt en gras.</li> - </ul> - </dd> - <dt><a href="https://www.w3.org/TR/WCAG21/#contrast-enhanced">1.4.6 Contraste amélioré (AAA)</a></dt> - <dd>Cela suit et s'appuie sur le critère 1.4.3. - <ul> - <li>Le texte et son arrière-plan doivent avoir un ratio de contraste d'au moins 7:1.</li> - <li>Le texte d'en-tête (ou juste "plus grand") doit avoir un ratio d'au moins 4.5:1.</li> - </ul> - </dd> - <dt><a href="https://www.w3.org/TR/WCAG21/#non-text-contrast">1.4.11 Contraste non textuel (AA)</a> (ajouté en 2.1)</dt> - <dd>Il doit y avoir un ratio de contraste de couleur minimum de 3 à 1 pour les composants de l'interface utilisateur et les objets graphiques.</dd> -</dl> +- [1.4.11 Contraste non textuel (AA)](https://www.w3.org/TR/WCAG21/#non-text-contrast) (ajouté en 2.1) + - : Il doit y avoir un ratio de contraste de couleur minimum de 3 à 1 pour les composants de l'interface utilisateur et les objets graphiques. -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#couleur_et_contraste_de_couleur">Couleur et contraste de couleur</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML#%C3%89tiquettes_multiples">Étiquettes multiples</a></li> - <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Comprendre le contraste non textuel</a></li> -</ul> +- [Couleur et contraste de couleur](/fr/docs/Learn/Accessibility/CSS_and_JavaScript#couleur_et_contraste_de_couleur) +- [Étiquettes multiples](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML#%C3%89tiquettes_multiples) +- [Comprendre le contraste non textuel](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/index.md b/files/fr/web/accessibility/understanding_wcag/perceivable/index.md index 9ed3ff530a..2802c59a02 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/index.md +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/index.md @@ -14,346 +14,743 @@ tags: - time-based media translation_of: Web/Accessibility/Understanding_WCAG/Perceivable --- -<p>This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the <strong>Perceivable</strong> principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses.</p> +This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the **Perceivable** principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses. -<div class="note"> -<p><strong>Note :</strong> To read the W3C definitions for Perceivable and its guidelines and success criteria, see <a href="https://www.w3.org/TR/WCAG21/#perceivable">Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</a></p> -</div> +> **Note :** To read the W3C definitions for Perceivable and its guidelines and success criteria, see [Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.](https://www.w3.org/TR/WCAG21/#perceivable) -<h2 id="Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Guideline 1.1 — Providing text alternatives for non-text content</h2> +## Guideline 1.1 — Providing text alternatives for non-text content -<p>The key here is that text can be converted to other forms people with disabilities can use, so for example spoken by a screenreader, zoomed in, or represented on a braille display. Non-text content refers to multimedia such as images, audio, and video.</p> +The key here is that text can be converted to other forms people with disabilities can use, so for example spoken by a screenreader, zoomed in, or represented on a braille display. Non-text content refers to multimedia such as images, audio, and video. <table class="standard-table"> - <thead> - <tr> - <th scope="col">Success criteria</th> - <th scope="col">How to conform to the criteria</th> - <th scope="col">Practical resource</th> - </tr> - </thead> - <tbody> - <tr> - <td colspan="1" rowspan="5">1.1.1 Provide text equivalents (A)</td> - <td>All images that convey meaningful content should be given suitable alternative text.</td> - <td><a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives.</a></td> - </tr> - <tr> - <td>Complex images or charts should have an accessible alternative provided, either on the same page or linked to. Use a regular link rather than the <code>longdesc</code> attribute.</td> - <td> - <p>A text description may work, or an accessible data table (see <a href="/fr/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a>). Also see <a href="/fr/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms">Other text alternative mechanisms</a> for the argument against <code>longdesc</code>.</p> - </td> - </tr> - <tr> - <td>Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar).</td> - <td> - <p>See <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a> for static caption options, and <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a>, <a href="/fr/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a>, and <a href="/fr/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other alternatives.</p> - </td> - </tr> - <tr> - <td>UI Controls such as form elements and buttons should have text labels that describe their purpose.</td> - <td>Buttons are simple — you should make sure the button text describes the function of the button (e.g. <code><button>Upload image</button></code>). For further information on other UI controls, see <a href="/fr/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>.</td> - </tr> - <tr> - <td>Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users.</td> - <td> - <p>Decorative images should be implemented using CSS background images (see <a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a>). If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (<code>alt=""</code>), otherwise screenreaders may try to read out the filepath, etc.</p> - - <p>If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all.</p> - </td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Success criteria</th> + <th scope="col">How to conform to the criteria</th> + <th scope="col">Practical resource</th> + </tr> + </thead> + <tbody> + <tr> + <td colspan="1" rowspan="5">1.1.1 Provide text equivalents (A)</td> + <td> + All images that convey meaningful content should be given suitable + alternative text. + </td> + <td> + <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives" + >Text alternatives.</a + > + </td> + </tr> + <tr> + <td> + Complex images or charts should have an accessible alternative provided, + either on the same page or linked to. Use a regular link rather than the + <code>longdesc</code> attribute. + </td> + <td> + <p> + A text description may work, or an accessible data table (see + <a href="/fr/docs/Learn/HTML/Tables/Advanced" + >HTML table advanced features and accessibility</a + >). Also see + <a + href="/fr/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms" + >Other text alternative mechanisms</a + > + for the argument against <code>longdesc</code>. + </p> + </td> + </tr> + <tr> + <td> + Multimedia content (e.g. audio or video) should at least have a + descriptive identification available (e.g. a caption or similar). + </td> + <td> + <p> + See <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives" + >Text alternatives</a + > + for static caption options, and + <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + >Audio transcripts</a + >, + <a href="/fr/docs/Learn/Accessibility/Multimedia#Video_text_tracks" + >Video text tracks</a + >, and + <a + href="/fr/docs/Learn/Accessibility/Multimedia#Other_multimedia_content" + >Other multimedia content</a + > + for other alternatives. + </p> + </td> + </tr> + <tr> + <td> + UI Controls such as form elements and buttons should have text labels + that describe their purpose. + </td> + <td> + Buttons are simple — you should make sure the button text describes the + function of the button (e.g. + <code><button>Upload image</button></code>). For further + information on other UI controls, see + <a href="/fr/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>. + </td> + </tr> + <tr> + <td> + Implement decorative (non-content) images, video, etc., in a way that is + invisible to assistive technology, so it doesn't confuse users. + </td> + <td> + <p> + Decorative images should be implemented using CSS background images + (see + <a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a + >). If you have to include an image via an + {{htmlelement("img")}} element, give it a blank alt + (<code>alt=""</code>), otherwise screenreaders may try to read out the + filepath, etc. + </p> + <p> + If you are including background video or audio that autoplays, make it + as unobtrusive as possible. Don't make it look/sound like content, and + provide a control to turn it off. Ideally, don't include it at all. + </p> + </td> + </tr> + </tbody> </table> -<div class="note"> -<p><strong>Note :</strong> Also see the <a href="https://www.w3.org/TR/WCAG21/#text-alternatives">WCAG description for Guideline 1.1: Text alternatives</a>.</p> -</div> +> **Note :** Also see the [WCAG description for Guideline 1.1: Text alternatives](https://www.w3.org/TR/WCAG21/#text-alternatives). -<h2 id="Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Guideline 1.2 — Providing text alternatives for time-based media</h2> +## Guideline 1.2 — Providing text alternatives for time-based media -<p>Time-based media refers to multimedia with a duration, i.e. audio and video. Also note that if the audio/video serves as an alternative to existing text content, you don't need to provide another text alternative.</p> +Time-based media refers to multimedia with a duration, i.e. audio and video. Also note that if the audio/video serves as an alternative to existing text content, you don't need to provide another text alternative. <table class="standard-table"> - <thead> - <tr> - <th scope="col">Success criteria</th> - <th scope="col">How to conform to the criteria</th> - <th scope="col">Practical resource</th> - </tr> - <tr> - <td colspan="1" rowspan="1">1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)</td> - <td>A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video).</td> - <td>See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> - </tr> - <tr> - <td colspan="1">1.2.2 Provide captions for web-based video (A)</td> - <td>You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video.</td> - <td>See <a href="/fr/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a> for HTML5 video captions, and <a href="/fr/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other technologies. See also <a href="https://support.google.com/youtube/answer/2734796?hl=en">Add your own subtitles & closed captions</a> (YouTube).</td> - </tr> - <tr> - <td colspan="1">1.2.3 Provide text transcript or audio description for web-based video (A)</td> - <td>You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone.</td> - <td>See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> - </tr> - <tr> - <td colspan="1">1.2.4 Provide captions for live audio (AA)</td> - <td>You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.)</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.2.5 Provide audio descriptions for prerecorded video (AA)</td> - <td>Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video.</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.2.6 Provide sign language equivalent to prerecorded audio (AAA)</td> - <td>An equivalent sign language video should be provided for any prerecorded content containing audio.</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.2.7 Provide extended video with audio descriptions (AAA)</td> - <td>Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions).</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.2.8 Provide an alternative for prerecorded media (AAA)</td> - <td>For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content.</td> - <td>See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> - </tr> - <tr> - <td colspan="1">1.2.9 Provide a transcript for live audio (AAA)</td> - <td>For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content.</td> - <td>See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> - </tr> - </thead> + <thead> + <tr> + <th scope="col">Success criteria</th> + <th scope="col">How to conform to the criteria</th> + <th scope="col">Practical resource</th> + </tr> + <tr> + <td colspan="1" rowspan="1"> + 1.2.1 Provide alternatives for pre-recorded audio-only and video-only + content (A) + </td> + <td> + A transcript should be provided for prerecorded audio-only media, and a + transcript or audio description should be provided for prerecorded + video-only media (i.e. silent video). + </td> + <td> + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + >Audio transcripts</a + > + for transcript information. No audio description tutorial available as + yet. + </td> + </tr> + <tr> + <td colspan="1">1.2.2 Provide captions for web-based video (A)</td> + <td> + You should provide captions for video presented on the web, e.g. HTML5 + video. This is for the benefit of people who can't hear the audio part + of the video. + </td> + <td> + See + <a href="/fr/docs/Learn/Accessibility/Multimedia#Video_text_tracks" + >Video text tracks</a + > + for HTML5 video captions, and + <a + href="/fr/docs/Learn/Accessibility/Multimedia#Other_multimedia_content" + >Other multimedia content</a + > + for other technologies. See also + <a href="https://support.google.com/youtube/answer/2734796?hl=en" + >Add your own subtitles & closed captions</a + > + (YouTube). + </td> + </tr> + <tr> + <td colspan="1"> + 1.2.3 Provide text transcript or audio description for web-based video + (A) + </td> + <td> + You should provide text transcripts or audio descriptions for video + presented on the web, e.g. HTML5 video. This is for the benefit of + people who can't see the visual part of the video, and don't get the + full content from the audio alone. + </td> + <td> + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + >Audio transcripts</a + > + for transcript information. No audio description tutorial available as + yet. + </td> + </tr> + <tr> + <td colspan="1">1.2.4 Provide captions for live audio (AA)</td> + <td> + You should provide synchronized captions for all live multimedia that + contains audio (e.g. video conferences, live audio broadcasts.) + </td> + <td> </td> + </tr> + <tr> + <td colspan="1"> + 1.2.5 Provide audio descriptions for prerecorded video (AA) + </td> + <td> + Audio descriptions should be provided for prerecorded video, but only + where the existing audio does not convey the full meaning expressed by + the video. + </td> + <td> </td> + </tr> + <tr> + <td colspan="1"> + 1.2.6 Provide sign language equivalent to prerecorded audio (AAA) + </td> + <td> + An equivalent sign language video should be provided for any prerecorded + content containing audio. + </td> + <td> </td> + </tr> + <tr> + <td colspan="1"> + 1.2.7 Provide extended video with audio descriptions (AAA) + </td> + <td> + Where audio descriptions cannot be provided (see 1.2.5) due to video + timing issues (e.g. there are no suitable pauses in the content in which + to insert the audio descriptions), an alternative version of the video + should be provided that includes inserted pauses (and audio + descriptions). + </td> + <td> </td> + </tr> + <tr> + <td colspan="1"> + 1.2.8 Provide an alternative for prerecorded media (AAA) + </td> + <td> + For all content that features video, a descriptive text transcript + should be provided, for example a script of the movie you are watching. + This is for the benefit of hearing impaired viewers who cannot hear the + content. + </td> + <td> + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + >Audio transcripts</a + > + for transcript information. + </td> + </tr> + <tr> + <td colspan="1">1.2.9 Provide a transcript for live audio (AAA)</td> + <td> + For any live audio content being broadcast, a descriptive text should be + provided, for example a script of the play or musical you are listening + to. This is for the benefit of hearing impaired viewers who cannot hear + the content. + </td> + <td> + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + >Audio transcripts</a + > + for transcript information. + </td> + </tr> + </thead> </table> -<div class="note"> -<p><strong>Note :</strong> Also see the <a href="https://www.w3.org/TR/WCAG21/#time-based-media">WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media</a>.</p> -</div> +> **Note :** Also see the [WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media](https://www.w3.org/TR/WCAG21/#time-based-media). -<h2 id="Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">Guideline 1.3 — Create content that can be presented in different ways</h2> +## Guideline 1.3 — Create content that can be presented in different ways -<p>This guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs.</p> +This guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs. <table class="standard-table"> - <tbody> - <tr> - <th scope="col">Success criteria</th> - <th scope="col">How to conform to the criteria</th> - <th scope="col">Practical resource</th> - </tr> - <tr> - <td colspan="1" rowspan="1">1.3.1 Info and relationships (A)</td> - <td> - <p>Any content structure — or visual relationship made between content — can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are:</p> - - <ul> - <li>Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.</li> - <li>Image alt text — content images should have text available that clearly describes the image's contents, which can be programmatically associated with it (e.g. <code>alt</code> text), or otherwise is easy to associate (e.g. describes it and is sat right next to it). This should means that the full meaning can still be inferred even if you can't see the image.</li> - <li>Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).</li> - </ul> - </td> - <td>The whole of - <p><a href="/fr/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> is packed with information about this, but you should particularly refer to <a href="/fr/docs/Learn/Accessibility/HTML#Good_semantics">Good semantics</a>, <a href="/fr/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>, and <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p> - </td> - </tr> - <tr> - <td colspan="1">1.3.2 Meaningful content sequence (A)</td> - <td>A sensible, logical reading order should be easy to determine for any content, even if it is visually presented in an unusual way. The order should be made obvious by use of correct semantic elements (e.g. headings, paragraphs), with CSS being used to create any unusual layout styles, irrespective of the markup.</td> - <td>Again, refer to <a href="/fr/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a>.</td> - </tr> - <tr> - <td colspan="1">1.3.3 Sensory characteristics (A)</td> - <td> - <p>Instructions for operating controls or understanding content do not rely on a single sense — this may prove inaccessible to people with a disability related to that sense, or a device that does not support that sense. So for example:</p> - - <ul> - <li>"Click the round button to continue" — The button should be clearly labelled so that it is obvious that it is the button you need to press. If there are multiple buttons, make sure there are all clearly labelled to distinguish their function.</li> - <li>"Listen to the audio instructions for guidance" — This is obviously problematic — audio will be inaccessible to those with heading impairments, whereas text can be read, but also spoken by a screenreader if required.</li> - <li>"Swipe from the right hand side of the screen to reveal the menu" — some users might not be able to swipe the screen, either due to disability or because their device does not support touch. An alternative should be provided, such as a keyboard shortcut or button that can be activated by keyboard or other means.</li> - </ul> - - <div class="note"> - <p><strong>Note :</strong> Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.</p> - </div> - </td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.3.4 Orientation (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td>Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.</td> - <td> - <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">Understanding Orientation</a> </p> - </td> - </tr> - <tr> - <td colspan="1">1.3.5 Identify Input Purpose (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td> - <p> </p> - - <p>Follow the list of <a href="https://www.w3.org/TR/WCAG21/#input-purposes">53 input fields</a> to programmatically identify the purpose of a field. </p> - </td> - <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">Understanding Identify Input Purpose</a></td> - </tr> - <tr> - <td colspan="1">1.3.6 Identify Purpose (AAA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td>In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.</td> - <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html">Understanding Identify Purpose</a></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="col">Success criteria</th> + <th scope="col">How to conform to the criteria</th> + <th scope="col">Practical resource</th> + </tr> + <tr> + <td colspan="1" rowspan="1">1.3.1 Info and relationships (A)</td> + <td> + <p> + Any content structure — or visual relationship made between content — + can also be determined programmatically, or be inferred from text + description. The main situations in which this is relevant are: + </p> + <ul> + <li> + Text labels and the form elements they describe are associated + unambiguously using the {{htmlelement("label")}} element, + which can be picked up by screenreaders, etc. + </li> + <li> + Image alt text — content images should have text available that + clearly describes the image's contents, which can be + programmatically associated with it (e.g. <code>alt</code> text), or + otherwise is easy to associate (e.g. describes it and is sat right + next to it). This should means that the full meaning can still be + inferred even if you can't see the image. + </li> + <li> + Lists — if the order of list items is important, and ordered list + should be used ({{htmlelement("ol")}}). + </li> + </ul> + </td> + <td> + The whole of + <p> + <a href="/fr/docs/Learn/Accessibility/HTML" + >HTML: A good basis for accessibility</a + > + is packed with information about this, but you should particularly + refer to + <a href="/fr/docs/Learn/Accessibility/HTML#Good_semantics" + >Good semantics</a + >, + <a href="/fr/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a + >, and + <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives" + >Text alternatives</a + >. + </p> + </td> + </tr> + <tr> + <td colspan="1">1.3.2 Meaningful content sequence (A)</td> + <td> + A sensible, logical reading order should be easy to determine for any + content, even if it is visually presented in an unusual way. The order + should be made obvious by use of correct semantic elements (e.g. + headings, paragraphs), with CSS being used to create any unusual layout + styles, irrespective of the markup. + </td> + <td> + Again, refer to + <a href="/fr/docs/Learn/Accessibility/HTML" + >HTML: A good basis for accessibility</a + >. + </td> + </tr> + <tr> + <td colspan="1">1.3.3 Sensory characteristics (A)</td> + <td> + <p> + Instructions for operating controls or understanding content do not + rely on a single sense — this may prove inaccessible to people with a + disability related to that sense, or a device that does not support + that sense. So for example: + </p> + <ul> + <li> + "Click the round button to continue" — The button should be clearly + labelled so that it is obvious that it is the button you need to + press. If there are multiple buttons, make sure there are all + clearly labelled to distinguish their function. + </li> + <li> + "Listen to the audio instructions for guidance" — This is obviously + problematic — audio will be inaccessible to those with heading + impairments, whereas text can be read, but also spoken by a + screenreader if required. + </li> + <li> + "Swipe from the right hand side of the screen to reveal the menu" — + some users might not be able to swipe the screen, either due to + disability or because their device does not support touch. An + alternative should be provided, such as a keyboard shortcut or + button that can be activated by keyboard or other means. + </li> + </ul> + <div class="note"> + <p> + <strong>Note :</strong> Conveying instructions solely by color is + related, but covered in a different guideline — 1.4.1. + </p> + </div> + </td> + <td> </td> + </tr> + <tr> + <td colspan="1"> + 1.3.4 Orientation (AA) + <em + ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" + >added in 2.1</a + ></em + > + </td> + <td> + Content does not restrict its view and operation to a single display + orientation, such as portrait or landscape, unless a specific display + orientation is essential. + </td> + <td> + <p> + <a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html" + >Understanding Orientation</a + > + </p> + </td> + </tr> + <tr> + <td colspan="1"> + 1.3.5 Identify Input Purpose (AA) <em + ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" + >added in 2.1</a + ></em + > + </td> + <td> + <p> </p> + <p> + Follow the list of + <a href="https://www.w3.org/TR/WCAG21/#input-purposes" + >53 input fields</a + > + to programmatically identify the purpose of a field. + </p> + </td> + <td> + <a + href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html" + >Understanding Identify Input Purpose</a + > + </td> + </tr> + <tr> + <td colspan="1"> + 1.3.6 Identify Purpose (AAA) <em + ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" + >added in 2.1</a + ></em + > + </td> + <td> + In content implemented using markup languages, the purpose of User + Interface Components, icons, and regions can be programmatically + determined. + </td> + <td> + <a + href="https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html" + >Understanding Identify Purpose</a + > + </td> + </tr> + </tbody> </table> -<div class="note"> -<p><strong>Note :</strong> Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#adaptable">Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.</a></p> -</div> +> **Note :** Also see the WCAG description for [Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.](https://www.w3.org/TR/WCAG21/#adaptable) -<h2 id="Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background</h2> +## Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background -<p>This guideline relates to making sure core content is easy to discernable from backgrounds and other decoration. The classic example is color (both color contrast and use of color to convey instructions), but it applies in other situations too.</p> +This guideline relates to making sure core content is easy to discernable from backgrounds and other decoration. The classic example is color (both color contrast and use of color to convey instructions), but it applies in other situations too. <table class="standard-table"> - <thead> - <tr> - <th scope="col">Success criteria</th> - <th scope="col">How to conform to the criteria</th> - <th scope="col">Practical resource</th> - </tr> - <tr> - <td colspan="1" rowspan="1">1.4.1 Use of color (A)</td> - <td> - <p>Color should not be solely relied upon to convey information — for example, in forms you should never mark required fields purely with a color (like red). Instead (or as well as), something like an asterisk with a label of "required" would be more appropriate.</p> - </td> - <td>See <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> and <a href="/fr/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels">Multiple labels</a>.</td> - </tr> - <tr> - <td colspan="1">1.4.2 Audio controls (A)</td> - <td>For any audio that plays for longer than three seconds, accessible controls should be provided to play and pause the audio/video, and mute/adjust volume.</td> - <td>Use native <code><button></code>s to provide accessible keyboard controls, as shown in <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player syling basics</a>.</td> - </tr> - <tr> - <td colspan="1">1.4.3 Minimum contrast (AA)</td> - <td> - <p>The color contrast between background and foreground content should be at a minimum level to ensure legibility:</p> - - <ul> - <li>Text and its background should have a contrast ratio of at least 4.5.1.</li> - <li>Heading (or just larger) text should have a ratio of at least 3.1. Larger text is defined as at least 18pt, or 14pt bold.</li> - </ul> - </td> - <td>See <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td> - </tr> - <tr> - <td colspan="1">1.4.4 Resize text (AA)</td> - <td>The page should be readable and usable when the text size is doubled. This means that designs should be responsive, so that when the text size is increased, the content is still accessible.</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.4.5 Images of text (AA)</td> - <td>Images should NOT be used to present content where text would do the job. For example, if an image is mostly textual, it could be represented using text as well as images.</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.4.6 Enhanced contrast (AAA)</td> - <td> - <p>This follows, and builds on, criterion 1.4.3.</p> - - <ul> - <li>Text and its background should have a contrast ratio of at least 7.1.</li> - <li>Heading (or just larger) text should have a ratio of at least 4.5.1. Larger text is defined as at least 18pt, or 14pt bold.</li> - </ul> - </td> - <td>See <a href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td> - </tr> - <tr> - <td colspan="1">1.4.7 Low or no background audio (AAA)</td> - <td>Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood.</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.4.8 Visual presentation (AAA)</td> - <td> - <p>For text content presentation, the following should be true:</p> - - <ul> - <li>Foreground and background colors should be user-selectable.</li> - <li>Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.</li> - <li>Text should not be fully justified (e.g. <code>text-align: justify;</code>)</li> - <li>line height should be at least 1.5 times the text size within paragraphs (e.g. <code>line-height: 1.5;</code>), and at least 2.25 times the text size between paragraphs (e.g. <code>padding: 2.25rem;</code>)</li> - <li>When the text size is doubled, the content should not need to be scrolled.</li> - </ul> - </td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.4.9 Images of text (No Exception) (AAA)</td> - <td>Text should not be presented as part of an image unless it is purely decoration (i.e. it does not convey any content), or cannot be presented in any other way.</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.4.10 Reflow (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td> - <ul> - <li>No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic) </li> - <li>No vertical scrolling for top-to-bottom languages (like Japanese)</li> - <li>Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).</li> - </ul> - </td> - <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">Understanding Reflow</a></td> - </tr> - <tr> - <td colspan="1">1.4.11 Non-Text Contrast(AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td>Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. </td> - <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Non-Text Contrast</a></td> - </tr> - <tr> - <td colspan="1">1.4.12 Text Spacing (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td> - <p>No loss of content or functionality occurs when the following styles are applied: </p> - - <ul> - <li>Line height (line spacing) to at least 1.5 times the font size;</li> - <li>Spacing following paragraphs to at least 2 times the font size;</li> - <li>Letter spacing (tracking) to at least 0.12 times the font size;</li> - <li>Word spacing to at least 0.16 times the font size.</li> - </ul> - </td> - <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html">Understanding Text Spacing</a></td> - </tr> - <tr> - <td colspan="1">1.4.13 Content on Hover or Focus (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td> - <p>Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:</p> - - <ul> - <li>dismissable (can be closed/removed)</li> - <li>hoverable (the additional content does not disappear when the pointer is over it) </li> - <li>persistent (the additional content does not disappear without user action)</li> - </ul> - </td> - <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">Understanding Content on Hover or Focus</a></td> - </tr> - </thead> + <thead> + <tr> + <th scope="col">Success criteria</th> + <th scope="col">How to conform to the criteria</th> + <th scope="col">Practical resource</th> + </tr> + <tr> + <td colspan="1" rowspan="1">1.4.1 Use of color (A)</td> + <td> + <p> + Color should not be solely relied upon to convey information — for + example, in forms you should never mark required fields purely with a + color (like red). Instead (or as well as), something like an asterisk + with a label of "required" would be more appropriate. + </p> + </td> + <td> + See + <a + href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast" + >Color and color contrast</a + > + and + <a + href="/fr/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels" + >Multiple labels</a + >. + </td> + </tr> + <tr> + <td colspan="1">1.4.2 Audio controls (A)</td> + <td> + For any audio that plays for longer than three seconds, accessible + controls should be provided to play and pause the audio/video, and + mute/adjust volume. + </td> + <td> + Use native <code><button></code>s to provide accessible keyboard + controls, as shown in + <a + href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics" + >Video player syling basics</a + >. + </td> + </tr> + <tr> + <td colspan="1">1.4.3 Minimum contrast (AA)</td> + <td> + <p> + The color contrast between background and foreground content should be + at a minimum level to ensure legibility: + </p> + <ul> + <li> + Text and its background should have a contrast ratio of at least + 4.5.1. + </li> + <li> + Heading (or just larger) text should have a ratio of at least 3.1. + Larger text is defined as at least 18pt, or 14pt bold. + </li> + </ul> + </td> + <td> + See + <a + href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast" + >Color and color contrast</a + >. + </td> + </tr> + <tr> + <td colspan="1">1.4.4 Resize text (AA)</td> + <td> + The page should be readable and usable when the text size is doubled. + This means that designs should be responsive, so that when the text size + is increased, the content is still accessible. + </td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.5 Images of text (AA)</td> + <td> + Images should NOT be used to present content where text would do the + job. For example, if an image is mostly textual, it could be represented + using text as well as images. + </td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.6 Enhanced contrast (AAA)</td> + <td> + <p>This follows, and builds on, criterion 1.4.3.</p> + <ul> + <li> + Text and its background should have a contrast ratio of at least + 7.1. + </li> + <li> + Heading (or just larger) text should have a ratio of at least 4.5.1. + Larger text is defined as at least 18pt, or 14pt bold. + </li> + </ul> + </td> + <td> + See + <a + href="/fr/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast" + >Color and color contrast</a + >. + </td> + </tr> + <tr> + <td colspan="1">1.4.7 Low or no background audio (AAA)</td> + <td> + Prerecorded audio recordings that primarily feature speech should have + minimal background noise, so the content can be easily understood. + </td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.8 Visual presentation (AAA)</td> + <td> + <p>For text content presentation, the following should be true:</p> + <ul> + <li>Foreground and background colors should be user-selectable.</li> + <li> + Text blocks should be no wider than 80 characters (or glyphs), for + maximum readability. + </li> + <li> + Text should not be fully justified (e.g. + <code>text-align: justify;</code>) + </li> + <li> + line height should be at least 1.5 times the text size within + paragraphs (e.g. <code>line-height: 1.5;</code>), and at least 2.25 + times the text size between paragraphs (e.g. + <code>padding: 2.25rem;</code>) + </li> + <li> + When the text size is doubled, the content should not need to be + scrolled. + </li> + </ul> + </td> + <td> </td> + </tr> + <tr> + <td colspan="1">1.4.9 Images of text (No Exception) (AAA)</td> + <td> + Text should not be presented as part of an image unless it is purely + decoration (i.e. it does not convey any content), or cannot be presented + in any other way. + </td> + <td> </td> + </tr> + <tr> + <td colspan="1"> + 1.4.10 Reflow (AA) <em + ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" + >added in 2.1</a + ></em + > + </td> + <td> + <ul> + <li> + No horizontal scrolling for right-to-left languages (like English) + or left-to-right languages (like Arabic) + </li> + <li> + No vertical scrolling for top-to-bottom languages (like Japanese) + </li> + <li> + Except for parts of the content which require two-dimensional layout + for usage or meaning (like a large data table). + </li> + </ul> + </td> + <td> + <a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html" + >Understanding Reflow</a + > + </td> + </tr> + <tr> + <td colspan="1"> + 1.4.11 Non-Text Contrast(AA) <em + ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" + >added in 2.1</a + ></em + > + </td> + <td> + Minimum color contrast ratio of 3 to 1 for user interface components and + graphical objects. + </td> + <td> + <a + href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html" + >Understanding Non-Text Contrast</a + > + </td> + </tr> + <tr> + <td colspan="1"> + 1.4.12 Text Spacing (AA) <em + ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" + >added in 2.1</a + ></em + > + </td> + <td> + <p> + No loss of content or functionality occurs when the following styles + are applied: + </p> + <ul> + <li> + Line height (line spacing) to at least 1.5 times the font size; + </li> + <li> + Spacing following paragraphs to at least 2 times the font size; + </li> + <li> + Letter spacing (tracking) to at least 0.12 times the font size; + </li> + <li>Word spacing to at least 0.16 times the font size.</li> + </ul> + </td> + <td> + <a href="https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html" + >Understanding Text Spacing</a + > + </td> + </tr> + <tr> + <td colspan="1"> + 1.4.13 Content on Hover or Focus (AA) <em + ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" + >added in 2.1</a + ></em + > + </td> + <td> + <p> + Additional content appear and disappear in coordination with hover and + keyboard focus, this success criterion specifies three conditions that + must be met: + </p> + <ul> + <li>dismissable (can be closed/removed)</li> + <li> + hoverable (the additional content does not disappear when the + pointer is over it) + </li> + <li> + persistent (the additional content does not disappear without user + action) + </li> + </ul> + </td> + <td> + <a + href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html" + >Understanding Content on Hover or Focus</a + > + </td> + </tr> + </thead> </table> -<div class="note"> -<p><strong>Note :</strong> Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#distinguishable">Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.</a><a href="https://www.w3.org/TR/WCAG21/#distinguishable">.</a></p> -</div> +> **Note :** Also see the WCAG description for [Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.](https://www.w3.org/TR/WCAG21/#distinguishable)[.](https://www.w3.org/TR/WCAG21/#distinguishable) -<p> </p> -<h2 id="See_Also">See Also</h2> -<ul> - <li><a href="en-US/docs/Web/Accessibility/Understanding_WCAG">WCAG</a> +## See Also - <ol> - <li>Perceivable</li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Understandable">Understandable</a></li> - <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Robust">Robust</a></li> - </ol> - </li> -</ul> +- [WCAG](en-US/docs/Web/Accessibility/Understanding_WCAG) -<p> </p> + 1. Perceivable + 2. [Operable](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable) + 3. [Understandable](/fr/docs/Web/Accessibility/Understanding_WCAG/Understandable) + 4. [Robust](/fr/docs/Web/Accessibility/Understanding_WCAG/Robust) |