Seu próximo nível começa aqui
Seu desenvolvimento não pode ter limites. Garanta sua Assinatura Ilimitada e libere uma preparação completa com os melhores professores do Brasil.
Em um portal web, a equipe precisa de um controle clicável que dispare uma ação (abrir ...
Em um portal web, a equipe precisa de um controle clicável que dispare uma ação (abrir modal e enviar dados) e seja acessível por padrão: foco via teclado, comportamento consistente (Enter/Espaço), nome acessível e papel semântico correto, compatível com leitores de tela e automação de testes. O código legado utiliza o seguinte:
<div class="btn" role="button" tabindex="0" onclick="enviar()"
onkeydown="if(event.key==='Enter'||event.key===' '){enviar()}">
Enviar
</div>
Qual decisão de projeto semântico atende melhor às boas práticas de HTML e WAI-ARIA?
A
Manter <div role="button" tabindex="0"> com handlers de teclado para “simular” o nativo, pois isso torna o controle equivalente a <button> sem custos de refatoração.
B
Substituir links de navegação por <span role="link"> para “uniformizar” o estilo, acionando com JavaScript e evitando o comportamento padrão do navegador.
C
Remover o rótulo visível e ficar só com um ícone, confiando em title ou aria-label para resolver o nome acessível e reduzir “ruído visual”.
D
Configurar tabindex="-1" em elementos interativos para “evitar excesso de tab stops”, deixando o foco chegar apenas por JavaScript.
E
Preferir elementos HTML nativos para o papel e aplicar WAI-ARIA apenas para complementar a semântica quando o HTML não for suficiente.