Aula 5: Acessibilidade — Foco, Teclado e ARIA
Você estilizou uma `<div>` com `onClick` que parece um botão perfeito. Mas um usuário de teclado não consegue alcançá-la, e um leitor de tela não sabe que ela é clicável. Esta aula ensina a construir componentes acessíveis no design system: controles semânticos, um anel de foco baseado em token, e `
Um botão de verdade é como uma porta com maçaneta — qualquer um a abre, com a mão ou pelo teclado. Uma `<div>` clicável é uma parede pintada para parecer uma porta: parece certo, mas não há nada para segurar.
- semantic control
- Um elemento HTML com significado embutido — `<button>`, `<a>`, `<input>` — que vem com suporte a teclado, foco e um papel de acessibilidade de graça, sem código extra.
- focus-visible
- Um estado que mostra um anel de foco apenas durante a navegação por teclado, não em cliques de mouse. No Tailwind: `focus-visible:ring-2` — um sinal claro para usuários de teclado sem incomodar usuários de mouse.
- aria-label
- Um atributo que dá um nome acessível a um elemento sem texto visível — como um botão só com ícone — para que um leitor de tela anuncie o que ele faz.
- keyboard operability
- A capacidade de usar todo controle apenas com o teclado — Tab para focar, Enter/Space para ativar — um requisito básico de acessibilidade.
