Rullst AcademyRullst Academy/Lección
HTML semántico y accesibilidad · Lección 03 / 10

Los enlaces llevan; los botones actúan

“Haz clic aquí” no dice adónde vamos. Daremos nombres útiles a los caminos.

Rutas de aprendizaje12 min

Vamos a descubrir juntos

  1. 1

    Un <a href="..."> navega; un button realiza una acción. Un div que parece botón no recibe automáticamente foco, teclado ni significado de botón. Prefiere el elemento nativo adecuado.

  2. 2

    href="#programa" apunta a id="programa" en la misma página. Cada id debe ser único. agenda.html es relativo; https://example.org/agenda es absoluto. La vista previa permite solo destinos internos; prueba otras rutas en el archivo local.

  3. 3

    Escribe “Ver programa del taller”, no solo “aquí”. El texto debe anticipar el destino, incluso al recorrer una lista de enlaces. No prometas una descarga si el destino es una página.

  4. 4

    Usa Tab para llegar a un enlace y Enter para abrirlo. Un botón nativo acepta teclado, pero type="button" no inventa una acción: el comportamiento propio necesita JavaScript. El botón de práctica no tiene acción intencionalmente.

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.

Enlaces oficiales y siguiente paso

✦
TU MISIÓN

Elegir enlaces y botones nativos y describir destinos claros.

Ahora te toca

Taller de descubrimientos

Lee, predice, prueba

Queremos ir a Programa y después crear una acción de guardar.
Prepara tus respuestas y comprueba cuando estés listo.
Una pausa para entender

¿Escribir solo un botón Guardar almacena datos?

Necesito una pista

Compara la intención con el significado de los elementos; la apariencia sola no demuestra accesibilidad.

Cargando tu camino…

Llévatelo contigo

Crea dos enlaces internos con nombres distintos y prueba ambos con teclado. Cambia un id para observar un destino roto y repáralo.

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…

Rullstpetbot

La IA puede equivocarse. Consulta el material de la lección.