Muitos usuários dependem de teclados em vez de mouses devido a deficiências físicas, lesões por esforço repetitivo ou preferência pessoal. Isso inclui usuários de leitores de tela e aqueles que podem não ter um mouse funcionando. A acessibilidade pelo teclado garante que esses usuários possam navegar em aplicações web de forma eficaz sem barreiras. Vamos analisar algumas técnicas práticas que você pode empregar para tornar as aplicações web acessíveis pelo teclado. Muitos usuários dependem da tecla Tab para navegar pelos elementos interativos em uma página da web. Por padrão, os navegadores permitem que os usuários naveguem com a tecla Tab por elementos como links, botões e campos de formulário na ordem em que aparecem no HTML. Isso é chamado de ordem natural das abas. Às vezes, você pode querer ajustar quais elementos são focáveis ou alterar a ordem de foco deles. O atributo tabindex permite que você faça isso. Aqui está a sintaxe básica:

<element tabindex="number">Element Text</element>

O valor de tabindex determina como o elemento se comporta na navegação por teclado: tabindex="0" adiciona o elemento à ordem natural de tabulação. A tecla Tab moverá o foco do button para o div, depois para o link, seguindo a ordem deles no HTML. Clique em qualquer lugar na área em branco da janela de visualização. Então use a tecla Tab para ver o foco se mover entre os diferentes elementos. Para interagir com o exemplo, você precisará ativar o editor interativo.

<button>First</button>
<div tabindex="0">Second</div>
<a href="#">Third</a>

tabindex="-1" torna um elemento focável programaticamente. Isso é útil para gerenciar o foco em elementos que normalmente não são focáveis, como títulos, contêineres, diálogos ou mensagens de erro:

<p tabindex="-1">Sorry, there was an error with your submission.</p>

Neste exemplo, o parágrafo não faz parte da ordem normal de tabulação, então os usuários não podem acessá-lo pressionando a tecla Tab. No entanto, se você definir o foco neste elemento via um script, a mensagem será trazida à atenção do usuário. You'll learn more about this technique in JavaScript lessons. Quando o tabindex é maior que 0 ele define uma ordem de tabulação personalizada. Então elementos com valores positivos menores são focados primeiro. Neste exemplo, a navegação por tabulação focará primeiro o input com tabindex="1", depois o 2 e depois o 3, independentemente da ordem deles no HTML.

<input tabindex="2">
<input tabindex="1">
<input tabindex="3">

Valores positivos personalizados são às vezes usados em widgets complexos, como uma barra de ferramentas onde você deseja uma ordem de navegação específica. No entanto, essa abordagem é desencorajada porque pode tornar a navegação confusa e difícil de manter, especialmente à medida que a página cresce ou muda. accesskey é outro atributo que você pode usar para tornar seu projeto web acessível pelo teclado. Ele permite que você defina uma tecla que foca ou ativa um elemento específico. Aqui está um exemplo interativo que você pode experimentar seguindo as sugestões abaixo (ative o editor interativo primeiro):

• accesskey="s" atribui a tecla S ao botão Save. Na maioria dos navegadores, pressionar ALT + S (no Windows) e CTRL + Option + S (no Mac) ativará este botão.
• accesskey="c" define a tecla C para o botão Cancel, permitindo que os usuários o ativem usando ALT + C (Windows) e CTRL + Option + C (Mac).
• accesskey="h" atribui a tecla H ao link Home, permitindo que os usuários naveguem para a página inicial usando ALT + H (Windows) e CTRL + Option + H (Mac).

Observe que a combinação exata de teclas para ativar o accesskey pode variar dependendo do navegador e do sistema operacional. Normalmente é ALT + Specified Key no Windows e CTRL + Option + Specified Key no Mac. O atributo accesskey pode ser problemático porque pode entrar em conflito com atalhos existentes ou se comportar de forma inconsistente em dispositivos e teclados diferentes, e muitas vezes não é intuitivo para os usuários descobrirem ou lembrarem. Se você optar por usar accesskey, isso deve ser feito com orientações claras para os usuários, mas na maioria dos casos é melhor evitar accesskey em sites e aplicações web.

<button accesskey="s">Save</button>
<button accesskey="c">Cancel</button>
<a href="index.html" accesskey="h">Home</a>

Outra maneira de tornar o teclado acessível em seus aplicativos é garantir que você forneça indicadores de foco claros. Se você achar que o indicador de foco padrão do navegador não é suficiente, você pode substituí-lo direcionando o estado de foco do elemento. Aqui está um exemplo de estilização do estado de foco para um elemento button. Clique em qualquer lugar no espaço em branco da janela de visualização e depois pressione a tecla Tab para focar no botão. Para interagir com o exemplo, você precisará ativar o editor interativo.

<link href="styles.css" rel="stylesheet">

<button>Example button</button>

button:focus {
  outline: 2px solid #005fcc;
}

A propriedade outline é usada para definir o contorno ao redor do elemento. Este exemplo define o contorno para uma linha azul sólida com 2 pixels definidos para a espessura. O indicador de foco deve ser estilizado de uma forma que deixe óbvio qual elemento está com foco no momento. Para ser acessível, o indicador deve ter um contraste de cor mínimo de pelo menos 3:1 com a cor de fundo que ele cobre. Você também deve evitar armadilhas de teclado, que ocorrem quando um usuário não consegue mover o foco para fora de um determinado elemento em componentes como modais e popups.