introduction
Si vous souhaitez augmenter l'accessibilité de votre site, mais pensez que pour cela, vous devez installer quelque chose ou gérer un service, alors voici une sélection de 5 outils disponibles dans le navigateur Chrome, et avec lesquels vous pouvez rapidement déterminer s'il y a des problèmes avec disponibilité.
Un petit avertissement, je sais que beaucoup d'entre vous utilisent activement DevTools, cependant, je vous rappelle qu'il est pratique d'utiliser le raccourci clavier Cmd + Shift + C / Ctrl + Shift + C pour ouvrir DevTools.
Inspecteur d'accessibilité
En plus du DOM, le navigateur construit un arbre d'accessibilité (AOM, Accessibility Object Model) ou un arbre d'accessibilité (un peu plus ici ). En conséquence, l'inspecteur d'accessibilité vous permet d'afficher les informations dans cette arborescence, de la même manière que vous visualisez la structure DOM du vérificateur dans l'onglet Eléments.
Pour la plupart, l'AOM contient des informations provenant de l'ARIA et des attributs de rôle, c'est ainsi que les lecteurs d'écran tentent de déterminer le but d'un élément DOM.
Vous pouvez trouver ceci et l'outil dans l'onglet Eléments, dans l'onglet supplémentaire Accessibilité.
DevTools , .
DevTools, . More tools, Rendering. , , “Emulate vision deficiencies”.
DevTools :
( ?)
- , .
- –, – .
-
, , , , - , . .
Lighthouse , . , Accessibility.
Lighthouse :
ARIA -
ROLE -
Lang HTML
Tabindex
alt
, , , alt. , - “”, “ ”, “”,
. , .
, DevTools , .
- DevTools, , CSS color
, :
()
()
Inspect element tooltip
, . , DevTools , . DevTools.
Inspect element tooltip , .
, ,
, , .– FronteersConf
Merci d'avoir lu, j'espère que ces outils vous aideront à rendre vos projets un peu plus accessibles.