Curso de HTML / Accesibilidad HTML: encabezados, enlaces, imágenes y teclado

La accesibilidad básica en HTML empieza por utilizar elementos que correspondan a su función, ordenar encabezados, escribir enlaces comprensibles y proporcionar alternativas de imagen adecuadas. Las interacciones también deben poder completarse con teclado y un foco reconocible. El marcado correcto aporta una base, pero no garantiza por sí solo la accesibilidad de toda la página.

Organizar el contenido para poder recorrerlo

Un encabezado expresa una posición en la estructura, no solo texto grande. Un esquema habitual utiliza h1 para el tema general, h2 para apartados y h3 para subapartados. Ajusta los tamaños mediante CSS en lugar de elegir un nivel incorrecto por su apariencia.

Lee solo los encabezados y pregunta si describen un recorrido comprensible. “Información de entrega” puede contener “Zonas de entrega” y “Plazos de entrega”. Evita encabezados vacíos o que prometan un contenido diferente del texto siguiente. La práctica de encabezados y párrafos permite comparar los niveles de forma concreta.

Nombrar enlaces y dar alternativas a las imágenes

Un conjunto de enlaces llamados “aquí” no explica adónde conduce cada uno. Describe el destino o el propósito: “Leer la guía de uso” ofrece más información. Si el enlace descarga un archivo, aclara su tipo cuando sea necesario para decidir.

La alternativa de una imagen depende de lo que aporta en ese lugar. Para una foto informativa, describe el contenido relevante; para una imagen puramente decorativa puede corresponder alt="". Si la imagen es el único contenido de un enlace, su alternativa debe comunicar también el propósito del enlace.

No enumeres colores y formas cuando lo que importa es una acción o un resultado. El uso de alt en imágenes y el árbol de decisión de W3C WAI ayudan a elegir según el contexto.

Recorrer las interacciones sin ratón

Utiliza Tab para visitar enlaces, campos y botones. Debes poder reconocer el elemento enfocado y activarlo de la manera esperada: un enlace suele abrirse con Enter y un botón admite Enter o Espacio. Un div con un manejador de clic no obtiene automáticamente el significado y comportamiento de un botón.

Prueba también el recorrido tras abrir o cerrar contenido y después de un error. El foco no debería perderse en contenido oculto. Un nombre visible junto al campo no basta si no está asociado: la prueba de label e input comprueba esa relación.

HTML aporta acciones nativas. Los menús complejos y los mensajes personalizados pueden necesitar gestión adicional del estado y del foco; deben probarse después de añadir esa programación.

Preparar una página para la revisión manual

Guarda el siguiente documento como accessible-page.html. Añade a la misma carpeta la imagen de 960 píxeles de los archivos de práctica de imágenes. El formulario solo sirve para comprobar entrada y datos GET, no para recibir un mensaje real.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Keyboard-testing practice</title>
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    img { max-width: 100%; height: auto; }
    input { max-width: 100%; font: inherit; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <a href="#main-content">Skip to main content</a>
  <header>
    <nav aria-label="On this page">
      <a href="#guide">Visitor guide</a>
      <a href="#contact">Contact practice</a>
    </nav>
  </header>
  <main id="main-content" tabindex="-1">
    <h1>Small Garden guide</h1>
    <section id="guide">
      <h2>Visitor guide</h2>
      <p>Bring comfortable shoes and water.</p>
      <img src="html-image-sample-lake-tree-960-v1.webp"
           alt="A tree on a small island in a lake with mountains beyond" width="960" height="540">
    </section>
    <section id="contact">
      <h2>Practice a contact field</h2>
      <form method="get">
        <label for="practice-email">Email (required)</label>
        <input id="practice-email" name="email" type="email"
               aria-describedby="email-help" required>
        <p id="email-help">Use name@example.com instead of a real address.</p>
        <button type="submit">Inspect entered values</button>
      </form>
    </section>
  </main>
</body>
</html>

Desde el inicio, pulsa Tab para enfocar el enlace de salto y Enter para llegar al contenido principal sin recorrer de nuevo el menú. tabindex="-1" permite que main reciba foco sin añadirlo como una parada ordinaria de Tab. Comprueba después que el recorrido restante sigue un orden útil.

Llega al formulario y compara un envío vacío, el valor abc y una dirección ficticia con formato correcto. La etiqueta y las instrucciones deben permanecer disponibles. Revisa un ancho de 390 píxeles y amplía el texto. Cambia temporalmente el nombre de la imagen para examinar la alternativa y restaura el archivo al terminar.

Entender el alcance de cada comprobación

Una herramienta automática puede localizar algunos errores, pero no siempre juzga si el texto de un enlace orienta o si una alternativa explica correctamente una imagen. Combina sus resultados con teclado, ampliación y, cuando corresponda, un lector de pantalla.

Superar esta práctica no demuestra que se hayan satisfecho todos los requisitos de accesibilidad. Las comprobaciones iniciales de W3C WAI indican expresamente ese alcance. Empieza por los recorridos importantes del sitio y registra problemas concretos: un informe sin avisos no sustituye una evaluación completa ni la experiencia de uso.