From 9c3eb3245b0e937d6c2c61d126277bdd704e4bce Mon Sep 17 00:00:00 2001 From: julieng Date: Thu, 11 Nov 2021 07:54:56 +0100 Subject: move *.html to *.md --- .../index.html | 169 ---------- .../index.md | 169 ++++++++++ .../web/accessibility/aria/aria_guides/index.html | 28 -- .../fr/web/accessibility/aria/aria_guides/index.md | 28 ++ .../aria/aria_live_regions/index.html | 127 -------- .../accessibility/aria/aria_live_regions/index.md | 127 ++++++++ .../accessibility/aria/aria_techniques/index.html | 119 ------- .../accessibility/aria/aria_techniques/index.md | 119 +++++++ .../using_the_alert_role/index.html | 124 ------- .../aria_techniques/using_the_alert_role/index.md | 124 +++++++ .../using_the_alertdialog_role/index.html | 82 ----- .../using_the_alertdialog_role/index.md | 82 +++++ .../index.html | 85 ----- .../using_the_aria-describedby_attribute/index.md | 85 +++++ .../using_the_aria-invalid_attribute/index.html | 118 ------- .../using_the_aria-invalid_attribute/index.md | 118 +++++++ .../using_the_aria-label_attribute/index.html | 71 ---- .../using_the_aria-label_attribute/index.md | 71 ++++ .../using_the_aria-labelledby_attribute/index.html | 148 --------- .../using_the_aria-labelledby_attribute/index.md | 148 +++++++++ .../index.html | 62 ---- .../using_the_aria-orientation_attribute/index.md | 62 ++++ .../using_the_aria-relevant_attribute/index.html | 31 -- .../using_the_aria-relevant_attribute/index.md | 31 ++ .../using_the_aria-required_attribute/index.html | 73 ----- .../using_the_aria-required_attribute/index.md | 73 +++++ .../using_the_aria-valuemax_attribute/index.html | 61 ---- .../using_the_aria-valuemax_attribute/index.md | 61 ++++ .../using_the_aria-valuemin_attribute/index.html | 59 ---- .../using_the_aria-valuemin_attribute/index.md | 59 ++++ .../using_the_aria-valuenow_attribute/index.html | 89 ----- .../using_the_aria-valuenow_attribute/index.md | 89 +++++ .../using_the_aria-valuetext_attribute/index.html | 63 ---- .../using_the_aria-valuetext_attribute/index.md | 63 ++++ .../using_the_article_role/index.html | 55 ---- .../using_the_article_role/index.md | 55 ++++ .../using_the_group_role/index.html | 123 ------- .../aria_techniques/using_the_group_role/index.md | 123 +++++++ .../aria_techniques/using_the_link_role/index.html | 75 ----- .../aria_techniques/using_the_link_role/index.md | 75 +++++ .../aria_techniques/using_the_log_role/index.html | 92 ------ .../aria_techniques/using_the_log_role/index.md | 92 ++++++ .../using_the_presentation_role/index.html | 52 --- .../using_the_presentation_role/index.md | 52 +++ .../using_the_progressbar_role/index.html | 63 ---- .../using_the_progressbar_role/index.md | 63 ++++ .../using_the_slider_role/index.html | 107 ------ .../aria_techniques/using_the_slider_role/index.md | 107 ++++++ .../using_the_status_role/index.html | 50 --- .../aria_techniques/using_the_status_role/index.md | 50 +++ .../web/accessibility/aria/forms/alerts/index.html | 152 --------- .../web/accessibility/aria/forms/alerts/index.md | 152 +++++++++ .../aria/forms/basic_form_hints/index.html | 120 ------- .../aria/forms/basic_form_hints/index.md | 120 +++++++ files/fr/web/accessibility/aria/forms/index.html | 20 -- files/fr/web/accessibility/aria/forms/index.md | 20 ++ .../aria/forms/multipart_labels/index.html | 38 --- .../aria/forms/multipart_labels/index.md | 38 +++ .../aria/how_to_file_aria-related_bugs/index.html | 99 ------ .../aria/how_to_file_aria-related_bugs/index.md | 99 ++++++ files/fr/web/accessibility/aria/index.html | 116 ------- files/fr/web/accessibility/aria/index.md | 116 +++++++ .../aria/roles/banner_role/index.html | 40 --- .../accessibility/aria/roles/banner_role/index.md | 40 +++ .../aria/roles/button_role/index.html | 301 ----------------- .../accessibility/aria/roles/button_role/index.md | 301 +++++++++++++++++ .../aria/roles/checkbox_role/index.html | 52 --- .../aria/roles/checkbox_role/index.md | 52 +++ .../aria/roles/dialog_role/index.html | 149 --------- .../accessibility/aria/roles/dialog_role/index.md | 149 +++++++++ .../aria/roles/listbox_role/index.html | 92 ------ .../accessibility/aria/roles/listbox_role/index.md | 92 ++++++ .../aria/roles/switch_role/index.html | 14 - .../accessibility/aria/roles/switch_role/index.md | 14 + .../aria/roles/textbox_role/index.html | 77 ----- .../accessibility/aria/roles/textbox_role/index.md | 77 +++++ .../aria/web_applications_and_aria_faq/index.html | 306 ------------------ .../aria/web_applications_and_aria_faq/index.md | 306 ++++++++++++++++++ files/fr/web/accessibility/aria/widgets/index.html | 8 - files/fr/web/accessibility/aria/widgets/index.md | 8 + files/fr/web/accessibility/community/index.html | 18 -- files/fr/web/accessibility/community/index.md | 18 ++ files/fr/web/accessibility/index.html | 65 ---- files/fr/web/accessibility/index.md | 65 ++++ .../index.html | 91 ------ .../keyboard-navigable_javascript_widgets/index.md | 91 ++++++ .../mobile_accessibility_checklist/index.html | 101 ------ .../mobile_accessibility_checklist/index.md | 101 ++++++ .../accessibility/understanding_wcag/index.html | 58 ---- .../web/accessibility/understanding_wcag/index.md | 58 ++++ .../perceivable/color_contrast/index.html | 156 --------- .../perceivable/color_contrast/index.md | 156 +++++++++ .../understanding_wcag/perceivable/index.html | 359 --------------------- .../understanding_wcag/perceivable/index.md | 359 +++++++++++++++++++++ 94 files changed, 4558 insertions(+), 4558 deletions(-) delete mode 100644 files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html create mode 100644 files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_guides/index.html create mode 100644 files/fr/web/accessibility/aria/aria_guides/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_live_regions/index.html create mode 100644 files/fr/web/accessibility/aria/aria_live_regions/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md delete mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html create mode 100644 files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md delete mode 100644 files/fr/web/accessibility/aria/forms/alerts/index.html create mode 100644 files/fr/web/accessibility/aria/forms/alerts/index.md delete mode 100644 files/fr/web/accessibility/aria/forms/basic_form_hints/index.html create mode 100644 files/fr/web/accessibility/aria/forms/basic_form_hints/index.md delete mode 100644 files/fr/web/accessibility/aria/forms/index.html create mode 100644 files/fr/web/accessibility/aria/forms/index.md delete mode 100644 files/fr/web/accessibility/aria/forms/multipart_labels/index.html create mode 100644 files/fr/web/accessibility/aria/forms/multipart_labels/index.md delete mode 100644 files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html create mode 100644 files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md delete mode 100644 files/fr/web/accessibility/aria/index.html create mode 100644 files/fr/web/accessibility/aria/index.md delete mode 100644 files/fr/web/accessibility/aria/roles/banner_role/index.html create mode 100644 files/fr/web/accessibility/aria/roles/banner_role/index.md delete mode 100644 files/fr/web/accessibility/aria/roles/button_role/index.html create mode 100644 files/fr/web/accessibility/aria/roles/button_role/index.md delete mode 100644 files/fr/web/accessibility/aria/roles/checkbox_role/index.html create mode 100644 files/fr/web/accessibility/aria/roles/checkbox_role/index.md delete mode 100644 files/fr/web/accessibility/aria/roles/dialog_role/index.html create mode 100644 files/fr/web/accessibility/aria/roles/dialog_role/index.md delete mode 100644 files/fr/web/accessibility/aria/roles/listbox_role/index.html create mode 100644 files/fr/web/accessibility/aria/roles/listbox_role/index.md delete mode 100644 files/fr/web/accessibility/aria/roles/switch_role/index.html create mode 100644 files/fr/web/accessibility/aria/roles/switch_role/index.md delete mode 100644 files/fr/web/accessibility/aria/roles/textbox_role/index.html create mode 100644 files/fr/web/accessibility/aria/roles/textbox_role/index.md delete mode 100644 files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html create mode 100644 files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md delete mode 100644 files/fr/web/accessibility/aria/widgets/index.html create mode 100644 files/fr/web/accessibility/aria/widgets/index.md delete mode 100644 files/fr/web/accessibility/community/index.html create mode 100644 files/fr/web/accessibility/community/index.md delete mode 100644 files/fr/web/accessibility/index.html create mode 100644 files/fr/web/accessibility/index.md delete mode 100644 files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html create mode 100644 files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md delete mode 100644 files/fr/web/accessibility/mobile_accessibility_checklist/index.html create mode 100644 files/fr/web/accessibility/mobile_accessibility_checklist/index.md delete mode 100644 files/fr/web/accessibility/understanding_wcag/index.html create mode 100644 files/fr/web/accessibility/understanding_wcag/index.md delete mode 100644 files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html create mode 100644 files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md delete mode 100644 files/fr/web/accessibility/understanding_wcag/perceivable/index.html create mode 100644 files/fr/web/accessibility/understanding_wcag/perceivable/index.md (limited to 'files/fr') diff --git a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html deleted file mode 100644 index 5c3e8b8a90..0000000000 --- a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Aperçu sur le développement des applications Web et des Widgets accessibles -slug: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets -tags: - - ARIA - - Accessisibilité - - Applications Web - - Guide -translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets -original_slug: >- - Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles ---- -

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

- -
<!-- 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>
- -

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.
- Screenshot of the tabs widget

- -

ARIA

- -

WAI-ARIAI, les spécifications concernant les applications internet "riches" et accessibles sont publiées par l’iniative du W3C sur l’accessibilité, 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.

- -
-

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.

-
- -

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é.

- -

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.

- -

Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà présentes.

- -
<!-- 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>
-  <!-- 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>
-
- -

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.

- -

Les changement représentationnels

- -

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. 

- -

Les Changements d'états

- -

Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple :

- - - -

La liste n’est pas exhaustive. Pour voir la liste complète, consulter les spécifications des états et propriétés ARIA).

- -

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.

- -

Les changements de visibilité

- -

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.

- -

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.

- -
<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"
-         role="tooltip"
-         aria-hidden="true">Your first name is optional</div>
-</div>
-
- -

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.

- -
div.tooltip[aria-hidden="true"] {
-  display: none;
-  }
-
- -

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é.

- -

Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked.

- -
var showTip = function(el) {
-  el.setAttribute('aria-hidden', 'false');
-}
- -

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 Tab, Entrée, Espace et des flèches.

- -

Traditionnellement, la navigation au clavier sur le Web était limitée à la touche Tabulation. Un utilisateur appuie sur Tab pour faire la mise au point de chaque lien, bouton ou formulaire sur la page dans un ordre linéaire, en utilisant Maj+Tab 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 Tab 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 :

- - - -

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 Tab et Maj+Tab. 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 Entrée ou sur Espace pour activer l’onglet suivant. Un tutoriel en profondeur pour créer Widget navigables grâce à des contrôles Javascript comme décrit ici afin de montrer comment avoir ce comportement en JS.

- -

Pour plus de détails à propos de ces conventions de navigation au clavier, un aperçu ici 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 qui inclut la navigation au clavier et les raccourcis pour une variété de widgets.

- -

Voir aussi

- - 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 new file mode 100644 index 0000000000..5c3e8b8a90 --- /dev/null +++ b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md @@ -0,0 +1,169 @@ +--- +title: Aperçu sur le développement des applications Web et des Widgets accessibles +slug: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +tags: + - ARIA + - Accessisibilité + - Applications Web + - Guide +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +original_slug: >- + Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles +--- +

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

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

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.
+ Screenshot of the tabs widget

+ +

ARIA

+ +

WAI-ARIAI, les spécifications concernant les applications internet "riches" et accessibles sont publiées par l’iniative du W3C sur l’accessibilité, 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.

+ +
+

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.

+
+ +

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é.

+ +

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.

+ +

Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà présentes.

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

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.

+ +

Les changement représentationnels

+ +

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. 

+ +

Les Changements d'états

+ +

Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple :

+ + + +

La liste n’est pas exhaustive. Pour voir la liste complète, consulter les spécifications des états et propriétés ARIA).

+ +

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.

+ +

Les changements de visibilité

+ +

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.

+ +

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.

+ +
<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"
+         role="tooltip"
+         aria-hidden="true">Your first name is optional</div>
+</div>
+
+ +

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.

+ +
div.tooltip[aria-hidden="true"] {
+  display: none;
+  }
+
+ +

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é.

+ +

Exemple 2c. JavaScript pour mettre à jour l'attribut aria-checked.

+ +
var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}
+ +

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 Tab, Entrée, Espace et des flèches.

+ +

Traditionnellement, la navigation au clavier sur le Web était limitée à la touche Tabulation. Un utilisateur appuie sur Tab pour faire la mise au point de chaque lien, bouton ou formulaire sur la page dans un ordre linéaire, en utilisant Maj+Tab 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 Tab 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 :

+ + + +

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 Tab et Maj+Tab. 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 Entrée ou sur Espace pour activer l’onglet suivant. Un tutoriel en profondeur pour créer Widget navigables grâce à des contrôles Javascript comme décrit ici afin de montrer comment avoir ce comportement en JS.

+ +

Pour plus de détails à propos de ces conventions de navigation au clavier, un aperçu ici 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 qui inclut la navigation au clavier et les raccourcis pour une variété de widgets.

+ +

Voir aussi

+ + diff --git a/files/fr/web/accessibility/aria/aria_guides/index.html b/files/fr/web/accessibility/aria/aria_guides/index.html deleted file mode 100644 index 6b5aaeb7d9..0000000000 --- a/files/fr/web/accessibility/aria/aria_guides/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Guides ARIA -slug: Web/Accessibility/ARIA/ARIA_Guides -tags: - - ARIA - - Accessibilité -translation_of: Web/Accessibility/ARIA/ARIA_Guides -original_slug: Accessibilité/ARIA/Guides_ARIA ---- -

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

- - diff --git a/files/fr/web/accessibility/aria/aria_guides/index.md b/files/fr/web/accessibility/aria/aria_guides/index.md new file mode 100644 index 0000000000..6b5aaeb7d9 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_guides/index.md @@ -0,0 +1,28 @@ +--- +title: Guides ARIA +slug: Web/Accessibility/ARIA/ARIA_Guides +tags: + - ARIA + - Accessibilité +translation_of: Web/Accessibility/ARIA/ARIA_Guides +original_slug: Accessibilité/ARIA/Guides_ARIA +--- +

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

+ + diff --git a/files/fr/web/accessibility/aria/aria_live_regions/index.html b/files/fr/web/accessibility/aria/aria_live_regions/index.html deleted file mode 100644 index 9c921bac5e..0000000000 --- a/files/fr/web/accessibility/aria/aria_live_regions/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Zones live ARIA -slug: Web/Accessibility/ARIA/ARIA_Live_Regions -tags: - - ARIA - - Accessibilité - - Avancé -translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions -original_slug: Accessibilité/ARIA/Zones_live_ARIA ---- -

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>

- -
<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ôleDescriptionCompatibilité
logChat, erreur, jeux ou autres types de journalisationPour maximiser la compatibilité, ajouter un aria-live="polite" redondant lorsque vous utiliserez ce rôle.
statusUne 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.
alertMessage 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). 
marqueePour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique. 
timerPour 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"(2014). Paul Jadam s'est intéressé plus particulièrement au support des attributs aria-atomic and aria-relevant.

- -
-
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).

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

- - - -

TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true".

diff --git a/files/fr/web/accessibility/aria/aria_live_regions/index.md b/files/fr/web/accessibility/aria/aria_live_regions/index.md new file mode 100644 index 0000000000..9c921bac5e --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_live_regions/index.md @@ -0,0 +1,127 @@ +--- +title: Zones live ARIA +slug: Web/Accessibility/ARIA/ARIA_Live_Regions +tags: + - ARIA + - Accessibilité + - Avancé +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +original_slug: Accessibilité/ARIA/Zones_live_ARIA +--- +

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>

+ +
<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ôleDescriptionCompatibilité
logChat, erreur, jeux ou autres types de journalisationPour maximiser la compatibilité, ajouter un aria-live="polite" redondant lorsque vous utiliserez ce rôle.
statusUne 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.
alertMessage 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). 
marqueePour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique. 
timerPour 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"(2014). Paul Jadam s'est intéressé plus particulièrement au support des attributs aria-atomic and aria-relevant.

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

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

+ + + +

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.html b/files/fr/web/accessibility/aria/aria_techniques/index.html deleted file mode 100644 index 58c2d37553..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Techniques ARIA -slug: Web/Accessibility/ARIA/ARIA_Techniques -tags: - - ARIA - - Accessibilité - - Attributs - - Rôles -translation_of: Web/Accessibility/ARIA/ARIA_Techniques -original_slug: Accessibilité/ARIA/Techniques_ARIA ---- -

Rôles

-

Rôles de composant d’interface

- -

Rôles composés

-

Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôles enfants obligatoires ou facultatifs.

- -

Rôles de structure de document

- -

Rôles de points de repère

- -

États et propriétés

-

Attributs de composants d’interface

- -

Attributs de zones « live »

- -

Attributs de glisser-déposer

- -

Attributs de relation

- diff --git a/files/fr/web/accessibility/aria/aria_techniques/index.md b/files/fr/web/accessibility/aria/aria_techniques/index.md new file mode 100644 index 0000000000..58c2d37553 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/index.md @@ -0,0 +1,119 @@ +--- +title: Techniques ARIA +slug: Web/Accessibility/ARIA/ARIA_Techniques +tags: + - ARIA + - Accessibilité + - Attributs + - Rôles +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +original_slug: Accessibilité/ARIA/Techniques_ARIA +--- +

Rôles

+

Rôles de composant d’interface

+ +

Rôles composés

+

Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôles enfants obligatoires ou facultatifs.

+ +

Rôles de structure de document

+ +

Rôles de points de repère

+ +

États et propriétés

+

Attributs de composants d’interface

+ +

Attributs de zones « live »

+ +

Attributs de glisser-déposer

+ +

Attributs de relation

+ diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html deleted file mode 100644 index 075b85ac58..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Utilisation du rôle alert -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role -tags: - - ARIA - - Accessibilité - - Rôle - - À relire -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert ---- -

Description

- -

Cette technique présente l’utilisation du rôle alert (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

- -

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 :

- - - -

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.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

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 :

- - - -

Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence :

- - - -
-

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.

-
- -

Exemples

- -

Exemple 1 : Ajout du rôle dans le code HTML

- -

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.

- -
<h2 role="alert">Votre formulaire ne peut être soumis à cause de 3 erreurs de validation.</h2>
-
- -

Exemple 2 : Ajout dynamique d'un élément avec le rôle alert

- -

Cet extrait de code crée dynamiquement un élément avec un rôle alert et l’ajoute à la structure du document.

- -
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);
-
- -

Note : le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que jQuery :

- -
$("<p role='alert'>Vous devez accepter nos conditions d’utilisation pour créer un compte.</p>").appendTo(document.body);
-
- -

Exemple 3 : Ajout d'un rôle alert à un élément existant

- -

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 :

- -
<p id="formInstruction">Vous devez cocher au moins trois options</p>
-
- -
// Lorsque l’utilisateur essaye de soumettre le formulaire avec moins de 3 cases cochées :
-document.getElementById("formInstruction").setAttribute("role", "alert");
- -

Exemple 4 : Rendre visible un élément avec le rôle alert

- -

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.

- -

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.

- -
.hidden {
-  display:none;
-  }
-
- -
<p id="expirationWarning" role="alert" class="hidden">Votre session expirera dans 2 minutes</p>
-
- -
// 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 = "";
- -

Notes 

- - - -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- - - -

Autres ressources

- - 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 new file mode 100644 index 0000000000..075b85ac58 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alert_role/index.md @@ -0,0 +1,124 @@ +--- +title: Utilisation du rôle alert +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +tags: + - ARIA + - Accessibilité + - Rôle + - À relire +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert +--- +

Description

+ +

Cette technique présente l’utilisation du rôle alert (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+ +

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 :

+ + + +

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.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

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 :

+ + + +

Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence :

+ + + +
+

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.

+
+ +

Exemples

+ +

Exemple 1 : Ajout du rôle dans le code HTML

+ +

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.

+ +
<h2 role="alert">Votre formulaire ne peut être soumis à cause de 3 erreurs de validation.</h2>
+
+ +

Exemple 2 : Ajout dynamique d'un élément avec le rôle alert

+ +

Cet extrait de code crée dynamiquement un élément avec un rôle alert et l’ajoute à la structure du document.

+ +
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);
+
+ +

Note : le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que jQuery :

+ +
$("<p role='alert'>Vous devez accepter nos conditions d’utilisation pour créer un compte.</p>").appendTo(document.body);
+
+ +

Exemple 3 : Ajout d'un rôle alert à un élément existant

+ +

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 :

+ +
<p id="formInstruction">Vous devez cocher au moins trois options</p>
+
+ +
// Lorsque l’utilisateur essaye de soumettre le formulaire avec moins de 3 cases cochées :
+document.getElementById("formInstruction").setAttribute("role", "alert");
+ +

Exemple 4 : Rendre visible un élément avec le rôle alert

+ +

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.

+ +

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.

+ +
.hidden {
+  display:none;
+  }
+
+ +
<p id="expirationWarning" role="alert" class="hidden">Votre session expirera dans 2 minutes</p>
+
+ +
// 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 = "";
+ +

Notes 

+ + + +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html deleted file mode 100644 index 70f746dff9..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Utilisation du rôle alertdialog -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role -tags: - - ARIA - - Accessibilité - - Développement Web - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog ---- -

Description

- -

Cette technique présente l’utilisation du rôle alertdialog role.

- -

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 s’appliquent également au rôle alertdialog :

- - - -

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.

- -

Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujours être modales.

- -
-

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).

-
- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Lorsque le rôle alertdialog est utilisé, l’agent utilisateur devrait suivre les étapes suivantes :

- - - -

Lorsque la boîte de dialogue de l’alerte apparaît, les lecteurs d’écran devraient annoncer l’alerte.

- -

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.

- -
-

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 : Une boîte de dialogue d’alerte

- -

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.

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

Exemples concrets :

- -

À définir

- -

Notes

- -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- - 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 new file mode 100644 index 0000000000..70f746dff9 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md @@ -0,0 +1,82 @@ +--- +title: Utilisation du rôle alertdialog +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role +tags: + - ARIA + - Accessibilité + - Développement Web + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog +--- +

Description

+ +

Cette technique présente l’utilisation du rôle alertdialog role.

+ +

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 s’appliquent également au rôle alertdialog :

+ + + +

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.

+ +

Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujours être modales.

+ +
+

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).

+
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque le rôle alertdialog est utilisé, l’agent utilisateur devrait suivre les étapes suivantes :

+ + + +

Lorsque la boîte de dialogue de l’alerte apparaît, les lecteurs d’écran devraient annoncer l’alerte.

+ +

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.

+ +
+

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 : Une boîte de dialogue d’alerte

+ +

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.

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

Exemples concrets :

+ +

À définir

+ +

Notes

+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html deleted file mode 100644 index 5a2a646678..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Utiliser l'attribut aria-describedby -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute -tags: - - ARIA - - Accessibility - - Attribute -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby ---- -

L'attribut 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 où un label décrit la nature d'un objet, tandis qu'une description fournit plus d'informations pouvant être utiles à l'utilisateur.

- -

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 ci-dessous fournit plus d'informations sur l'utilisation de cet attribut dans ces cas précis.

- -

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é.

- -

Valeur

- -

La valeur de cet attribut est une liste d'identifiants d'éléments, séparés par des espaces

- -

Effets possibles sur les agents utilisateurs et les technologies d'assistance

- -
-

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 : Descriptions des points de repère (landmarks) d'une application

- -

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.

- -
-<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">
-        …
-    </div>
-</div>
-
- -

Exemple 2 : Un bouton de fermeture

- -

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.

- -
-<button aria-label="Fermer" aria-describedby="descriptionClose"
-    onclick="myDialog.close()">X</button>
-…
-
-<div id="descriptionClose">
-  La fermeture de cette fenêtre entraînera la perte des
-  informations saisies et vous renverra vers la page
-  principale.
-</div>
-
- -

Notes

- - - -

Utilisé par les rôles ARIA

- -

Tous les éléments de balisage de base.

- - - - - -

Compatibilité

- -

À faire : 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

- - 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 new file mode 100644 index 0000000000..5a2a646678 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.md @@ -0,0 +1,85 @@ +--- +title: Utiliser l'attribut aria-describedby +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute +tags: + - ARIA + - Accessibility + - Attribute +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby +--- +

L'attribut 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 où un label décrit la nature d'un objet, tandis qu'une description fournit plus d'informations pouvant être utiles à l'utilisateur.

+ +

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 ci-dessous fournit plus d'informations sur l'utilisation de cet attribut dans ces cas précis.

+ +

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é.

+ +

Valeur

+ +

La valeur de cet attribut est une liste d'identifiants d'éléments, séparés par des espaces

+ +

Effets possibles sur les agents utilisateurs et les technologies d'assistance

+ +
+

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 : Descriptions des points de repère (landmarks) d'une application

+ +

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.

+ +
+<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">
+        …
+    </div>
+</div>
+
+ +

Exemple 2 : Un bouton de fermeture

+ +

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.

+ +
+<button aria-label="Fermer" aria-describedby="descriptionClose"
+    onclick="myDialog.close()">X</button>
+…
+
+<div id="descriptionClose">
+  La fermeture de cette fenêtre entraînera la perte des
+  informations saisies et vous renverra vers la page
+  principale.
+</div>
+
+ +

Notes

+ + + +

Utilisé par les rôles ARIA

+ +

Tous les éléments de balisage de base.

+ + + + + +

Compatibilité

+ +

À faire : 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

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html deleted file mode 100644 index c75af66bb9..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Utiliser l'attribut aria-invalid -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid ---- -

Description

- -

Cette technique présente l’utilisation de l’attribut aria-invalid.

- -

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.

- -

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.

- -

Valeurs

- -

Vocabulaire

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

Toute valeur absente de ce vocabulaire devrait être traitée comme true.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

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.

- -
-

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.

-
- -

Exemples

- -

Exemple 1 : validation d’un formulaire de base

- -

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.

- -
<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');"/>
-
- -

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é).

- -

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

- -
function checkValidity(aID, aSearchTerm, aMsg){
-    var elem = document.getElementById(aID);
-    var invalid = (elem.value.indexOf(aSearchTerm) < 0);
-    if (invalid) {
-      elem.setAttribute("aria-invalid", "true");
-      updateAlert(aMsg);
-    } else {
-      elem.setAttribute("aria-invalid", "false");
-      updateAlert();
-    }
-}
-
- -

L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur :

- -
function updateAlert(msg) {
-    var oldAlert = document.getElementById("alert");
-    if (oldAlert) {
-        document.body.removeChild(oldAlert);
-    }
-
-    if (msg) {
-        var newAlert = document.createElement("div");
-        newAlert.setAttribute("role", "alert");
-        newAlert.setAttribute("id", "alert");
-        var content = document.createTextNode(msg);
-        newAlert.appendChild(content);
-        document.body.appendChild(newAlert);
-    }
-}
-
- -

Remarquez que le rôle ARIA de l’alerte est définit comme étant "alert".

- -

Notes

- - - -

Utilisé dans les rôles ARIA

- -

Tous les éléments de balisage de base.

- -

Techniques ARIA connexes

- - - -

Autres ressources

- - 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 new file mode 100644 index 0000000000..c75af66bb9 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md @@ -0,0 +1,118 @@ +--- +title: Utiliser l'attribut aria-invalid +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-invalid +--- +

Description

+ +

Cette technique présente l’utilisation de l’attribut aria-invalid.

+ +

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.

+ +

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.

+ +

Valeurs

+ +

Vocabulaire

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

Toute valeur absente de ce vocabulaire devrait être traitée comme true.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

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.

+ +
+

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.

+
+ +

Exemples

+ +

Exemple 1 : validation d’un formulaire de base

+ +

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.

+ +
<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');"/>
+
+ +

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é).

+ +

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

+ +
function checkValidity(aID, aSearchTerm, aMsg){
+    var elem = document.getElementById(aID);
+    var invalid = (elem.value.indexOf(aSearchTerm) < 0);
+    if (invalid) {
+      elem.setAttribute("aria-invalid", "true");
+      updateAlert(aMsg);
+    } else {
+      elem.setAttribute("aria-invalid", "false");
+      updateAlert();
+    }
+}
+
+ +

L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur :

+ +
function updateAlert(msg) {
+    var oldAlert = document.getElementById("alert");
+    if (oldAlert) {
+        document.body.removeChild(oldAlert);
+    }
+
+    if (msg) {
+        var newAlert = document.createElement("div");
+        newAlert.setAttribute("role", "alert");
+        newAlert.setAttribute("id", "alert");
+        var content = document.createTextNode(msg);
+        newAlert.appendChild(content);
+        document.body.appendChild(newAlert);
+    }
+}
+
+ +

Remarquez que le rôle ARIA de l’alerte est définit comme étant "alert".

+ +

Notes

+ + + +

Utilisé dans les rôles ARIA

+ +

Tous les éléments de balisage de base.

+ +

Techniques ARIA connexes

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html deleted file mode 100644 index 54c971151f..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Utiliser l'attribut aria-label -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute -tags: - - ARIA - - Accessibilité - - Attribut - - aria-label -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label ---- -

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.

- -

Contexte

- -

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.

- -

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.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -
-

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.

-
- -

Les lecteurs d'écran lisent le contenu textuel de cet attribut.

- -

Usage

- -

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.

- -

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.

- -

Valeur

- -

Une légende sous forme de chaîne de caractère.

- -

Exemples

- -

Un bouton sans contenu textuel explicite

- -

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.

- -
 <button aria-label="Fermer" onclick="myDialog.close()">X</button>
-
- -

Un champ de saisie utilisant contentEditable

- -

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.

- -

Pour aller plus loin

- -

Notes

- -

L’affectation d’API accessibilité la plus courante pour un label est la propriété de nom accessible.

- -

Utilisé par les rôles ARIA

- -

Tous les éléments de balisage de base.

- -

Techniques ARIA connexes

- - - -

Autres ressources

- - 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 new file mode 100644 index 0000000000..54c971151f --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md @@ -0,0 +1,71 @@ +--- +title: Utiliser l'attribut aria-label +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +tags: + - ARIA + - Accessibilité + - Attribut + - aria-label +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label +--- +

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.

+ +

Contexte

+ +

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.

+ +

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.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +
+

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.

+
+ +

Les lecteurs d'écran lisent le contenu textuel de cet attribut.

+ +

Usage

+ +

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.

+ +

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.

+ +

Valeur

+ +

Une légende sous forme de chaîne de caractère.

+ +

Exemples

+ +

Un bouton sans contenu textuel explicite

+ +

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.

+ +
 <button aria-label="Fermer" onclick="myDialog.close()">X</button>
+
+ +

Un champ de saisie utilisant contentEditable

+ +

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.

+ +

Pour aller plus loin

+ +

Notes

+ +

L’affectation d’API accessibilité la plus courante pour un label est la propriété de nom accessible.

+ +

Utilisé par les rôles ARIA

+ +

Tous les éléments de balisage de base.

+ +

Techniques ARIA connexes

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html deleted file mode 100644 index 2602081deb..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: Utiliser l'attribut aria-labelledby -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby ---- -

Description

- -

Cette technique présente l’utilisation de l’attribut aria-labelledby.

- -

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.

- -

aria-labelledby est très similaire à 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.

- -

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.

- -

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.

- -

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é.

- -

Valeurs

- -

Une liste d’ID d’éléments séparés par des espaces

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Lorsque les deux attributs aria-labelledby et aria-label sont utilisés, les agents utilisateurs donnent la priorité à aria-labelledby lors du calcul de la propriété de nom accessible.

- -

Exemples

- -

Exemple 1 : Labels multiples

- -

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 :

- -
<div id="facturation">Facturation</div>
-
-<div>
-  <div id="nom">Nom</div>
-
-  <input type="text" aria-labelledby="nom facturation"/>
-</div>
-
-<div>
-  <div id="adresse">Adresse</div>
-
-  <input type="text" aria-labelledby="adresse facturation"/>
-</div>
-
- -

Exemple 2 : Association de titres et de zones

- -

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.

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

Exemple 3 : Groupes de boutons radio

- -

Dans l’exemple ci-dessous, le conteneur d’un radiogroup est associé avec son label à l’aide de l’attribut aria-labelledby :

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

Exemple 4 : Titre de boite de dialogue

- -

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 :

- -
<div role="dialog" aria-labelledby="titreDialogue">
-  <h2 id="titreDialogue">Choisir un fichier</h2>
-  … Contenus de la boîte de dialogue
-</div>
-
- -

Exemple 5 : Définition intégrée

- -

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:

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

Exemple 6 : Listes de définitions

- -

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 :

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

Exemple 7 : Menus

- -

Dans l’exemple ci-dessous, un menu contextuel est associé avec son label à l’aide de l’attribut aria-labelledby :

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

Notes

- -

L’affectation d’API accessibilité la plus courante pour un label est la propriété de nom accessible.

- -

Utilisé par les rôles ARIA

- -

Tous les éléments de balisage de base.

- -

Techniques ARIA connexes

- - - -

Autres ressources

- - 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 new file mode 100644 index 0000000000..2602081deb --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md @@ -0,0 +1,148 @@ +--- +title: Utiliser l'attribut aria-labelledby +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby +--- +

Description

+ +

Cette technique présente l’utilisation de l’attribut aria-labelledby.

+ +

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.

+ +

aria-labelledby est très similaire à 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.

+ +

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.

+ +

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.

+ +

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é.

+ +

Valeurs

+ +

Une liste d’ID d’éléments séparés par des espaces

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque les deux attributs aria-labelledby et aria-label sont utilisés, les agents utilisateurs donnent la priorité à aria-labelledby lors du calcul de la propriété de nom accessible.

+ +

Exemples

+ +

Exemple 1 : Labels multiples

+ +

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 :

+ +
<div id="facturation">Facturation</div>
+
+<div>
+  <div id="nom">Nom</div>
+
+  <input type="text" aria-labelledby="nom facturation"/>
+</div>
+
+<div>
+  <div id="adresse">Adresse</div>
+
+  <input type="text" aria-labelledby="adresse facturation"/>
+</div>
+
+ +

Exemple 2 : Association de titres et de zones

+ +

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.

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

Exemple 3 : Groupes de boutons radio

+ +

Dans l’exemple ci-dessous, le conteneur d’un radiogroup est associé avec son label à l’aide de l’attribut aria-labelledby :

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

Exemple 4 : Titre de boite de dialogue

+ +

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 :

+ +
<div role="dialog" aria-labelledby="titreDialogue">
+  <h2 id="titreDialogue">Choisir un fichier</h2>
+  … Contenus de la boîte de dialogue
+</div>
+
+ +

Exemple 5 : Définition intégrée

+ +

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:

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

Exemple 6 : Listes de définitions

+ +

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 :

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

Exemple 7 : Menus

+ +

Dans l’exemple ci-dessous, un menu contextuel est associé avec son label à l’aide de l’attribut aria-labelledby :

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

Notes

+ +

L’affectation d’API accessibilité la plus courante pour un label est la propriété de nom accessible.

+ +

Utilisé par les rôles ARIA

+ +

Tous les éléments de balisage de base.

+ +

Techniques ARIA connexes

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html deleted file mode 100644 index e5ef3e789c..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Utiliser l'attribut aria-orientation -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation ---- -

Description

- -

Cette technique présente l’utilisation de l’attribut aria-orientation.

- -

L’attribut aria-orientation est utilisé pour indiquer si un élément est orienté verticalement ou horizontalement.

- -

Valeurs

- -

Vocabulaire

- -
-
vertical
-
L’élément est orienté verticalement.
-
horizontal (défaut)
-
L’élément est orienté horizontalement.
-
- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

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 :

- -

L’extrait de code ci-dessous présente un curseur simple orienté verticalement.

- -
<a href="#" id="handle_zoomSlider"
-  role="slider"
-  aria-orientation="vertical"
-  aria-valuemin="0"
-  aria-valuemax="17"
-  aria-valuenow="14" >
-    <span>11</span>
-</a>
-
- -

Notes

- -

Utilisé avec les rôles ARIA

- - - -

Autres ressources

- - 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 new file mode 100644 index 0000000000..e5ef3e789c --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md @@ -0,0 +1,62 @@ +--- +title: Utiliser l'attribut aria-orientation +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation +--- +

Description

+ +

Cette technique présente l’utilisation de l’attribut aria-orientation.

+ +

L’attribut aria-orientation est utilisé pour indiquer si un élément est orienté verticalement ou horizontalement.

+ +

Valeurs

+ +

Vocabulaire

+ +
+
vertical
+
L’élément est orienté verticalement.
+
horizontal (défaut)
+
L’élément est orienté horizontalement.
+
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

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 :

+ +

L’extrait de code ci-dessous présente un curseur simple orienté verticalement.

+ +
<a href="#" id="handle_zoomSlider"
+  role="slider"
+  aria-orientation="vertical"
+  aria-valuemin="0"
+  aria-valuemax="17"
+  aria-valuenow="14" >
+    <span>11</span>
+</a>
+
+ +

Notes

+ +

Utilisé avec les rôles ARIA

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html deleted file mode 100644 index 8cc57e6365..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Utiliser l'attribut aria-relevant -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute -tags: - - ARIA - - Accessibilité -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-relevant ---- -

L’attribut aria-relevant est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région aria-live, 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é.

- -

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.

- -

Valeurs

- -

Une liste délimitée par des espaces avec une ou plusieurs des valeurs suivantes :

- - - -

aria-relevant="additions text" est la valeur par défaut d’une région live.

- -

Autres ressources

- - 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 new file mode 100644 index 0000000000..8cc57e6365 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md @@ -0,0 +1,31 @@ +--- +title: Utiliser l'attribut aria-relevant +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute +tags: + - ARIA + - Accessibilité +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-relevant +--- +

L’attribut aria-relevant est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région aria-live, 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é.

+ +

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.

+ +

Valeurs

+ +

Une liste délimitée par des espaces avec une ou plusieurs des valeurs suivantes :

+ + + +

aria-relevant="additions text" est la valeur par défaut d’une région live.

+ +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html deleted file mode 100644 index b1e4385b1b..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Utiliser l'attribut aria-required -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required ---- -

Description

- -

Cette technique présente l’utilisation de l’attribut aria-required.

- -

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.

- -

{{ HTMLVersionInline("5") }} a introduit l’attribut required, mais aria-required est toujours utile pour les agents utilisateurs qui ne prennent pas encore en charge HTML5.

- -

Valeurs

- -

true ou false (Valeur par défaut : false)

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Les lecteurs d’écran devraient annoncer le champ comme étant obligatoire.

- -

Remarquez que cet attribut ne changera pas automatiquement la présentation du champ.

- -

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 : un formulaire simple

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

Notes

- -

Utilisé dans les rôles ARIA

- - - -

Techniques ARIA connexes

- - - -

Autres ressources

- - 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 new file mode 100644 index 0000000000..b1e4385b1b --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md @@ -0,0 +1,73 @@ +--- +title: Utiliser l'attribut aria-required +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-required +--- +

Description

+ +

Cette technique présente l’utilisation de l’attribut aria-required.

+ +

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.

+ +

{{ HTMLVersionInline("5") }} a introduit l’attribut required, mais aria-required est toujours utile pour les agents utilisateurs qui ne prennent pas encore en charge HTML5.

+ +

Valeurs

+ +

true ou false (Valeur par défaut : false)

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Les lecteurs d’écran devraient annoncer le champ comme étant obligatoire.

+ +

Remarquez que cet attribut ne changera pas automatiquement la présentation du champ.

+ +

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 : un formulaire simple

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

Notes

+ +

Utilisé dans les rôles ARIA

+ + + +

Techniques ARIA connexes

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html deleted file mode 100644 index 5c9c26b05f..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: Utiliser l'attribut aria-valuemax -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax ---- -

Description

- -

Cette technique présente l’utilisation de l’attribut aria-valuemax.

- -

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 a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemax DOIT être supérieure ou égale à celle de aria-valuemin.

- -

aria-valuemax est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

- -

Valeurs

- -

Représentation d’un nombre par une chaîne

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

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.

- -

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:

- -

L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10.

- -
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
-
- -

Notes

- -

Utilisés avec les rôles ARIA

- - - -

Techniques ARIA connexes

- - - -

Autres ressources

- - 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 new file mode 100644 index 0000000000..5c9c26b05f --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md @@ -0,0 +1,61 @@ +--- +title: Utiliser l'attribut aria-valuemax +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax +--- +

Description

+ +

Cette technique présente l’utilisation de l’attribut aria-valuemax.

+ +

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 a des valeurs minimale et maximale connues, le développeur devrait fournir les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemax DOIT être supérieure ou égale à celle de aria-valuemin.

+ +

aria-valuemax est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

+ +

Valeurs

+ +

Représentation d’un nombre par une chaîne

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

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.

+ +

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:

+ +

L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10.

+ +
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
+
+ +

Notes

+ +

Utilisés avec les rôles ARIA

+ + + +

Techniques ARIA connexes

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html deleted file mode 100644 index 5443a16c0e..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Utiliser l'attribut aria-valuemin -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin ---- -

Description

- -

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 a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemin DOIT être inférieure ou égale à celle de aria-valuemax.

- -

aria-valuemin est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

- -

Valeurs

- -

Représentation d’un nombre sous forme d'une chaîne

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

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.

- -

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 :

- -

L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1.

- -
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
-
- -

Notes

- -

Utilisé avec les rôles ARIA

- - - -

Techniques ARIA connexes

- - - -

Autres ressources

- - 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 new file mode 100644 index 0000000000..5443a16c0e --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md @@ -0,0 +1,59 @@ +--- +title: Utiliser l'attribut aria-valuemin +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin +--- +

Description

+ +

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 a des valeurs limites connues (minimum et maximum), le développeur devrait spécifier les propriétés de aria-valuemax et aria-valuemin. La valeur de aria-valuemin DOIT être inférieure ou égale à celle de aria-valuemax.

+ +

aria-valuemin est un attribut obligatoire des rôles slider, scrollbar et spinbutton.

+ +

Valeurs

+ +

Représentation d’un nombre sous forme d'une chaîne

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

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.

+ +

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 :

+ +

L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1.

+ +
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
+
+ +

Notes

+ +

Utilisé avec les rôles ARIA

+ + + +

Techniques ARIA connexes

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html deleted file mode 100644 index 6d13e9a360..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: Utiliser l'attribut aria-valuenow -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow ---- -

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 et aria-valuemax.

- -

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 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 sera l'une des chaînes : "petite", "moyenne" ou "grande".

- -

L'attribut aria-valuenow est obligatoire pour les rôles slider, scrollbar et spinbutton.

- -

Valeur

- -

Une chaîne de caractères qui représente le nombre.

- -

Effets possibles sur les agents utilisateurs et les technologies d'assistance

- -

Pour les éléments possédant les rôles progressbar et scrollbar, 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 et aria-valuemax si les deux sont définies, sinon la valeur actuelle avec un pourcentage.

- -

Pour les éléments possédant les rôles slider et spinbutton, les technologies d'assistance DEVRAIENT retourner la valeur courante à l'utilisateur.

- -
-

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

- -

L'extrait de code ci-dessous affiche un curseur simple avec une valeur courante de 4.

- -
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
-
- -

Exemples concrets

- - - -

Rôles ARIA concernés

- - - - - - - -

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

- - 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 new file mode 100644 index 0000000000..6d13e9a360 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md @@ -0,0 +1,89 @@ +--- +title: Utiliser l'attribut aria-valuenow +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow +--- +

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 et aria-valuemax.

+ +

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 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 sera l'une des chaînes : "petite", "moyenne" ou "grande".

+ +

L'attribut aria-valuenow est obligatoire pour les rôles slider, scrollbar et spinbutton.

+ +

Valeur

+ +

Une chaîne de caractères qui représente le nombre.

+ +

Effets possibles sur les agents utilisateurs et les technologies d'assistance

+ +

Pour les éléments possédant les rôles progressbar et scrollbar, 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 et aria-valuemax si les deux sont définies, sinon la valeur actuelle avec un pourcentage.

+ +

Pour les éléments possédant les rôles slider et spinbutton, les technologies d'assistance DEVRAIENT retourner la valeur courante à l'utilisateur.

+ +
+

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

+ +

L'extrait de code ci-dessous affiche un curseur simple avec une valeur courante de 4.

+ +
<div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10">
+
+ +

Exemples concrets

+ + + +

Rôles ARIA concernés

+ + + + + + + +

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

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html deleted file mode 100644 index f875cce058..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Utiliser l'attribut aria-valuetext -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute -tags: - - ARIA - - Accessibilité - - Attribut -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext ---- -

Description

- -

L’attribut aria-valuetext est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur aria-valuenow d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif spinbutton ou un curseur slider.

- -

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.

- -

Par exemple, dans le cas d'un curseur qui peut retourner les valeurs petite, moyenneet grand, les valeurs de 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.

- -

Valeurs

- -

Représentation d’un nombre sous forme d'une chaîne

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Si l’attribut aria-valuetext est absent, les technologies d’assistance compteront uniquement sur 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.

- -

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 :

- -

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.

- -
<div role="slider" aria-valuenow="1"
-    aria-valuemin="1" aria-valuemax="7"
-    aria-valuetext="Dimanche">
-
- -

Exemples concrets :

- -

Notes

- -

Utilisé avec les rôles ARIA

- - - -

Techniques ARIA connexes

- - - -

Autres ressources

- - 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 new file mode 100644 index 0000000000..f875cce058 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md @@ -0,0 +1,63 @@ +--- +title: Utiliser l'attribut aria-valuetext +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute +tags: + - ARIA + - Accessibilité + - Attribut +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext +--- +

Description

+ +

L’attribut aria-valuetext est utilisé pour définir un texte alternatif, lisible par l'homme, de la valeur aria-valuenow d’un composant à intervalle tel qu’une barre de progression, un bouton rotatif spinbutton ou un curseur slider.

+ +

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.

+ +

Par exemple, dans le cas d'un curseur qui peut retourner les valeurs petite, moyenneet grand, les valeurs de 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.

+ +

Valeurs

+ +

Représentation d’un nombre sous forme d'une chaîne

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Si l’attribut aria-valuetext est absent, les technologies d’assistance compteront uniquement sur 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.

+ +

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 :

+ +

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.

+ +
<div role="slider" aria-valuenow="1"
+    aria-valuemin="1" aria-valuemax="7"
+    aria-valuetext="Dimanche">
+
+ +

Exemples concrets :

+ +

Notes

+ +

Utilisé avec les rôles ARIA

+ + + +

Techniques ARIA connexes

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html deleted file mode 100644 index 8a9a076f49..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Utiliser le rôle article -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role -tags: - - ARIA - - Accessibilité - - Rôle - - À relire -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article ---- -

Description

- -

Cette technique présente l’utilisation du rôle article (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

- -

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.

- -

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.

- -

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.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

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.

- -

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.

- -
-

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

- -

Utilisation du role article sans élément article :

- -
<div role="article">
-
-  <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>
-
- -

Autres ressources

- -

Spécification WAI-ARIA du rôle article (en)

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 new file mode 100644 index 0000000000..8a9a076f49 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md @@ -0,0 +1,55 @@ +--- +title: Utiliser le rôle article +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role +tags: + - ARIA + - Accessibilité + - Rôle + - À relire +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_article +--- +

Description

+ +

Cette technique présente l’utilisation du rôle article (en) et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+ +

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.

+ +

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.

+ +

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.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

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.

+ +

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.

+ +
+

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

+ +

Utilisation du role article sans élément article :

+ +
<div role="article">
+
+  <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>
+
+ +

Autres ressources

+ +

Spécification WAI-ARIA du rôle article (en)

diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html deleted file mode 100644 index a69035dfb1..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: Utiliser le rôle group -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group ---- -

Description

- -

Cette technique présente l’utilisation du rôle group et décrit les effets produits sur les navigateurs et les technologies d’assistance.

- -

Le rôle group est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une 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.

- -

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. Les éléments de groupe devraient être imbriqués.

- -

La gestion correcte d’un groupe par les technologies d’assistance est déterminée par le contexte dans lequel il est fourni.

- -

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 ou un rôle standard de point de repère à cette section.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

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 :

- - - -

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

- - - -

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 : Utiliser le rôle group avec une arborescence HTML

- -

L’extrait de code ci-dessous montre comment le rôle group est ajouté directement dans le code source 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="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>
- -

Exemple 2 : Utiliser le rôle group avec un menu déroulant HTML

- -

L’extrait de code ci-dessous montre comment le rôle group est ajouté directement au code source 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>
- -

Exemples concrets :

- - - -

Notes

- - - -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- - - -

Autres ressources

- - 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 new file mode 100644 index 0000000000..a69035dfb1 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md @@ -0,0 +1,123 @@ +--- +title: Utiliser le rôle group +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group +--- +

Description

+ +

Cette technique présente l’utilisation du rôle group et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+ +

Le rôle group est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une 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.

+ +

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. Les éléments de groupe devraient être imbriqués.

+ +

La gestion correcte d’un groupe par les technologies d’assistance est déterminée par le contexte dans lequel il est fourni.

+ +

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 ou un rôle standard de point de repère à cette section.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

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 :

+ + + +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ + + +

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 : Utiliser le rôle group avec une arborescence HTML

+ +

L’extrait de code ci-dessous montre comment le rôle group est ajouté directement dans le code source 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="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>
+ +

Exemple 2 : Utiliser le rôle group avec un menu déroulant HTML

+ +

L’extrait de code ci-dessous montre comment le rôle group est ajouté directement au code source 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>
+ +

Exemples concrets :

+ + + +

Notes

+ + + +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html deleted file mode 100644 index 6decbf1edb..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Utiliser le rôle link -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link ---- -

Description

- -

Cette technique présente l’utilisation du rôle 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 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 :

- -

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

- -
-

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. 

-
<div role=”link”>Un lien</div>
-
-

Exemple 2 : Lien accessible créé depuis une application à l'aide d'un <span>

-
<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) {
-    if (evt.type=="click" ||
-        evt.keyCode == sap.ui.keycodes.SPACE ||
-        evt.keyCode == sap.ui.keycodes.ENTER) {
-        var ref = evt.target != null ? evt.target : evt.srcElement;
-        if (ref) window.open(ref.getAttribute("href"),"_blank");
-    }
-}
-</script>
-
-<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">
-      Activez ce lien en appuyant sur la barre d’espace ou la touche Entrée
-    </span>
-</body>
-

Exemples concrets :

- -

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 au lieu du rôle link.

-

Attributs ARIA utilisés

- -

Techniques ARIA connexes

- - -

Autres ressources

- 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 new file mode 100644 index 0000000000..6decbf1edb --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md @@ -0,0 +1,75 @@ +--- +title: Utiliser le rôle link +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_link +--- +

Description

+ +

Cette technique présente l’utilisation du rôle 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 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 :

+ +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ +
+

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. 

+
<div role=”link”>Un lien</div>
+
+

Exemple 2 : Lien accessible créé depuis une application à l'aide d'un <span>

+
<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) {
+    if (evt.type=="click" ||
+        evt.keyCode == sap.ui.keycodes.SPACE ||
+        evt.keyCode == sap.ui.keycodes.ENTER) {
+        var ref = evt.target != null ? evt.target : evt.srcElement;
+        if (ref) window.open(ref.getAttribute("href"),"_blank");
+    }
+}
+</script>
+
+<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">
+      Activez ce lien en appuyant sur la barre d’espace ou la touche Entrée
+    </span>
+</body>
+

Exemples concrets :

+ +

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 au lieu du rôle link.

+

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+ + +

Autres ressources

+ diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html deleted file mode 100644 index 34d8e47e12..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Utiliser le rôle log -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log ---- -

Description

- -

Cette technique présente l’utilisation du rôle log et décrit les effets produits sur les navigateurs et les technologies d’assistance.

- -

Le rôle log est utilisé pour identifier un élément qui crée une zone live 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.

- -

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.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

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 :

- - - -

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

- - - -

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 dans du code HTML

- -

L’extrait de code ci-dessous montre comment le rôle log est ajouté directement dans le code source HTML.

- -
<div id=”liveregion” class=”region” role=”log”></div>
-
- -

Exemple 2 : Extrait d’un exemple d’application

- -

Cet extrait de code crée le journal dans une application de chat AJAX.

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

Voir l’exemple sur CodeTalks pour plus d’informations.

- -

Exemples concrets :

- - - -

Notes

- - - -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- - - -

Autres ressources

- - 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 new file mode 100644 index 0000000000..34d8e47e12 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md @@ -0,0 +1,92 @@ +--- +title: Utiliser le rôle log +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_log +--- +

Description

+ +

Cette technique présente l’utilisation du rôle log et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+ +

Le rôle log est utilisé pour identifier un élément qui crée une zone live 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.

+ +

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.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

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 :

+ + + +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ + + +

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 dans du code HTML

+ +

L’extrait de code ci-dessous montre comment le rôle log est ajouté directement dans le code source HTML.

+ +
<div id=”liveregion” class=”region” role=”log”></div>
+
+ +

Exemple 2 : Extrait d’un exemple d’application

+ +

Cet extrait de code crée le journal dans une application de chat AJAX.

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

Voir l’exemple sur CodeTalks pour plus d’informations.

+ +

Exemples concrets :

+ + + +

Notes

+ + + +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html deleted file mode 100644 index 25bf9addfd..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Utiliser le rôle presentation -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation ---- -

Cette page présente l'usage du rôle presentation et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.

- -

Description

- -

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.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle presentation.

- -

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: Les icônes-fontes

- -

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.

- -
<i class="icon-user" role="presentation"></i>
-
- -

Exemples concrets :

- -

Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire.

- -
<button type="button" aria-haspopup="true">
-    Technologies
-    <span class="main-menu-arrow" role="presentation">▼</span>
-</button>
-
- -

Exemple 2 : Inline SVG

- -

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.

- -
<svg role="presentation">
-…
-</svg>
- -

Autres ressources

- -

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_presentation_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md new file mode 100644 index 0000000000..25bf9addfd --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md @@ -0,0 +1,52 @@ +--- +title: Utiliser le rôle presentation +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_presentation +--- +

Cette page présente l'usage du rôle presentation et décrit l'effet qu'il a sur les navigateurs et les technologies d'assistance.

+ +

Description

+ +

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.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Les agents utilisateurs ou les technologies d'assistance ne devrait normalement pas lire les éléments marqués comme étant de rôle presentation.

+ +

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: Les icônes-fontes

+ +

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.

+ +
<i class="icon-user" role="presentation"></i>
+
+ +

Exemples concrets :

+ +

Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire.

+ +
<button type="button" aria-haspopup="true">
+    Technologies
+    <span class="main-menu-arrow" role="presentation">▼</span>
+</button>
+
+ +

Exemple 2 : Inline SVG

+ +

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.

+ +
<svg role="presentation">
+…
+</svg>
+ +

Autres ressources

+ +

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.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html deleted file mode 100644 index 6a12160b24..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Utiliser le rôle progressbar -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar ---- -

Description

- -

Cette technique présente l’utilisation du rôle progressbar.

- -

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.

- -

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, aria-valuemin et aria-valuemax. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut aria-valuenow.

- -

Lorsqu’une tâche progresse, la valeur aria-valuenow doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d’assistance.

- -

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 pour pointer vers l’état courant, et définir l’attribut 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.

- -
-

Note : généralement les technologies d’assistance retourneront la valeur de l’attribut aria-valuenow sous la forme d’un pourcentage d’une plage de valeurs comprise entre aria-valuemin et aria-valuemax, sauf si 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.

- -
-

Note : les éléments possédant le rôle progressbar ont une valeur aria-readonly implicite définie à true.

-
- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

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é.

- -

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 : barre de progression simple avec pourcentage de progression

- -
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>
-
- -

Exemple 2 : Utilisation de aria-valuetext

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

Exemples concrets :

- -

Notes

- -

Attributs ARIA utilisés

- - \ No newline at end of file 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 new file mode 100644 index 0000000000..6a12160b24 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md @@ -0,0 +1,63 @@ +--- +title: Utiliser le rôle progressbar +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_progressbar +--- +

Description

+ +

Cette technique présente l’utilisation du rôle progressbar.

+ +

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.

+ +

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, aria-valuemin et aria-valuemax. Si la valeur de progression est indéterminée, le développeur peut omettre l’attribut aria-valuenow.

+ +

Lorsqu’une tâche progresse, la valeur aria-valuenow doit être dynamiquement actualisée pour indiquer la progression aux produits de technologies d’assistance.

+ +

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 pour pointer vers l’état courant, et définir l’attribut 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.

+ +
+

Note : généralement les technologies d’assistance retourneront la valeur de l’attribut aria-valuenow sous la forme d’un pourcentage d’une plage de valeurs comprise entre aria-valuemin et aria-valuemax, sauf si 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.

+ +
+

Note : les éléments possédant le rôle progressbar ont une valeur aria-readonly implicite définie à true.

+
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

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é.

+ +

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 : barre de progression simple avec pourcentage de progression

+ +
<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div>
+
+ +

Exemple 2 : Utilisation de aria-valuetext

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

Exemples concrets :

+ +

Notes

+ +

Attributs ARIA utilisés

+ + \ No newline at end of file diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html deleted file mode 100644 index 16da9c8804..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: Utiliser le rôle slider -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider ---- -

Description

- -

Cette technique présente l’utilisation du rôle slider.

- -

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.

- -

Clavier et focus

- -

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

- - - - - - - - - - - - - - - - - - - - - - -
Touche(s)Action
Flèches haut et droiteAugmente la valeur sélectionnée
Flèches bas et gaucheBaisse la valeur sélectionnée
Page haut et Page basAugmente ou baisse facultativement la valeur selon un pas prédéfini (par exemple de 10 en 10 dans un intervalle de 0 à 100)
- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

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 : Intervalle numérique simple

- -

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.

- -
<div id="slider-label">Volume</div>
-
-<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>
-
- -

Exemple 2 : Valeurs texte

- -

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 .

- -
<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"
-    aria-valuemin="1"
-    aria-valuemax="7"
-    aria-valuenow="2"
-    aria-valuetext="Lundi">
-  </a>
-</div>
-
- -

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 :

- -
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]);
-};
-
- -

Notes

- -

Attributs ARIA utilisés

- - - -

Autres ressources

- - 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 new file mode 100644 index 0000000000..16da9c8804 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md @@ -0,0 +1,107 @@ +--- +title: Utiliser le rôle slider +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider +--- +

Description

+ +

Cette technique présente l’utilisation du rôle slider.

+ +

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.

+ +

Clavier et focus

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + +
Touche(s)Action
Flèches haut et droiteAugmente la valeur sélectionnée
Flèches bas et gaucheBaisse la valeur sélectionnée
Page haut et Page basAugmente ou baisse facultativement la valeur selon un pas prédéfini (par exemple de 10 en 10 dans un intervalle de 0 à 100)
+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

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 : Intervalle numérique simple

+ +

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.

+ +
<div id="slider-label">Volume</div>
+
+<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>
+
+ +

Exemple 2 : Valeurs texte

+ +

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 .

+ +
<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"
+    aria-valuemin="1"
+    aria-valuemax="7"
+    aria-valuenow="2"
+    aria-valuetext="Lundi">
+  </a>
+</div>
+
+ +

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 :

+ +
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]);
+};
+
+ +

Notes

+ +

Attributs ARIA utilisés

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html deleted file mode 100644 index 38827d4db1..0000000000 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.html +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Utiliser le rôle status -slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status ---- -

Description

- -

Cette technique présente l’utilisation du rôle 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 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. 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.

-

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 :

- -

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

- -
-

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.

-
<p role="status">Vos modifications ont été automatiquement enregistrées.</p>
-
-

Exemples concrets :

-

Notes

-

Attributs ARIA utilisés

- -

Techniques ARIA connexes

- -

Autres ressources

- 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 new file mode 100644 index 0000000000..38827d4db1 --- /dev/null +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md @@ -0,0 +1,50 @@ +--- +title: Utiliser le rôle status +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_status +--- +

Description

+ +

Cette technique présente l’utilisation du rôle 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 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. 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.

+

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 :

+ +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ +
+

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.

+
<p role="status">Vos modifications ont été automatiquement enregistrées.</p>
+
+

Exemples concrets :

+

Notes

+

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+ +

Autres ressources

+ diff --git a/files/fr/web/accessibility/aria/forms/alerts/index.html b/files/fr/web/accessibility/aria/forms/alerts/index.html deleted file mode 100644 index 588633fad9..0000000000 --- a/files/fr/web/accessibility/aria/forms/alerts/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: Alertes -slug: Web/Accessibility/ARIA/forms/alerts -tags: - - ARIA - - Accessibilité - - Développement Web - - Formulaire -translation_of: Web/Accessibility/ARIA/forms/alerts -original_slug: Accessibilité/ARIA/formulaires/Alertes ---- -

Le problème

- -

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.

- -

Le formulaire

- -

Tout d’abord, veuillez lire la technique aria-required pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.

- -

Voici un formulaire simple :

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

Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-)

- -

Vérification de la validité et avertissement de l’utilisateur

- -

Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes :

- -
    -
  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. -
  2. Définissons l’attribut aria-invalid du champ et donnons lui la valeur true.
    3. -
  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.
    4. -
- -

Tout ceci se passe lorsque le champ de saisi perd le focus, c’est-à-dire dans le gestionnaire d’événements onblur.

- -

La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} :

- -
<script type="application/javascript">
-function removeOldAlert()
-{
-    var oldAlert = document.getElementById("alert");
-    if (oldAlert)
-        document.body.removeChild(oldAlert);
-}
-<br/>
-function addAlert(aMsg)
-{
-    removeOldAlert();
-    var newAlert = document.createElement("div");
-    newAlert.setAttribute("role", "alert");
-    newAlert.setAttribute("id", "alert");
-    var msg = document.createTextNode(aMsg);
-    newAlert.appendChild(msg);
-    document.body.appendChild(newAlert);
-}
-<br/>
-function checkValidity(aID, aSearchTerm, aMsg)
-{
-    var elem = document.getElementById(aID);
-    var invalid = (elem.value.indexOf(aSearchTerm) < 0);
-    if (invalid) {
-        elem.setAttribute("aria-invalid", "true");
-        addAlert(aMsg);
-    } else {
-        elem.setAttribute("aria-invalid", "false");
-        removeOldAlert();
-    }
-}
-</script>
-
- -

La fonction checkValidity

- -

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.

- -

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.

- -

Si non valide, la fonction fait deux choses :

- -
    -
  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. -
  2. Elle appellera la fonction addAlert pour ajouter une alerte avec le message d’erreur donné.
    3. -
- -

Si le terme recherché est trouvé, l’attribut aria-invalid est réinitialisé à true. De plus, toute alerte qui subsisterait serait supprimée.

- -

La fonction addAlert

- -

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).

- -

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 qui a été tout simplement porté sur HTML pour plus de simplicité.

- -

Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document.

- -

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é.

- -

Ajouter de la magie à l’événement onblur

- -

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 :

- -
<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;!');"/>
-
- -

Test de l’exemple

- -

Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit :

- -
    -
  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. -
  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.
    3. -
- -

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.

- -

Quelques questions qu’on peut se poser

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

Conclusion

- -

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/alerts/index.md b/files/fr/web/accessibility/aria/forms/alerts/index.md new file mode 100644 index 0000000000..588633fad9 --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/alerts/index.md @@ -0,0 +1,152 @@ +--- +title: Alertes +slug: Web/Accessibility/ARIA/forms/alerts +tags: + - ARIA + - Accessibilité + - Développement Web + - Formulaire +translation_of: Web/Accessibility/ARIA/forms/alerts +original_slug: Accessibilité/ARIA/formulaires/Alertes +--- +

Le problème

+ +

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.

+ +

Le formulaire

+ +

Tout d’abord, veuillez lire la technique aria-required pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement.

+ +

Voici un formulaire simple :

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

Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-)

+ +

Vérification de la validité et avertissement de l’utilisateur

+ +

Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes :

+ +
    +
  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. +
  2. Définissons l’attribut aria-invalid du champ et donnons lui la valeur true.
    3. +
  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.
    4. +
+ +

Tout ceci se passe lorsque le champ de saisi perd le focus, c’est-à-dire dans le gestionnaire d’événements onblur.

+ +

La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} :

+ +
<script type="application/javascript">
+function removeOldAlert()
+{
+    var oldAlert = document.getElementById("alert");
+    if (oldAlert)
+        document.body.removeChild(oldAlert);
+}
+<br/>
+function addAlert(aMsg)
+{
+    removeOldAlert();
+    var newAlert = document.createElement("div");
+    newAlert.setAttribute("role", "alert");
+    newAlert.setAttribute("id", "alert");
+    var msg = document.createTextNode(aMsg);
+    newAlert.appendChild(msg);
+    document.body.appendChild(newAlert);
+}
+<br/>
+function checkValidity(aID, aSearchTerm, aMsg)
+{
+    var elem = document.getElementById(aID);
+    var invalid = (elem.value.indexOf(aSearchTerm) < 0);
+    if (invalid) {
+        elem.setAttribute("aria-invalid", "true");
+        addAlert(aMsg);
+    } else {
+        elem.setAttribute("aria-invalid", "false");
+        removeOldAlert();
+    }
+}
+</script>
+
+ +

La fonction checkValidity

+ +

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.

+ +

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.

+ +

Si non valide, la fonction fait deux choses :

+ +
    +
  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. +
  2. Elle appellera la fonction addAlert pour ajouter une alerte avec le message d’erreur donné.
    3. +
+ +

Si le terme recherché est trouvé, l’attribut aria-invalid est réinitialisé à true. De plus, toute alerte qui subsisterait serait supprimée.

+ +

La fonction addAlert

+ +

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).

+ +

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 qui a été tout simplement porté sur HTML pour plus de simplicité.

+ +

Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document.

+ +

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é.

+ +

Ajouter de la magie à l’événement onblur

+ +

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 :

+ +
<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;!');"/>
+
+ +

Test de l’exemple

+ +

Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit :

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

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.

+ +

Quelques questions qu’on peut se poser

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

Conclusion

+ +

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.html b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html deleted file mode 100644 index bee7b3fe5e..0000000000 --- a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Indications élémentaires pour les formulaires -slug: Web/Accessibility/ARIA/forms/Basic_form_hints -tags: - - ARIA - - Accessibilité - - Formulaire -translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints -original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les_formulaires ---- -

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

- -
<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, la spécification Accessible Rich Internet Applications (Applications Internet Riches Accessibles) de la Web Accessibility Initiative (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut 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

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

Décrire avec ARIA

- -

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 pour associer directement une description à un contrôle donné.

- -

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") }}.

- -

Exemple 3. Un bouton décrit par un élément séparé.

- -
<button aria-describedby="descriptionRevert">Annuler</button>
-<div id="descriptionRevert">L’annulation supprimera toutes les modifications
-                    intervenues depuis le dernier enregistrement.</div>
- -

(Notez que l’attribut aria-describedby est utilisé de différentes façons, en plus des contrôles de formulaires.)

- -

Champs obligatoires et invalides

- -

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 :

- - - -

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).

- -

Exemple 4a. Un formulaire avec des champs obligatoires.

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

Exemple 4b. Portion d’un script qui valide une entrée de formulaire.

- -
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
-};
- -

Fournir des messages d’erreur utiles

- -

Découvrez comment utiliser les alertes ARIA pour améliorer les formulaires.

- -

Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document WAI-ARIA Authoring Practices.

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 new file mode 100644 index 0000000000..bee7b3fe5e --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md @@ -0,0 +1,120 @@ +--- +title: Indications élémentaires pour les formulaires +slug: Web/Accessibility/ARIA/forms/Basic_form_hints +tags: + - ARIA + - Accessibilité + - Formulaire +translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints +original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les_formulaires +--- +

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

+ +
<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, la spécification Accessible Rich Internet Applications (Applications Internet Riches Accessibles) de la Web Accessibility Initiative (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut 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

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

Décrire avec ARIA

+ +

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 pour associer directement une description à un contrôle donné.

+ +

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") }}.

+ +

Exemple 3. Un bouton décrit par un élément séparé.

+ +
<button aria-describedby="descriptionRevert">Annuler</button>
+<div id="descriptionRevert">L’annulation supprimera toutes les modifications
+                    intervenues depuis le dernier enregistrement.</div>
+ +

(Notez que l’attribut aria-describedby est utilisé de différentes façons, en plus des contrôles de formulaires.)

+ +

Champs obligatoires et invalides

+ +

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 :

+ + + +

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).

+ +

Exemple 4a. Un formulaire avec des champs obligatoires.

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

Exemple 4b. Portion d’un script qui valide une entrée de formulaire.

+ +
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
+};
+ +

Fournir des messages d’erreur utiles

+ +

Découvrez comment utiliser les alertes ARIA pour améliorer les formulaires.

+ +

Pour plus de conseils sur l’utilisation d’ARIA et l’accessibilité des formulaires, consultez le document WAI-ARIA Authoring Practices.

diff --git a/files/fr/web/accessibility/aria/forms/index.html b/files/fr/web/accessibility/aria/forms/index.html deleted file mode 100644 index 8759c01cbe..0000000000 --- a/files/fr/web/accessibility/aria/forms/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Formulaires -slug: Web/Accessibility/ARIA/forms -tags: - - ARIA - - Accessibilité - - Développement Web - - Formulaire -translation_of: Web/Accessibility/ARIA/forms -original_slug: Accessibilité/ARIA/formulaires ---- -

Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web :

- - - -

Voir également l’article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais) (version archivée par archive.org), couvrant pour une bonne part le même sujet.

diff --git a/files/fr/web/accessibility/aria/forms/index.md b/files/fr/web/accessibility/aria/forms/index.md new file mode 100644 index 0000000000..8759c01cbe --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/index.md @@ -0,0 +1,20 @@ +--- +title: Formulaires +slug: Web/Accessibility/ARIA/forms +tags: + - ARIA + - Accessibilité + - Développement Web + - Formulaire +translation_of: Web/Accessibility/ARIA/forms +original_slug: Accessibilité/ARIA/formulaires +--- +

Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web :

+ + + +

Voir également l’article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais) (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.html b/files/fr/web/accessibility/aria/forms/multipart_labels/index.html deleted file mode 100644 index 5cb8dfa611..0000000000 --- a/files/fr/web/accessibility/aria/forms/multipart_labels/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Labels multi-options -slug: Web/Accessibility/ARIA/forms/Multipart_labels -tags: - - ARAI - - Accessibilité - - Développement Web - - Formulaire -translation_of: Web/Accessibility/ARIA/forms/Multipart_labels -original_slug: Accessibilité/ARIA/formulaires/Labels_multi-options ---- -

Utiliser ARIA avec des labels comportant des champs

- -

Problème

- -

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.

- -

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.

- -

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.

- -

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.

- -

Exemple :

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

Pour les utilisateurs de JAWS 8

- -

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.

- -

Peut-on faire la même chose sans ARIA ?

- -

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, 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/forms/multipart_labels/index.md b/files/fr/web/accessibility/aria/forms/multipart_labels/index.md new file mode 100644 index 0000000000..5cb8dfa611 --- /dev/null +++ b/files/fr/web/accessibility/aria/forms/multipart_labels/index.md @@ -0,0 +1,38 @@ +--- +title: Labels multi-options +slug: Web/Accessibility/ARIA/forms/Multipart_labels +tags: + - ARAI + - Accessibilité + - Développement Web + - Formulaire +translation_of: Web/Accessibility/ARIA/forms/Multipart_labels +original_slug: Accessibilité/ARIA/formulaires/Labels_multi-options +--- +

Utiliser ARIA avec des labels comportant des champs

+ +

Problème

+ +

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.

+ +

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.

+ +

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.

+ +

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.

+ +

Exemple :

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

Pour les utilisateurs de JAWS 8

+ +

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.

+ +

Peut-on faire la même chose sans ARIA ?

+ +

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, 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.html b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html deleted file mode 100644 index e06f116df6..0000000000 --- a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Comment déposer un bug lié à ARIA -slug: Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs -tags: - - ARIA - - Bugzilla -translation_of: Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs -original_slug: Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA ---- -

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 :

- -
-

Note : Quand vous trouvez un bug, veuillez en aviser les tables de compatibilité liées dans la page des exemples.

-
- -

A faire : ajouter la bon lien d'accessibilité à la table

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
GenreProgrammeOù déposerNotes
Lecteurs d'écran -

Freedom Scientific JAWS

- 		formulaire de support technique JAWS
GW Micro Window Eyescommentaires, questions et retours Window-Eyes (email) 
Non Visual Desktop Access (NVDA)Déposer un bug NVDA (github)Discuter des problèmes NVDA
OrcaDéposer un bug Orca 
NavigateursApple SafariDéposer un bug WebKit.org 
Google ChromeDéposer un bug Chromium 
-

Microsoft Internet Explorer

- 		Déposer un bug IEVoir les bugs ARIA Firefox existants
Mozilla Firefox -

Déposer un bug Firefox

- 		-

Utiliser le composant : Disability Access APIs

-
OperaDéposer un bug OperaMarquer [ARIA] dans le sommaire
Librairies JSDojo ToolkitDéposer un bug DojoMarquer [Accessibilité] dans le champ composant
Google Web Toolkit (GWT)Déposer un bug GWT 
Yahoo User InterfaceDéposer un bug YUIDéposer contre le composant associé dans la combobox catégorie et inclure [ARIA] dans le sommaire
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 new file mode 100644 index 0000000000..e06f116df6 --- /dev/null +++ b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md @@ -0,0 +1,99 @@ +--- +title: Comment déposer un bug lié à ARIA +slug: Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs +tags: + - ARIA + - Bugzilla +translation_of: Web/Accessibility/ARIA/How_to_file_ARIA-related_bugs +original_slug: Accessibilité/ARIA/Comment_deposer_un_bug_lie_a_ARIA +--- +

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 :

+ +
+

Note : Quand vous trouvez un bug, veuillez en aviser les tables de compatibilité liées dans la page des exemples.

+
+ +

A faire : ajouter la bon lien d'accessibilité à la table

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
GenreProgrammeOù déposerNotes
Lecteurs d'écran +

Freedom Scientific JAWS

+ 		formulaire de support technique JAWS
GW Micro Window Eyescommentaires, questions et retours Window-Eyes (email) 
Non Visual Desktop Access (NVDA)Déposer un bug NVDA (github)Discuter des problèmes NVDA
OrcaDéposer un bug Orca 
NavigateursApple SafariDéposer un bug WebKit.org 
Google ChromeDéposer un bug Chromium 
+

Microsoft Internet Explorer

+ 		Déposer un bug IEVoir les bugs ARIA Firefox existants
Mozilla Firefox +

Déposer un bug Firefox

+ 		+

Utiliser le composant : Disability Access APIs

+
OperaDéposer un bug OperaMarquer [ARIA] dans le sommaire
Librairies JSDojo ToolkitDéposer un bug DojoMarquer [Accessibilité] dans le champ composant
Google Web Toolkit (GWT)Déposer un bug GWT 
Yahoo User InterfaceDéposer un bug YUIDéposer contre le composant associé dans la combobox catégorie et inclure [ARIA] dans le sommaire
diff --git a/files/fr/web/accessibility/aria/index.html b/files/fr/web/accessibility/aria/index.html deleted file mode 100644 index c54e182fce..0000000000 --- a/files/fr/web/accessibility/aria/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: ARIA -slug: Web/Accessibility/ARIA -tags: - - ARIA - - Accessibilité - - Applications - - Web -translation_of: Web/Accessibility/ARIA -original_slug: Accessibilité/ARIA ---- -

Accessible Rich Internet Applications (ARIA) (qu'on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble un attribut qui définit comment rendre le contenu et les applications web accessibles.

- -

ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance quand les fonctionnalités standard ne le permettent pas. Ainsi, ARIA permet de rendre accessible les widgets JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.

- -
-

Attention : La plupart de ces widgets ont été intégrés au sein d'HTML5 et mieux vaudra donc utiliser les éléments « sémantiques » HTML lorsqu'ils sont disponibles. Ainsi, les éléments natifs disposent de fonctionnalités de navigation au clavier, de rôles et d'états définis en standard. Toutefois, lorsque vous choisissez d'utiliser ARIA, il vous revient de recoder les fonctionnalités équivalentes dans vos scripts.

-
- -

Voici un widget utilisé pour une barre de progression :

- -
<div id="percent-loaded" role="progressbar" aria-valuenow="75"
-     aria-valuemin="0" aria-valuemax="100" />
- -

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.

- -

En plus des déclarations statiques dans le contenu HTML, les attributs ARIA peuvent être ajoutés aux éléments et être mis à jour grâce à JavaScript :

- -
// Trouver la barre de progression <div> dans le DOM.
- var progressBar = document.getElementById("percent-loaded");
-
-// Définir les rôles et les états ARIA
-// afin que les technologies d'assistance puissent les
-// identifier/exploiter correctement
- progressBar.setAttribute("role", "progressbar");
- progressBar.setAttribute("aria-valuemin", 0);
- progressBar.setAttribute("aria-valuemax", 100);
-
-// Créer une fonction qui peut être appelée à tout moment
-// pour mettre à jour la valeur de la barre de progression
- function updateProgress(percentComplete) {
-   progressBar.setAttribute("aria-valuenow", percentComplete);
- }
- -
-

Note : ARIA  a été inventé après HTML4 et ne valide pas HTML4 ou les variantes XHTML. Toutefois, les gains d'accessibilité l'emportent sur cette invalidité.

- -

En HTML5, tous les attributs ARIA sont valides. Les nouveaux éléments de navigation (<main>, <header>, <nav> etc.) possèdent des rôles ARIA natifs et il n'est pas nécessaire de les dupliquer.

-
- -

Prise en charge

- -

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

- -

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

- -

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

- -

Tutoriels

- -
-
Introduction à ARIA
-
Une rapide introduction à ARIA pour rendre accessible le contenu dynamique. Voir aussi l'introduction à ARIA de Gez Lemon en 2008
-
Vidéos de lecteurs d'écran utilisant ARIA
-
Des exemples concrets et d'autres simplifiés avec des vidéos comparatives entre l'état « avant ARIA » et « après ARIA ».
-
Utiliser ARIA
-
Un guide pratique pour les développeurs qui fournit également des suggestions quant aux attributs ARIA à utiliser sur les éléments HTML sur la base d'implémentations concrètes.
-
- -

Améliorations légères avec ARIA

- -
-
Améliorer la navigation avec les balises (landmarks) ARIA
-
Une introduction à l'utilisation des balises ARIA afin d'améliorer la navigation au sein d'une page web pour les utilisateurs de lecteur d'écran. Voir aussi les notes d'implémentation pour les balises ARIA (mis à jour en juillet 2011).
-
Améliorer l'accessibilité des formulaires
-
ARIA ne se limite pas au contenu dynamique ! Apprenez comment améliorer l'accessibilité des formulaires HTML grâce aux attributs ARIA.
-
- -

ARIA pour les widgets scriptés

- -
-
Concevoir des widgets JavaScript 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 (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
-
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.
-
- -

Processus de standardisation

- -
-
La spécification WAI-ARIA
-
La spécification rédigée par le W3C.
-
Bonnes pratiques afin d'écrire avec WAI-ARIA
-
-

Les documents officiels décrivant les meilleurs pratiques pour appliquer ARIA aux widgets et aux mécanismes interactifs.

-
-
- -

Videos

- -

ARIA, les API pour l'accessibilité : coder comme si ça vous intéressait ! de Léonie Watson (en anglais)

- -

Rapporter des bogues

- -

Rapporter des bogues d'accessibilté/ARIA sur les navigateurs, les lecteurs d'écran et les bibliothèques JavaScript.

- -

Voir aussi

- - diff --git a/files/fr/web/accessibility/aria/index.md b/files/fr/web/accessibility/aria/index.md new file mode 100644 index 0000000000..c54e182fce --- /dev/null +++ b/files/fr/web/accessibility/aria/index.md @@ -0,0 +1,116 @@ +--- +title: ARIA +slug: Web/Accessibility/ARIA +tags: + - ARIA + - Accessibilité + - Applications + - Web +translation_of: Web/Accessibility/ARIA +original_slug: Accessibilité/ARIA +--- +

Accessible Rich Internet Applications (ARIA) (qu'on pourrait traduire par « applications internet riches et accessibles ») sont un ensemble un attribut qui définit comment rendre le contenu et les applications web accessibles.

+ +

ARIA complète HTML afin que les éléments interactifs et les widgets puissent être utilisés par les outils d'assistance quand les fonctionnalités standard ne le permettent pas. Ainsi, ARIA permet de rendre accessible les widgets JavaScript, les indications dans les formulaires, les messages d'erreur et les mises à jour dynamiques du contenu, etc.

+ +
+

Attention : La plupart de ces widgets ont été intégrés au sein d'HTML5 et mieux vaudra donc utiliser les éléments « sémantiques » HTML lorsqu'ils sont disponibles. Ainsi, les éléments natifs disposent de fonctionnalités de navigation au clavier, de rôles et d'états définis en standard. Toutefois, lorsque vous choisissez d'utiliser ARIA, il vous revient de recoder les fonctionnalités équivalentes dans vos scripts.

+
+ +

Voici un widget utilisé pour une barre de progression :

+ +
<div id="percent-loaded" role="progressbar" aria-valuenow="75"
+     aria-valuemin="0" aria-valuemax="100" />
+ +

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.

+ +

En plus des déclarations statiques dans le contenu HTML, les attributs ARIA peuvent être ajoutés aux éléments et être mis à jour grâce à JavaScript :

+ +
// Trouver la barre de progression <div> dans le DOM.
+ var progressBar = document.getElementById("percent-loaded");
+
+// Définir les rôles et les états ARIA
+// afin que les technologies d'assistance puissent les
+// identifier/exploiter correctement
+ progressBar.setAttribute("role", "progressbar");
+ progressBar.setAttribute("aria-valuemin", 0);
+ progressBar.setAttribute("aria-valuemax", 100);
+
+// Créer une fonction qui peut être appelée à tout moment
+// pour mettre à jour la valeur de la barre de progression
+ function updateProgress(percentComplete) {
+   progressBar.setAttribute("aria-valuenow", percentComplete);
+ }
+ +
+

Note : ARIA  a été inventé après HTML4 et ne valide pas HTML4 ou les variantes XHTML. Toutefois, les gains d'accessibilité l'emportent sur cette invalidité.

+ +

En HTML5, tous les attributs ARIA sont valides. Les nouveaux éléments de navigation (<main>, <header>, <nav> etc.) possèdent des rôles ARIA natifs et il n'est pas nécessaire de les dupliquer.

+
+ +

Prise en charge

+ +

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

+ +

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

+ +

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

+ +

Tutoriels

+ +
+
Introduction à ARIA
+
Une rapide introduction à ARIA pour rendre accessible le contenu dynamique. Voir aussi l'introduction à ARIA de Gez Lemon en 2008
+
Vidéos de lecteurs d'écran utilisant ARIA
+
Des exemples concrets et d'autres simplifiés avec des vidéos comparatives entre l'état « avant ARIA » et « après ARIA ».
+
Utiliser ARIA
+
Un guide pratique pour les développeurs qui fournit également des suggestions quant aux attributs ARIA à utiliser sur les éléments HTML sur la base d'implémentations concrètes.
+
+ +

Améliorations légères avec ARIA

+ +
+
Améliorer la navigation avec les balises (landmarks) ARIA
+
Une introduction à l'utilisation des balises ARIA afin d'améliorer la navigation au sein d'une page web pour les utilisateurs de lecteur d'écran. Voir aussi les notes d'implémentation pour les balises ARIA (mis à jour en juillet 2011).
+
Améliorer l'accessibilité des formulaires
+
ARIA ne se limite pas au contenu dynamique ! Apprenez comment améliorer l'accessibilité des formulaires HTML grâce aux attributs ARIA.
+
+ +

ARIA pour les widgets scriptés

+ +
+
Concevoir des widgets JavaScript 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 (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
+
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.
+
+ +

Processus de standardisation

+ +
+
La spécification WAI-ARIA
+
La spécification rédigée par le W3C.
+
Bonnes pratiques afin d'écrire avec WAI-ARIA
+
+

Les documents officiels décrivant les meilleurs pratiques pour appliquer ARIA aux widgets et aux mécanismes interactifs.

+
+
+ +

Videos

+ +

ARIA, les API pour l'accessibilité : coder comme si ça vous intéressait ! de Léonie Watson (en anglais)

+ +

Rapporter des bogues

+ +

Rapporter des bogues d'accessibilté/ARIA sur les navigateurs, les lecteurs d'écran et les bibliothèques JavaScript.

+ +

Voir aussi

+ + diff --git a/files/fr/web/accessibility/aria/roles/banner_role/index.html b/files/fr/web/accessibility/aria/roles/banner_role/index.html deleted file mode 100644 index 8c3d63a9d1..0000000000 --- a/files/fr/web/accessibility/aria/roles/banner_role/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Utilisation du rôle banner -slug: Web/Accessibility/ARIA/Roles/Banner_role -tags: - - ARIA - - Accessibilité - - NeedsContent - - Rôle -translation_of: Web/Accessibility/ARIA/Roles/Banner_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner ---- -

Description

- -

Cette technique présente l’utilisation du rôle banner (en).

- -

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.

- -

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.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

 

- -

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

- -

Une zone d'entête typique de site 

- -
<header role="banner">
-  <p><img src="logo.png" alt="Nom du site"></p>
-  <p>Description du site</p>
-  <div role="search">
-    ...
-  </div>
-</header>
- -

Autres ressources

- -

La fiche accede-web.

diff --git a/files/fr/web/accessibility/aria/roles/banner_role/index.md b/files/fr/web/accessibility/aria/roles/banner_role/index.md new file mode 100644 index 0000000000..8c3d63a9d1 --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/banner_role/index.md @@ -0,0 +1,40 @@ +--- +title: Utilisation du rôle banner +slug: Web/Accessibility/ARIA/Roles/Banner_role +tags: + - ARIA + - Accessibilité + - NeedsContent + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/Banner_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner +--- +

Description

+ +

Cette technique présente l’utilisation du rôle banner (en).

+ +

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.

+ +

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.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

 

+ +

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

+ +

Une zone d'entête typique de site 

+ +
<header role="banner">
+  <p><img src="logo.png" alt="Nom du site"></p>
+  <p>Description du site</p>
+  <div role="search">
+    ...
+  </div>
+</header>
+ +

Autres ressources

+ +

La fiche accede-web.

diff --git a/files/fr/web/accessibility/aria/roles/button_role/index.html b/files/fr/web/accessibility/aria/roles/button_role/index.html deleted file mode 100644 index 1ededd8194..0000000000 --- a/files/fr/web/accessibility/aria/roles/button_role/index.html +++ /dev/null @@ -1,301 +0,0 @@ ---- -title: 'ARIA : le rôle button' -slug: Web/Accessibility/ARIA/Roles/button_role -tags: - - ARIA - - ARIA Role - - ARIA button - - Accessibility - - Button Role - - Reference -translation_of: Web/Accessibility/ARIA/Roles/button_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button ---- -

Le rôle 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.

- -
<div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Enregistrer</div>
- -

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> ou <input> avec type="button" pour représenter des boutons :

- -
<button id="saveChanges">Enregistrer</button>
- -
-

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 et keydown, y compris la gestion des touches Entrée et Espace, afin de traiter la saisie de l'utilisateur. Voir l'exemple de code officiel de WAI-ARIA.

-
- -

Description

- -

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).

- -

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…".

- -

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.

- -

Rôles, propriétés et états ARIA associés

- -
-
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é.
-
- -

Boutons simples

- -

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 ou aria-labelledby.

- -

Interrupteurs

- -

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

- - - -

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é.

- -

Interactions au clavier

- - - - - - - - - - - - - - - - -
ToucheFonction
EntréeActiver le bouton
EspaceActiver le bouton
- -

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).

- -

Fonctionnalités JavaScript nécessaires

- -

Gestionnaires d'évènements nécessaires

- -

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 Espace ou Entrée 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 Espace ou Entrée.

- -
-
onclick
-
Gère l'évènement déclenché lorsque le bouton est activé avec un clic de souris ou au toucher.
-
onKeyDown
-
Gère l'évènement déclenché lorsque le bouton est activé à l'aide de la touche Espace ou Entrée du clavier (attention, il ne s'agit pas de l'évènement déprécié onKeyPress).
-
- -

Modifier les valeurs des attributs

- -
aria-pressed
- -

La valeur de aria-pressed définit l'état d'un interrupteur. Cet attribut peut avoir l'une des quatre valeurs suivantes :

- - - -

Exemples

- -

Exemple de bouton simple

- -

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.

- -

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 Espace ou Entrée. 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

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

- -
[role="button"] {
-  padding: 2px;
-  background-color: navy;
-  color: white;
-  cursor: default;
-}
-[role="button"]:hover,
-[role="button"]:focus,
-[role="button"]:active {
-   background-color: white;
-   color: navy;
-}
-ul {
-    list-style: none;
-}
- -

JavaScript

- -
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 !== ' ') {
-    return;
-  }
-
-  // On récupère la valeur du nouveau nom à partir
-  // du champ en saisie
-  let newNameInput = document.getElementById('newName');
-  let name = newNameInput.value;
-  newNameInput.value = ''; // On vide le champ texte
-  newNameInput.focus();  // On passe le focus au champ texte pour
-                         // permettre la saisie d'un autre nom
-
-  // On évite d'ajouter des noms vides à la liste
-  if(name.length > 0) {
-    listItem = document.createElement('li');
-    listItem.appendChild(document.createTextNode(name));
-
-    // On ajoute le nouveau nom à la liste.
-    let list = document.getElementById('nameList');
-    list.appendChild(listItem);
-  }
-}
- -

{{EmbedLiveSample("basic_button_example")}}

- -

Exemple d'interrupteur

- -

Dans le fragment qui suit, on convertit un élément <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.

- -

HTML

- -
<button type="button" onclick="handleBtnClick()" onKeyDown="handleBtnKeyDown()">
-  Couper le son
-</button>
-
-<span role="button" tabindex="0"
- aria-pressed="false" onclick="handleBtnClick(event)"
- onKeyDown="handleBtnKeyDown(event)">
-  Couper le son
-</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>
-
-
- -

CSS

- -
button,
-[role="button"] {
-    padding: 3px;
-    border: 2px solid transparent;
-}
-
-button:active,
-button:focus,
-[role="button"][aria-pressed="true"] {
-    border: 2px solid #000;
-}
-
- -

JavaScript

- -
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") { // 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();
-    toggleButton(event.target);
-  }
-}
-
-function toggleButton(element) {
-  var audio = document.getElementById('audio');
-  // On vérifie si le bouton est pressé
-  var pressed = (element.getAttribute("aria-pressed") === "true");
-  // On fait alterner aria-pressed vers l'état opposé
-  element.setAttribute("aria-pressed", !pressed);
-  // On modifie l'état de lecture du fichier audio
-  if(pressed) {
-     audio.pause();
-  } else {
-     audio.play();
-  }
-}
- -

Résultat

- -

{{EmbedLiveSample('toggle_button_example')}}

- -

Accessibilité

- -

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.

- -
-

Attention : Lorsqu'on utilise des liens avec le rôle button, il faut rajouter un gestionnaire d'évènement pour la touche Espace. En effet, les boutons s'activent avec Espace ou Entrée tandis que, nativement, les liens ne se déclenchent qu'avec Entrée.

-
- -

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.

- -

Bonnes pratiques

- -

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.

- -

Spécifications

- - - - - - - - - - - - - - - - - - -
SpécificationÉtat
{{SpecName("ARIA","#button","button")}}{{Spec2('ARIA')}}
{{SpecName("ARIA Authoring Practices","#button","button")}}{{Spec2('ARIA Authoring Practices')}}
- -

Notes

- -

Attributs ARIA utilisés

- - - -

Ressources complémentaires

- - \ No newline at end of file diff --git a/files/fr/web/accessibility/aria/roles/button_role/index.md b/files/fr/web/accessibility/aria/roles/button_role/index.md new file mode 100644 index 0000000000..1ededd8194 --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/button_role/index.md @@ -0,0 +1,301 @@ +--- +title: 'ARIA : le rôle button' +slug: Web/Accessibility/ARIA/Roles/button_role +tags: + - ARIA + - ARIA Role + - ARIA button + - Accessibility + - Button Role + - Reference +translation_of: Web/Accessibility/ARIA/Roles/button_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_button +--- +

Le rôle 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.

+ +
<div id="saveChanges" tabindex="0" role="button" aria-pressed="false">Enregistrer</div>
+ +

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> ou <input> avec type="button" pour représenter des boutons :

+ +
<button id="saveChanges">Enregistrer</button>
+ +
+

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 et keydown, y compris la gestion des touches Entrée et Espace, afin de traiter la saisie de l'utilisateur. Voir l'exemple de code officiel de WAI-ARIA.

+
+ +

Description

+ +

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).

+ +

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…".

+ +

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.

+ +

Rôles, propriétés et états ARIA associés

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

Boutons simples

+ +

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 ou aria-labelledby.

+ +

Interrupteurs

+ +

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

+ + + +

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é.

+ +

Interactions au clavier

+ + + + + + + + + + + + + + + + +
ToucheFonction
EntréeActiver le bouton
EspaceActiver le bouton
+ +

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).

+ +

Fonctionnalités JavaScript nécessaires

+ +

Gestionnaires d'évènements nécessaires

+ +

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 Espace ou Entrée 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 Espace ou Entrée.

+ +
+
onclick
+
Gère l'évènement déclenché lorsque le bouton est activé avec un clic de souris ou au toucher.
+
onKeyDown
+
Gère l'évènement déclenché lorsque le bouton est activé à l'aide de la touche Espace ou Entrée du clavier (attention, il ne s'agit pas de l'évènement déprécié onKeyPress).
+
+ +

Modifier les valeurs des attributs

+ +
aria-pressed
+ +

La valeur de aria-pressed définit l'état d'un interrupteur. Cet attribut peut avoir l'une des quatre valeurs suivantes :

+ + + +

Exemples

+ +

Exemple de bouton simple

+ +

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.

+ +

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 Espace ou Entrée. 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

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

+ +
[role="button"] {
+  padding: 2px;
+  background-color: navy;
+  color: white;
+  cursor: default;
+}
+[role="button"]:hover,
+[role="button"]:focus,
+[role="button"]:active {
+   background-color: white;
+   color: navy;
+}
+ul {
+    list-style: none;
+}
+ +

JavaScript

+ +
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 !== ' ') {
+    return;
+  }
+
+  // On récupère la valeur du nouveau nom à partir
+  // du champ en saisie
+  let newNameInput = document.getElementById('newName');
+  let name = newNameInput.value;
+  newNameInput.value = ''; // On vide le champ texte
+  newNameInput.focus();  // On passe le focus au champ texte pour
+                         // permettre la saisie d'un autre nom
+
+  // On évite d'ajouter des noms vides à la liste
+  if(name.length > 0) {
+    listItem = document.createElement('li');
+    listItem.appendChild(document.createTextNode(name));
+
+    // On ajoute le nouveau nom à la liste.
+    let list = document.getElementById('nameList');
+    list.appendChild(listItem);
+  }
+}
+ +

{{EmbedLiveSample("basic_button_example")}}

+ +

Exemple d'interrupteur

+ +

Dans le fragment qui suit, on convertit un élément <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.

+ +

HTML

+ +
<button type="button" onclick="handleBtnClick()" onKeyDown="handleBtnKeyDown()">
+  Couper le son
+</button>
+
+<span role="button" tabindex="0"
+ aria-pressed="false" onclick="handleBtnClick(event)"
+ onKeyDown="handleBtnKeyDown(event)">
+  Couper le son
+</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>
+
+
+ +

CSS

+ +
button,
+[role="button"] {
+    padding: 3px;
+    border: 2px solid transparent;
+}
+
+button:active,
+button:focus,
+[role="button"][aria-pressed="true"] {
+    border: 2px solid #000;
+}
+
+ +

JavaScript

+ +
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") { // 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();
+    toggleButton(event.target);
+  }
+}
+
+function toggleButton(element) {
+  var audio = document.getElementById('audio');
+  // On vérifie si le bouton est pressé
+  var pressed = (element.getAttribute("aria-pressed") === "true");
+  // On fait alterner aria-pressed vers l'état opposé
+  element.setAttribute("aria-pressed", !pressed);
+  // On modifie l'état de lecture du fichier audio
+  if(pressed) {
+     audio.pause();
+  } else {
+     audio.play();
+  }
+}
+ +

Résultat

+ +

{{EmbedLiveSample('toggle_button_example')}}

+ +

Accessibilité

+ +

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.

+ +
+

Attention : Lorsqu'on utilise des liens avec le rôle button, il faut rajouter un gestionnaire d'évènement pour la touche Espace. En effet, les boutons s'activent avec Espace ou Entrée tandis que, nativement, les liens ne se déclenchent qu'avec Entrée.

+
+ +

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.

+ +

Bonnes pratiques

+ +

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.

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName("ARIA","#button","button")}}{{Spec2('ARIA')}}
{{SpecName("ARIA Authoring Practices","#button","button")}}{{Spec2('ARIA Authoring Practices')}}
+ +

Notes

+ +

Attributs ARIA utilisés

+ + + +

Ressources complémentaires

+ + \ No newline at end of file diff --git a/files/fr/web/accessibility/aria/roles/checkbox_role/index.html b/files/fr/web/accessibility/aria/roles/checkbox_role/index.html deleted file mode 100644 index 7b6168e783..0000000000 --- a/files/fr/web/accessibility/aria/roles/checkbox_role/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Utilisation du rôle checkbox -slug: Web/Accessibility/ARIA/Roles/checkbox_role -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/Roles/checkbox_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox ---- -

Description

- -

Cette technique présente l’utilisation du rôle 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 :

- -

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 :

- -

Les technologies d’assistance doivent faire la chose suivante :

- -
-

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

-
<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span>
-<label for="chk1">Enregistrer mes préférences</label>
-
-

Exemples concrets :

- -

Notes

-

Attributs ARIA utilisés

- -

Techniques ARIA connexes

-

Autres ressources

diff --git a/files/fr/web/accessibility/aria/roles/checkbox_role/index.md b/files/fr/web/accessibility/aria/roles/checkbox_role/index.md new file mode 100644 index 0000000000..7b6168e783 --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/checkbox_role/index.md @@ -0,0 +1,52 @@ +--- +title: Utilisation du rôle checkbox +slug: Web/Accessibility/ARIA/Roles/checkbox_role +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/checkbox_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox +--- +

Description

+ +

Cette technique présente l’utilisation du rôle 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 :

+ +

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 :

+ +

Les technologies d’assistance doivent faire la chose suivante :

+ +
+

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

+
<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span>
+<label for="chk1">Enregistrer mes préférences</label>
+
+

Exemples concrets :

+ +

Notes

+

Attributs ARIA utilisés

+ +

Techniques ARIA connexes

+

Autres ressources

diff --git a/files/fr/web/accessibility/aria/roles/dialog_role/index.html b/files/fr/web/accessibility/aria/roles/dialog_role/index.html deleted file mode 100644 index 57386e4f2a..0000000000 --- a/files/fr/web/accessibility/aria/roles/dialog_role/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: Utilisation du rôle dialog -slug: Web/Accessibility/ARIA/Roles/dialog_role -tags: - - ARIA - - Accessibilité - - Développement Web - - Rôle -translation_of: Web/Accessibility/ARIA/Roles/dialog_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog ---- -

Description

- -

Cette technique présente l’utilisation du rôle dialog (en).

- -

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).

- -

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 :

- - - -

Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites.

- -

Labélisation

- -

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

- -

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 :

- -
<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
-    <h2 id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</h2>
-
-    <p id="dialog1Desc">Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur. »</p>
-
-    <button>Fermer</button>
-</div>
-
- -
-

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.

-
- -

Gestion du focus

- -

Une boîte de dialogue a des exigences particulières concernant la façon dont le focus clavier doit être géré :

- - - -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

Lorsque le rôle dialog est utilisé, l’agent utilisateur doit faire la chose suivante :

- - - -

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.

- -
-

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.

-
- -

Exemples

- -

Exemple 1 : une boîte de dialogue contenant un formulaire

- -
<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
-    <h2 id="dialog1Title">Formulaire de souscription</h2>
-
-    <p id="dialog1Desc">Nous ne partageons pas ces informations avec des tierces parties.</p>
-
-    <form>
-        <p>
-            <label for="firstName">Prénom</label>
-            <input id="firstName" type="text" />
-        </p>
-
-        <p>
-            <label for="lastName">Nom</label>
-            <input id="lastName" type="text" />
-        </p>
-
-        <p>
-            <label for="interests">Intérêts</label>
-            <textarea id="interests"></textarea>
-        </p>
-
-        <p>
-            <input type="checkbox" id="autoLogin" />
-            <label for="autoLogin">Intérêts</label>
-        </p>
-
-        <p>
-            <input type="submit" value="Enregistrer les informations"/>
-            </p>
-    </form>
-</div>
-
- -

Exemple 2 : une boîte de dialogue basée sur un Fieldset comme contenu alternatif

- -

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 :

- -
<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>
-
-    <button>Fermer</button>
-</fieldset>
-
- -

Exemples concrets :

- - - -

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.

-
- -

Attributs ARIA utilisés

- - - -

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 new file mode 100644 index 0000000000..57386e4f2a --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/dialog_role/index.md @@ -0,0 +1,149 @@ +--- +title: Utilisation du rôle dialog +slug: Web/Accessibility/ARIA/Roles/dialog_role +tags: + - ARIA + - Accessibilité + - Développement Web + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/dialog_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog +--- +

Description

+ +

Cette technique présente l’utilisation du rôle dialog (en).

+ +

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).

+ +

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 :

+ + + +

Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites.

+ +

Labélisation

+ +

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

+ +

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 :

+ +
<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
+    <h2 id="dialog1Title">Vos informations personnelles ont correctement été actualisées.</h2>
+
+    <p id="dialog1Desc">Vous pouvez modifier vos informations personnelles à n’importe quel moment depuis la section « Compte utilisateur. »</p>
+
+    <button>Fermer</button>
+</div>
+
+ +
+

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.

+
+ +

Gestion du focus

+ +

Une boîte de dialogue a des exigences particulières concernant la façon dont le focus clavier doit être géré :

+ + + +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

Lorsque le rôle dialog est utilisé, l’agent utilisateur doit faire la chose suivante :

+ + + +

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.

+ +
+

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.

+
+ +

Exemples

+ +

Exemple 1 : une boîte de dialogue contenant un formulaire

+ +
<div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
+    <h2 id="dialog1Title">Formulaire de souscription</h2>
+
+    <p id="dialog1Desc">Nous ne partageons pas ces informations avec des tierces parties.</p>
+
+    <form>
+        <p>
+            <label for="firstName">Prénom</label>
+            <input id="firstName" type="text" />
+        </p>
+
+        <p>
+            <label for="lastName">Nom</label>
+            <input id="lastName" type="text" />
+        </p>
+
+        <p>
+            <label for="interests">Intérêts</label>
+            <textarea id="interests"></textarea>
+        </p>
+
+        <p>
+            <input type="checkbox" id="autoLogin" />
+            <label for="autoLogin">Intérêts</label>
+        </p>
+
+        <p>
+            <input type="submit" value="Enregistrer les informations"/>
+            </p>
+    </form>
+</div>
+
+ +

Exemple 2 : une boîte de dialogue basée sur un Fieldset comme contenu alternatif

+ +

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 :

+ +
<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>
+
+    <button>Fermer</button>
+</fieldset>
+
+ +

Exemples concrets :

+ + + +

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.

+
+ +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Autres ressources

diff --git a/files/fr/web/accessibility/aria/roles/listbox_role/index.html b/files/fr/web/accessibility/aria/roles/listbox_role/index.html deleted file mode 100644 index a3abd6cb40..0000000000 --- a/files/fr/web/accessibility/aria/roles/listbox_role/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Utiliser le rôle listbox -slug: Web/Accessibility/ARIA/Roles/listbox_role -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/Roles/listbox_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox ---- -

Description

- -

Cette technique présente l’utilisation du rôle listbox et décrit les effets produits sur les navigateurs et les technologies d’assistance.

- -

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.

- -

Chaque entrée de la boîte liste devrait avoir un rôle d’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 pour obtenir plus de détails sur les propriétés additionnelles qui doivent être définies.

- -

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 Maj+Flèche haut/bas 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, Maj+F10 affichera ce menu. Si les éléments de la liste peuvent être cochés, Espace peut être utilisée pour basculer l’état de la checkboxes. Pour les éléments de liste sélectionnables, Espace bascule l’état de sélection, Maj+Espace peut être utilisé pour sélection des éléments contigus, Ctrl+Flèche déplace le curseur sans sélectionner d’élément, et Ctrl+Espace 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 Ctrl+A peut être utilisé comme raccourci pour cela.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

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 :

- - - -

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

- - - -

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 : une liste de sélection simple qui utilise l’attribut aria-activedescendant

- -

L’extrait de code ci-dessous montre comment le rôle listbox est ajouté directement dans le code source 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>
-
- -

Voir l’exemple CodeTalks pour plus de détails.

- -

Exemples concrets :

- - - -

Notes

- - - -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- - - -

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 new file mode 100644 index 0000000000..a3abd6cb40 --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/listbox_role/index.md @@ -0,0 +1,92 @@ +--- +title: Utiliser le rôle listbox +slug: Web/Accessibility/ARIA/Roles/listbox_role +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/listbox_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_listbox +--- +

Description

+ +

Cette technique présente l’utilisation du rôle listbox et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+ +

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.

+ +

Chaque entrée de la boîte liste devrait avoir un rôle d’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 pour obtenir plus de détails sur les propriétés additionnelles qui doivent être définies.

+ +

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 Maj+Flèche haut/bas 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, Maj+F10 affichera ce menu. Si les éléments de la liste peuvent être cochés, Espace peut être utilisée pour basculer l’état de la checkboxes. Pour les éléments de liste sélectionnables, Espace bascule l’état de sélection, Maj+Espace peut être utilisé pour sélection des éléments contigus, Ctrl+Flèche déplace le curseur sans sélectionner d’élément, et Ctrl+Espace 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 Ctrl+A peut être utilisé comme raccourci pour cela.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

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 :

+ + + +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ + + +

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 : une liste de sélection simple qui utilise l’attribut aria-activedescendant

+ +

L’extrait de code ci-dessous montre comment le rôle listbox est ajouté directement dans le code source 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>
+
+ +

Voir l’exemple CodeTalks pour plus de détails.

+ +

Exemples concrets :

+ + + +

Notes

+ + + +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/aria/roles/switch_role/index.html b/files/fr/web/accessibility/aria/roles/switch_role/index.html deleted file mode 100644 index ec25d40d10..0000000000 --- a/files/fr/web/accessibility/aria/roles/switch_role/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Utilisation du groupe switch -slug: Web/Accessibility/ARIA/Roles/Switch_role -tags: - - ARIA - - Accessibility - - NeedsContent - - Rôle -translation_of: Web/Accessibility/ARIA/Roles/Switch_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_switch ---- -

Le rôle ARIA switch est très similaire au role checkbox, à la sémantique près — il a deux états représentant on/off, au lieu de checked/unchecked.

- -

Extrait des spec ARIA 1.1 : 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/switch_role/index.md b/files/fr/web/accessibility/aria/roles/switch_role/index.md new file mode 100644 index 0000000000..ec25d40d10 --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/switch_role/index.md @@ -0,0 +1,14 @@ +--- +title: Utilisation du groupe switch +slug: Web/Accessibility/ARIA/Roles/Switch_role +tags: + - ARIA + - Accessibility + - NeedsContent + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/Switch_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utilisation_du_groupe_switch +--- +

Le rôle ARIA switch est très similaire au role checkbox, à la sémantique près — il a deux états représentant on/off, au lieu de checked/unchecked.

+ +

Extrait des spec ARIA 1.1 : 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.html b/files/fr/web/accessibility/aria/roles/textbox_role/index.html deleted file mode 100644 index f0c6824c54..0000000000 --- a/files/fr/web/accessibility/aria/roles/textbox_role/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: Utiliser le rôle textbox -slug: Web/Accessibility/ARIA/Roles/textbox_role -tags: - - ARIA - - Accessibilité - - Rôle -translation_of: Web/Accessibility/ARIA/Roles/textbox_role -original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox ---- -

Description

- -

Cette technique présente l’utilisation du rôle textbox et décrit les effets produits sur les navigateurs et les technologies d’assistance.

- -

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.

- -

L’utilisation par défaut est pour un champ de saisie monoligne où Entrée ou Retour, 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".

- -

Lorsqu’un champ texte est en lecture seule, cela devrait être indiqué en utilisant l’attribut aria-readonly="true" sur l’élément concerné.

- -

Effets possibles sur les agents utilisateurs et les technologies d’assistance

- -

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 :

- - - -

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

- - - -

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 textbox dans le code HTML d’un champ de saisie monoligne <input>

- -

L’extrait de code ci-dessous montre comment le rôle textbox est ajouté directement dans le code source HTML.

- -
<input type="text" role="textbox" value="Voici du texte" />
- -

Exemple 2 : ajout du rôle textbox dans le code HTML d’un champ de saisie multilignes <textarea>

- -

L’extrait de code ci-dessous montre comment le rôle textbox est ajouté directement dans le code source HTML.

- -
<textarea role="textbox" aria-multiline="true">
-  Voici du texte
-  …
-  sur plusieurs lignes.
-</textarea>
-
- -

Exemples concrets :

- -

Notes

- - - -

Attributs ARIA utilisés

- - - -

Techniques ARIA connexes

- -

N/A

- -

Autres ressources

diff --git a/files/fr/web/accessibility/aria/roles/textbox_role/index.md b/files/fr/web/accessibility/aria/roles/textbox_role/index.md new file mode 100644 index 0000000000..f0c6824c54 --- /dev/null +++ b/files/fr/web/accessibility/aria/roles/textbox_role/index.md @@ -0,0 +1,77 @@ +--- +title: Utiliser le rôle textbox +slug: Web/Accessibility/ARIA/Roles/textbox_role +tags: + - ARIA + - Accessibilité + - Rôle +translation_of: Web/Accessibility/ARIA/Roles/textbox_role +original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_textbox +--- +

Description

+ +

Cette technique présente l’utilisation du rôle textbox et décrit les effets produits sur les navigateurs et les technologies d’assistance.

+ +

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.

+ +

L’utilisation par défaut est pour un champ de saisie monoligne où Entrée ou Retour, 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".

+ +

Lorsqu’un champ texte est en lecture seule, cela devrait être indiqué en utilisant l’attribut aria-readonly="true" sur l’élément concerné.

+ +

Effets possibles sur les agents utilisateurs et les technologies d’assistance

+ +

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 :

+ + + +

Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence :

+ + + +

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 textbox dans le code HTML d’un champ de saisie monoligne <input>

+ +

L’extrait de code ci-dessous montre comment le rôle textbox est ajouté directement dans le code source HTML.

+ +
<input type="text" role="textbox" value="Voici du texte" />
+ +

Exemple 2 : ajout du rôle textbox dans le code HTML d’un champ de saisie multilignes <textarea>

+ +

L’extrait de code ci-dessous montre comment le rôle textbox est ajouté directement dans le code source HTML.

+ +
<textarea role="textbox" aria-multiline="true">
+  Voici du texte
+  …
+  sur plusieurs lignes.
+</textarea>
+
+ +

Exemples concrets :

+ +

Notes

+ + + +

Attributs ARIA utilisés

+ + + +

Techniques ARIA connexes

+ +

N/A

+ +

Autres ressources

diff --git a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html deleted file mode 100644 index 4c4f1a433a..0000000000 --- a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.html +++ /dev/null @@ -1,306 +0,0 @@ ---- -title: FAQ Applications Web et ARIA -slug: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ -tags: - - ARIA - - Accessibilité - - Développement Web - - À relire -translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ -original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA ---- -

Qu’est-ce qu’ARIA ?

- -

WAI-ARIA est la spécification Applications Internet Riches Accessibles de la Web Accessibility Initiative (Initiative pour l’accessibilité du Web) du W3C. 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.

- -

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.

- - - -

ARIA est pris en charge dans les navigateurs suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurVersion minimaleNotes
Firefox3.0+Fonctionne avec NVDA, JAWS 10+ et Orca
ChromeDernièrePrise en charge encore expérimentale des lecteurs d’écran jusqu’à Chrome 15
Safari4+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
Opera9.5+Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ?
Internet Explorer8+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 :

- - - -

Technologies d’assistance

- -

Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Technologies d’assistanceVersion minimale pour un ARIA de baseVersion minimale pour la prise en charge des zones live et des alertes
NVDA2010.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)
VoiceOverOSX 10.5,
- iOS 4		OS X 10.7
- iOS 5
JAWS810
Window-Eyes7Pas 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.

- -

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 :

- - - -

Pour plus d’informations sur l’accessibilité des kits de développement JavaScript :

- - - -

Pouvez-vous me montrez un exemple d’ARIA en action ?

- -

Voici le code HTML pour une barre de progression :

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

- -
// 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 ,
-// pour que les technologies d’assistance sachent quel type de composant il s’agit.
-progressBar.setAttribute("role", "progressbar");
-progressBar.setAttribute("aria-valuemin", 0);
-progressBar.setAttribute("aria-valuemax", 100);
-
-// Création d’une fonction qui peut être appelée à n’importe quel moment
-// pour actualiser la valeur de la barre de progression.
-function updateProgress(percentComplete) {
-  progressBar.setAttribute("aria-valuenow", percentComplete);
-}
- -

L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ?

- -

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.

- -
.tab-panel[aria-hidden="true"] {
-  display: none;
-  }
-
-.tab-panel[aria-hidden="false"] {
-  display: block;
-  }
-
- -

Qu'en est-il de la validation ?

- -

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.

- -

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.

- -

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.

- -

Comment HTML5 s’associe-t-il avec ARIA ?

- -

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.

- -

Dégradation élégante de HTML5 vers ARIA

- -

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.

- -

Voici un exemple de code utilisé pour une barre de progression en HTML5 :

- -
<!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>
-
- -

… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens :

- -
var progressBar = document.getElementById("progress-bar");
-
-// 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
-    // avons-nous besoin d’ajouter des rôles et des états ARIA à l’élément.
-    progressBar.setAttribute("role", "progressbar");
-    progressBar.setAttribute("aria-valuemin", 0);
-    progressBar.setAttribute("aria-valuemax", 100);
-  }
-}
-
-function updateProgress(percentComplete) {
-  if (!supportsHTML5Progress) {
-    // 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.
-    progressBar.setAttribute("value", percentComplete);
-  }
-
-  progressBar.textContent = percentComplete + "% complété(s)";
-}
-
-function initDemo() {
-  setupProgress(); // Setup the progress bar.
-
-  // Lier un événement clic au bouton, ce qui actualisera la barre de progression à 75%.
-  document.getElementById("update-button").addEventListener("click", function (e) {
-    updateProgress(75);
-    e.preventDefault();
-  }, false);
-}
-initDemo();
-
- -

Comment fonctionnent les technologies d’assistance ?

- -

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.

- -

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.

- -

Comment tester mon utilisation d’ARIA ? Existe-t-il des outils libres ou gratuits ?

- -

Il existe plusieurs outils d’inspection et de débogage pour vous aider à tester le comportement d’ARIA :

- - - -

Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve :

- - - -

Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête :

- -
    -
  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. -
  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é.
    3. -
- -

Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA :

- - - -

Où se tiennent les discussion concernant ARIA ?

- - - -

Où peut-on en apprendre davantage à propos d’ARIA ?

- - 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 new file mode 100644 index 0000000000..4c4f1a433a --- /dev/null +++ b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md @@ -0,0 +1,306 @@ +--- +title: FAQ Applications Web et ARIA +slug: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ +tags: + - ARIA + - Accessibilité + - Développement Web + - À relire +translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ +original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA +--- +

Qu’est-ce qu’ARIA ?

+ +

WAI-ARIA est la spécification Applications Internet Riches Accessibles de la Web Accessibility Initiative (Initiative pour l’accessibilité du Web) du W3C. 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.

+ +

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.

+ + + +

ARIA est pris en charge dans les navigateurs suivants :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurVersion minimaleNotes
Firefox3.0+Fonctionne avec NVDA, JAWS 10+ et Orca
ChromeDernièrePrise en charge encore expérimentale des lecteurs d’écran jusqu’à Chrome 15
Safari4+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
Opera9.5+Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ?
Internet Explorer8+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 :

+ + + +

Technologies d’assistance

+ +

Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Technologies d’assistanceVersion minimale pour un ARIA de baseVersion minimale pour la prise en charge des zones live et des alertes
NVDA2010.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)
VoiceOverOSX 10.5,
+ iOS 4		OS X 10.7
+ iOS 5
JAWS810
Window-Eyes7Pas 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.

+ +

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 :

+ + + +

Pour plus d’informations sur l’accessibilité des kits de développement JavaScript :

+ + + +

Pouvez-vous me montrez un exemple d’ARIA en action ?

+ +

Voici le code HTML pour une barre de progression :

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

+ +
// 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 ,
+// pour que les technologies d’assistance sachent quel type de composant il s’agit.
+progressBar.setAttribute("role", "progressbar");
+progressBar.setAttribute("aria-valuemin", 0);
+progressBar.setAttribute("aria-valuemax", 100);
+
+// Création d’une fonction qui peut être appelée à n’importe quel moment
+// pour actualiser la valeur de la barre de progression.
+function updateProgress(percentComplete) {
+  progressBar.setAttribute("aria-valuenow", percentComplete);
+}
+ +

L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ?

+ +

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.

+ +
.tab-panel[aria-hidden="true"] {
+  display: none;
+  }
+
+.tab-panel[aria-hidden="false"] {
+  display: block;
+  }
+
+ +

Qu'en est-il de la validation ?

+ +

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.

+ +

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.

+ +

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.

+ +

Comment HTML5 s’associe-t-il avec ARIA ?

+ +

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.

+ +

Dégradation élégante de HTML5 vers ARIA

+ +

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.

+ +

Voici un exemple de code utilisé pour une barre de progression en HTML5 :

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

… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens :

+ +
var progressBar = document.getElementById("progress-bar");
+
+// 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
+    // avons-nous besoin d’ajouter des rôles et des états ARIA à l’élément.
+    progressBar.setAttribute("role", "progressbar");
+    progressBar.setAttribute("aria-valuemin", 0);
+    progressBar.setAttribute("aria-valuemax", 100);
+  }
+}
+
+function updateProgress(percentComplete) {
+  if (!supportsHTML5Progress) {
+    // 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.
+    progressBar.setAttribute("value", percentComplete);
+  }
+
+  progressBar.textContent = percentComplete + "% complété(s)";
+}
+
+function initDemo() {
+  setupProgress(); // Setup the progress bar.
+
+  // Lier un événement clic au bouton, ce qui actualisera la barre de progression à 75%.
+  document.getElementById("update-button").addEventListener("click", function (e) {
+    updateProgress(75);
+    e.preventDefault();
+  }, false);
+}
+initDemo();
+
+ +

Comment fonctionnent les technologies d’assistance ?

+ +

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.

+ +

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.

+ +

Comment tester mon utilisation d’ARIA ? Existe-t-il des outils libres ou gratuits ?

+ +

Il existe plusieurs outils d’inspection et de débogage pour vous aider à tester le comportement d’ARIA :

+ + + +

Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve :

+ + + +

Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête :

+ +
    +
  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. +
  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é.
    3. +
+ +

Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA :

+ + + +

Où se tiennent les discussion concernant ARIA ?

+ + + +

Où peut-on en apprendre davantage à propos d’ARIA ?

+ + diff --git a/files/fr/web/accessibility/aria/widgets/index.html b/files/fr/web/accessibility/aria/widgets/index.html deleted file mode 100644 index b343f06bf7..0000000000 --- a/files/fr/web/accessibility/aria/widgets/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: widgets -slug: Web/Accessibility/ARIA/widgets -tags: - - Accessibility -translation_of: Web/Accessibility/ARIA/widgets ---- -

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/aria/widgets/index.md b/files/fr/web/accessibility/aria/widgets/index.md new file mode 100644 index 0000000000..b343f06bf7 --- /dev/null +++ b/files/fr/web/accessibility/aria/widgets/index.md @@ -0,0 +1,8 @@ +--- +title: widgets +slug: Web/Accessibility/ARIA/widgets +tags: + - Accessibility +translation_of: Web/Accessibility/ARIA/widgets +--- +

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.html b/files/fr/web/accessibility/community/index.html deleted file mode 100644 index bf05404332..0000000000 --- a/files/fr/web/accessibility/community/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Communauté -slug: Web/Accessibility/Community -tags: - - Accessibilité -translation_of: Web/Accessibility/Community -original_slug: Accessibilité/Communauté ---- -

Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité.

- -

Si vous connaissez d'autres, ressources utiles  n'hésitez pas à ajouter un lien ci-dessous.

- - diff --git a/files/fr/web/accessibility/community/index.md b/files/fr/web/accessibility/community/index.md new file mode 100644 index 0000000000..bf05404332 --- /dev/null +++ b/files/fr/web/accessibility/community/index.md @@ -0,0 +1,18 @@ +--- +title: Communauté +slug: Web/Accessibility/Community +tags: + - Accessibilité +translation_of: Web/Accessibility/Community +original_slug: Accessibilité/Communauté +--- +

Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité.

+ +

Si vous connaissez d'autres, ressources utiles  n'hésitez pas à ajouter un lien ci-dessous.

+ + diff --git a/files/fr/web/accessibility/index.html b/files/fr/web/accessibility/index.html deleted file mode 100644 index 0ce3096545..0000000000 --- a/files/fr/web/accessibility/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Accessibilité -slug: Web/Accessibility -tags: - - Accessibilité - - Avancé - - Développement Web - - Guide -translation_of: Web/Accessibility -original_slug: Accessibilité ---- -

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.

- -

« 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)

- -

« 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

- -

Tutoriels clefs

- -

La documentation MDN Accessibilité contient des tutoriaux modernes et à jour en ce qui concerne les points essentiels de l'accessibilité:

- -
-
Qu'est-ce que l'accessibilité?
-
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é
-
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
-
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
-
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
-
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
-
É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.
-
- -

Documentation

- -
-
Développement web
-
Un ensemble d'articles soulignant les problèmes d'accessibilité dans le développement web.
-
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)
-
Un ensemble d'articles destiné aux développeurs de technologies d'assistance.
-
Check-list pour l'accessibilité mobile
-
Ce document fournit une liste concise des requis accessibilité pour les développeurs d’applications mobiles.
-
- -

Outils pour les développeurs web

- - - -

Autres ressources

- - diff --git a/files/fr/web/accessibility/index.md b/files/fr/web/accessibility/index.md new file mode 100644 index 0000000000..0ce3096545 --- /dev/null +++ b/files/fr/web/accessibility/index.md @@ -0,0 +1,65 @@ +--- +title: Accessibilité +slug: Web/Accessibility +tags: + - Accessibilité + - Avancé + - Développement Web + - Guide +translation_of: Web/Accessibility +original_slug: Accessibilité +--- +

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.

+ +

« 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)

+ +

« 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

+ +

Tutoriels clefs

+ +

La documentation MDN Accessibilité contient des tutoriaux modernes et à jour en ce qui concerne les points essentiels de l'accessibilité:

+ +
+
Qu'est-ce que l'accessibilité?
+
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é
+
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
+
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
+
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
+
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
+
É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.
+
+ +

Documentation

+ +
+
Développement web
+
Un ensemble d'articles soulignant les problèmes d'accessibilité dans le développement web.
+
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)
+
Un ensemble d'articles destiné aux développeurs de technologies d'assistance.
+
Check-list pour l'accessibilité mobile
+
Ce document fournit une liste concise des requis accessibilité pour les développeurs d’applications mobiles.
+
+ +

Outils pour les développeurs web

+ + + +

Autres ressources

+ + diff --git a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html deleted file mode 100644 index 967ed7852c..0000000000 --- a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Contrôles DHTML personnalisés navigables au clavier -slug: Web/Accessibility/Keyboard-navigable_JavaScript_widgets -tags: - - AJAX - - Accessibilité - - DHTML -translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets -original_slug: Contrôles_DHTML_personnalisés_navigables_au_clavier ---- -

 

-

Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier

-

Un nombre croissant d'applications Web utilise 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 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.

-

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, il devient possible de permettre aux contrôles 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 tabindexFocus disponible à la souris ou par JavaScript via element.focus()Navigable avec tabulation
non présentSuit 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")		OuiNon, 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")		OuiDans l'ordre de tabulation relativement à la position de l'élément dans le document.
Positif
- (par exemple tabindex="33")		OuiLa 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> 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 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 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 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).

-

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/keyboard-navigable_javascript_widgets/index.md b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md new file mode 100644 index 0000000000..967ed7852c --- /dev/null +++ b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md @@ -0,0 +1,91 @@ +--- +title: Contrôles DHTML personnalisés navigables au clavier +slug: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +tags: + - AJAX + - Accessibilité + - DHTML +translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +original_slug: Contrôles_DHTML_personnalisés_navigables_au_clavier +--- +

 

+

Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier

+

Un nombre croissant d'applications Web utilise 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 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.

+

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, il devient possible de permettre aux contrôles 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 tabindexFocus disponible à la souris ou par JavaScript via element.focus()Navigable avec tabulation
non présentSuit 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")		OuiNon, 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")		OuiDans l'ordre de tabulation relativement à la position de l'élément dans le document.
Positif
+ (par exemple tabindex="33")		OuiLa 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> 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 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 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 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).

+

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.html b/files/fr/web/accessibility/mobile_accessibility_checklist/index.html deleted file mode 100644 index 9844156521..0000000000 --- a/files/fr/web/accessibility/mobile_accessibility_checklist/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Check-list pour l'accessibilité mobile -slug: Web/Accessibility/Mobile_accessibility_checklist -tags: - - Accessibility - - Firefox OS - - Guidelines - - Mobile - - checklist -translation_of: Web/Accessibility/Mobile_accessibility_checklist -original_slug: Accessibilité/Checklist_accessibilite_mobile ---- -

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

- - - -

La visibilité

- - - -

Le focus

- - - -

Les équivalents textuels

- - - -

La gestion des états

- - - -

L'orientation

- - - -

Directives générales

- - diff --git a/files/fr/web/accessibility/mobile_accessibility_checklist/index.md b/files/fr/web/accessibility/mobile_accessibility_checklist/index.md new file mode 100644 index 0000000000..9844156521 --- /dev/null +++ b/files/fr/web/accessibility/mobile_accessibility_checklist/index.md @@ -0,0 +1,101 @@ +--- +title: Check-list pour l'accessibilité mobile +slug: Web/Accessibility/Mobile_accessibility_checklist +tags: + - Accessibility + - Firefox OS + - Guidelines + - Mobile + - checklist +translation_of: Web/Accessibility/Mobile_accessibility_checklist +original_slug: Accessibilité/Checklist_accessibilite_mobile +--- +

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

+ + + +

La visibilité

+ + + +

Le focus

+ + + +

Les équivalents textuels

+ + + +

La gestion des états

+ + + +

L'orientation

+ + + +

Directives générales

+ + diff --git a/files/fr/web/accessibility/understanding_wcag/index.html b/files/fr/web/accessibility/understanding_wcag/index.html deleted file mode 100644 index 23805dc3ca..0000000000 --- a/files/fr/web/accessibility/understanding_wcag/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Understanding the Web Content Accessibility Guidelines -slug: Web/Accessibility/Understanding_WCAG -tags: - - TopicStub - - WCAG - - Web Content Accessibility Guidelines -translation_of: Web/Accessibility/Understanding_WCAG ---- -

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).

- -

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.

- -

Les quatre principes

- -

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é pour les définitons des WCAG).

- -

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.

- - - -

Dois-je utiliser WCAG 2.0 ou 2.1?

- -

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. 

- -

Qu'est-ce que WCAG 2.1?

- -

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. 

- -

WCAG 2.1 comprend:

- - - -

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é? et particularité, les directives d'Accessibility et la section sur la loi fournissent des informations complémentaires.

diff --git a/files/fr/web/accessibility/understanding_wcag/index.md b/files/fr/web/accessibility/understanding_wcag/index.md new file mode 100644 index 0000000000..23805dc3ca --- /dev/null +++ b/files/fr/web/accessibility/understanding_wcag/index.md @@ -0,0 +1,58 @@ +--- +title: Understanding the Web Content Accessibility Guidelines +slug: Web/Accessibility/Understanding_WCAG +tags: + - TopicStub + - WCAG + - Web Content Accessibility Guidelines +translation_of: Web/Accessibility/Understanding_WCAG +--- +

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).

+ +

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.

+ +

Les quatre principes

+ +

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é pour les définitons des WCAG).

+ +

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.

+ + + +

Dois-je utiliser WCAG 2.0 ou 2.1?

+ +

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. 

+ +

Qu'est-ce que WCAG 2.1?

+ +

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. 

+ +

WCAG 2.1 comprend:

+ + + +

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é? et particularité, les directives d'Accessibility et la section sur la loi fournissent des informations complémentaires.

diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html deleted file mode 100644 index 98d4766bd9..0000000000 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.html +++ /dev/null @@ -1,156 +0,0 @@ ---- -title: Contraste de la couleur -slug: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast -tags: - - Accessibilité - - WCAG - - contraste -translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast -original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_couleur ---- -

Le contraste de la couleur 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 contenuRatio minimum (Note AA)Ratio amélioré (Note AAA)
Corps4.5 : 17 : 1
Texte grande échelle (120-150% plus large que le corps)3 : 14.5 : 1
Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques3 : 1Non 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:

- -
<div class="bon">Bon contraste</div>
-<div class="mauvais">Mauvais contraste</div>
- -
div {
-  /* Styles généraux de div ici */
-}
-
-.bon {
-  background-color: #fae6fa;
-}
-
-.mauvais {
-  background-color: #400064;
-}
- -

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:

- -

Bon exemple

- -
    <div class="bon">
-      Bon contraste
-    </div>
- -
div {
-  font-family: sans-serif;
-  text-align: center;
-  font-size: 2rem;
-  font-weight: bold;
-  width: 250px;
-  padding: 30px;
-  border-radius: 20px;
-  box-shadow: 1px 1px 1px black;
-}
-
-.bon {
-  background-color: #fae6fa;
-}
- -

{{EmbedLiveSample('Bon_exemple', '100%', '100')}}

- -

Mauvais exemple

-

La "mauvaise" <div>, en revanche, a un fond violet très foncé, ce qui rend le texte beaucoup plus difficile à lire:

- -
    <div class="mauvais">
-      Mauvais contraste
-    </div>
- -
div {
-  font-family: sans-serif;
-  text-align: center;
-  font-size: 2rem;
-  font-weight: bold;
-  width: 250px;
-  padding: 30px;
-  border-radius: 20px;
-  box-shadow: 1px 1px 1px black;
-}
-
-.mauvais {
-  background-color: #400064;
-}
- -

{{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 de WebAIM.

- -

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é, et en particulier la section Vérifier les problèmes d'accessibilité. Essayez de les utiliser sur les exemples dans la section de description.

- -

Critères de réussite associés aux WCAG

- -
-
1.4.3 Contraste minimum (AA)
-
Le contraste des couleurs entre le contenu d'arrière-plan et de premier plan doit être au minimum pour garantir la lisibilité: -
    -
  • 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.
    • -
-
-
1.4.6 Contraste amélioré (AAA)
-
Cela suit et s'appuie sur le critère 1.4.3. -
    -
  • 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.
    • -
-
-
1.4.11 Contraste non textuel (AA) (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.
-
- -

Voir aussi

- - 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 new file mode 100644 index 0000000000..98d4766bd9 --- /dev/null +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md @@ -0,0 +1,156 @@ +--- +title: Contraste de la couleur +slug: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast +tags: + - Accessibilité + - WCAG + - contraste +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast +original_slug: Web/Accessibility/Understanding_WCAG/Perceivable/Contraste_de_la_couleur +--- +

Le contraste de la couleur 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 contenuRatio minimum (Note AA)Ratio amélioré (Note AAA)
Corps4.5 : 17 : 1
Texte grande échelle (120-150% plus large que le corps)3 : 14.5 : 1
Composants d'interface utilisateur actifs et objets graphiques tels que des icônes et des graphiques3 : 1Non 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:

+ +
<div class="bon">Bon contraste</div>
+<div class="mauvais">Mauvais contraste</div>
+ +
div {
+  /* Styles généraux de div ici */
+}
+
+.bon {
+  background-color: #fae6fa;
+}
+
+.mauvais {
+  background-color: #400064;
+}
+ +

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:

+ +

Bon exemple

+ +
    <div class="bon">
+      Bon contraste
+    </div>
+ +
div {
+  font-family: sans-serif;
+  text-align: center;
+  font-size: 2rem;
+  font-weight: bold;
+  width: 250px;
+  padding: 30px;
+  border-radius: 20px;
+  box-shadow: 1px 1px 1px black;
+}
+
+.bon {
+  background-color: #fae6fa;
+}
+ +

{{EmbedLiveSample('Bon_exemple', '100%', '100')}}

+ +

Mauvais exemple

+

La "mauvaise" <div>, en revanche, a un fond violet très foncé, ce qui rend le texte beaucoup plus difficile à lire:

+ +
    <div class="mauvais">
+      Mauvais contraste
+    </div>
+ +
div {
+  font-family: sans-serif;
+  text-align: center;
+  font-size: 2rem;
+  font-weight: bold;
+  width: 250px;
+  padding: 30px;
+  border-radius: 20px;
+  box-shadow: 1px 1px 1px black;
+}
+
+.mauvais {
+  background-color: #400064;
+}
+ +

{{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 de WebAIM.

+ +

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é, et en particulier la section Vérifier les problèmes d'accessibilité. Essayez de les utiliser sur les exemples dans la section de description.

+ +

Critères de réussite associés aux WCAG

+ +
+
1.4.3 Contraste minimum (AA)
+
Le contraste des couleurs entre le contenu d'arrière-plan et de premier plan doit être au minimum pour garantir la lisibilité: +
    +
  • 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.
    • +
+
+
1.4.6 Contraste amélioré (AAA)
+
Cela suit et s'appuie sur le critère 1.4.3. +
    +
  • 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.
    • +
+
+
1.4.11 Contraste non textuel (AA) (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.
+
+ +

Voir aussi

+ + diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/index.html b/files/fr/web/accessibility/understanding_wcag/perceivable/index.html deleted file mode 100644 index 9ed3ff530a..0000000000 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/index.html +++ /dev/null @@ -1,359 +0,0 @@ ---- -title: Perceivable -slug: Web/Accessibility/Understanding_WCAG/Perceivable -tags: - - Accessibility - - NeedsTranslation - - Principle 1 - - TopicStub - - WCAG - - Web Content Accessibility Guidelines - - contrast - - different presentation - - text alternatives - - time-based media -translation_of: Web/Accessibility/Understanding_WCAG/Perceivable ---- -

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.

- -
-

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.

-
- -

Guideline 1.1 — Providing text alternatives for non-text content

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Success criteriaHow to conform to the criteriaPractical resource
1.1.1 Provide text equivalents  (A)All images that convey meaningful content should be given suitable alternative text.Text alternatives.
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 longdesc attribute. -

A text description may work, or an accessible data table (see HTML table advanced features and accessibility). Also see Other text alternative mechanisms for the argument against longdesc.

-
Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar). -

See Text alternatives for static caption options, and Audio transcripts, Video text tracks, and Other multimedia content for other alternatives.

-
UI Controls such as form elements and buttons should have text labels that describe their purpose.Buttons are simple — you should make sure the button text describes the function of the button (e.g. <button>Upload image</button>). For further information on other UI controls, see UI controls.
Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users. -

Decorative images should be implemented using CSS background images (see Backgrounds).  If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (alt=""), otherwise screenreaders may try to read out the filepath, etc.

- -

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.

-
- -
-

Note : Also see the WCAG description for Guideline 1.1: Text alternatives.

-
- -

Guideline 1.2 — Providing text alternatives for time-based media

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Success criteriaHow to conform to the criteriaPractical resource
1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)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).See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.2 Provide captions for web-based video (A)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.See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube).
1.2.3 Provide text transcript or audio description for web-based video (A)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.See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.4 Provide captions for live audio (AA)You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.) 
1.2.5 Provide audio descriptions for prerecorded video (AA)Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video. 
1.2.6 Provide sign language equivalent to prerecorded audio (AAA)An equivalent sign language video should be provided for any prerecorded content containing audio. 
1.2.7 Provide extended video with audio descriptions (AAA)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). 
1.2.8 Provide an alternative for prerecorded media (AAA)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.See Audio transcripts for transcript information.
1.2.9 Provide a transcript for live audio (AAA)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.See Audio transcripts for transcript information.
- -
-

Note : Also see the WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media.

-
- -

Guideline 1.3 — Create content that can be presented in different ways

- -

This guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Success criteriaHow to conform to the criteriaPractical resource
1.3.1 Info and relationships (A) -

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:

- -
    -
  • Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.
    • -
  • 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. alt 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.
    • -
  • Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).
    • -
- 		The whole of -

HTML: A good basis for accessibility is packed with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.

-
1.3.2 Meaningful content sequence (A)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.Again, refer to HTML: A good basis for accessibility.
1.3.3 Sensory characteristics (A) -

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:

- -
    -
  • "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.
    • -
  • "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.
    • -
  • "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.
    • -
- -
-

Note : Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.

-
- 		 
1.3.4 Orientation (AA) added in 2.1Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. -

Understanding Orientation 

-
1.3.5 Identify Input Purpose (AA) added in 2.1 -

 

- -

Follow the list of 53 input fields to programmatically identify the purpose of a field.   

- 		Understanding Identify Input Purpose
1.3.6 Identify Purpose (AAA) added in 2.1In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.Understanding Identify Purpose
- -
-

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.

-
- -

Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Success criteriaHow to conform to the criteriaPractical resource
1.4.1 Use of color (A) -

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.

- 		See Color and color contrast and Multiple labels.
1.4.2 Audio controls (A)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.Use native <button>s to provide accessible keyboard controls, as shown in Video player syling basics.
1.4.3 Minimum contrast (AA) -

The color contrast between background and foreground content should be at a minimum level to ensure legibility:

- -
    -
  • Text and its background should have a contrast ratio of at least 4.5.1.
    • -
  • 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.
    • -
- 		See Color and color contrast.
1.4.4 Resize text (AA)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. 
1.4.5 Images of text (AA)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. 
1.4.6 Enhanced contrast (AAA) -

This follows, and builds on, criterion 1.4.3.

- -
    -
  • Text and its background should have a contrast ratio of at least 7.1.
    • -
  • 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.
    • -
- 		See Color and color contrast.
1.4.7 Low or no background audio (AAA)Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood. 
1.4.8 Visual presentation (AAA) -

For text content presentation, the following should be true:

- -
    -
  • Foreground and background colors should be user-selectable.
    • -
  • Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.
    • -
  • Text should not be fully justified (e.g. text-align: justify;)
    • -
  • line height should be at least 1.5 times the text size within paragraphs (e.g. line-height: 1.5;), and at least 2.25 times the text size between paragraphs (e.g. padding: 2.25rem;)
    • -
  • When the text size is doubled, the content should not need to be scrolled.
    • -
- 		 
1.4.9 Images of text (No Exception) (AAA)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. 
1.4.10 Reflow (AA) added in 2.1 -
    -
  • No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic)   
    • -
  • No vertical scrolling for top-to-bottom languages (like Japanese)
    • -
  • Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).
    • -
- 		Understanding Reflow
1.4.11 Non-Text Contrast(AA) added in 2.1Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. Understanding Non-Text Contrast
1.4.12 Text Spacing (AA) added in 2.1 -

No loss of content or functionality occurs when the following styles are applied: 

- -
    -
  • Line height (line spacing) to at least 1.5 times the font size;
    • -
  • Spacing following paragraphs to at least 2 times the font size;
    • -
  • Letter spacing (tracking) to at least 0.12 times the font size;
    • -
  • Word spacing to at least 0.16 times the font size.
    • -
- 		Understanding Text Spacing
1.4.13 Content on Hover or Focus (AA) added in 2.1 -

Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:

- -
    -
  • dismissable (can be closed/removed)
    • -
  • hoverable (the additional content does not disappear when the pointer is over it) 
    • -
  • persistent (the additional content does not disappear without user action)
    • -
- 		Understanding Content on Hover or Focus
- -
-

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

-
- -

 

- -

See Also

- - - -

 

diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/index.md b/files/fr/web/accessibility/understanding_wcag/perceivable/index.md new file mode 100644 index 0000000000..9ed3ff530a --- /dev/null +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/index.md @@ -0,0 +1,359 @@ +--- +title: Perceivable +slug: Web/Accessibility/Understanding_WCAG/Perceivable +tags: + - Accessibility + - NeedsTranslation + - Principle 1 + - TopicStub + - WCAG + - Web Content Accessibility Guidelines + - contrast + - different presentation + - text alternatives + - time-based media +translation_of: Web/Accessibility/Understanding_WCAG/Perceivable +--- +

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.

+ +
+

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.

+
+ +

Guideline 1.1 — Providing text alternatives for non-text content

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Success criteriaHow to conform to the criteriaPractical resource
1.1.1 Provide text equivalents  (A)All images that convey meaningful content should be given suitable alternative text.Text alternatives.
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 longdesc attribute. +

A text description may work, or an accessible data table (see HTML table advanced features and accessibility). Also see Other text alternative mechanisms for the argument against longdesc.

+
Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar). +

See Text alternatives for static caption options, and Audio transcripts, Video text tracks, and Other multimedia content for other alternatives.

+
UI Controls such as form elements and buttons should have text labels that describe their purpose.Buttons are simple — you should make sure the button text describes the function of the button (e.g. <button>Upload image</button>). For further information on other UI controls, see UI controls.
Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users. +

Decorative images should be implemented using CSS background images (see Backgrounds).  If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (alt=""), otherwise screenreaders may try to read out the filepath, etc.

+ +

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.

+
+ +
+

Note : Also see the WCAG description for Guideline 1.1: Text alternatives.

+
+ +

Guideline 1.2 — Providing text alternatives for time-based media

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Success criteriaHow to conform to the criteriaPractical resource
1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)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).See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.2 Provide captions for web-based video (A)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.See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube).
1.2.3 Provide text transcript or audio description for web-based video (A)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.See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.4 Provide captions for live audio (AA)You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.) 
1.2.5 Provide audio descriptions for prerecorded video (AA)Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video. 
1.2.6 Provide sign language equivalent to prerecorded audio (AAA)An equivalent sign language video should be provided for any prerecorded content containing audio. 
1.2.7 Provide extended video with audio descriptions (AAA)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). 
1.2.8 Provide an alternative for prerecorded media (AAA)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.See Audio transcripts for transcript information.
1.2.9 Provide a transcript for live audio (AAA)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.See Audio transcripts for transcript information.
+ +
+

Note : Also see the WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media.

+
+ +

Guideline 1.3 — Create content that can be presented in different ways

+ +

This guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Success criteriaHow to conform to the criteriaPractical resource
1.3.1 Info and relationships (A) +

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:

+ +
    +
  • Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.
    • +
  • 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. alt 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.
    • +
  • Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).
    • +
+ 		The whole of +

HTML: A good basis for accessibility is packed with information about this, but you should particularly refer to Good semantics, UI controls, and Text alternatives.

+
1.3.2 Meaningful content sequence (A)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.Again, refer to HTML: A good basis for accessibility.
1.3.3 Sensory characteristics (A) +

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:

+ +
    +
  • "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.
    • +
  • "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.
    • +
  • "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.
    • +
+ +
+

Note : Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.

+
+ 		 
1.3.4 Orientation (AA) added in 2.1Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential. +

Understanding Orientation 

+
1.3.5 Identify Input Purpose (AA) added in 2.1 +

 

+ +

Follow the list of 53 input fields to programmatically identify the purpose of a field.   

+ 		Understanding Identify Input Purpose
1.3.6 Identify Purpose (AAA) added in 2.1In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.Understanding Identify Purpose
+ +
+

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.

+
+ +

Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Success criteriaHow to conform to the criteriaPractical resource
1.4.1 Use of color (A) +

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.

+ 		See Color and color contrast and Multiple labels.
1.4.2 Audio controls (A)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.Use native <button>s to provide accessible keyboard controls, as shown in Video player syling basics.
1.4.3 Minimum contrast (AA) +

The color contrast between background and foreground content should be at a minimum level to ensure legibility:

+ +
    +
  • Text and its background should have a contrast ratio of at least 4.5.1.
    • +
  • 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.
    • +
+ 		See Color and color contrast.
1.4.4 Resize text (AA)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. 
1.4.5 Images of text (AA)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. 
1.4.6 Enhanced contrast (AAA) +

This follows, and builds on, criterion 1.4.3.

+ +
    +
  • Text and its background should have a contrast ratio of at least 7.1.
    • +
  • 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.
    • +
+ 		See Color and color contrast.
1.4.7 Low or no background audio (AAA)Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood. 
1.4.8 Visual presentation (AAA) +

For text content presentation, the following should be true:

+ +
    +
  • Foreground and background colors should be user-selectable.
    • +
  • Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.
    • +
  • Text should not be fully justified (e.g. text-align: justify;)
    • +
  • line height should be at least 1.5 times the text size within paragraphs (e.g. line-height: 1.5;), and at least 2.25 times the text size between paragraphs (e.g. padding: 2.25rem;)
    • +
  • When the text size is doubled, the content should not need to be scrolled.
    • +
+ 		 
1.4.9 Images of text (No Exception) (AAA)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. 
1.4.10 Reflow (AA) added in 2.1 +
    +
  • No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic)   
    • +
  • No vertical scrolling for top-to-bottom languages (like Japanese)
    • +
  • Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).
    • +
+ 		Understanding Reflow
1.4.11 Non-Text Contrast(AA) added in 2.1Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. Understanding Non-Text Contrast
1.4.12 Text Spacing (AA) added in 2.1 +

No loss of content or functionality occurs when the following styles are applied: 

+ +
    +
  • Line height (line spacing) to at least 1.5 times the font size;
    • +
  • Spacing following paragraphs to at least 2 times the font size;
    • +
  • Letter spacing (tracking) to at least 0.12 times the font size;
    • +
  • Word spacing to at least 0.16 times the font size.
    • +
+ 		Understanding Text Spacing
1.4.13 Content on Hover or Focus (AA) added in 2.1 +

Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:

+ +
    +
  • dismissable (can be closed/removed)
    • +
  • hoverable (the additional content does not disappear when the pointer is over it) 
    • +
  • persistent (the additional content does not disappear without user action)
    • +
+ 		Understanding Content on Hover or Focus
+ +
+

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

+
+ +

 

+ +

See Also

+ + + +

 

-- cgit v1.2.3-54-g00ecf