Aula 5: Acessibilidade — Foco, Teclado e ARIA
Você estilizou uma `<div>` com `onClick` que parece um botão perfeito. Mas um utilizador de teclado não consegue alcançá-la, e um leitor de ecrã 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,
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 utilizadores de teclado sem incomodar utilizadores 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 ecrã 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.
