Acessibilidade na Prática (A11y): Desenvolvendo para Todos

Acessibilidade na Web, frequentemente referida como A11y (a letra A seguida de 11 letras até o Y), trata de garantir que as aplicações sejam utilizáveis por qualquer pessoa, independente de deficiências visuais, motoras ou cognitivas.

É um requisito ético e muitas vezes legal. No entanto, é muito comum construirmos botões bonitos e modais incríveis no React que se tornam 'armadilhas' para quem navega por teclado ou usa leitores de tela.

O Problema das Tags Semânticas

Se você usa uma <div> e atrela um evento onClick a ela para transformá-la num botão, o navegador e os leitores de tela não sabem que aquilo é interagível.

// PÉSSIMO: Um leitor de tela vai pular isso e não dá pra focar com a tecla 'TAB'
<div onClick={submitForm} className="bg-blue-500 p-2">
  Enviar Formulário
</div>

// PERFEITO: É interpretado corretamente e ganha foco com TAB nativamente
<button type="button" onClick={submitForm} className="bg-blue-500 p-2">
  Enviar Formulário
</button>

Atributos ARIA (Accessible Rich Internet Applications)

Muitas vezes, a interface exige componentes complexos que não têm uma tag HTML correspondente. O ARIA nos permite 'explicar' o componente para o leitor de tela.

export function Dropdown({ isOpen, toggleMenu }) {
  return (
    <div className="relative">
      <button 
        onClick={toggleMenu}
        aria-expanded={isOpen}
        aria-haspopup="true"
      >
        Configurações
      </button>

      {isOpen && (
        <ul role="menu">
          <li role="menuitem">Perfil</li>
          <li role="menuitem">Sair</li>
        </ul>
      )}
    </div>
  );
}

Neste exemplo, o leitor de tela irá ditar: _'Configurações, botão, recolhido. Possui submenu.'_. Ao clicar, ele anunciará _'Configurações, expandido'_.

Gerenciando Foco em Modais

Quando um usuário de teclado abre um Modal, o comportamento correto é aprisionar o foco (Focus Trap) dentro do Modal. Se ele pressionar 'TAB', o foco deve rodar entre os botões do Modal, mas NUNCA voltar para os botões do site no fundo que está escurecido.

Conclusão

Programar com acessibilidade em mente desde o início requer quase nenhum esforço adicional (apenas escolha as tags corretas). O resultado é um produto altamente inclusivo que abre as portas para 100% dos seus usuários em potencial.