E1 · Zerar a cópia
20 minEdite /tmp/oficina/antes.html com os seis consertos, sem olhar depois.html. Rode o arvore.mjs a cada mudança e veja a lista encolher.
Pronto quando: node arvore.mjs /tmp/oficina/antes.html → problemas: 0 e saída: 0.
Aula 3 · 20 min
HTML semântico e formulário bem rotulado: a interface que todo agente já lê
Antes de qualquer ferramenta para agentes, existe uma interface que todos eles já leem: o HTML. Rótulo ligado ao campo, botão de verdade, região principal, título, idioma e texto alternativo. É estável, serve para leitor de tela e para agente, e não depende de navegador experimental. Nesta aula você conserta a página de exemplo até zerar a conferência.
Começar a aula
Nesta aula você vai
- 1Seis consertos que o agente sente na hora
- 2Elemento nativo antes de ARIA
- 3Conferir com o arvore.mjs até zero
- 4Levar o mesmo conserto para o seu site
Objetivo: corrigir rótulos, botão, regiões e alt até o arvore.mjs não achar nenhum problema na sua cópia da página.
01Seis consertos, da página antiga à nova
Clique em cada um. Todos aparecem na conferência do arvore.mjs.
Clique em cada bloco do diagrama para ver o que ele faz.
Elemento nativo primeiro: button, label, main. ARIA só onde o HTML não tem o elemento certo.
02O formulário consertado
O trecho que mudou de antes.html para depois.html. O formulário funciona sozinho, para pessoas e para qualquer agente que opera a tela.
Trecho · kit/site/depois.html
<html lang="pt-BR">
…
<main>
<h1>Agendar revisão</h1>
<img src="bike.svg" width="60" height="40" alt="Bicicleta na bancada da oficina">
<form id="agendar" aria-describedby="ajuda">
<p id="ajuda">Escolha o serviço e o dia. A oficina confirma por e-mail.</p>
<label for="nome">Seu nome</label>
<input id="nome" name="nome" autocomplete="name" required>
<label for="servico">Serviço</label>
<select id="servico" name="servico" required>
<option value="">Escolha</option>
<option value="basica">Revisão básica</option>
<option value="completa">Revisão completa</option>
</select>
<label for="data">Data</label>
<input id="data" name="data" type="date" required>
<button type="submit">Agendar</button>
<output id="resultado" role="status" aria-live="polite"></output>
</form>
</main>Terminal · conferir depois.html
cd ~/projetos/formacao-webmcp-base-v72/kit node arvore.mjs depois; echo "saída: $?"
Exemplo do repositório
## árvore de acessibilidade · 15 linhas · 415 bytes
- main:
- heading "Agendar revisão" [level=1]
- img "Bicicleta na bancada da oficina"
- paragraph: Escolha o serviço e o dia. A oficina confirma por e-mail.
- text: Seu nome
- textbox "Seu nome"
- text: Serviço
- combobox "Serviço":
- option "Escolha" [selected]
- option "Revisão básica"
- option "Revisão completa"
- text: Data
- textbox "Data"
- button "Agendar"
- status
## conferência · http://127.0.0.1:PORTA/depois.html
problemas: 0
saída: 0Agora tudo tem papel e nome: heading, img com descrição, os três campos, o button "Agendar" e o status para a resposta. A árvore cresceu de 182 para 415 bytes, e a conferência dá zero.
Pôr role="button" e aria-label no div clicável faz a árvore mostrar um botão, mas ele não recebe foco pelo teclado nem dispara com Enter sem mais JavaScript, e não envia o formulário. O arvore.mjs continua acusando <div> clicável que não é botão, de propósito: troque pelo button.
03A sua cópia para consertar
Copie antes.html para uma pasta sua e confira: 10 problemas. Depois edite a cópia até zerar. O arvore.mjs aceita o caminho de qualquer .html.
Terminal · copiar e conferir
O=${TMPDIR:-/tmp}/oficina
mkdir -p $O && cp ~/projetos/formacao-webmcp-base-v72/kit/site/antes.html $O/
cd ~/projetos/formacao-webmcp-base-v72/kit
node arvore.mjs $O/antes.html | tail -3; echo "saída: ${PIPESTATUS[0]}"Exemplo do repositório
- campo #servico sem <label> - campo #data sem <label> problemas: 10 saída: 1
As três últimas linhas da conferência da cópia, antes do conserto. A lista inteira está na aula 2.
04Prática
Zerar a cópia e levar o conserto para o seu site.
E2 · O formulário ainda funciona
5 minRode o tres-jeitos.mjs na sua cópia consertada: o agente tem de achar os três campos e o botão pelo nome e ler o resultado.
Pronto quando: node tres-jeitos.mjs /tmp/oficina/antes.html → linha 2 · operar com controles na árvore · 0 sem nome e saída: 0.
E3 · Um conserto no seu site
30 minNa página do seu site da aula 2, aplique os consertos (comece pelos rótulos e pelo botão) numa cópia local ou num ambiente de teste. Publique quando a conferência baixar.
Pronto quando: node arvore.mjs na página (cópia ou publicada) mostra problemas: menor que o número anotado na aula 2.
05Teste da aula
Pergunta 1 de 4
Qual é o jeito certo de dar nome a um campo de texto de formulário?competência
Correto
O label ligado pelo for vira o nome acessível e fica visível. Placeholder some ao digitar e texto solto acima do campo não fica ligado a ele.Não é essa
O label ligado pelo for vira o nome acessível e fica visível. Placeholder some ao digitar e texto solto acima do campo não fica ligado a ele.Rever: Seis consertos, da página antiga à novaPergunta 2 de 4
Por que trocar o div clicável por button, em vez de pôr role="button" no div?
Correto
Elemento nativo primeiro: button recebe foco, dispara com Enter e envia o form. O role só muda o que a árvore mostra; o resto você teria de programar.Não é essa
Elemento nativo primeiro: button recebe foco, dispara com Enter e envia o form. O role só muda o que a árvore mostra; o resto você teria de programar.Rever: O formulário consertadoPergunta 3 de 4
A resposta do formulário aparece num div qualquer. O que muda ao usar
Correto
status é um papel da árvore: o agente lê ali o que aconteceu depois do clique. Não tem nada de WebMCP; é HTML estável.Não é essa
status é um papel da árvore: o agente lê ali o que aconteceu depois do clique. Não tem nada de WebMCP; é HTML estável.Rever: Seis consertos, da página antiga à novaPergunta 4 de 4
Este conserto de HTML depende de origin trial ou de flag no Chrome?competência
Correto
Rótulo, botão, regiões e alt são HTML de sempre. É a base estável; o WebMCP é que é experimental.Não é essa
Rótulo, botão, regiões e alt são HTML de sempre. É a base estável; o WebMCP é que é experimental.Rever: Seis consertos, da página antiga à novaTeste concluído
Você acertou {a} de {n}. Acertando todas, a aula é marcada como concluída.Escolha uma alternativa. A explicação aparece depois da sua tentativa.
06Em três frases
Seis consertoslabel, button, main e h1, lang, alt e status.
Nativo primeiroElemento certo antes de ARIA; ARIA não envia formulário.
Confira até zeroO arvore.mjs diz o que falta, na sua cópia e no seu site.