ARIA (Accessible Rich Internet Applications) é um conjunto de atributos que adicionam semântica de acessibilidade — roles, estados e propriedades — que HTML nativo não consegue expressar. Mas a regra ARIA mais importante é: prefira HTML nativo primeiro.
Save
Save
Elementos nativos vêm com roles corretos, comportamento de teclado e foco gratuitamente. Recorra ao ARIA apenas quando nenhum elemento nativo fizer o trabalho.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
Esta é genuinamente uma ARIA útil: informar leitores de tela sobre conteúdo que muda sem um reload de página (resultados de pesquisa, toasts, erros de validação).
ARIA incorreto é pior do que nenhum — fornece aos usuários de leitura de tela informações falsas. E ARIA muda apenas semântica, nunca comportamento: role="button" em uma <div> não a torna focusable ou clicável; você deve adicionar tabindex e manipuladores de tecla você mesmo.
Use HTML semântico para o caso de 95%; use ARIA para preencher as lacunas para widgets personalizados (abas, caixas de combinação, menus) e para anunciar atualizações dinâmicas via live regions.
Siga as regras — prefira nativo, não mude a semântica nativa desnecessariamente, mantenha os estados sincronizados e nunca aplique um role que você não implemente totalmente.