Introdução
Se você deseja aumentar a acessibilidade do seu site, mas acha que para isso você precisa instalar algo ou lidar com algum serviço, então aqui está uma seleção de 5 ferramentas que estão disponíveis no navegador Chrome, e com as quais você pode determinar rapidamente se há problemas com disponibilidade.
Uma pequena isenção de responsabilidade: sei que muitos de vocês estão usando ativamente DevTools, no entanto, lembro que é conveniente usar o atalho de teclado Cmd + Shift + C / Ctrl + Shift + C para abrir DevTools.
Inspetor de acessibilidade
Além do DOM, o navegador constrói uma Árvore de Acessibilidade (AOM, Modelo de Objeto de Acessibilidade) ou uma Árvore de Acessibilidade (um pouco mais aqui ). Da mesma forma, o inspetor de acessibilidade permite que você visualize as informações nesta árvore, da mesma forma como você visualiza a estrutura DOM do verificador na guia Elementos.
Na maior parte, o AOM contém informações do ARIA e dos atributos de função, que é como os leitores de tela tentam determinar a finalidade de um elemento DOM.
Você pode encontrar isso e a ferramenta na guia Elementos, na guia adicional Acessibilidade.
Emulador de visão ruim
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
Obrigado pela leitura, espero que essas ferramentas ajudem você a tornar seus projetos um pouco mais acessíveis.