From d9770f55e66eea4a2d608e951332064e0335a543 Mon Sep 17 00:00:00 2001 From: SimonF30 Date: Wed, 18 Oct 2023 12:36:20 +0000 Subject: [PATCH] deploy: e461dd1dd37c12b84516a69cdd497977ebc56ea6 --- fr/articles/le-nom-accessible-en-html/index.html | 4 ++-- fr/web/developper/navigation-clavier/index.html | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/fr/articles/le-nom-accessible-en-html/index.html b/fr/articles/le-nom-accessible-en-html/index.html index 735caad15..56854e9f0 100644 --- a/fr/articles/le-nom-accessible-en-html/index.html +++ b/fr/articles/le-nom-accessible-en-html/index.html @@ -194,9 +194,9 @@

En pratique, comment ça marche ? Le nom accessible est, par exemple, annoncé par un lecteur d'écran à la prise de focus sur cet élément mais le rôle de l'élément est aussi ajouté (lien, graphique, bouton...).

Accéder au nom accessible via le navigateur #

Pour accéder au nom (accessible), le plus simple est d'utiliser les outils des navigateurs.

-

Dans Chrome, il faut utiliser les Chrome dev tools (Ctrl+ Maj. + i) pour inspecter un élément et ouvrir le panneau "Accessibility" à la place de celui de "Style" (généralement à droite). On accède à l'"Accessibility tree" et dans "Computed properties" au "Name", le nom accessible de l'élément inspecté.

+

Dans Chrome, il faut, dans les Chrome dev tools (Ctrl+ Maj. + i), inspecter un élément (onglet "Elements") et ouvrir le panneau "Accessibility" à la place de celui de "Style" (généralement à droite). On accède à l'"Accessibility tree" et dans "Computed properties" au "Name", le nom accessible de l'élément inspecté.

Panneaux des outils de développement de Chrome avec le Accessibility tree ouvert

-

Dans FireFox, il faut utiliser les dev tools (Ctrl+ Maj. + i), ouvrir l'onglet "Accessibilité" (à afficher les "Options" des dev tools), inspecter un élément. On accède au "Name", le nom accessible de l'élément inspecté.

+

Dans FireFox, il faut, dans les dev tools (Ctrl+ Maj. + i), ouvrir l'onglet "Accessibilité" (à afficher les "Options" des dev tools), inspecter un élément. On accède au "Name", le nom accessible de l'élément inspecté.

Panneaux des outils de développement de Firefox avec l'onglet Accessibilité ouvert

Contenu d'une balise #

<a href="canard.html">canards en plastique</a>

diff --git a/fr/web/developper/navigation-clavier/index.html b/fr/web/developper/navigation-clavier/index.html index a34bcf927..b1af629e2 100644 --- a/fr/web/developper/navigation-clavier/index.html +++ b/fr/web/developper/navigation-clavier/index.html @@ -359,8 +359,8 @@

Rendre visible le focus e Dans les captures d’écran suivantes, le focus est positionné sur le lien « 209 SMS/mois ».
La première capture présente le comportement par défaut (focus représenté par des pointillés).
Dans la seconde capture, les pointillés ont été supprimés, mais un encadré permet d’indiquer de manière explicite l’emplacement du focus.
-capture d’écran présentant l’affichage du focus par défaut
-capture d’écran présentant un comportement personnalisé pour l’affichage du focus

+capture d’écran présentant l’affichage du focus par défaut
+capture d’écran présentant un comportement personnalisé pour l’affichage du focus

Référence WCAG :