Para muitos usuários, acessibilidade é literalmente a interface do usuário. Seus recursos geralmente podem ser úteis para quem não precisa dela como um meio principal de interagir com sua extensão. As técnicas são variadas. O texto deve, no mínimo, ser de alto contraste. Os vídeos devem ter legendas. As imagens precisam incluir os atributos alt.
Mas, como dissemos, isso é apenas o mínimo. Técnicas adicionais são descritas a seguir.
Existem algumas maneiras de implementar a acessibilidade, mas a mais fácil é usar um controle HTML padrão, especialmente os elementos de entrada. A imagem a seguir mostra esses controles.
Para tornar outros elementos acessíveis, use os atributos ARIA. Esses atributos fornecem informações ao leitor de tela sobre a função e o estado atual dos controles em uma página da Web. Confira um exemplo.
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" role="button" alt="cut" id="button1">
<img src="buttoncopy.png" role="button" alt="copy" id="button2">
<img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
Por padrão, os únicos elementos no DOM do HTML que podem receber o foco do teclado são âncoras, botões e controles de formulário. Felizmente, definir o atributo tabIndex em um elemento HTML permite que ele receba o foco do teclado. Exemplo:
<div tabindex="0">I can receive focus with the tab key.</div>
Para instruções sobre como implementar essas técnicas e outras, consulte Acessibilidade do suporte.