moisesfilho Goal: Garantir que a aplicação possa ser navegada por usuários de teclado e leitores de tela e que a estrutura de UI seja compreendida semanticamente pelo navegador.
Instructions:
- HTML Semântico: Em vez de
<div>e<span>, use sempre que aplicável tags semânticas (<nav>,<header>,<main>,<article>,<section>,<button>,<a>). - Botões e Ações: Todo elemento interativo deve ser focável. Elementos clicáveis que não são links devem ser
<button type="button">. Sempre adicione o atributoaria-labelse o botão contiver apenas ícones sem texto visual. - Navegação por Teclado: Confirme que itens interativos customizados possuam
tabindex="0". Em elementos como modais, implemente o comportamento de "Focus Trap" e possibilidade de fechamento pelo teclado (ESC). - Feedback Visual: Elementos de interface precisam deixar claro seu estado (focado/ativo/desativado). Use atributos
aria-expandedpara sanfonas/menus,aria-disabledearia-busyouaria-live="polite"para indicar carregamento assíncrono.
Constraints:
- Não use
tabindexmaior que 0. - Não remova os estilos de
:focus(ou:focus-visible) a menos que os substitua por um estilo customizado visível.