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

Revisar más allá de la apariencia

Ahora recorreremos la página buscando caminos previsibles.

Vamos a descubrir juntos

1
Tab y Shift+Tab recorren controles y enlaces; Enter activa enlaces y los botones nativos admiten teclado. No todo texto necesita una parada de Tab. Conserva el orden del documento; no añadas tabindex positivo para forzar una secuencia visual.
2
El foco debe ser visible. Un enlace inicial “Saltar al contenido” reduce navegación repetida; apunta a main con id. En el proyecto tabindex="-1" permite enfocar ese destino sin añadirlo al orden normal de Tab.
3
Comprueba encabezados, nombres de enlaces, alternativas y labels. Abre details con summary usando teclado. La revisión automática hace comprobaciones simples: no es un validador completo de HTML ni una auditoría WCAG.
4
En computadora, revisa el archivo local con zoom y ventana estrecha; amplía texto y busca cortes. Un lector de pantalla y pruebas con personas aportan evidencias que la inspección visual no ofrece. Anota entorno, observación, corrección y lo pendiente.
5
Al revisar formularios, no bloquees pegar contenido ni usar gestores de contraseñas. Evita pedir de nuevo información ya proporcionada sin necesidad. Estos cuidados se relacionan con entrada redundante y autenticación accesible de WCAG 2.2; por sí solos no demuestran conformidad.

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

✦

TU MISIÓN

Hacer una revisión inicial de teclado, foco, estructura y contenido.

Llévatelo contigo

Haz tres comprobaciones manuales y anota una limitación real. Si no usaste lector de pantalla, registra esa prueba como pendiente.

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>
<a class="skip" href="#conteudo">Saltar al contenido</a>
<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>
<section><h2>Preguntas</h2><details><summary>¿Necesito inscribirme?</summary><p>No. Esta página es solo un proyecto de estudio.</p></details></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.

Revisar más allá de la apariencia

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