Acessibilidade com JavaScript
Acessibilidade em JavaScript quer dizer que o controlo da encomenda funciona com o teclado e que uma mudança de estado é anunciada. Esta página usa um botão real. Um click põe a linha visível em tea / regular.
Não é a página dos erros
A página anterior lançou missing size. A linha dela lia-se caught / missing size. Esta página não usa throw. O controlo fica na página, e o resultado escreve-se onde se vê.
Usa um botão
<button type="button"> corre o ouvinte de click com um clique do rato, com Enter e com Space. Um div que só escuta click ignora o teclado. O texto do botão é o nome que se ouve.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
});
A linha passa a tea / regular. Enter e Space correm o mesmo ouvinte.
Anuncia a linha nova
textContent atualiza o ecrã. Um leitor de ecrã pode falhar uma mudança silenciosa. aria-live="polite" pede que diga o texto novo depois da frase atual.
<p id="line" aria-live="polite">…</p>
A mudança é anunciada e não corta a frase atual. assertive interrompe. Esta página usa polite.
Sem size, o botão fica desativado
A encomenda é { drink: "tea" } e falta size. Põe button.disabled a true. O botão continua visível. O ouvinte de click não corre.
const order = { drink: "tea" };
const button = document.querySelector("button");
if (!order.size) {
button.disabled = true;
}
O botão continua na página e não faz a encomenda. Não retires o elemento.
Deixa o foco no botão
Quem ativou o botão já está ali. Escreve a linha e depois chama button.focus(). Não chames line.focus() e não escondas o contorno.
const button = document.querySelector("button");
const line = document.querySelector("#line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
O foco fica no botão. A linha não precisa de tabindex. O contorno continua visível.
Quatro hábitos
Cada linha da tabela é uma decisão para este controlo da encomenda.
📊 Controlo de encomenda acessível
| Hábito | Usar | Evitar |
|---|---|---|
| Ação | button com type="button" |
um div que só escuta click |
| Estado | aria-live="polite" na linha |
uma troca de texto em silêncio |
| Indisponível | button.disabled = true |
retirar o botão |
| Foco | button.focus() e um contorno visível |
line.focus() ou outline: none |
Um botão toma a ação. A linha ao vivo diz o resultado. disabled mantém um controlo que não pode correr. O contorno mostra onde está o foco.
A linha da página
A página liga um botão à linha ao vivo. Nada é lançado.
<!DOCTYPE html>
<html>
<body>
<button id="order" type="button">Place order</button>
<p id="line" aria-live="polite">…</p>
<script>
const button = document.getElementById("order");
const line = document.getElementById("line");
button.addEventListener("click", () => {
line.textContent = "tea / regular";
button.focus();
});
</script>
</body>
</html>
Depois do click, a linha lê-se tea / regular. Enter e Space fazem o mesmo. caught / missing size pertencia à página dos erros.
Ao balcão
- Clica no botão. A linha lê-se tea / regular.
- Prime Enter no mesmo botão. O ouvinte corre outra vez.
- Põe aria-live="polite" na linha para o texto novo ser anunciado.
- Sem size, põe button.disabled a true. O botão fica, e click não corre.
- Depois de um click com sucesso, chama button.focus(). Não chames line.focus().
Falhas comuns
Um click num div não é um controlo de teclado. disabled não é o mesmo que apagar o botão.
- Usar um
divpara a ação da encomenda - Atualizar a linha e esquecer
aria-live - Retirar o botão quando falta
size - Chamar
line.focus()depois de uma encomenda com sucesso - Esconder o contorno do foco
- Ler a linha como caught / missing size
Fica com isto
- Um
buttoncorre a encomenda com o rato, Enter e Space aria-live="polite"anunciatea / regularsem interromper- Sem
size,button.disabledficatruee o botão permanece na página - O foco fica no botão
- A linha da página é tea / regular
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo