From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../fr/outils/inspecteur_accessibilite/index.html | 182 --------------------- .../inspecteur_accessibilite/simulation/index.html | 96 ----------- 2 files changed, 278 deletions(-) delete mode 100644 files/fr/outils/inspecteur_accessibilite/index.html delete mode 100644 files/fr/outils/inspecteur_accessibilite/simulation/index.html (limited to 'files/fr/outils/inspecteur_accessibilite') diff --git a/files/fr/outils/inspecteur_accessibilite/index.html b/files/fr/outils/inspecteur_accessibilite/index.html deleted file mode 100644 index cc493a0836..0000000000 --- a/files/fr/outils/inspecteur_accessibilite/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: Inspecteur de l'accessibilité -slug: Outils/Inspecteur_accessibilite -tags: - - Accessibilité - - DevTools - - Guide - - Inspecteur Accessibilié - - Outils -translation_of: Tools/Accessibility_inspector ---- -
{{ToolsSidebar}}
- -

L'inspecteur d'accessibilité permet d'accéder aux informations importantes exposées aux technologies d'assistance sur la page courante via l'arbre d'accessibilité. On peut ainsi de vérifier ce qui manque ou qui nécessite une attention particulière. Dans cet article, nous verrons les principales fonctionnalités de cet outil et comment les utiliser.

- -

Un (très) bref guide sur l'accessibilité

- -

L'accessibilité est un ensemble de pratiques visant à rendre les sites web utilisables par le plus de personnes possible. Cela consiste à éviter de rendre le site inutilisable par les personnes handicapées d'une quelconque façon et/ou utilisant un réseau à faible débit et/ou parlant une certaine langue, etc.

- -

On évoquera souvent ici les personnes avec des handicaps visuels et la façon de rendre le contenu accessible, notamment grâce aux API d'accessibilité disponibles dans les navigateurs et qui permettent d'exposer des informations sur les rôles des différents éléments sur la page (est-ce que ce sont des textes, des boutons, des liens, des éléments de formulaires, autre chose ?).

- -

Les éléments HTML qui existent dans le DOM ont une sémantique qui fournit une indication quant aux rôles par défaut qu'ils sont censés avoir. Toutefois, on utilise parfois des éléments avec une sémantique faible, voire neutre ({{htmlelement("div")}} et {{htmlelement("span")}}) afin de construire des contrôles complexes et pour lesquels, la sémantique HTML ne suffit pas à décrire le but de tels contrôles. Dans ces cas de figure, on pourra utiliser les attributs de rôle WAI-ARIA afin de fournir des rôles spécifiques.

- -

Les rôles des éléments ainsi que les autres informations exposées par les API d'accessibilité sont organisés et présentés au sein d'une structure hiérarchique appelée « l'arbre d'accessibilité ». Cette structure ressemble un peu à l'arbre du DOM mais contient un nombre plus restreint d'éléments et des informations légèrement différentes à leur sujet.

- -

Les outils d'assistance tels que les lecteurs d'écran utilisent ces informations afin de déterminer ce qui se trouve sur une page web, d'indiquer aux utilisateurs ce qui est présent et leur permettre d'interagir avec la page. L'inspecteur d'accessibilité utilise également ces informations afin de pouvoir déboguer les problèmes d'accessibilité grâce aux outils de développement.

- -

Accéder à l'inspecteur d'accessibilité

- -

L'inspecteur d'accessibilité est disponible par défaut à partir de Firefox 63 :

- -

L'onglet de l'inspecteur d'accessibilité, désactivé, dans les outils de développement de Firefox et avec un bouton intitulé « Activer les fonctionnalités d'accessibilité »

- -

Par défaut, les fonctionnalités des outils de développement dédiées à l'accessibilité sont désactivées (sauf si elles ont été activées depuis un autre onglet ou que le moteur d'accessibilité de Firefox est déjà démarré si vous utiliser un lecteur d'écran ou un outil de test). Ces fonctionnalités sont désactivées, car le moteur d'accessibilité fonctionne en arrière-plan et peut consommer des ressources et diminuer les performances qui sont des indicateurs qu'on pourrait suivre via d'autres onglets (Mémoire et Performances par exemple). De même, on peut ne pas vouloir diminuer les performances du navigateur. C'est pour ces raisons que ces fonctionnalités sont désactivées par défaut et qu'il faut les « éteindre » à moins que vous les utilisiez activement.

- -

Vous pouvez activer ces fonctionnalités en cliquant sur le bouton « Activer les fonctionnalités d'accessibilité ».

- -

Une fois le contenu de l'onglet chargé, vous pouvez utiliser le bouton « Désactiver les fonctionnalités d'accessibilité » situé en haut à gauche des outils afin de les désactiver à nouveau. Si vous utilisez un outil qui a besoin du moteur d'accessibilité pour fonctionner, ce bouton sera désactivé.

- -
-

Note : Si vous utilisez les fonctionnalités d'accessibilité dans plusieurs onglets et que vous les désactiver dans un onglet, les fonctionnalités seront désactivées pour tous les onglets.

-
- -

Fonctionnalité du panneau Accessibilité

- -

Le panneau d'accessibilité, lorsqu'il est activé, ressemble à ceci :

- -

Le panneau d'accessibilité des outils de développement Firefox, activé, qui montre deux panneaux d'informations ainsi qu'un bouton pour désactiver les fonctionnalités d'accessibilité.

- -

Sur le côté gauche, on a un arbre hiérarchique qui représente l'ensemble des éléments de l'arbre d'accessibilité de la page courante. Les éléments qui possèdent des éléments fils disposent d'une flèche sur laquelle on peut cliquer afin d'afficher les éléments fils et d'accéder aux niveaux inférieurs de la hiérarchie. Chaque objet de cet arbre possède deux propriétés qui sont affichées :

- - - -

Sur le côté droit, on peut voir des informations supplémentaires à propos de l'élément sélectionné à gauche. Les propriétés visibles sont :

- - - -
-

Note : Les informations mises à disposition sont les mêmes quelle que soit la plateforme. L'inspecteur expose l'arbre d'accessibilité de Gecko plutôt que les informations d'accessibilité de la plateforme sous-jacente.

-
- -

Contrôles au clavier

- -

Le panneau Accessibilité est intégralement accessible au clavier :

- - - -

 

- -

Afficher l'arbre accessibilité en JSON

- -

Il est possible d'afficher l'arbre accessibilité en JSON avec un clic droit sur une ligne dans le panneau Accessibilité et en cliquant sur "Afficher JSON" :

- -

- -

Cela ouvrira un nouvel onglet avec la partie de l'arbre d'accessibilité chargé dans la visualisation JSON :

- -

- -

Une fois ouvert, il est possible de sauvegarder ou copier les données. La visualisation JSON peut également afficher le JSON "brut" dans in onglet séparé.

- -

Fonctionnalités notables associées

- -

Lorsque les fonctionnalités d'accessibilité sont activées, des fonctionnalités supplémentaires deviennent disponibles.

- -

Options de menu contextuel

- -

Une option supplémentaire devient disponible dans le menu contextuel de la page (menu accessible via clic-droit) et dans l'onglet HTML de l'inspecteur (clic-droit sur l'élément) :

- -

Le menu contextuel dans la zone d'affichage du navigateur avec l'option « Inspecter les propriétés d'accessibilité » surlignée

- -

Le menu contextuel de l'inspecteur du DOM avec l'option « Afficher les propriétés d'accessibilité » surlignée

- -

Lorsque vous choisissez l'option « Inspecter les propriétés d'accessibilité » via le menu contextuel, cela ouvre automatiquement le panneau « Accessibilité » des outils de développement et affiche l'élément dans l'arbre d'accessibilité ainsi que ses propriétés.

- -
-

Note : Certains éléments du DOM n'ont pas de propriétés d'accessibilité. Dans ces cas, l'option Inspecter les propriétés d'accessibilité du menu sera masquée.

-
- -

Mise en avant des éléments

- -

Dans le panneau « Accessibilité », lorsque la souris survole un élément d'accessibilité, on peut voir un surlignage semi-transparent qui recouvre l'élément sur la page. Le nom et le rôle de l'élément seront également affichés via une petite barre d'informations au-dessus de l'élément, au côté d'information de contraste de couleur si approprié. On peut ainsi facilement déterminer la correspondance entre les éléments de la page et les éléments de l'arbre d'accessibilité.

- -

Dans l'exemple suivant, on peut voir que l'image a été surlignée, que son rôle est graphic et que son nom est "Road, Asphalt, Sky, Clouds, Fall". On peut également voir le ratio de contraste des couleurs, ici 3.46, qui apparaît dans la barre d'informations au-dessus de l'image.

- -

- -

Contraste des couleurs

- -

Le ratio de contraste est une information particulièrement utile lors de la conception de la palette de couleurs d'un site web. En effet, si les couleurs ne sont pas suffisamment contrastées, les lecteurs souffrant d'un handicap visuel (daltonisme par exemple) ne pourront pas lire le texte de la page. Les règles d'accessibilité web, Web Content Accessibility Guidelines (WCAG) 1.4, indique pour une conformité AA, que le niveau de contraste 4.5.1 est le ratio minimal à respecter entre une couleur de premier plan et une couleur d'arrière-plan pour le texte standard et 4.5.1 pour les titres (critère 1.4.3). Pour une conformité AAA, les rations sont 7.1 pour le texte, et 4.5.1 pour les titres (critère 1.4.6).
-
- Par exemple :

- -

A screenshot of colour contrast highlighter where text contrast if below the AA WCAG threshold.

- -

Le contraste des couleurs du texte sur l'image est de 2.86. Cette valeur, trop faible, indique que le contraste peut ne pas être suffisant pour la lecture. On peut également voir dans cette illustration le symbole triangulaire qui alerte sur le non-respect des règles d'accessibilité.

- -

À partir de Firefox 65, afficher cette information pour un texte aillant une image de fond complexe (i.e un dégradé), donnera une plage de valeurs de contraste. Par exemple :

- -

 

- -

A screenshot of colour contrast highlighter where for text over gradient background with contrast satisfying the AAA WCAG guidelines.

- -

 

- -

On voit avec cette image que le niveau de contraste va de 4.72 à 5.98. Ces nombres sont suivis de la note "AAA" et d'une coche verte qui indique que le texte possède un niveau de contraste supérieur ou égal à 4.5:1 ou plus et qu'il respecte les règles de contraste amélioré, correspondant au niveau AAA.

- -

Voir les bonnes pratiques d'accessibilité CSS et JavaScript pour plus d'informations.

- -

Sélecteur d'accessibilité

- -

Le panneau Inspecteur pour l'inspection du code HTML possède un sélecteur qui permet de choisir un élément sur la page et de le retrouver dans le DOM. De même, le panneau  Accessibilité possède un bouton de sélection sur lequel on peut appuyer pour ensuite survoler la page et choisir un des éléments affichés afin de retrouver l'élément dans le panneau dans l'arbre d'accessibilité.

- -

Les icônes pour les deux sélecteurs (accessibilité et inspecteur HTML) varient légèrement, comme on peut le voir dans ces deux captures d'écran :

- -

Le bouton pour l'inspecteur du DOM est encadré et on peut voir la bulle d'informations « Sélectionner un élément de la page »

- -

Le bouton de l'inspecteur d'accessibilité est encadré en rouge et on peut voir la bulle d'informations « Sélectionner un objet accessible de la page »

- -

Lorsqu'on clique sur un élément de la page grâce à ce sélecteur, on peut voir l'élément sélectionné dans l'arbre d'accessibilité du panneau et le sélecteur est alors désactivé. Pour garder le sélecteur actif tout en voyant les éléments ciblés mis en avant dans l'arbre d'accessibilité, vous pouvez maintenir la touche Maj lors du ciblage (l'arbre d'accessibilité pointera vers l'élément survolé tant que la touche Maj sera enfoncée).

- -

Lorsque le sélecteur est activé, vous pouvez le désactivé en appuyant à nouveau sur le bouton ou en appuyant sur la touche Esc.

- -

Scénarios d'utilisation

- -

L'inspecteur d'accessibilité peut s'avérer particulièrement utile pour localiser les problèmes d'accessibilité. On peut l'utiliser pour dénicher les éléments qui n'ont pas d'équivalent textuel correct (les images sans attribut alt ou les champs de formulaire sans libellé), car ils auront la propriété name qui vaudra null. Par exemple :

- -

Un champ de formulaire surligné dans la page et pour lequel les informations sont affichées dans le panneau accessibilité où on voit que la propriété name est null car cet élément n'a pas de libellé associé

- -

Cet outil est également utile pour vérifier la sémantique des éléments. On peut utiliser le menu contextuel « Inspecter les propriétés d'accessibilité » afin de vérifier rapidement si un élément possède le bon rôle (autrement dit : est-ce qu'un bouton est vraiment indiqué comme un bouton ? est-ce qu'un lien apparaît réellement comme un lien ? etc..

- -

Un élément d'interface qui ressemble à un bouton mais pour lequel les informations affichées dans le panneau accessibilité montrent qu'il n'est pas un bouton mais un élément de section pour lequel la propriété name vaut null

- -

Voir aussi

- - diff --git a/files/fr/outils/inspecteur_accessibilite/simulation/index.html b/files/fr/outils/inspecteur_accessibilite/simulation/index.html deleted file mode 100644 index 5247d65941..0000000000 --- a/files/fr/outils/inspecteur_accessibilite/simulation/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Simulation -slug: Outils/Inspecteur_accessibilite/Simulation -tags: - - Accessibilité - - DevTools - - Guide - - Inspecteur Accessibilié - - Outils - - Simulation - - couleur -translation_of: Tools/Accessibility_inspector/Simulation ---- -

Le simulateur dans l'inspecteur de l'accessibilité des outils de développement de Firefox vous permet de voir à quoi ressemblerait une page web pour les utilisateurs souffrant de diverses formes de déficience de la perception des couleurs (« dyschromatopsie » plus connue sous le nom de « daltonisme »), ainsi que de perte de sensibilité au contraste.

- -

La plupart des personnes atteintes de daltonisme peuvent voir les couleurs, mais ne voient pas toutes les distinctions que les personnes ayant une vision normale des couleurs peuvent voir. Les déficiences de la vision des couleurs affectent la perception de tout le spectre des couleurs, et pas seulement de certaines couleurs spécifiques comme le rouge ou le vert. Les déficiences de la vision des couleurs affectent environ 8 % des hommes et 0,5 % des femmes. Les formes les plus courantes de daltonisme (communément regroupées sous le nom de « daltonisme rouge-vert ») touchent plus d'hommes que de femmes, car elles sont dues à une mutation d'un gène du chromosome X, dont les hommes ne possèdent qu'une copie.

- -

La perte de sensibilité aux contrastes peut être causée par la cataracte, le glaucome, la rétinopathie diabétique et d'autres troubles de la rétine ; elle peut être liée à l'âge, d'origine congénitale ou due à une blessure.

- -
-

Pour activer cette fonctionnalité vous devez avoir activé le webrender. Selon votre configuration de Firefox il peut être activé par défaut. Dans l'éditeur de configuration de Firefox, assurez-vous que l'option gfx.webrender.all est définie sur true.

-
- -

Dans le menu Simuler, vous pouvez choisir une option à la fois dans la liste suivante :

- - - -
-

Ces simulations de ne sont pas tout à fait exactes sur le plan médical. Cependant, elles peuvent vous donner une idée de ce à quoi ressemble votre site web pour les utilisateurs ayant des troubles de la vision, et donc vous aider à juger si vous devez faire des ajustements dans vos choix de couleurs et/ou de contrastes.

-
- -

Le tableau suivant montre une image colorée d'une tête de chat, et à quoi elle ressemble dans les différentes simulations.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SimulationImage affichée
AucunColorful image of a cat's face, without modification
Protanomalie (rouge faible)Colorful image of a cat's face, with deuteranomaly simulation
Deutéranomalie (vert faible)Colorful image of a cat's face, with deuteranomaly simulation
Tritanomalie (bleu faible)Colorful image of a cat's face, with tritanomaly simulation
Protanopie (pas de rouge)Colorful image of a cat's face, with protanopia simulation
Deutéranopie (pas de vert)Colorful image of a cat's face, with deuteranopia simulation
Tritanopie (pas de bleu)Colorful image of a cat's face, with tritanopia simulation
Perte de contrasteColorful image of a cat's face, with contrast loss simulation
- -

Voir aussi

- - -- cgit v1.2.3-54-g00ecf