Accessibility

Escopo: HTML. Idiomas específicos deste ecossistema.

A maior parte da acessibilidade de uma página vem da própria marcação. Escolher o elemento que descreve o papel do conteúdo, descrever cada imagem e manter a ordem de foco previsível já cobre a maioria dos casos, sem nenhum atributo de ARIA (Accessible Rich Internet Applications · Aplicações Ricas e Acessíveis para Internet) por cima.

Vale escrever assim desde a primeira linha do arquivo. Acessibilidade encaixada no fim, sobre uma marcação feita de <div>, custa uma reescrita da estrutura.

Quando a imagem carrega informação, o alt conta ao leitor de tela o que ela mostra: alt="Monthly sales chart showing 20% growth in Q1". Quando a imagem só decora, escreva alt="" vazio, e o leitor de tela pula ela.

Deixar o alt de fora é o pior dos casos. Sem ele, muitos leitores de tela anunciam o nome do arquivo, e o usuário ouve "avatar ponto jpg". Um alt="image" ou alt="logo" também não informa nada: o leitor já sabe que aquilo é uma imagem, e quer saber o que está nela.

<img src="/img/avatar.jpg" />
<img src="/img/chart.png" alt="image" />
<img src="/img/logo.svg" alt="logo" />

<!-- decorative sem alt vazio -->
<img src="/img/divider.png" alt="decorative divider" />

<img src="/img/avatar.jpg" alt="Profile photo of Ana Souza" />
<img src="/img/chart.png" alt="Monthly sales chart showing 20% growth in Q1" />
<img src="/img/logo.svg" alt="Acme Corp" />

<!-- decorativo: alt vazio, role presentation -->
<img src="/img/divider.png" alt="" role="presentation" />

Se o clique dispara uma ação na própria página, use <button>. Se o clique leva o usuário a outro endereço, use <a href>. A escolha muda o comportamento que o navegador entrega de graça.

Um <div onclick> parece funcionar e deixa três coisas para trás: o Tab não chega até ele, o Enter e o espaço não o acionam, e o leitor de tela anuncia um bloco de texto qualquer, sem dizer que ali existe algo clicável. Um <a href="#"> que na verdade envia um formulário engana de outro jeito: o leitor de tela anuncia "link", e o usuário espera sair da página.

<div class="btn" onclick="openModal()">Open</div>
<span onclick="deleteItem()">Delete</span>

<a href="#" onclick="submitForm()">Submit</a>

<button type="button" onclick="openModal()">Open</button>
<button type="button" onclick="deleteItem()">Delete</button>

<button type="submit">Submit</button>
<a href="/dashboard">Go to dashboard</a>

Quem navega por teclado percorre a página na ordem em que os elementos aparecem no arquivo. É a ordem que você já controla ao escrever a marcação, e ela costuma ser a certa.

O tabindex tem três formas, e duas delas resolvem casos reais:

<input tabindex="3" name="email" />
<input tabindex="1" name="name" />
<div class="custom-toggle" onclick="toggle()">Toggle</div>

<input name="name" />
<input name="email" />
<div
  class="custom-toggle"
  role="switch"
  tabindex="0"
  aria-checked="false"
  onkeydown="handleKey(event)"
  onclick="toggle()"
>Toggle</div>

Sempre que o HTML tem um elemento para o caso, use ele. Um <button> já se anuncia como botão, e escrever role="button" nele repete o que o navegador já sabe.

ARIA serve para o componente que o HTML não tem, como um conjunto de abas. Ali você precisa declarar à mão o papel de cada peça (tablist, tab, tabpanel) e o estado de cada uma (aria-selected), porque nenhum elemento nativo faz isso.

Vale ter cuidado, porque um ARIA errado atrapalha mais do que ARIA nenhum. Um role trocado faz o leitor de tela anunciar o elemento como uma coisa que ele não é, e o usuário passa a agir sobre uma promessa falsa.

<button role="button" aria-pressed="false">Submit</button>
<nav role="navigation">...</nav>
<h1 role="heading" aria-level="1">Title</h1>

<button type="button">Submit</button>
<nav>...</nav>
<h1>Title</h1>

<!-- ARIA justificado: componente customizado sem equivalente nativo -->
<div role="tablist">
  <button id="tab-1" role="tab" aria-selected="true" aria-controls="panel-1">Tab 1</button>
  <button id="tab-2" role="tab" aria-selected="false" aria-controls="panel-2">Tab 2</button>
</div>

<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">...</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>...</div>

Quando a região já tem um título visível, use aria-labelledby apontando para o id dele. O nome anunciado passa a ser o próprio título, e os dois nunca saem de sincronia.

Um aria-label copiando esse mesmo texto cria uma segunda cópia dele, escondida na marcação. Alguém edita o <h2> na sprint seguinte, e o leitor de tela continua anunciando o texto antigo.

Reserve aria-label para o caso em que não existe texto visível nenhum, como o botão de fechar que só mostra um ícone.

<section aria-label="Featured Products">
  <h2>Featured Products</h2>
  ...
</section>

<button aria-label="Close" class="modal__close">✕</button>

<section aria-labelledby="featured-heading">
  <h2 id="featured-heading">Featured Products</h2>
  ...
</section>

<button class="modal__close" aria-label="Close dialog">
  <svg aria-hidden="true">...</svg>
</button>

DoDocs v3.7.0 · Desenvolvido por @thiagocajadev · Baseado no trabalho de pmndrs/docs · Poimandres.