Estructura y Navegación

La estructura semántica del HTML y una navegación bien diseñada son la base de cualquier sitio accesible.

Jerarquía de Encabezados

Un solo H1 por página (el título principal).
Orden lógico: H1 → H2 → H3, nunca saltar niveles.
Descriptivos: deben describir el contenido que siguen.
No por estilo: usar por significado semántico, no apariencia.

HTML — Jerarquía correcta

<!-- ✓ Correcto -->
<h1>Manual de Accesibilidad</h1>
  <h2>Normas para Textos</h2>
    <h3>Tamaños de fuente</h3>

<!-- ✗ Incorrecto: salto de niveles -->
<h1>Título</h1>
  <h3>Sin h2 previo</h3>  <!-- Mal -->

Landmarks HTML

Los elementos HTML5 semánticos definen regiones que los lectores de pantalla identifican y permiten navegar directamente.

HTML — Estructura semántica completa

<body>
  <a href="#main" class="skip-link">Saltar al contenido</a>

  <header role="banner">
    <nav aria-label="Navegación principal">...</nav>
  </header>

  <main id="main" role="main">
    <!-- Solo uno por página -->
  </main>

  <aside aria-label="Contenido relacionado">...</aside>
  <footer role="contentinfo">...</footer>
</body>

Si hay múltiples <nav>, cada uno debe tener un aria-label diferente.

Texto de Enlaces

Textos de enlace prohibidos

"Haz clic aquí"
"Más información"
"Leer más"
Solo la URL como texto

HTML — Enlaces accesibles

<!-- ✓ Correcto: descriptivo -->
<a href="/manual.pdf">Descargar Manual (PDF, 2 MB)</a>

<!-- ✓ Enlace externo -->
<a href="https://webaim.org"
   target="_blank"
   rel="noopener noreferrer"
   aria-label="WebAIM (abre en nueva pestaña)">
  WebAIM
</a>

<!-- ✗ Incorrecto -->
<a href="/privacidad">Haz clic aquí</a>

Navegación por Teclado

Teclas de navegación y sus funciones
Tecla	Función
`Tab`	Siguiente elemento interactivo
`Shift + Tab`	Elemento anterior
`Enter` / `Espacio`	Activar botones y enlaces
`Escape`	Cerrar diálogos, menús y tooltips
Flechas	Navegar dentro de componentes

CSS — Focus visible accesible (WCAG 2.4.11)

/* ✓ Correcto */
:focus-visible {{
  outline: 3px solid #95042d;
  outline-offset: 3px;
  border-radius: 4px;
}}

/* ✗ Nunca hacer esto */
* {{ outline: none; }}

Tablas Accesibles

Solo para datos tabulares, nunca para maquetación.

HTML — Tabla accesible

<table>
  <caption>Resultados de evaluación WCAG</caption>
  <thead>
    <tr>
      <th scope="col">Criterio</th>
      <th scope="col">Nivel</th>
      <th scope="col">Estado</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Texto alternativo</th>
      <td>A</td>
      <td>✓ Cumple</td>
    </tr>
  </tbody>
</table>