Base: cómo usan los agentes un sitio hoy|INEMA.CLUB-PRO

Clase 3 · 20 min

HTML semántico y formulario bien etiquetado: la interfaz que todo agente ya lee

Antes de cualquier herramienta para agentes, existe una interfaz que todos ellos ya leen: el HTML. Etiqueta ligada al campo, botón de verdad, región principal, título, idioma y texto alternativo. Es estable, sirve para el lector de pantalla y para el agente, y no depende de un navegador experimental. En esta clase arreglas la página de ejemplo hasta dejar la verificación en cero.

Comenzar la clase
Pared de herramientas de un taller de bicicletas, cada herramienta en su contorno con una etiqueta en blanco, y un monitor en la esquina.

En esta clase vas a

  1. 1Seis arreglos que el agente nota al instante
  2. 2Elemento nativo antes que ARIA
  3. 3Verificar con arvore.mjs hasta llegar a cero
  4. 4Llevar el mismo arreglo a tu sitio

Objetivo: corregir etiquetas, botón, regiones y alt hasta que arvore.mjs no encuentre ningún problema en tu copia de la página.

01Seis arreglos, de la página vieja a la nueva

Haz clic en cada uno. Todos aparecen en la verificación de arvore.mjs.

Haz clic en cada bloque del diagrama para ver qué hace.

Elemento nativo primero: button, label, main. ARIA solo donde el HTML no tiene el elemento correcto.

02El formulario arreglado

El fragmento que cambió de antes.html a depois.html. El formulario funciona solo, para personas y para cualquier agente que opera la pantalla.

Fragmento · 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 · verificar depois.html
cd ~/projetos/formacao-webmcp-base-v72/kit
node arvore.mjs depois; echo "saída: $?"
Ejemplo del repositorio
## á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: 0

Ahora todo tiene rol y nombre: heading, img con descripción, los tres campos, el button "Agendar" y el status para la respuesta. El árbol creció de 182 a 415 bytes, y la verificación da cero.

03Tu copia para arreglar

Copia antes.html a una carpeta tuya y verifica: 10 problemas. Después edita la copia hasta llegar a cero. arvore.mjs acepta la ruta de cualquier .html.

Terminal · copiar y verificar
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]}"
Ejemplo del repositorio
  - campo #servico sem <label>
  - campo #data sem <label>
problemas: 10
saída: 1

Las tres últimas líneas de la revisión de la copia, antes del arreglo. La lista completa está en la lección 2.

04Práctica

Dejar la copia en cero y llevar el arreglo a tu sitio.

E1 · Dejar la copia en cero

20 min

Edita /tmp/oficina/antes.html con los seis arreglos, sin mirar depois.html. Ejecuta el arvore.mjs en cada cambio y mira cómo se acorta la lista.

Listo cuando: node arvore.mjs /tmp/oficina/antes.html → problemas: 0 y saída: 0.

E2 · El formulario sigue funcionando

5 min

Ejecuta el tres-jeitos.mjs en tu copia arreglada: el agente tiene que encontrar los tres campos y el botón por el nombre y leer el resultado.

Listo cuando: node tres-jeitos.mjs /tmp/oficina/antes.html → línea 2 · operar con controles na árvore · 0 sem nome y saída: 0.

E3 · Un arreglo en tu sitio

30 min

En la página de tu sitio de la lección 2, aplica los arreglos (empieza por las etiquetas y el botón) en una copia local o en un entorno de pruebas. Publica cuando la revisión baje.

Listo cuando: node arvore.mjs en la página (copia o publicada) muestra problemas: menor que el número que anotaste en la lección 2.

05Prueba de la lección

Pregunta 1 de 4

¿Cuál es la forma correcta de dar nombre a un campo de texto de un formulario?competencia

06En tres frases

Seis arregloslabel, button, main y h1, lang, alt y status.
Nativo primeroEl elemento correcto antes que ARIA; ARIA no envía formularios.
Revisa hasta ceroEl arvore.mjs te dice qué falta, en tu copia y en tu sitio.

Para ir más allá

MDN: el elemento labelMDN: el rol ARIA statusKit del curso: antes.html y depois.htmlFormación inemaSEO: página superficial y lo que lee el robot
Clase anteriorSiguiente clase