Introducción
Si quieres incrementar la accesibilidad de tu sitio, pero crees que para ello necesitas instalar algo o lidiar con algún servicio, entonces aquí tienes una selección de 5 herramientas que están disponibles en el navegador Chrome, y con las que puedes determinar rápidamente si hay problemas con disponibilidad.
Un pequeño descargo de responsabilidad, sé que muchos de ustedes están usando activamente DevTools, sin embargo, les recuerdo que es conveniente usar el atajo de teclado Cmd + Shift + C / Ctrl + Shift + C para abrir DevTools.
Inspector de accesibilidad
Además del DOM, el navegador crea un árbol de accesibilidad (AOM, modelo de objetos de accesibilidad) o un árbol de accesibilidad (un poco más aquí ). En consecuencia, el inspector de accesibilidad le permite ver la información en este árbol, de manera similar a cómo ve la estructura DOM del verificador en la pestaña Elementos.
En su mayor parte, el AOM contiene información del ARIA y los atributos de rol, que es la forma en que los lectores de pantalla intentan determinar el propósito de un elemento DOM.
Puede encontrar esto y la herramienta en la pestaña Elementos, en la pestaña adicional Accesibilidad.
Emulador de mala visión
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
Gracias por leer, espero que estas herramientas te ayuden a hacer tus proyectos un poco más accesibles.