diff options
Diffstat (limited to 'files/fr/web/accessibility')
42 files changed, 342 insertions, 343 deletions
diff --git a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md index 6f169ef86e..5613052a40 100644 --- a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md +++ b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md @@ -10,11 +10,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and 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. +Le Web est en perpétuelle évolution. En effet, les sites à contenu statique sont de plus en plus remplacés par des sites dynamiques à l’utilisation assez proche des applications de bureaux. Les sites Web dynamiques utilisent abondamment JavaScript et AJAX. Les designers créent des widgets et des éléments d'interface grâce aux langages du Web notamment HTML, CSS et Javascript. Ce tournant dans l’histoire du Web permet d'améliorer grandement l'expérience utilisateur et l'utilisation sur mobile (responsive). Mais certains utilisateurs peuvent être exclus par manque d'accessibilité. En effet, JavaScript avait la réputation d'être inaccessible aux technologies d'assistance tel que les interpréteurs d’écran. Or, il existe maintenant des techniques pour rendre le Web accessible à une large palette d’utilisateurs. ## Problématique -La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag `<div>` ou le tag `<span>`. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que [ARIA](/fr/ARIA) entre en jeu. +La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag `<div>` ou le tag `<span>`. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que [ARIA](/fr/ARIA) entre en jeu. _Exemple 1: Code d_’_une tabulation sans informations ARIA. Il n'y a aucune information permettant de décrire la forme du widget et ses fonctions._ @@ -44,13 +44,13 @@ _Example 2: Telles qu'elles sont représentées ci-dessous, les tabulations peuv ## ARIA -[WAI-ARIAI](https://www.w3.org/WAI/standards-guidelines/aria/), les spécifications concernant les applications **internet "riches" et accessibles** sont publiées par l’iniative du [W3C sur l’accessibilité](https://www.w3.org/WAI/), et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus. +[WAI-ARIAI](https://www.w3.org/WAI/standards-guidelines/aria/), les spécifications concernant les applications **internet "riches" et accessibles** sont publiées par l’iniative du [W3C sur l’accessibilité](https://www.w3.org/WAI/), et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus. > **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. +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._ @@ -77,15 +77,15 @@ _Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà p </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 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 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 : +Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple : - **`aria-checked`** indique l’état d'une case à cocher ou d'un bouton radio, - **`aria-disabled`** indique qu’un élément est visible, mais désactivé, @@ -137,7 +137,7 @@ var showTip = function(el) { 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). +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") }}. diff --git a/files/fr/web/accessibility/aria/aria_guides/index.md b/files/fr/web/accessibility/aria/aria_guides/index.md index cc9585dc68..d4bc6707fb 100644 --- a/files/fr/web/accessibility/aria/aria_guides/index.md +++ b/files/fr/web/accessibility/aria/aria_guides/index.md @@ -14,7 +14,7 @@ original_slug: Accessibilité/ARIA/Guides_ARIA - 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 » +- 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 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 65b9feb178..b84f8b63fe 100644 --- a/files/fr/web/accessibility/aria/aria_live_regions/index.md +++ b/files/fr/web/accessibility/aria/aria_live_regions/index.md @@ -10,25 +10,25 @@ 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. +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 +## 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. +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 : +- 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"`. + - : 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. + > **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 +### 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. @@ -40,22 +40,22 @@ Un site web spécialisé dans l’ornithologie fournit une liste déroulante ave 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 +## 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 : +Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni : | Rôle | Description | Compatibilité | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | log | Chat, erreur, jeux ou autres types de journalisation | Pour maximiser la compatibilité, ajouter un `aria-live="polite"` redondant lorsque vous utiliserez ce rôle. | | status | Une barre d’état ou une zone de l’écran qui fournit un état actualisé de quelque chose. Les utilisateurs de lecteur d’écran ont à leur disposition une commande spéciale pour lire l’état courant. | Pour maximiser la compatibilité, ajouter un `aria-live="polite"` redondant lorsque vous utiliserez ce rôle. | | alert | Message d’erreur ou avertissement souligné à l’écran. Les alertes sont particulièrement importantes pour la validation côté client notifiée à l’utilisateur. (TBD: lien vers un tutoriel sur les formulaires ARIA avec des informations plus complètes) | Pour maximiser la compatibilité, ajouter un `aria-live="assertive"` redondant lorsque vous utiliserez ce rôle. Attention, cette redondance occasionne un problème de double restitution orale dans VoiceOver sur iOS. | -| progressbar | Élément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs `aria-valuemin`, `aria-valuenow` et `aria-valuemax`. (TBD : Ajouter plus d’informations pour cet élément). | | -| marquee | Pour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique. | | -| timer | Pour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre. | | +| progressbar | Élément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs `aria-valuemin`, `aria-valuenow` et `aria-valuemax`. (TBD : Ajouter plus d’informations pour cet élément). | | +| marquee | Pour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique. | | +| timer | Pour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre. | | -## Zones « live » avancées +## Zones « live » avancées -(TBD : Qu'est-ce qui est pris en charge par qui ?) +(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). @@ -64,13 +64,13 @@ The Paciello Group propose des [informations sur l'état du support des zones "L - 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`. » + - : 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. + - : 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'identifiant 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 +### 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). @@ -80,10 +80,10 @@ Un site de chat voudrait afficher la liste des utilisateurs actuellement connect </ul> ``` -#### Détails des propriétés « live » d’ARIA : +#### Détails des propriétés « live » d’ARIA : -- L’attribut `aria-live="polite"` indique au lecteur d’écran qu’il doit attendre que l’utilisateur soit inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur `assertive` briserait son flux de lecture. +- L’attribut `aria-live="polite"` indique au lecteur d’écran qu’il doit attendre que l’utilisateur soit inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur `assertive` briserait son flux de lecture. - L’attribut `aria-atomic` n’est pas défini (`false` par défaut), ainsi seuls les utilisateurs ajoutés ou supprimés devraient être lus et non l’intégralité de la liste, à chaque mise à jour. - L’attribut `aria-relevant="additions removals"` assure à la fois que les utilisateurs ajoutés et supprimés de la liste seront lus. -TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true". +TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true". diff --git a/files/fr/web/accessibility/aria/aria_techniques/index.md b/files/fr/web/accessibility/aria/aria_techniques/index.md index 74687a3930..b5215fc235 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/index.md @@ -97,7 +97,7 @@ Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôle - [aria-valuenow](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) - [aria-valuetext](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) -#### Attributs de zones « live » +#### Attributs de zones « live » - aria-live - aria-relevant diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md index 3a9521f0a3..38bf80ffa9 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md @@ -13,7 +13,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog Cette technique présente l’utilisation du rôle [`alertdialog`](http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#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`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role) s’appliquent également au rôle `alertdialog` : +Le rôle `alertdialog` est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, `alertdialog` est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’[utilisation du rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role) s’appliquent également au rôle `alertdialog` : - La boîte de dialogue d’alerte doit toujours avoir un nom accessible (attribué à l’aide de `aria-labelledby` ou de `aria-label`) et, dans la plupart des cas, le texte d’alerte sera marqué comme étant la description accessible de la boîte de dialogue d’alerte (définie avec de l’attribut `aria-describedby`). - Contrairement aux alertes classiques, une boîte de dialogue d’alerte doit avoir au moins un contrôle pouvant recevoir le focus et ce dernier doit s’y placer lors de l’affichage de la boîte de dialogue. Généralement les boîtes de dialogues d’alertes ont au moins un bouton de confirmation, de fermeture ou d’annulation qui peut être utilisé pour recevoir le focus. De plus, les boîtes de dialogues d’alerte peuvent avoir d’autres contrôles interactifs tels que des champs de saisie, des onglets ou des cases à cocher. Le contrôle sur lequel placer le focus dépendra de l’objet de la boîte de dialogue. @@ -27,7 +27,7 @@ Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujo ### 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 le rôle `alertdialog` est utilisé, l’agent utilisateur devrait suivre les étapes suivantes : - Présenter l’élément comme une boîte de dialogue à l’API d’accessibilité du système d’exploitation. - Déclencher un évènement d’alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. @@ -40,7 +40,7 @@ Lorsque la boîte de dialogue est correctement labélisée et que le focus se pl ### Exemples -#### Exemple 1 : Une boîte de dialogue d’alerte +#### 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`. @@ -54,7 +54,7 @@ L’extrait de code ci-dessous présente la façon de baliser une boîte de dial </div> ``` -#### Exemples concrets : +#### Exemples concrets : À définir @@ -62,11 +62,11 @@ L’extrait de code ci-dessous présente la façon de baliser une boîte de dial ### Attributs ARIA utilisés -- [alertdialog](http://www.w3.org/TR/wai-aria/roles#dialog) ; -- [aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) ; +- [alertdialog](http://www.w3.org/TR/wai-aria/roles#dialog) ; +- [aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) ; - [aria-describedby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby). ### Techniques ARIA connexes -- [Utiliser le rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog) ; +- [Utiliser le rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog) ; - [Utiliser le rôle `alert`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md index ff0906e7fa..6a1b71f031 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md @@ -14,7 +14,7 @@ Cette technique présente l’utilisation de l’attribut [`aria-invalid`](http: 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. +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 @@ -39,7 +39,7 @@ Les agents utilisateurs devraient informer l’utilisateur lorsqu’un champ n ### Exemples -#### Exemple 1 : validation d’un formulaire de base +#### 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. @@ -51,9 +51,9 @@ L’extrait de code suivant décrit une version simplifiée de deux champs de fo 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é). +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) : +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) : ```js function checkValidity(aID, aSearchTerm, aMsg){ @@ -69,7 +69,7 @@ function checkValidity(aID, aSearchTerm, aMsg){ } ``` -L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur : +L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur : ```js function updateAlert(msg) { diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md index 2dd44fb491..f19dcd5bfa 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md @@ -25,7 +25,7 @@ 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](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby). +L’attribut `aria-label` ne doit être utilisé que lorsque le texte d’un label _n’est pas_ visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut [aria-labelledby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby). 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. @@ -37,7 +37,7 @@ Une légende sous forme de chaîne de caractère. ### 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. +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. ```html <button aria-label="Fermer" onclick="myDialog.close()">X</button> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md index a7a35af681..1a90536153 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md @@ -14,13 +14,13 @@ Cette technique présente l’utilisation de l’attribut [`aria-labelledby`](ht 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](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby) : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur. +`aria-labelledby` est très similaire à l’attribut [aria-describedby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby) : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur. -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` 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é. +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 @@ -32,9 +32,9 @@ Lorsque les deux attributs `aria-labelledby` et [`aria-label`](/fr/Accessibilit ### Exemples -#### Exemple 1 : Labels multiples +#### 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 : +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 : ```html <div id="facturation">Facturation</div> @@ -52,7 +52,7 @@ Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois av </div> ``` -#### Exemple 2 : Association de titres et de zones +#### 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. @@ -63,9 +63,9 @@ Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec le </div> ``` -#### Exemple 3 : Groupes de boutons radio +#### Exemple 3 : Groupes de boutons radio -Dans l’exemple ci-dessous, le conteneur d’un [radiogroup](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : +Dans l’exemple ci-dessous, le conteneur d’un [radiogroup](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : ```html <div id="radio_label">My radio label</div> @@ -77,9 +77,9 @@ Dans l’exemple ci-dessous, le conteneur d’un [radiogroup](/fr/Accessibilité </ul> ``` -#### Exemple 4 : Titre de boite de dialogue +#### 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` : +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` : ```html <div role="dialog" aria-labelledby="titreDialogue"> @@ -88,7 +88,7 @@ Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite d </div> ``` -#### Exemple 5 : Définition intégrée +#### 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**: @@ -98,15 +98,15 @@ une préparation inerte prescrite plus pour le soulagement mental du patient que </p> ``` -#### Exemple 6 : Listes de définitions +#### 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` : +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` : ```html <dl> <dt id="anatheme">anathème</dt> <dd role="definition" aria-labelledby="anatheme">une interdiction ou une condamnation prononcée par une autorité ecclésiastique - et accompagnée de l’excommunication</dd> + et accompagnée de l’excommunication</dd> <dd role="definition" aria-labelledby="anatheme">une dénonciation vigoureuse : condamnation</dd> <dt id="homelie">homélie</dt> @@ -116,9 +116,9 @@ Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu </dl> ``` -#### Exemple 7 : Menus +#### Exemple 7 : Menus -Dans l’exemple ci-dessous, un [menu contextuel](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : +Dans l’exemple ci-dessous, un [menu contextuel](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : ```html <div role="menubar"> @@ -143,7 +143,7 @@ Tous les éléments de balisage de base. ### Techniques ARIA connexes -- [Utiliser l’attribut `aria-label`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label) ; +- [Utiliser l’attribut `aria-label`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label) ; - [Utiliser l’attribut `aria-describedby`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby). ### 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 index b69d64990b..4b1e1a436f 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md @@ -29,7 +29,7 @@ Vocabulaire ### Exemples -#### Exemple 1 : +#### Exemple 1 : L’extrait de code ci-dessous présente un curseur simple orienté verticalement. @@ -48,8 +48,8 @@ L’extrait de code ci-dessous présente un curseur simple orienté verticalemen ### Utilisé avec les rôles ARIA -- scrollbar ; -- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role) ; +- scrollbar ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role) ; - separator. ### 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 index f29b625d53..91cdfe0ba3 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md @@ -7,7 +7,7 @@ tags: 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](http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant) est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région [`aria-live`](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut `aria-live` n’était pas activé. +L’attribut [aria-relevant](http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant) est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région [`aria-live`](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut `aria-live` n’était pas activé. 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. diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md index 3779f56201..0582f73e61 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md @@ -18,7 +18,7 @@ L’attribut `aria-required` est utilisé pour indiquer que l’utilisateur doit ### Valeurs -`true` ou `false` (Valeur par défaut : `false`) +`true` ou `false` (Valeur par défaut : `false`) ### Effets possibles sur les agents utilisateurs et les technologies d’assistance @@ -30,7 +30,7 @@ Remarquez que cet attribut ne changera pas automatiquement la présentation du c ### Exemples -#### Exemple 1 : un formulaire simple +#### Exemple 1 : un formulaire simple ```html <form action="post"> @@ -49,12 +49,12 @@ Remarquez que cet attribut ne changera pas automatiquement la présentation du c ### Utilisé dans les rôles ARIA -- Combobox ; -- Gridcell ; -- Listbox ; -- Radiogroup ; -- Spinbutton ; -- [Textbox](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox) ; +- Combobox ; +- Gridcell ; +- Listbox ; +- Radiogroup ; +- Spinbutton ; +- [Textbox](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox) ; - Tree. ### Techniques ARIA connexes @@ -63,6 +63,6 @@ Remarquez que cet attribut ne changera pas automatiquement la présentation du c ### Autres ressources -- [Spécification WAI-ARIA pour `aria-required`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-required) ; -- [WAI-ARIA Authoring Practices for forms](http://www.w3.org/TR/wai-aria-practices/#ariaform) (Règles WAI-ARIA de création de formulaires) ; +- [Spécification WAI-ARIA pour `aria-required`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-required) ; +- [WAI-ARIA Authoring Practices for forms](http://www.w3.org/TR/wai-aria-practices/#ariaform) (Règles WAI-ARIA de création de formulaires) ; - [Validation de condition](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) en {{ HTMLVersionInline("5") }}. diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md index c5b15f8d43..7df81da5c0 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md @@ -28,7 +28,7 @@ Si la valeur `aria-valuemax` n’est pas déterminée, ou si `aria-valuemin` n ### Exemples -#### Exemple 1: +#### Exemple 1: L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10. @@ -40,15 +40,15 @@ L’extrait de code ci-dessous montre un curseur basique avec une valeur maximal ### Utilisés avec les rôles ARIA -- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; -- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; -- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; - [spinbutton](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton). ### Techniques ARIA connexes -- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; -- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; - [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext). ### 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 index ed3cec7ca6..b00c0a91da 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md @@ -26,7 +26,7 @@ Si `aria-valuemin` n’est pas inférieure ou égale à la valeur de `aria-value ### Exemples -#### Exemple 1 : +#### Exemple 1 : L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1. @@ -38,15 +38,15 @@ L’extrait de code ci-dessous montre un curseur basique avec une valeur minimal ### Utilisé avec les rôles ARIA -- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; -- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; -- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; - [spinbutton](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton). ### Techniques ARIA connexes -- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; -- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; - [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext). ### 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 index 4cf525f585..ace6b0c1d4 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md @@ -10,7 +10,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu --- L'attribut `aria-valuenow` est utilisé pour définir la valeur courante de l'intervalle d'un composant tel qu'un curseur, un bouton tournant (potentiomètre) ou une barre de progression. Si la valeur courante n'est pas connue, l'attribut `aria-valuenow` ne devrait pas être défini. Si `aria-valuenow` a des valeurs minimale et maximale connues, on devrait définir les attributs [`aria-valuemin`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) et [`aria-valuemax`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute). -Lorsque la valeur rendue ne peut être précisément représentée par un nombre, les développeuses et développeurs **DEVRAIENT** utiliser l'attribut [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) en conjonction avec `aria-valuenow` pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme `"petite"`, `"moyenne"` et `"grande"`. Dans ce cas, les valeurs de `aria-valuenow` peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) sera l'une des chaînes : `"petite"`, `"moyenne"` ou `"grande"`. +Lorsque la valeur rendue ne peut être précisément représentée par un nombre, les développeuses et développeurs **DEVRAIENT** utiliser l'attribut [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) en conjonction avec `aria-valuenow` pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme `"petite"`, `"moyenne"` et `"grande"`. Dans ce cas, les valeurs de `aria-valuenow` peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) sera l'une des chaînes : `"petite"`, `"moyenne"` ou `"grande"`. L'attribut `aria-valuenow` est **obligatoire** pour les rôles [`slider`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role), [`scrollbar`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role) et [`spinbutton`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role). @@ -63,13 +63,13 @@ L'extrait de code ci-dessous affiche un curseur simple avec une valeur courante ## Techniques ARIA connexes -- [aria-valuemax](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute) ; -- [aria-valuemin](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) ; +- [aria-valuemax](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute) ; +- [aria-valuemin](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) ; - [aria-valuetext](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute). ## Compatibilité -À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d'agents utilisateurs et de produits de technologies d'assistance. +À 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.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md index 4dd141cfd7..906733906b 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md @@ -14,7 +14,7 @@ L’attribut `aria-valuetext` est utilisé pour définir un texte alternatif, li 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`, `moyenne`et `grand`, les valeurs de [`aria-valuenow`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de `aria-valuetext` sera l'une des chaînes suivantes : `petite`, `moyenne` ou `grande`. +Par exemple, dans le cas d'un curseur qui peut retourner les valeurs `petite`, `moyenne`et `grand`, les valeurs de [`aria-valuenow`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de `aria-valuetext` sera l'une des chaînes suivantes : `petite`, `moyenne` ou `grande`. ### Valeurs @@ -28,7 +28,7 @@ Si l’attribut `aria-valuetext` est absent, les technologies d’assistance com ### Exemples -#### Exemple 1 : +#### 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`. @@ -38,14 +38,14 @@ L’extrait de code ci-dessous montre un curseur simple de sélection d’un jou aria-valuetext="Dimanche"> ``` -#### Exemples concrets : +#### Exemples concrets : ### Notes ### Utilisé avec les rôles ARIA -- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; -- scrollbar ; +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- scrollbar ; - [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) - spinbutton. diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md index b67c6b261a..ee79d75065 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md @@ -34,17 +34,17 @@ Les technologies d'assistance **doivent** fournit une fonctionnalité permettant ```html <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> + <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> ``` diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md index 79d19d503d..622fc36e75 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md @@ -12,7 +12,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group Cette technique présente l’utilisation du rôle [group](http://www.w3.org/TR/wai-aria/roles#group) et décrit les effets produits sur les navigateurs et les technologies d’assistance. -Le rôle `group` est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une [`region`](http://www.w3.org/TR/wai-aria/roles#region), ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle `group` est ajouté à un élément, , le navigateur émettra un événement `group` accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. +Le rôle `group` est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une [`region`](http://www.w3.org/TR/wai-aria/roles#region), ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle `group` est ajouté à un élément, , le navigateur émettra un événement `group` accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. Un groupe devrait utilisé pour former un ensemble logique d’éléments avec des fonctions connexes, tels que les enfants dans un composant d’arborescence formant un ensemble apparenté dans une hiérarchie, ou une collection d’éléments ayant le même conteneur dans un répertoire. Cependant, lorsqu’on utilise un groupe pour former une liste, les développeurs doivent limiter ses enfants aux éléments [listitem](http://www.w3.org/TR/wai-aria/roles#listitem). Les éléments de groupe devraient être imbriqués. @@ -22,12 +22,12 @@ Si un auteur pense qu’une section est suffisamment importante pour faire parti ### 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 : +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 : -- Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement groupe accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d’écran devraient annoncer le groupe lorsque le focus atteint l’un des contrôles appartenant au groupe, et si [aria-describedby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) a été défini, la description peut être lue. Après cela seulement le contrôle focalisé devrait être annoncé. - Les loupes d’écran devraient agrandir le groupe. @@ -36,7 +36,7 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : Utiliser le rôle `group` avec une arborescence HTML +#### 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. @@ -69,7 +69,7 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc </div> ``` -#### Exemple 2 : Utiliser le rôle `group` avec un menu déroulant HTML +#### 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. @@ -92,7 +92,7 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc </div> ``` -#### Exemples concrets : +#### Exemples concrets : - <http://test.cita.illinois.edu/aria/tree/tree2.php> @@ -110,4 +110,4 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc ### Autres ressources -- Bonnes pratiques ARIA – Répertoires, groupes et zones : [Directories, Groups, and Regions (en)](http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading) +- Bonnes pratiques ARIA – Répertoires, groupes et zones : [Directories, Groups, and Regions (en)](http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md index 08b116042f..aa7ef0900e 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md @@ -18,12 +18,12 @@ L’attribut [tabindex](http://www.w3.org/TR/wai-aria-practices/#focus_tabindex) ### 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 : +Lorsque le rôle `link` est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes : - Présenter l’élément comme un lien à l’API accessibilité du système d’exploitation. - Déclencher un événement lien accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d'écran devraient annoncer le texte du lien ou son label lorsque l'élément avec le rôle `link`reçoit le focus, en plus du fait ce que c'est un lien. Les liens ARIA devraient être intégré dans la fonction « lister les liens » (_List Links_) des lecteurs d'écran de la même façon que les liens ordinaires, et les actions dans cette liste de dialogue, tels que « Activer le lien » ou « Déplacer le lien », devraient se comporter de la meme façon qu'avec des liens ordinaires. - Les loupes d’écran devraient agrandir le lien. @@ -32,7 +32,7 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : **Ajoute le rôle dans le code HTML** +#### 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. @@ -40,7 +40,7 @@ L’extrait de code ci-dessous montre comment le rôle `link` est ajouté dans l <div role=”link”>Un lien</div> ``` -#### **Exemple 2 : Lien accessible créé depuis une application à l'aide d'un \<span>** +#### **Exemple 2 : Lien accessible créé depuis une application à l'aide d'un \<span>** ```html <script type="text/javascript"> @@ -65,7 +65,7 @@ function navigateLink(evt) { </body> ``` -#### Exemples concrets : +#### Exemples concrets : - <http://codetalks.org/source/widgets/link/link.html> - <http://codetalks.org/source/widgets/link/link.sample.html> @@ -84,4 +84,4 @@ Si l'activation du lien déclenche une action mais ne déplace pas le focus du n ### Autres ressources -- Bonnes pratiques ARIA - Rôle `Link` : [#link](http://www.w3.org/TR/wai-aria-practices/#link) +- Bonnes pratiques ARIA - Rôle `Link` : [#link](http://www.w3.org/TR/wai-aria-practices/#link) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md index 350f5f7ebe..6be8ad4c37 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md @@ -18,12 +18,12 @@ Par défaut, les mises à jour ne contiennent que les changements apportés à l ### 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 : +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 : -- Présenter l’élément ayant un rôle de journal à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle de journal à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement journal accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d'écran devraient annoncer les changements intervenus dans le fichier de journalisation lorsque l'utilisateur est inactif, à moins que `aria-live="assertive"` soit défini, dans quel cas l'utilisateur peut être interrompu. - Les loupes d'écran devraient indiquer visuellement la disponibilité d'une mise à jour du fichier de journalisation. @@ -32,7 +32,7 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : Ajout du rôle dans du code HTML +#### 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. @@ -40,7 +40,7 @@ L’extrait de code ci-dessous montre comment le rôle `log` est ajouté directe <div id=”liveregion” class=”region” role=”log”></div> ``` -#### Exemple 2 : Extrait d’un exemple d’application +#### Exemple 2 : Extrait d’un exemple d’application Cet extrait de code crée le journal dans une application de chat AJAX. @@ -57,10 +57,10 @@ Cet extrait de code crée le journal dans une application de chat AJAX. Voir l’[exemple](http://codetalks.org/source/live/chat.html) sur CodeTalks pour plus d’informations. -#### Exemples concrets : +#### Exemples concrets : -- <http://test.cita.illinois.edu/aria/live/live1.php> ; -- <http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/> ; +- <http://test.cita.illinois.edu/aria/live/live1.php> ; +- <http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/> ; - <http://codetalks.org/source/live/chat.html> \[[notes](http://codetalks.org/source/live/chat_notes.html)]. ### Notes @@ -78,4 +78,4 @@ Voir l’[exemple](http://codetalks.org/source/live/chat.html) sur CodeTalks pou ### Autres ressources -- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). +- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md index 9287c5f81e..85210f2168 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md @@ -30,7 +30,7 @@ Une des recommandations d'accessibilité propose que les couleurs ou les représ <i class="icon-user" role="presentation"></i> ``` -#### Exemples concrets : +#### Exemples concrets : Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire. @@ -53,4 +53,4 @@ De plus en plus d'images sont proposées sous la forme de compositions SVG direc ## Autres ressources -Using Aria - 2.9 Use of Role=presentation or Role=none: <https://www.w3.org/TR/using-aria/#presentation> +Using Aria - 2.9 Use of Role=presentation or Role=none: <https://www.w3.org/TR/using-aria/#presentation> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md index 2473934478..4c440daf89 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md @@ -32,21 +32,21 @@ Les lecteurs devraient annoncer les mises à jour de la progression dès qu’el ### Exemples -#### Exemple 1 : barre de progression simple avec pourcentage de progression +#### Exemple 1 : barre de progression simple avec pourcentage de progression ```html <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div> ``` -#### Exemple 2 : Utilisation de `aria-valuetext` +#### Exemple 2 : Utilisation de `aria-valuetext` ```html -<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2 : Copie des fichiers…" aria-valuemax="100"> - Étape 2 : Copie des fichiers… +<div 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 : +#### Exemples concrets : ### Notes diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md index 9612cd75c3..42dd9adcea 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md @@ -12,11 +12,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider Cette technique présente l’utilisation du rôle [slider](http://www.w3.org/TR/wai-aria/roles#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. +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) : +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 | | ---------------------- | --------------------------------------------------------------------------------------------------------------------------- | @@ -30,7 +30,7 @@ Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsq ### Exemples -#### Exemple 1 : Intervalle numérique simple +#### 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. @@ -46,12 +46,12 @@ Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une </div> ``` -#### Exemple 2 : Valeurs texte +#### 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 . +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 . ```html -<div id="slider-label">Jour de la semaine :</div> +<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" @@ -63,7 +63,7 @@ Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémanti </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` : +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` : ```js var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]; @@ -78,10 +78,10 @@ var updateSlider = function (newValue) { ### Attributs ARIA utilisés -- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; -- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; -- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; -- [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) ; +- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; +- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) ; - [aria-orientation](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation). ### 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 index 2c2e2acb40..fa61595df0 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md @@ -20,21 +20,21 @@ Les technologies d’assistance devraient réserver des cellules dans la grille ### 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 : +Lorsque le rôle `status` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément ayant un rôle de `status` à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle de `status` à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement `status` accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : -- Les lecteurs d’écran peuvent fournir une touche spécifique pour annoncer l’état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut `aria-live=”assertive”` soit défini dans quel cas l'utilisateur peut être interrompu ; +- Les lecteurs d’écran peuvent fournir une touche spécifique pour annoncer l’état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut `aria-live=”assertive”` soit défini dans quel cas l'utilisateur peut être interrompu ; - Les loupes d’écran devraient agrandir l’objet d’état. > **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. ### Exemples -#### Exemple 1 : ajout du rôle `status` dans le code HTML +#### 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. @@ -42,7 +42,7 @@ L’extrait de code ci-dessous montre comment le rôle `status` est ajouté dire <p role="status">Vos modifications ont été automatiquement enregistrées.</p> ``` -#### Exemples concrets : +#### Exemples concrets : ### Notes @@ -56,4 +56,4 @@ L’extrait de code ci-dessous montre comment le rôle `status` est ajouté dire ### Autres ressources -- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). +- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). diff --git a/files/fr/web/accessibility/aria/forms/alerts/index.md b/files/fr/web/accessibility/aria/forms/alerts/index.md index fa0f7bcd60..c78b82924c 100644 --- a/files/fr/web/accessibility/aria/forms/alerts/index.md +++ b/files/fr/web/accessibility/aria/forms/alerts/index.md @@ -15,9 +15,9 @@ Vous avez un formulaire – par exemple un formulaire de contact – pour lequel ## Le formulaire -Tout d’abord, veuillez lire la [technique `aria-required`](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement. +Tout d’abord, veuillez lire la [technique `aria-required`](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement. -Voici un formulaire simple : +Voici un formulaire simple : ```html <form method="post" action="post.php"> @@ -42,19 +42,19 @@ Voici un formulaire simple : </form> ``` -Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-) +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 : +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 « \[ ] ». +1. Vérifions que l’adresse électronique pour le nom saisi sont valides. Pour rester simple, nous vérifions si l’adresse contient un symbole « @ », et si le nom saisi contient au moins une espace « \[ ] ». 2. Définissons l’attribut `aria-invalid` du champ et donnons lui la valeur `true`. 3. Notifions à l’utilisateur via une alerte que la valeur saisie n’est pas correcte. Plutôt que d’utiliser la boîte de dialogue envahissante créée par la fonction JavaScript `alert`, nous utiliserons pour ceci un simple composant WAI-ARIA. Cela avertira l’utilisateur, mais le laissera continuer à interagir avec le formulaire sans l’interrompre. 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") }} : +La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} : ```js <script type="application/javascript"> @@ -93,11 +93,11 @@ function checkValidity(aID, aSearchTerm, aMsg) ## 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. +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 : +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. Elle appellera la fonction `addAlert` pour ajouter une alerte avec le message d’erreur donné. @@ -106,17 +106,17 @@ Si le terme recherché est trouvé, l’attribut `aria-invalid` est réinitialis ## 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). +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](http://www.w3.org/TR/xhtml-role/) qui a été tout simplement porté sur HTML pour plus de simplicité. +Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID `alert`. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module [XHTML Role Attribut](http://www.w3.org/TR/xhtml-role/) qui a été tout simplement porté sur HTML pour plus de simplicité. 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é. +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 : +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 : ```html <input name="nom" id="nom" aria-required="true" @@ -128,18 +128,18 @@ Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. **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 : +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. 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. +1. Saisissez uniquement votre prénom dans le champ « Nom ». Lorsque vous changerez de champ avec la touche tabulation, vous entendrez une alerte vous avertissant que vous avez saisi un nom invalide. Vous pourrez alors revenir en arrière et corriger l’erreur. +2. Saisissez une adresse électronique sans le symbole « @ ». Lorsque vous changerez de champ avec la touche tabulation, vous devriez entendre un avertissement vous indiquant que vous avez saisi une adresse électronique invalide. 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") }} ? +- 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 ? +- 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 diff --git a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md index c56dc26119..35202039fd 100644 --- a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md +++ b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md @@ -10,7 +10,7 @@ original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les --- ## 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. +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é. @@ -43,7 +43,7 @@ _Exemple 1. Formulaire basique avec labels_ L’élément HTML {{ HTMLElement("label") }} est approprié pour les éléments liés aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques et utilisent les éléments {{ HTMLElement("div") }} ou {{ HTMLElement("span") }}. [WAI-ARIA](http://www.w3.org/WAI/intro/aria.php), la spécification **Accessible Rich Internet Applications** (Applications Internet Riches Accessibles) de la [Web Accessibility Initiative](http://www.w3.org/WAI/) (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut [`aria-labelledby`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby) dans ces cas de figure. -L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut `aria-labelledby` de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’`id` de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio. +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_ @@ -81,27 +81,27 @@ _Exemple 3. Un bouton décrit par un élément séparé._ ## 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 : +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 : - La propriété [`aria-required`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required) peut être appliquée à un élément de formulaire pour indiquer à une technologie d’assistance qu’il est obligatoire pour compléter le formulaire. - L’état [`aria-invalid`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid) peut être programmatiquement appliquée pour indiquer à une technologie d’assistance quel champ contient des données incorrectes, afin que l’utilisateur sache qu’il a saisi des données invalides. -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). +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._ ```html <form> <div> - <label for="nom">* Nom :</label> + <label for="nom">* Nom :</label> <input type="text" value="nom" id="nom" aria-required="true"/> </div> <div> - <label for="telephone">Téléphone :</label> + <label for="telephone">Téléphone :</label> <input type="text" value="telephone" id="telephone" aria-required="false"/> </div> <div> - <label for="courriel">* Courriel :</label> + <label for="courriel">* Courriel :</label> <input type="text" value="courriel" id="courriel" aria-required="true"/> </div> </form> diff --git a/files/fr/web/accessibility/aria/forms/index.md b/files/fr/web/accessibility/aria/forms/index.md index c6ae6daf13..79c012e9a3 100644 --- a/files/fr/web/accessibility/aria/forms/index.md +++ b/files/fr/web/accessibility/aria/forms/index.md @@ -9,10 +9,10 @@ tags: 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 : +Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web : -- [Indications élémentaires pour les formulaires](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) : ajouter des suggestions et des descriptions pour les champs invalides ou obligatoires -- [Alertes](/fr/Accessibilité/ARIA/formulaires/Alertes) : Utiliser les alertes pour fournir des messages d'erreur de validation côté client +- [Indications élémentaires pour les formulaires](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) : ajouter des suggestions et des descriptions pour les champs invalides ou obligatoires +- [Alertes](/fr/Accessibilité/ARIA/formulaires/Alertes) : Utiliser les alertes pour fournir des messages d'erreur de validation côté client - [Labels multi-options](/fr/Accessibilité/ARIA/formulaires/Labels_multi-options): fournir des labels de formulaire complexes avec un contrôle pour chaque label Voir également l’[article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais)](https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html) (version archivée par archive.org), couvrant pour une bonne part le même sujet. diff --git a/files/fr/web/accessibility/aria/forms/multipart_labels/index.md b/files/fr/web/accessibility/aria/forms/multipart_labels/index.md index 569ba26a3c..6bd4548e40 100644 --- a/files/fr/web/accessibility/aria/forms/multipart_labels/index.md +++ b/files/fr/web/accessibility/aria/forms/multipart_labels/index.md @@ -13,15 +13,15 @@ original_slug: Accessibilité/ARIA/formulaires/Labels_multi-options ### 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. +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. +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 : +Exemple : ```html <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" /> @@ -34,6 +34,6 @@ Exemple : 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 ? +### 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](http://projectcerbera.com/blog/2008/03#day24), simplement en imbriquant l'élément `input` dans le `label`. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de `aria-labelledby` est encore la meilleure approche. +Ben Millard fait remarquer dans un billet que [les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4](http://projectcerbera.com/blog/2008/03#day24), simplement en imbriquant l'élément `input` dans le `label`. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de `aria-labelledby` est encore la meilleure approche. diff --git a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md index 712a870da3..bf833414c4 100644 --- a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md +++ b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md @@ -46,7 +46,7 @@ A faire : ajouter la bon lien d'accessibilité à la table >commentaires, questions et retours Window-Eyes </a >(email) </td> - <td> </td> + <td></td> </tr> <tr> <td> @@ -69,7 +69,7 @@ A faire : ajouter la bon lien d'accessibilité à la table <tr> <td><a href="/User:orca.clock">Orca</a></td> <td><a href="/fr/DOM/File">Déposer un bug Orca</a></td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1" rowspan="5">Navigateurs</td> @@ -79,7 +79,7 @@ A faire : ajouter la bon lien d'accessibilité à la table >Déposer un bug WebKit.org</a > </td> - <td> </td> + <td></td> </tr> <tr> <td>Google Chrome</td> @@ -88,7 +88,7 @@ A faire : ajouter la bon lien d'accessibilité à la table >Déposer un bug Chromium</a > </td> - <td> </td> + <td></td> </tr> <tr> <td><p>Microsoft Internet Explorer</p></td> @@ -134,7 +134,7 @@ A faire : ajouter la bon lien d'accessibilité à la table <tr> <td>Google Web Toolkit (GWT)</td> <td><a href="/fr/DOM/File">Déposer un bug GWT</a></td> - <td> </td> + <td></td> </tr> <tr> <td>Yahoo User Interface</td> diff --git a/files/fr/web/accessibility/aria/index.md b/files/fr/web/accessibility/aria/index.md index 3ca0044907..3df43be28e 100644 --- a/files/fr/web/accessibility/aria/index.md +++ b/files/fr/web/accessibility/aria/index.md @@ -44,7 +44,7 @@ En plus des déclarations _statiques_ dans le contenu HTML, les attributs ARIA p } ``` -> **Note :** ARIA a été inventé après HTML4 et ne valide pas HTML4 ou les variantes XHTML. Toutefois, les gains d'accessibilité l'emportent sur cette invalidité. +> **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. @@ -79,7 +79,7 @@ Il est aussi important de tester l'ARIA écrit avec des technologies d'assistanc - [Régions dynamiques](/fr/docs/Accessibilité/ARIA/Zones_live_ARIA) (_live regions_) - : Les régions dynamiques fournissent des suggestion aux lecteurs d'écran sur la façon dont gérer la modification du contenu d'une page. - [Utiliser les régions dynamiques ARIA afin d'indiquer une modification de contenu](https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm) - - : Un rapide résumé des régions interactives par les concepteurs du lecteur d'écran JAWS. Les régions dynamiques sont également prises en charge par NVDA pour Firefox et par VoiceOver avec Safari. + - : 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 diff --git a/files/fr/web/accessibility/aria/roles/alert_role/index.md b/files/fr/web/accessibility/aria/roles/alert_role/index.md index 1db355caec..5414e5fa84 100644 --- a/files/fr/web/accessibility/aria/roles/alert_role/index.md +++ b/files/fr/web/accessibility/aria/roles/alert_role/index.md @@ -15,29 +15,29 @@ Cette technique présente l’utilisation du rôle [`alert` (en)](http://www.w3. 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 : -- Une valeur non valide a été saisie dans un champ de formulaire ; -- La session d’un utilisateur est sur le point d’expirer ; +- Une valeur non valide a été saisie dans un champ de formulaire ; +- La session d’un utilisateur est sur le point d’expirer ; - La connexion au serveur a été interrompue, les modifications locales ne seront pas sauvegardées. 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 : +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 : -- Présenter l’élément ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement d'alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence : -- Les lecteurs d’écran peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ; +- Les lecteurs d’écran peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ; - Les loupes ou agrandisseurs d’écran peuvent indiquer qu’une alerte est survenue et quel en est le texte. > **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 +#### 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. @@ -45,7 +45,7 @@ L’extrait de code ci-dessous montre comment le rôle `alert` est directement a <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` +#### 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. @@ -58,15 +58,15 @@ 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* : +**Note :** le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que *jQuery* : ```js $("<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 +#### 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 : +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 : ```html <p id="formInstruction">Vous devez cocher au moins trois options</p> @@ -77,16 +77,16 @@ Parfois, il peut être utile d’ajouter un rôle `alert` à un élément déjà document.getElementById("formInstruction").setAttribute("role", "alert"); ``` -#### Exemple 4 : Rendre visible un élément avec le rôle `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. +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. +**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. ```css .hidden { - display:none; - } + display:none; + } ``` ```html @@ -100,8 +100,8 @@ document.getElementById("expirationWarning").className = ""; ### Notes -- L’utilisation du rôle `alert` sur un élément implique que cet élément a l’attribut `aria-live="assertive"` ; -- Le rôle `alert` ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle `alert` ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ; +- L’utilisation du rôle `alert` sur un élément implique que cet élément a l’attribut `aria-live="assertive"` ; +- Le rôle `alert` ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle `alert` ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ; - Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l’utilisateur de rectifier une erreur, ou un bouton `OK` pour annuler l’alerte – le rôle [`alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) est préférable. ### Attributs ARIA utilisés @@ -110,9 +110,9 @@ document.getElementById("expirationWarning").className = ""; ### Techniques ARIA connexes -- [Utiliser le rôle `alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) ; +- [Utiliser le rôle `alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) ; - [Utiliser la propriété `aria-invalid`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_la_propriété_aria-invalid). ### Autres ressources -- Guide des bonnes pratiques ARIA - Rôle `Alert` : [http://www.w3.org/TR/wai-aria-practices/#alert (en)](http://www.w3.org/TR/wai-aria-practices/#alert) +- Guide des bonnes pratiques ARIA - Rôle `Alert` : [http://www.w3.org/TR/wai-aria-practices/#alert (en)](http://www.w3.org/TR/wai-aria-practices/#alert) diff --git a/files/fr/web/accessibility/aria/roles/banner_role/index.md b/files/fr/web/accessibility/aria/roles/banner_role/index.md index 5b5d1c59ee..e0d12909b2 100644 --- a/files/fr/web/accessibility/aria/roles/banner_role/index.md +++ b/files/fr/web/accessibility/aria/roles/banner_role/index.md @@ -13,7 +13,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner Cette technique présente l’utilisation du rôle [`banner` (en)](https://www.w3.org/TR/wai-aria/roles#banner). -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. +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. @@ -25,15 +25,15 @@ Une page web ne doit pas contenir plus d'un rôle `banner`, mais il est tout à ### Exemples -#### Une zone d'entête typique de site +#### Une zone d'entête typique de site ```html <header role="banner"> - <p><img src="logo.png" alt="Nom du site"></p> - <p>Description du site</p> - <div role="search"> - ... - </div> + <p><img src="logo.png" alt="Nom du site"></p> + <p>Description du site</p> + <div role="search"> + ... + </div> </header> ``` diff --git a/files/fr/web/accessibility/aria/roles/checkbox_role/index.md b/files/fr/web/accessibility/aria/roles/checkbox_role/index.md index 0ce97c7f82..128a882ddb 100644 --- a/files/fr/web/accessibility/aria/roles/checkbox_role/index.md +++ b/files/fr/web/accessibility/aria/roles/checkbox_role/index.md @@ -12,11 +12,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox Cette technique présente l’utilisation du rôle [checkbox](http://www.w3.org/TR/wai-aria/roles#checkbox). -Le rôle `checkbox` est utilisé pour des contrôles interactifs à cocher. Si un élément utilise `role="checkbox",` il est obligatoire pour cet élément d’avoir également un attribut `aria-checked` qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif `checkbox` ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle `role=checkbox` peut présenter trois états pour l'attribut `aria-checked` : +Le rôle `checkbox` est utilisé pour des contrôles interactifs à cocher. Si un élément utilise `role="checkbox",` il est obligatoire pour cet élément d’avoir également un attribut `aria-checked` qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif `checkbox` ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle `role=checkbox` peut présenter trois états pour l'attribut `aria-checked` : -- `aria-checked="true"` : la case est cochée ; -- `aria-checked="false"` : la case est décochée ; -- `aria-checked="mixed"` : la case est partiellement cochée. +- `aria-checked="true"` : la case est cochée ; +- `aria-checked="false"` : la case est décochée ; +- `aria-checked="mixed"` : la case est partiellement cochée. Le développeur doit modifier dynamiquement la valeur de l’attribut `aria-checked` lorsque la case est cochée. @@ -24,12 +24,12 @@ Comme une case à cocher est un contrôle interactif, elle doit pouvoir recevoir ### 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 : +Lorsque le rôle `checkbox` est ajouté à un élément, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément comme ayant un rôle de case à cocher à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément comme ayant un rôle de case à cocher à l’API d’accessibilité du système d’exploitation ; - Lorsque la valeur de l’attribut `aria-checked` change, envoyer un événement accessible de changement d’état. -Les technologies d’assistance doivent faire la chose suivante : +Les technologies d’assistance doivent faire la chose suivante : - Les lecteurs d’écran devraient annoncer l’élément comme une case à cocher, et, éventuellement, fournir des instructions sur les façons de l’activer. @@ -37,14 +37,14 @@ Les technologies d’assistance doivent faire la chose suivante : ### Exemples -#### Exemple 1 : Ajout du rôle ARIA `checkbox` +#### Exemple 1 : Ajout du rôle ARIA `checkbox` ```html <span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span> <label for="chk1">Enregistrer mes préférences</label> ``` -#### Exemples concrets : +#### Exemples concrets : - <http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php> diff --git a/files/fr/web/accessibility/aria/roles/dialog_role/index.md b/files/fr/web/accessibility/aria/roles/dialog_role/index.md index 14ed9da8d9..166585fe59 100644 --- a/files/fr/web/accessibility/aria/roles/dialog_role/index.md +++ b/files/fr/web/accessibility/aria/roles/dialog_role/index.md @@ -15,9 +15,9 @@ Cette technique présente l’utilisation du rôle [`dialog (en)`](http://www.w3 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 : +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 : -- La boîte de dialogue doit être correctement labélisée ; +- La boîte de dialogue doit être correctement labélisée ; - Le focus clavier doit être géré correctement. Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites. @@ -26,7 +26,7 @@ Les sections ci-dessous décrivent comment ces deux exigences peuvent être sati 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 : +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 : ```html <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> @@ -44,15 +44,15 @@ Si une boîte de dialogue a une barre de titre visible, le texte de cette barre Une boîte de dialogue a des exigences particulières concernant la façon dont le focus clavier doit être géré : -- Les boîtes de dialogue doivent avoir au moins un contrôle focalisable. Pour de nombreuses boîtes de dialogues, ce contrôle sera un bouton « Fermer », « OK » ou « Annuler. » En plus de cela, les boîtes de dialogue peuvent contenir n’importe quelle quantité d’éléments focalisables, même des formulaires ou d'autres composants conteneurs comme des onglets. -- Quand la boîte de dialogue s’affiche à l’écran, le focus clavier devrait être placé sur le contrôle focalisable par défaut de la boîte de dialogue. Ce contrôle dépend de la fonction des boîtes de dialogue. Pour les boîtes de dialogue ne fournissant qu’un texte simple, ce pourra être un bouton « OK ». Pour les boîtes de dialogue contenant un formulaire, ce pourra être le premier champ à renseigner du formulaire. +- Les boîtes de dialogue doivent avoir au moins un contrôle focalisable. Pour de nombreuses boîtes de dialogues, ce contrôle sera un bouton « Fermer », « OK » ou « Annuler. » En plus de cela, les boîtes de dialogue peuvent contenir n’importe quelle quantité d’éléments focalisables, même des formulaires ou d'autres composants conteneurs comme des onglets. +- Quand la boîte de dialogue s’affiche à l’écran, le focus clavier devrait être placé sur le contrôle focalisable par défaut de la boîte de dialogue. Ce contrôle dépend de la fonction des boîtes de dialogue. Pour les boîtes de dialogue ne fournissant qu’un texte simple, ce pourra être un bouton « OK ». Pour les boîtes de dialogue contenant un formulaire, ce pourra être le premier champ à renseigner du formulaire. - Pour la plupart des boîtes de dialogue, le comportement attendu est que l’ordre de tabulation de la boîte _tourne_, c’est-à-dire que le premier élément focalisable sera focalisé après que le dernier élément focalisable de la boîte de dialogue aura été atteint lorsque l’utilisateur tabule. En d’autres termes, l’ordre de tabulation doit être contenu par la boîte de dialogue. - Si la boîte de dialogue peut être déplacée ou redimensionnée, assurez-vous que ces actions peuvent être exécutées par les utilisateurs de clavier tout comme les utilisateurs de souris. De la même façon, si une boîte de dialogue fournit certaines fonctionnalités, comme des barres d’outils ou des menus contextuels, celles-ci doivent également être accessibles et pouvoir être actionnées par les utilisateurs de clavier. - Les boîtes de dialogue peuvent être modales ou non modales. Lorsqu’une boîte de dialogue _modale_ s’affiche à l’écran, il n’est pas possible d’interagir avec le reste du contenu de la page. En d’autres termes, l’UI principale de l’application ou le contenu de la page est considéré comme temporairement désactivé tant que la boîte de dialogue modale est affichée. Pour les boîtes de dialogue _non modales_ il est toujours possible d’interagir avec du contenu extérieur à la boîte lorsqu’elle est affichée. Pour les boîtes de dialogue non modales, il y devra toujours y avoir un raccourci clavier global permettant de déplacer le focus entre les boîtes de dialogue ouvertes et la page principale. Pour plus d’informations, lisez le guide [Gérer les dialogues modaux et non modaux](/fr/docs/ARIA/Guides_ARIA/Gérer_les_dialogues_modaux_et_non_modaux). ### 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 le rôle `dialog` est utilisé, l’agent utilisateur doit faire la chose suivante : - Présenter l’élément comme une boîte de dialogue à l’API accessibilité du système d’exploitation. @@ -62,7 +62,7 @@ Lorsque la boîte de dialogue est correctement labélisée et que le focus est d ### Exemples -#### Exemple 1 : une boîte de dialogue contenant un formulaire +#### Exemple 1 : une boîte de dialogue contenant un formulaire ```html <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> @@ -98,9 +98,9 @@ Lorsque la boîte de dialogue est correctement labélisée et que le focus est d </div> ``` -#### Exemple 2 : une boîte de dialogue basée sur un `Fieldset` comme contenu alternatif +#### Exemple 2 : une boîte de dialogue basée sur un `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 : +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 : ```html <fieldset role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> @@ -113,13 +113,13 @@ Pour prendre en charge les navigateurs ou les produits de technologies d’assis </fieldset> ``` -#### Exemples concrets : +#### Exemples concrets : - [jQuery-UI Dialog](http://jqueryui.com/demos/dialog/) ### 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. +> **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 diff --git a/files/fr/web/accessibility/aria/roles/listbox_role/index.md b/files/fr/web/accessibility/aria/roles/listbox_role/index.md index a454806a8c..3da2c229d6 100644 --- a/files/fr/web/accessibility/aria/roles/listbox_role/index.md +++ b/files/fr/web/accessibility/aria/roles/listbox_role/index.md @@ -20,12 +20,12 @@ Lorsqu’on navigue entre les différents éléments d’une liste, le premier ### 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 : +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 : -- Présenter l’élément comme ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation. Alternativement, s’il est un enfant de ou s’il appartient à une boîte combinée [combobox](http://www.w3.org/TR/wai-aria/roles#combobox), présenter l’élément comme un [menu](http://www.w3.org/TR/wai-aria/roles#menu) ; +- Présenter l’élément comme ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation. Alternativement, s’il est un enfant de ou s’il appartient à une boîte combinée [combobox](http://www.w3.org/TR/wai-aria/roles#combobox), présenter l’élément comme un [menu](http://www.w3.org/TR/wai-aria/roles#menu) ; - Déclencher un événement liste (ou dans les cas spéciaux, un événement menu) accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d’écran devraient annoncer le label et le rôle de la boîte liste lorsqu’elle obtient le focus. Si un élément de la liste obtient le focus, il devrait être annoncé après, suivi par une indication de la position de l’élément dans la liste si le lecteur d’écran prend en charge cette fonction. Lorsque le focus se déplace dans la liste, le lecteur d’écran devrait annoncer les éléments de la liste appropriés. - Les loupes d’écran devraient agrandir la boîte liste. @@ -34,9 +34,9 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : une liste de sélection simple qui utilise l’attribut `aria-activedescendant` +#### Exemple 1 : une liste de sélection simple qui utilise l’attribut `aria-activedescendant` -L’extrait de code ci-dessous montre comment le rôle `listbox` est ajouté directement dans le code source HTML : +L’extrait de code ci-dessous montre comment le rôle `listbox` est ajouté directement dans le code source HTML : ```html <div role="listbox" tabindex="0" id="listbox1" onclick="return listItemClick(event);" @@ -53,7 +53,7 @@ L’extrait de code ci-dessous montre comment le rôle `listbox` est ajouté dir Voir l’[exemple](http://codetalks.org/source/widgets/listbox/listbox.html) CodeTalks pour plus de détails. -#### Exemples concrets : +#### Exemples concrets : - <https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox.html> @@ -75,5 +75,5 @@ Voir l’[exemple](http://codetalks.org/source/widgets/listbox/listbox.html) Cod ### Autres ressources -- Bonnes pratiques ARIA – Listbox : [#listbox_div](http://www.w3.org/TR/wai-aria-practices/#listbox_div) -- Le modèle de rôles ARIA – Listbox : [#listbox](http://www.w3.org/TR/wai-aria/roles#listbox) +- Bonnes pratiques ARIA – Listbox : [#listbox_div](http://www.w3.org/TR/wai-aria-practices/#listbox_div) +- Le modèle de rôles ARIA – Listbox : [#listbox](http://www.w3.org/TR/wai-aria/roles#listbox) diff --git a/files/fr/web/accessibility/aria/roles/textbox_role/index.md b/files/fr/web/accessibility/aria/roles/textbox_role/index.md index ce0aeb8362..09bad3f3e9 100644 --- a/files/fr/web/accessibility/aria/roles/textbox_role/index.md +++ b/files/fr/web/accessibility/aria/roles/textbox_role/index.md @@ -20,21 +20,21 @@ Lorsqu’un champ texte est en lecture seule, cela devrait être indiqué en uti ### 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 : +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 : -- Présenter l’élément comme ayant un rôle `textbox` à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément comme ayant un rôle `textbox` à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement `textbox` accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : -- Les lecteurs d’écran devraient annoncer son label et son rôle lorsque le focus est sur la boite de texte. Si elle contient également du contenu, il devrait être annoncé comme avec une boite de texte régulière ; +- Les lecteurs d’écran devraient annoncer son label et son rôle lorsque le focus est sur la boite de texte. Si elle contient également du contenu, il devrait être annoncé comme avec une boite de texte régulière ; - Les loupes d’écran devraient agrandir la boite de texte. > **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>` +#### 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. @@ -42,7 +42,7 @@ L’extrait de code ci-dessous montre comment le rôle `textbox` est ajouté dir <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>` +#### 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. @@ -54,11 +54,11 @@ L’extrait de code ci-dessous montre comment le rôle `textbox` est ajouté dir </textarea> ``` -#### Exemples concrets : +#### Exemples concrets : ### Notes -- Les développeurs doivent connaitre la distinction qui existe entre les champs de saisie monolignes et les champs de saisie multilignes lorsqu’ils créent un champ ; +- Les développeurs doivent connaitre la distinction qui existe entre les champs de saisie monolignes et les champs de saisie multilignes lorsqu’ils créent un champ ; - Les champs en lecture seule devraient être indiqués avec l’attribut `aria-readonly`. ### Attributs ARIA utilisés diff --git a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md index c9815e24a0..dbe36309b0 100644 --- a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md +++ b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md @@ -9,7 +9,7 @@ tags: translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA --- -## Qu’est-ce qu’ARIA ? +## Qu’est-ce qu’ARIA ? WAI-ARIA est la spécification [Applications Internet Riches Accessibles](http://www.w3.org/WAI/intro/aria.php) de la [Web Accessibility Initiative](http://www.w3.org/WAI/) (Initiative pour l’accessibilité du Web) du [W3C](http://www.w3.org/). ARIA fournit des moyens de rendre plus accessible les applications Web et les composants dynamiques à une plus grande part des utilisateurs, y compris ceux utilisant des technologies d’assistance telles que les lecteurs d’écrans ou les agrandisseurs. @@ -17,30 +17,30 @@ ARIA fournit des éléments sémantiques additionnels afin de décrire les rôle Pour plus d’informations sur la création de composants dynamiques accessibles avec ARIA, lire l’article [Aperçu d’applications Web et de composants dynamiques accessibles](/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles). -## Où ARIA est-il pris en charge ? +## Où ARIA est-il pris en charge ? ARIA est une spécification relativement récente, mais son implémentation se développe. Une large variété de navigateurs communément utilisés, de technologies d’assistance, de kits de développements JavaScript et d’applications prennent maintenant en charge ARIA. Toutefois, de nombreux utilisateurs peuvent encore utiliser d’anciennes versions de ces technologies. Vous devrez sans doute considérer l’implémentation d’ARIA à l’aide des techniques d’améliorations progressives – telle qu’ajouter ARIA en utilisant JavaScript, mais pas directement dans votre balisage – afin de prendre en charge de manière plus élégante les vieux navigateurs et les anciennes technologies d’assistance. ### Navigateurs -ARIA est pris en charge dans les navigateurs suivants : +ARIA est pris en charge dans les navigateurs suivants : | Navigateur | Version minimale | Notes | | ------------------------------------------------------------------------------------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | Firefox | 3.0+ | Fonctionne avec NVDA, JAWS 10+ et Orca | | [Chrome](http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support) | Dernière | Prise en charge encore expérimentale des lecteurs d’écran jusqu’à Chrome 15 | | Safari | 4+ | La prise en charge par Safari 5 est grandement améliorée. La prise en charge des zones live requiert Safari 5 avec VoiceOver sur iOS5 ou OS X Lion | -| [Opera](http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/) | 9.5+ | Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ? | +| [Opera](http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/) | 9.5+ | Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ? | | [Internet Explorer](http://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx) | 8+ | Fonctionne avec JAWS 10+ et NVDA. Pas de prise en charge des zones live dans NVDA. La prise en charge dans IE9 est grandement améliorée. | -Dans certains cas, les versions les plus jeunes peuvent prendre en charge certaines fonctionnalités d’ARIA. Des tableaux de compatibilité des navigateurs peuvent être consultés depuis différentes sources : +Dans certains cas, les versions les plus jeunes peuvent prendre en charge certaines fonctionnalités d’ARIA. Des tableaux de compatibilité des navigateurs peuvent être consultés depuis différentes sources : - [caniuse.com](http://caniuse.com/wai-aria) - [Le groupe Paciello](http://www.paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF-update2.html) ### Technologies d’assistance -Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont : +Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont : | Technologies d’assistance | Version minimale pour un ARIA de base | Version minimale pour la prise en charge des zones live et des alertes | | ------------------------- | --------------------------------------------------------- | -------------------------------------------------------------------------------- | @@ -51,29 +51,29 @@ Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’ent | Window-Eyes | 7 | Pas de prise en charge des zones live | | ZoomText | ? | Pas de prise en charge des zones live | -Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes. +Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes. -For notes on JAWS support for ARIA as of JAWS 10, lire cet article du *groupe Paciello* : [JAWS Support for ARIA](http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/). +For notes on JAWS support for ARIA as of JAWS 10, lire cet article du *groupe Paciello* : [JAWS Support for ARIA](http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/). ### Kits de développement JavaScript -Les rôles, les états et les propriétés ARIA ont été ajoutées à de nombreux kits de développements d’interfaces utilisateur JavaScript, y compris : +Les rôles, les états et les propriétés ARIA ont été ajoutées à de nombreux kits de développements d’interfaces utilisateur JavaScript, y compris : - Dojo/Dijit - jQuery UI - Fluid Infusion - Google Closure -- Google Web Toolkit -- BBC Glow -- Yahoo! User Interface Library (YUI) +- Google Web Toolkit +- BBC Glow +- Yahoo! User Interface Library (YUI) -Pour plus d’informations sur l’accessibilité des kits de développement JavaScript : +Pour plus d’informations sur l’accessibilité des kits de développement JavaScript : -- [WAI-ARIA Implementation in JavaScript UI Libraries](http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/) (Implémentation de WAI-ARIA dans les bibliothèques JavaScript d’UI) de Steve Faulkner +- [WAI-ARIA Implementation in JavaScript UI Libraries](http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/) (Implémentation de WAI-ARIA dans les bibliothèques JavaScript d’UI) de Steve Faulkner -## Pouvez-vous me montrez un exemple d’ARIA en action ? +## Pouvez-vous me montrez un exemple d’ARIA en action ? -Voici le code HTML pour une barre de progression : +Voici le code HTML pour une barre de progression : ```html <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> @@ -81,13 +81,13 @@ Voici le code HTML pour une barre de progression : 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 : +Plutôt que de les intégrer directement dans le balisage, les attributs ARIA sont généralement ajoutés à l’élément et dynamiquement actualisés à l’aide de code JavaScript tel que celui-ci : ```js -// Trouver le <div> de la barre de progression dans le DOM. +// 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 , +// 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); @@ -100,7 +100,7 @@ function updateProgress(percentComplete) { } ``` -## L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ? +## L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ? 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. @@ -114,15 +114,15 @@ Non, ARIA n’est rendu disponible que pour les APIs des technologies d’assist } ``` -## Qu'en est-il de la validation ? +## 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](http://validator.w3.org/). -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. +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 ? +## 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](http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/). @@ -130,7 +130,7 @@ HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entr 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 : +Voici un exemple de code utilisé pour une barre de progression en HTML5 : ```html <!DOCTYPE html> @@ -139,11 +139,11 @@ Voici un exemple de code utilisé pour une barre de progression en HTML5 : <body> <progress id="progress-bar" value="0" max="100">0% complété(s)</progress> <button id="update-button">Actualiser</button> - </body> + </body> </html> ``` -… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens : +… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens : ```js var progressBar = document.getElementById("progress-bar"); @@ -175,7 +175,7 @@ function updateProgress(percentComplete) { } function initDemo() { - setupProgress(); // Setup the progress bar. + 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) { @@ -186,44 +186,44 @@ function initDemo() { initDemo(); ``` -## Comment fonctionnent les technologies d’assistance ? +## 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 ? +## 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 outils d’inspection et de débogage pour vous aider à tester le comportement d’ARIA : - _Object Inspector_ sur Windows -- _Accessibility Inspector_ sur Mac OS X +- _Accessibility Inspector_ sur Mac OS X - _AccProbe_ sur Linux - _Inspecteur DOM_ de Firebug - L’[_Inspecteur d’accessibilité_ de Firebug](http://code.google.com/p/ainspector/) -Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve : +Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve : - [Orca](http://live.gnome.org/Orca) pour Linux - [NVDA](http://www.nvda-project.org/) pour Windows -- [VoiceOver](http://www.apple.com/accessibility/voiceover/) est intégré à Mac OS X +- [VoiceOver](http://www.apple.com/accessibility/voiceover/) est intégré à Mac OS X -Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête : +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. 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é. -Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA : +Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA : - [Yahoo!'s ARIA bookmarklets](http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html) - [simple accessibility evaluation techniques](http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol) du _Fluid Project_ (techniques simples d’évaluation de l’accessibilité) -## Où se tiennent les discussion concernant ARIA ? +## Où se tiennent les discussion concernant ARIA ? - [Liste de diffusion Wai-xtech](http://lists.w3.org/Archives/Public/wai-xtech/) – Discussions sur les spécification d’ARIA. - [groupe Google Free-ARIA](http://groups.google.com/group/free-aria) – pour les développeurs et les utilisateurs d’outils et de ressources libres. -## Où peut-on en apprendre davantage à propos d’ARIA ? +## Où peut-on en apprendre davantage à propos d’ARIA ? - [Aperçu d’applications Web et de composants dynamiques accessibles](/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles) - [Formulaires accessibles](/fr/docs/Accessibilité/Formulaires_accessibles) diff --git a/files/fr/web/accessibility/community/index.md b/files/fr/web/accessibility/community/index.md index 28cadcb774..b103d1dcc2 100644 --- a/files/fr/web/accessibility/community/index.md +++ b/files/fr/web/accessibility/community/index.md @@ -8,7 +8,7 @@ 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. +Si vous connaissez d'autres, ressources utiles n'hésitez pas à ajouter un lien ci-dessous. - [Newsgroup Mozilla Accessibility](news://news.mozilla.org/netscape.public.mozilla.accessibility) - [Liste de discussion du groupe WAI](http://www.w3.org/WAI/IG/) diff --git a/files/fr/web/accessibility/index.md b/files/fr/web/accessibility/index.md index fe021c34d4..f80a84387a 100644 --- a/files/fr/web/accessibility/index.md +++ b/files/fr/web/accessibility/index.md @@ -11,9 +11,9 @@ 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](http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web)) +« **L'accessibilité du web** signifie que les personnes handicapées peuvent l'utiliser. Plus spécifiquement, elle signifie que ces gens peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer. L'accessibilité du web bénéficie également à d'autres, notamment les personnes âgées ayant des capacités diminuées dues au vieillissement. » ( [L'accessibilité du Web définie dans Wikipédia](http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web)) -« **L'accessibilité numérique est la mise à la disposition de tous les individus** – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » [W3C Accessibility](http://www.w3.org/standards/webdesign/accessibility) +« **L'accessibilité numérique est la mise à la disposition de tous les individus** – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » [W3C Accessibility](http://www.w3.org/standards/webdesign/accessibility) ## Tutoriels clefs @@ -28,7 +28,7 @@ La documentation MDN [Accessibilité](/fr/docs/Accessibilit%C3%A9) contient des - [Les bases de WAI-ARIA](/fr/docs/Apprendre/a11y/WAI-ARIA_basics) - : Dans la continuité de l'article précédent, créer des interactions d'interface utilisateur (UX) complexes impliquant un HTML non sémantique et un contenu dynamique mis à jour par JavaScript peut être parfois compliqué. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant d'autres sémantiques que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs d’être informés correctement. Ici, nous allons montrer comment l'utiliser à un niveau de base pour améliorer l'accessibilité. - [Multimédia accessible](/fr/docs/Apprendre/a11y/Multimedia) - - : Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire. + - : Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire. - [Accessibilité sur mobile](/fr/docs/Apprendre/a11y/Mobile) - : Étant donné que l'accès au Web sur les appareils mobiles est très populaire, et que les plates‑formes populaires telles que iOS et Android disposent d'outils d'accessibilité à part entière, il est important de considérer l'accessibilité de votre contenu Web sur ces plates‑formes. Cet article examine les considérations d'accessibilité spécifiques aux mobiles. diff --git a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md index 51dce2b52b..375d170948 100644 --- a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md +++ b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md @@ -8,21 +8,21 @@ tags: 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 +### Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier Un nombre croissant d'applications Web utilise [JavaScript](fr/JavaScript) pour imiter des contrôles ( _widgets_ ) applicatifs comme des menus, des vues arborescentes, des champs de texte enrichis et des panneaux à onglets. Les développeurs Web innovent constamment et les applications futures contiendront des éléments complexes et interactifs comme des feuilles de calcul, des calendriers, des graphes organisationnels et plus encore. Jusqu'à présent, les développeurs désirant rendre leurs contrôles basés sur des `<div>` et autres `<span>` stylés ne disposaient pas des techniques nécessaires. Pourtant, l'accessibilité au clavier fait partie des nécessités dont tout développeur Web devrait tenir compte. -Prenons un exemple concret : la plupart des menus [DHTML](fr/DHTML) ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément `<a>`). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets. +Prenons un exemple concret : la plupart des menus [DHTML](fr/DHTML) ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément `<a>`). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets. -Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : [ARIA : Applications riches Internet accessibles](fr/ARIA/Applications_riches_Internet_accessibles). +Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : [ARIA : Applications riches Internet accessibles](fr/ARIA/Applications_riches_Internet_accessibles). -### La solution : modifier le comportement standard de `tabindex` +### La solution : modifier le comportement standard de `tabindex` Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut `tabindex` pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le [système d'IE pour `tabindex`](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/tabindex.asp), il devient possible de permettre aux contrôles [DHTML](fr/DHTML), déjà accessibles au clavier dans IE, de l'être également dans Firefox 1.5. Les règles doivent subir quelques petites entorses afin de permettre aux auteurs de rendre leurs contrôles personnalisés accessibles. -Le tableau qui suit décrit le nouveau comportement de `tabindex` : +Le tableau qui suit décrit le nouveau comportement de `tabindex` : | Attribut `tabindex` | Focus disponible à la souris ou par JavaScript via `element.focus()` | Navigable avec tabulation | | ------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -55,7 +55,7 @@ Ceci peut être utile à réaliser si un contrôle personnalisé devient actif o #### 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 : +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 @@ -73,7 +73,7 @@ IE ne déclenchera pas les évènements `keypress` pour les touches non alphanum #### 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 : +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();"> diff --git a/files/fr/web/accessibility/understanding_wcag/index.md b/files/fr/web/accessibility/understanding_wcag/index.md index ba30a69747..1ea3245c6a 100644 --- a/files/fr/web/accessibility/understanding_wcag/index.md +++ b/files/fr/web/accessibility/understanding_wcag/index.md @@ -41,8 +41,8 @@ WCAG 2.1 comprend: - En savoir plus sur WCAG 2.1: - - Deque: [WCAG 2.1: Quelle est la suite des directives d'accessibilité](https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/) - - TPG: [Directives pour l'Accessibilité des Contenus Web (WCAG) 2.1](https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/) + - Deque: [WCAG 2.1: Quelle est la suite des directives d'accessibilité](https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/) + - TPG: [Directives pour l'Accessibilité des Contenus Web (WCAG) 2.1](https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/) ## Statut juridique diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md index 819174941c..fd481ec1ab 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md @@ -101,7 +101,7 @@ div { } .mauvais { - background-color: #400064; + background-color: #400064; } ``` diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/index.md b/files/fr/web/accessibility/understanding_wcag/perceivable/index.md index 2802c59a02..f1ce8f89f6 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/index.md +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/index.md @@ -16,7 +16,7 @@ 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.](https://www.w3.org/TR/WCAG21/#perceivable) +> **Note :** To read the W3C definitions for Perceivable and its guidelines and success criteria, see [Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.](https://www.w3.org/TR/WCAG21/#perceivable) ## Guideline 1.1 — Providing text alternatives for non-text content @@ -32,7 +32,7 @@ The key here is that text can be converted to other forms people with disabiliti </thead> <tbody> <tr> - <td colspan="1" rowspan="5">1.1.1 Provide text equivalents (A)</td> + <td colspan="1" rowspan="5">1.1.1 Provide text equivalents (A)</td> <td> All images that convey meaningful content should be given suitable alternative text. @@ -70,7 +70,7 @@ The key here is that text can be converted to other forms people with disabiliti </td> <td> <p> - See <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives" + See <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives" >Text alternatives</a > for static caption options, and @@ -111,7 +111,7 @@ The key here is that text can be converted to other forms people with disabiliti Decorative images should be implemented using CSS background images (see <a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a - >). If you have to include an image via an + >). If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (<code>alt=""</code>), otherwise screenreaders may try to read out the filepath, etc. @@ -150,7 +150,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als video-only media (i.e. silent video). </td> <td> - See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" >Audio transcripts</a > for transcript information. No audio description tutorial available as @@ -193,7 +193,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als full content from the audio alone. </td> <td> - See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" >Audio transcripts</a > for transcript information. No audio description tutorial available as @@ -206,7 +206,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.) </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -217,7 +217,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als where the existing audio does not convey the full meaning expressed by the video. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -227,7 +227,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als An equivalent sign language video should be provided for any prerecorded content containing audio. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -240,7 +240,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als should be provided that includes inserted pauses (and audio descriptions). </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -253,7 +253,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als content. </td> <td> - See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" >Audio transcripts</a > for transcript information. @@ -268,7 +268,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als the content. </td> <td> - See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" >Audio transcripts</a > for transcript information. @@ -294,7 +294,7 @@ This guideline refers to the ability of content to be consumed by users in multi <td colspan="1" rowspan="1">1.3.1 Info and relationships (A)</td> <td> <p> - Any content structure — or visual relationship made between content — + Any content structure — or visual relationship made between content — can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are: </p> @@ -313,7 +313,7 @@ This guideline refers to the ability of content to be consumed by users in multi inferred even if you can't see the image. </li> <li> - Lists — if the order of list items is important, and ordered list + Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}). </li> </ul> @@ -390,7 +390,7 @@ This guideline refers to the ability of content to be consumed by users in multi </p> </div> </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -410,26 +410,25 @@ This guideline refers to the ability of content to be consumed by users in multi <p> <a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html" >Understanding Orientation</a - > + > </p> </td> </tr> <tr> <td colspan="1"> - 1.3.5 Identify Input Purpose (AA) <em + 1.3.5 Identify Input Purpose (AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em > </td> <td> - <p> </p> <p> Follow the list of <a href="https://www.w3.org/TR/WCAG21/#input-purposes" >53 input fields</a > - to programmatically identify the purpose of a field. + to programmatically identify the purpose of a field. </p> </td> <td> @@ -441,7 +440,7 @@ This guideline refers to the ability of content to be consumed by users in multi </tr> <tr> <td colspan="1"> - 1.3.6 Identify Purpose (AAA) <em + 1.3.6 Identify Purpose (AAA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -547,7 +546,7 @@ This guideline relates to making sure core content is easy to discernable from b This means that designs should be responsive, so that when the text size is increased, the content is still accessible. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1">1.4.5 Images of text (AA)</td> @@ -556,7 +555,7 @@ This guideline relates to making sure core content is easy to discernable from b job. For example, if an image is mostly textual, it could be represented using text as well as images. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1">1.4.6 Enhanced contrast (AAA)</td> @@ -587,7 +586,7 @@ This guideline relates to making sure core content is easy to discernable from b Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1">1.4.8 Visual presentation (AAA)</td> @@ -615,7 +614,7 @@ This guideline relates to making sure core content is easy to discernable from b </li> </ul> </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1">1.4.9 Images of text (No Exception) (AAA)</td> @@ -624,11 +623,11 @@ This guideline relates to making sure core content is easy to discernable from b decoration (i.e. it does not convey any content), or cannot be presented in any other way. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> - 1.4.10 Reflow (AA) <em + 1.4.10 Reflow (AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -638,7 +637,7 @@ This guideline relates to making sure core content is easy to discernable from b <ul> <li> No horizontal scrolling for right-to-left languages (like English) - or left-to-right languages (like Arabic) + or left-to-right languages (like Arabic) </li> <li> No vertical scrolling for top-to-bottom languages (like Japanese) @@ -657,7 +656,7 @@ This guideline relates to making sure core content is easy to discernable from b </tr> <tr> <td colspan="1"> - 1.4.11 Non-Text Contrast(AA) <em + 1.4.11 Non-Text Contrast(AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -665,7 +664,7 @@ This guideline relates to making sure core content is easy to discernable from b </td> <td> Minimum color contrast ratio of 3 to 1 for user interface components and - graphical objects. + graphical objects. </td> <td> <a @@ -676,7 +675,7 @@ This guideline relates to making sure core content is easy to discernable from b </tr> <tr> <td colspan="1"> - 1.4.12 Text Spacing (AA) <em + 1.4.12 Text Spacing (AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -685,7 +684,7 @@ This guideline relates to making sure core content is easy to discernable from b <td> <p> No loss of content or functionality occurs when the following styles - are applied: + are applied: </p> <ul> <li> @@ -708,7 +707,7 @@ This guideline relates to making sure core content is easy to discernable from b </tr> <tr> <td colspan="1"> - 1.4.13 Content on Hover or Focus (AA) <em + 1.4.13 Content on Hover or Focus (AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -724,7 +723,7 @@ This guideline relates to making sure core content is easy to discernable from b <li>dismissable (can be closed/removed)</li> <li> hoverable (the additional content does not disappear when the - pointer is over it) + pointer is over it) </li> <li> persistent (the additional content does not disappear without user |