HTML semántico y accesibilidad · Lección 07 / 10

Cada campo debe presentarse

Un campo vacío no explica qué espera. Haremos comprensible el formulario antes de llenarlo.

Vamos a descubrir juntos

1
Un label visible explica un control. for="alias" debe coincidir con id="alias" del input; pulsar la etiqueta enfoca el campo. Id identifica el elemento; name identifica su valor en un envío.
2
Placeholder es una pista temporal y desaparece al escribir; no sustituye label. Coloca instrucciones persistentes cerca y relaciónalas con aria-describedby cuando haga falta. Ese atributo complementa HTML nativo, no corrige instrucciones vagas.
3
Agrupa opciones relacionadas con fieldset y nombra el grupo con legend. Los radios del grupo comparten name; cada opción tiene su id y label. Select ofrece opciones nativas sin construir un menú propio.
4
Usa solo un alias inventado y elecciones de actividad. No es una inscripción real. Escribe, pulsa etiquetas y navega con teclado; los valores no se envían ni se guardan en el borrador del código.

Taller de HTML: escribir, observar, revisar

Edita HTML en “Mis archivos y GitHub” y actualiza la vista previa. Usa elementos de estudio y estilos de lectura: scripts, CSS propio y navegación externa quedan desactivados. Solo route.svg del kit se muestra como imagen.

Ir a mi HTML

Estas comprobaciones no son validación completa de HTML ni auditoría WCAG. Revisa contenido, teclado, zoom y tecnologías de asistencia; registra lo pendiente.

El código cambió. Actualiza la vista previa para revisar esta versión.Vista previa actualizada. Lee las pistas y haz las pruebas manuales.Escribe algo de HTML antes de actualizar la vista previa.Usa hasta 65.536 caracteres y una estructura menor en este taller.No se encontraron pistas simples. La revisión manual sigue siendo necesaria.No se encontraron encabezados.Práctica completada localmente; nada fue enviado ni registrado.Imagen no cargada en vista previaRevisa doctype, idioma de html y título de pestaña en el original.En este proyecto usa un main y un h1 descriptivo.Hay un salto de nivel entre encabezados; revisa jerarquía y significado.Hay ids repetidos; da un identificador único a cada destino o control.Revisa enlaces sin nombre, sin href o con destinos internos ausentes.Hay una imagen sin alt. Decide su función antes de escribir una alternativa.Hay un control sin label asociado. Revisa for/id o el label que lo envuelve.Revisa caption y encabezados th con scope en las tablas simples del proyecto.Evita tabindex positivo; revisa el orden natural de navegación.Prefiere elementos nativos a div/span con rol de botón en esta práctica.La vista previa ignora recursos fuera del conjunto de estudio. Revisa el documento completo localmente.data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgNjAwIDEyMCI+PHJlY3Qgd2lkdGg9IjYwMCIgaGVpZ2h0PSIxMjAiIHJ4PSIxNiIgZmlsbD0iI2VkZjVmYSIvPjxnIGZpbGw9IiMxMDJlNDgiPjxjaXJjbGUgY3g9IjkwIiBjeT0iNjAiIHI9IjM2Ii8+PGNpcmNsZSBjeD0iMzAwIiBjeT0iNjAiIHI9IjM2Ii8+PGNpcmNsZSBjeD0iNTEwIiBjeT0iNjAiIHI9IjM2Ii8+PC9nPjxnIHN0cm9rZT0iIzE2NmY2NiIgc3Ryb2tlLXdpZHRoPSI1IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTQwIDYwaDEwNW0tMTYtMTIgMTYgMTItMTYgMTJNMzUwIDYwaDEwNW0tMTYtMTIgMTYgMTItMTYgMTIiLz48L2c+PGcgZmlsbD0iI2ZmZiIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMzYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPjx0ZXh0IHg9IjkwIiB5PSI3MyI+MTwvdGV4dD48dGV4dCB4PSIzMDAiIHk9IjczIj4yPC90ZXh0Pjx0ZXh0IHg9IjUxMCIgeT0iNzMiPjM8L3RleHQ+PC9nPjwvc3ZnPg0K

Enlaces oficiales y siguiente paso

Referencia para investigar

✦

TU MISIÓN

Asociar etiquetas, instrucciones y grupos a controles nativos.

Llévatelo contigo

Crea una elección entre dos actividades ficticias. Comprueba las etiquetas pulsándolas y explica id, for y name.

A tu ritmo

Mis archivos y GitHub

Cada lección puede convertirse en un registro propio: código, notas o un plan de práctica. Guardar un archivo en GitHub es opcional y no cambia tus XP.

Manual del alumno

El editor y las descargas se abren cuando esta lección esté disponible para tu cuenta. Revisa el acceso indicado abajo o vuelve al mapa de la ruta.

Comprobando tu acceso a esta lección…

Tu camino, paso a paso

Descargar material de la actividad

Descarga el ejemplo de la lección y un cuaderno para tus notas. El ZIP incluye una guía para organizar actividades en uno o varios repositorios. Publicar es opcional; las cuentas habilitadas también pueden usar el botón de envío a GitHub.

Tu archivo de esta lección

Edita el ejemplo o registra lo aprendido. Este espacio no ejecuta código ni corrige respuestas. El borrador se guarda solo en este navegador, separado por cuenta; tú decides cuándo descargar o enviar a GitHub.

El ejemplo puede ser solo un fragmento o una guía. Cambiar la extensión no lo convierte en un programa completo. El ZIP de la actividad contiene material inicial; el botón de archivo editado descarga tu texto.

Mi código o mis notas

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self' data:; style-src 'self'; script-src 'self'; base-uri 'none'; form-action 'none'">
<title>Taller de ideas</title>
<link rel="stylesheet" href="style.css">
<script src="demo.js" defer></script>
</head>
<body>
<header><h1>Taller de ideas</h1><p>Un taller ficticio para dibujar, probar y revisar ideas con papel.</p></header>
<nav aria-label="Navegación principal"><a href="#programa">Ver programa del taller</a> · <a href="#treino">Probar formulario</a></nav>
<main id="conteudo" tabindex="-1">
<section id="programa"><h2>Programa</h2>
<h3>Materiales</h3>
<ul><li>Papel reutilizado</li><li>Lápiz</li></ul>
<h3>Pasos</h3>
<ol><li>Dibujar una idea</li><li>Probar y observar</li><li>Revisar con evidencia</li></ol>
<figure><img src="route.svg" width="600" height="120" alt="Idea, después prueba, después revisión"><figcaption>Nuestro proceso tiene tres etapas.</figcaption></figure>
<table><caption>Programa de actividades ficticias</caption><thead><tr><th scope="col">Actividad</th><th scope="col">Minutos</th></tr></thead><tbody><tr><th scope="row">Dibujar</th><td>10</td></tr><tr><th scope="row">Probar</th><td>15</td></tr></tbody></table>
</section>
<section id="treino"><h2>Formulario de práctica</h2>
<p id="form-help">Usa un alias inventado de hasta 20 caracteres. Campo obligatorio. No es una inscripción y nada será enviado.</p>
<form><label for="alias">Alias ficticio (obligatorio)</label>
<input id="alias" name="alias" type="text" required maxlength="20" aria-describedby="form-help" autocomplete="off">
<fieldset><legend>¿Qué actividad prefieres?</legend>
<label for="draw"><input id="draw" type="radio" name="activity" value="draw" checked> Dibujar</label>
<label for="test"><input id="test" type="radio" name="activity" value="test"> Probar</label></fieldset>
<button type="submit">Comprobar práctica local</button></form>
<p id="practice-result" role="status" data-practice-message="Práctica completada localmente; nada fue enviado ni registrado."></p></section>
</main>
<footer><p>Proyecto ficticio de aprendizaje.</p></footer>
</body>
</html>

Formato del archivo

Tu texto se guardará en este navegador al editarlo. En un equipo compartido, borra los borradores al terminar.

El envío directo acepta hasta 8 KiB de texto en un archivo. Usa las descargas y la guía manual para proyectos con varios archivos.

Cada campo debe presentarse

Vamos a descubrir juntos

Taller de HTML: escribir, observar, revisar

Vista previa de estudio

Pistas para tu revisión

Mapa de encabezados

Enlaces oficiales y siguiente paso

Ahora te toca

Lee, predice, prueba

Llévatelo contigo

Mis archivos y GitHub

Tu archivo de esta lección

Guardar en mi GitHub

Rullstpetbot