Conceção para a acessibilidade
A acessibilidade é um tema relativamente vasto. Não podemos cobri-lo completamente em um único módulo do Learn. No entanto, existem alguns princípios fundamentais que você vai querer implementar em cada página que criar. Criar uma página acessível desde o início é sempre mais fácil do que voltar a uma página existente para torná-la acessível.
Use HTML da maneira como foi projetado
HTML fornece muitos elementos que você pode usar para criar uma página, incluindo botões, links e controles de formulário. Cada um desses elementos tem um conjunto de funcionalidades integradas, como ser clicável, ser vinculável ou aceitar o foco.
Nota
Foco é um termo de desenvolvimento web que significa que um controlo pode receber entradas do teclado. Um botão pode aceitar o foco, permitindo que alguém o ative ou "clique" selecionando a Barra de espaço.
Com CSS e JavaScript, é possível fazer com que qualquer elemento se pareça com qualquer tipo de controle. Por exemplo, você pode usar <span> para criar um <button> elemento e <b> pode se tornar <a>. Embora esse recurso forneça alguns atalhos para estilizar ou definir o layout da página, ele remove a funcionalidade interna. Ferramentas como um leitor de tela não serão capazes de entender que <span> está sendo usado como <a>. Alguém navegando com um teclado não poderá definir o foco em um <div> elemento que foi programado para simular um <button> elemento.
Outro elemento HTML que muitas vezes é ignorado são cabeçalhos (<h1> a <h6>). Do ponto de vista visual, as tags de cabeçalho começam do maior para o menor tamanho de texto. Essa convenção leva muitos desenvolvedores a renunciar aos elementos de cabeçalho e, em vez disso, estilizar <div> ou outros elementos genéricos.
Infelizmente, elementos genéricos estilizados transmitem apenas informações visuais e não estruturais. Os usuários de leitores de tela dependem muito de cabeçalhos para encontrar informações e navegar por uma página. Escrever conteúdo de título descritivo e usar tags de título semântico são importantes para criar um site facilmente navegável para usuários de leitores de tela.
Como prática recomendada, você deve sempre usar o HTML apropriado ao criar controles em uma página. Se você quiser um hiperlink, use <a>ou use <button> para um botão.
Use boas pistas visuais
Os desenvolvedores geralmente pensam nos leitores de tela como a única ferramenta de acessibilidade. No entanto, os usuários podem usar várias outras ferramentas, ou eles podem não usar ferramentas em tudo. Os usuários que estão usando o navegador dependerão de certas pistas visuais para entender como interagir com sua página.
Um dos grandes recursos do CSS é que ele fornece controle completo sobre como exibir uma página, incluindo a remoção de certos elementos de exibição. Por exemplo, você pode remover o contorno de uma caixa de texto ou remover o sublinhado de um hiperlink. Infelizmente, remover esses tipos de pistas pode tornar mais difícil para alguém que depende delas reconhecer o tipo de controle.
Considere o teclado
Alguns usuários não podem usar um mouse ou trackpad/touchpad. Em vez disso, esses usuários dependem das interações do teclado para passar de um elemento para o próximo. É importante que suas páginas apresentem seu conteúdo em ordem lógica para que um usuário do teclado possa acessar cada elemento interativo à medida que eles se movem para baixo.
Quando um usuário se move por uma página tabulando, o foco se move de um controle para o próximo com base na ordem em que os controles são listados no código-fonte HTML. Os controles para sua página devem ser listados no código-fonte HTML na ordem em que você espera que a página seja navegada, enquanto depende de CSS para dispor a página visualmente para os usuários.
Por exemplo, imagine criar um formulário com duas colunas. Você vai querer considerar qual é o fluxo natural para alguém que preenche o formulário e, em seguida, listar os controles nessa ordem. Em seguida, você pode usar CSS para criar as colunas e exibir os controles em seus locais apropriados.
A navegação pelo teclado depende muito do HTML semântico. Certos controles (como botões) aceitam foco, enquanto div elementos não. Se você estiver recriando controles que já existem em HTML, estará dificultando o uso da página por alguém com um teclado.
Importante
A navegação pelo teclado precisa ser testada manualmente e você deve fazê-lo em todas as páginas criadas. WebAIM tem mais informações sobre estratégias de navegação por teclado.