Navegando na web com o teclado

Nota: apenas traduzi o texto abaixo e postei aqui.

Algumas pessoas navegam na web exclusiva ou principalmente com o teclado em vez de com o mouse.

Algumas pessoas são deficientes visuais e não conseguem ver onde o cursor do mouse está na tela. Eles podem usar o teclado para navegar pela página e um screen reader anunciará onde eles estão.

Mas nem todas as pessoas que usam teclado para navegar na web são deficientes visuais. Em vez disso, eles podem (ou também) ter uma deficiência cognitiva ou muscular que dificulta o uso de um mouse. Por exemplo, alguém com doença de Parkinson pode tremer, dificultando o controle motor fino necessário para um mouse.

Como você pode garantir que seus sites e suas applications funcionem bem para pessoas que navegam na web com teclado?

Focus styles

Por padrão, styles especiais são aplicados ao element que está atualmente em foco. Por exemplo, se você clicar em uma form input, poderá notar que o input mostra uma borda azul ligeiramente difusa.

Pessoas que navegam na web com teclado, mas não têm deficiência visual, nem sempre usam um screen reader. Focus styles fornecem pistas visuais importantes que permitem saber onde estão na página. Esses styles estão incluídos no CSS default do navegador.

Alguns designers não gostam deles e os removem como parte de seus designs. Nunca faça isso.

Focus styles são um importante recurso de acessibilidade e devem sempre ser incluídos nos sites e nas applications que você cria.

Você ainda pode personalizá-los para combinar melhor com seu design, mas não os remova.

Use o elemento certo para o trabalho

Muitos elementos HTML transmitem significado semântico para dispositivos assistivos, como screen readers. Eles também podem fornecer ganchos que as pessoas que navegam pelo teclado podem usar para navegar pela página com mais facilidade.

Aqui estão três coisas simples que você pode fazer.

1. Use headings para transmitir hierarquia

Às vezes vejo pessoas usando headings exclusivamente para style.

<h1>Esta é uma webpage</h1>
<h5>Aqui é um subheading</h5>

<p>Algum texto.</p>

<h1>Outro heading</h1>

Algumas regras sobre o uso de títulos:

• Deve haver apenas um único elemento h1 na página. Deve ser o primary heading no topo da página.
• Subheadings devem ser sequenciais. Se o último heading for h2, o próximo deverá ser h2 se você estiver criando uma nova seção de conteúdo, ou h3 se estiver adicionando uma subseção ao conteúdo existente.
• Headings devem transmitir o início de uma seção e não ser usados apenas para fins de style. Use style classes e para modificar os headings semânticos corretos para parecerem diferentes, se necessário.

2. Se um elemento deve ser interativo, use algo focusable

Pessoas que navegam na web com um teclado podem pular de um elemento focusable para outro pressionando a tecla Tab do teclado. Eles podem então interagir com esse elemento com a tecla Enter/Return ou a Space bar.

Nem todos os elementos são focusable.

Muitas vezes vejo pessoas usando elementos div ou span com click event listeners. Devem ser buttons ou elementos que podem ser focused. Com uma div, um usuário de teclado não saberia que o elemento era clicável ou talvez não conseguisse clicar nele.

3. Buttons e links não são intercambiáveis

Mesmo se você usar um elemento focusable, pode não ser o correto. Muitas vezes vejo pessoas usando links como buttons.

<a class="click-me" href="#">Clique aqui</a>

Links e buttons transmitem um significado semântico exclusivo aos screen readers.

Um link implica que clicar nele o levará a um local diferente – outra página ou um local diferente da atual. Os buttons implicam interatividade – mostrar e ocultar conteúdo, submit um form e assim por diante.

Às vezes, você pode ter um link válido que você aprimora progressivamente em um button após o carregamento do JavaScript. Nesse caso, adicione role="button" ao elemento link com seu JS.

Este é um pattern comum na navegação por abas. Por padrão, é uma lista de anchor links. Depois que o script for carregado, ele se tornará um componente interativo.

<!-- Default -->
<ul>
    <li><a href="#hermione">Hermione</a></li>
    <li><a href="#neville">Neville</a></li>
    <li><a href="#harry-potter">Harry Potter</a></li>
</ul>

<!-- Depois que o JavaScript carrega -->
<ul>
    <li><a role="button" href="#hermione">Hermione</a></li>
    <li><a role="button" href="#neville">Neville</a></li>
    <li><a role="button" href="#harry-potter">Harry Potter</a></li>
</ul>

Saúde,

Fonte

Newsletter de Go Make Things