From bc7e79341ee10fcf8d48b1789f9382fddb0bcf73 Mon Sep 17 00:00:00 2001 From: julieng Date: Thu, 11 Nov 2021 07:55:03 +0100 Subject: convert content to md --- .../fr/web/accessibility/aria/aria_guides/index.md | 34 +- .../accessibility/aria/aria_live_regions/index.md | 192 +++++------ .../accessibility/aria/aria_techniques/index.md | 218 ++++++------- .../aria_techniques/using_the_alert_role/index.md | 132 ++++---- .../using_the_alertdialog_role/index.md | 86 +++-- .../using_the_aria-describedby_attribute/index.md | 82 +++-- .../using_the_aria-invalid_attribute/index.md | 107 +++---- .../using_the_aria-label_attribute/index.md | 63 ++-- .../using_the_aria-labelledby_attribute/index.md | 177 ++++++----- .../using_the_aria-orientation_attribute/index.md | 59 ++-- .../using_the_aria-relevant_attribute/index.md | 26 +- .../using_the_aria-required_attribute/index.md | 83 +++-- .../using_the_aria-valuemax_attribute/index.md | 59 ++-- .../using_the_aria-valuemin_attribute/index.md | 57 ++-- .../using_the_aria-valuenow_attribute/index.md | 101 +++--- .../using_the_aria-valuetext_attribute/index.md | 59 ++-- .../using_the_article_role/index.md | 55 ++-- .../aria_techniques/using_the_group_role/index.md | 152 +++++---- .../aria_techniques/using_the_link_role/index.md | 116 ++++--- .../aria_techniques/using_the_log_role/index.md | 97 +++--- .../using_the_presentation_role/index.md | 50 +-- .../using_the_progressbar_role/index.md | 62 ++-- .../aria_techniques/using_the_slider_role/index.md | 110 +++---- .../aria_techniques/using_the_status_role/index.md | 89 +++--- .../web/accessibility/aria/forms/alerts/index.md | 155 +++++---- .../aria/forms/basic_form_hints/index.md | 182 +++++------ files/fr/web/accessibility/aria/forms/index.md | 12 +- .../aria/forms/multipart_labels/index.md | 33 +- .../aria/how_to_file_aria-related_bugs/index.md | 224 ++++++++----- files/fr/web/accessibility/aria/index.md | 126 ++++---- .../accessibility/aria/roles/banner_role/index.md | 36 ++- .../accessibility/aria/roles/button_role/index.md | 282 ++++++++--------- .../aria/roles/checkbox_role/index.md | 92 +++--- .../accessibility/aria/roles/dialog_role/index.md | 177 +++++------ .../accessibility/aria/roles/listbox_role/index.md | 99 +++--- .../accessibility/aria/roles/switch_role/index.md | 4 +- .../accessibility/aria/roles/textbox_role/index.md | 73 ++--- .../aria/web_applications_and_aria_faq/index.md | 351 ++++++++------------- files/fr/web/accessibility/aria/widgets/index.md | 2 +- 39 files changed, 1953 insertions(+), 2161 deletions(-) (limited to 'files/fr/web/accessibility/aria') diff --git a/files/fr/web/accessibility/aria/aria_guides/index.md b/files/fr/web/accessibility/aria/aria_guides/index.md index 6b5aaeb7d9..cc9585dc68 100644 --- a/files/fr/web/accessibility/aria/aria_guides/index.md +++ b/files/fr/web/accessibility/aria/aria_guides/index.md @@ -7,22 +7,20 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Guides original_slug: Accessibilité/ARIA/Guides_ARIA --- -

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

+**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é : - +- Traiter les erreurs dans les formulaires +- Labelliser les composants d’interface +- Labelliser les composants composés (Composite Widgets) et des zones (Regions) +- Gérer le focus dans les composants composés (`aria-activedescendant` vs roving tabindex) +- Utiliser les rôles de points de repère (Landmark Roles) +- Traiter les actualisations dynamiques & des zones « Live » +- Mode Virtuel contre mode non virtuel dans les produits de technologies d’assistance +- Utiliser le Glisser & déposer +- Notifier les utilisateurs sur les lecteurs d’écran non-ARIA +- Arranger la structure avec le rôle `presentation` +- Masquer les trames des tableaux +- Gérer les dialogues modaux et non modaux +- Utiliser ARIA avec HTML5 +- Comment tester ARIA ? +- ARIA sur les périphériques mobiles diff --git a/files/fr/web/accessibility/aria/aria_live_regions/index.md b/files/fr/web/accessibility/aria/aria_live_regions/index.md index 9c921bac5e..e13259bdd1 100644 --- a/files/fr/web/accessibility/aria/aria_live_regions/index.md +++ b/files/fr/web/accessibility/aria/aria_live_regions/index.md @@ -8,120 +8,82 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions original_slug: Accessibilité/ARIA/Zones_live_ARIA --- -

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 :

- -