ARIA significa Accessible Rich Internet Applications. Ela complementa a acessibilidade quando o HTML nativo não é suficiente, mas usada errado pode piorar a experiência de quem depende de tecnologias assistivas.
Ouça a aula, revise blocos e estude com foco.
Pronto para narrar. As vozes disponíveis dependem do navegador e do sistema.
O HTML semântico define a estrutura. O ARIA entra quando a interface fica rica, dinâmica e interativa demais para ser explicada apenas com tags nativas.
Primeiro use HTML semântico. Só depois use ARIA quando necessário. Nenhum ARIA é melhor que ARIA ruim.
Se existe uma tag nativa para resolver o problema, use a tag nativa.
button, nav, main, header e
footer já carregam função acessível sem precisar de role extra.
<!-- Mestre: HTML nativo correto -->
<button type="button">Salvar</button>
<!-- Amador: tenta transformar div em botão -->
<div role="button">Salvar</div>
Usar role="button" em uma div quando poderia usar
button. A div não tem foco, teclado e comportamento nativo por padrão.
Define a função do elemento quando o HTML nativo não resolve.
Fornece um nome acessível invisível, útil em botões apenas com ícone.
Aponta para o ID de outro elemento que já contém o nome visível.
Conecta o elemento a uma descrição adicional ou instrução de uso.
<button type="button" aria-label="Abrir menu de navegação">
☰
</button>
<section aria-labelledby="titulo-recursos">
<h2 id="titulo-recursos">Recursos acessíveis</h2>
</section>
<input id="usuario" name="usuario" aria-describedby="dica-usuario">
<p id="dica-usuario">Use entre 4 e 16 caracteres.</p>Use entre 4 e 16 caracteres. Esta dica é ligada ao campo por aria-describedby.
aria-controls. Em um projeto com JavaScript, o valor de aria-expanded deve alternar entre true e false.
Região com aria-live="polite": mensagens importantes podem ser anunciadas sem recarregar a página.
Declarar aria-expanded="false" e nunca atualizar via JavaScript quando o painel abre.
O leitor de tela ouvirá um estado mentiroso.
Landmarks ajudam usuários de leitores de tela a saltar por grandes regiões da página: banner, navigation, main, complementary e contentinfo. Mas, na maioria dos casos, as tags nativas já entregam isso.
<header> equivale ao papel de banner em contexto global.
<nav> equivale a navigation.
<main> equivale a main.
<aside> equivale a complementary.
<footer> equivale a contentinfo.
Evite <nav role="navigation"> ou <main role="main">
sem necessidade. O elemento já possui semântica nativa.
Missão: criar o arquivo pagina-acessivel-aria.html
usando ARIA com responsabilidade, sem substituir HTML semântico nativo.
html lang="pt-BR".header, nav, main, section, aside e footer.aria-label útil.aria-labelledby corretamente.aria-describedby corretamente.aria-hidden="true".aria-expanded e aria-controls.aria-live.aria-current="page".role, aria-label, aria-labelledby e aria-describedby.role="button" em div quando poderia usar button.aria-hidden="true" em elemento focável.aria-label genérico ou incoerente.git status
git add .
git commit -m "aula-30: cria pagina acessivel com aria"
git pushARIA é uma camada semântica para tecnologias assistivas. Usada com sabedoria, melhora interfaces ricas e dinâmicas. Usada com erro, pode destruir a acessibilidade. O Mestre usa ARIA apenas depois de esgotar o poder do HTML semântico.
Esta aula está no nível Mestre dos Mestres porque ensina acessibilidade como arquitetura de sistemas: função, nome, estado, semântica nativa, ARIA responsável e respeito real ao usuário final.