Accesibilidad (a11y)

¿Qué es la Accesibilidad Web?

La accesibilidad web (a11y—"a" + 11 letras + "y") asegura que las personas con discapacidades puedan usar tu sitio web. Esto incluye:

La accesibilidad beneficia a todos—usuarios móviles, personas mayores, personas con lesiones temporales, usuarios bajo luz solar intensa, etc.

HTML Semántico: La Base

Usar los elementos HTML correctos proporciona accesibilidad incorporada:

<div onclick="submit()">
  Haz clic aquí
</div>

<button onclick="submit()">
  Haz clic aquí
</button>

Texto Alternativo para Imágenes

Esencial para usuarios de lectores de pantalla y cuando las imágenes no cargan.

<img src="perro.jpg" />

<img src="grafico.png" alt="imagen" />

<img src="logo.svg" alt="logo.svg" />

<img src="perro.jpg" alt="Golden retriever jugando a buscar" />

<img src="grafico.png" alt="Las ventas aumentaron 45% en Q4 2024" />

<!-- Imágenes decorativas -->
<img src="divisor.png" alt="" />

Navegación por Teclado

Muchos usuarios navegan sin ratón. Asegura que todos los elementos interactivos sean accesibles por teclado.

<div onclick="mostrarMenu()">
  Menú
</div>

<span onclick="abrirModal()">
  Ver detalles
</span>

<button onclick="mostrarMenu()">
  Menú
</button>

<button onclick="abrirModal()">
  Ver detalles
</button>

ARIA (Aplicaciones de Internet Ricas Accesibles)

Los atributos ARIA mejoran la accesibilidad cuando el HTML semántico no es suficiente.

<button aria-label="Cerrar diálogo">
  x
</button>

<button aria-label="Buscar">
  (icono de búsqueda)
</button>

<a href="/perfil" aria-label="Ver tu perfil">
  <img src="avatar.jpg" alt="" />
</a>

<h2 id="titulo-dialogo">Confirmar eliminación</h2>
<p id="desc-dialogo">Esta acción no se puede deshacer.</p>
<div
  role="dialog"
  aria-labelledby="titulo-dialogo"
  aria-describedby="desc-dialogo"
>
  <!-- contenido del diálogo -->
</div>

<button>
  <span aria-hidden="true">*</span>
  Favorito
</button>

<!-- Iconos decorativos -->
<span class="icon" aria-hidden="true">-></span>

<div role="button" tabindex="0">
  Botón personalizado
</div>

<div role="navigation">
  <!-- enlaces de navegación -->
</div>

<div role="alert">
  ¡Formulario enviado con éxito!
</div>

<!-- Polite: espera a que el lector termine -->
<div aria-live="polite">
  3 artículos en el carrito
</div>

<!-- Assertive: interrumpe inmediatamente -->
<div aria-live="assertive" role="alert">
  Error: ¡El pago falló!
</div>

Gestión del Foco

Haz visibles los estados de foco y gestiona el flujo del foco:

/* Elimina el contorno de foco */
button:focus {
  outline: none;
}

/* Estilos de foco personalizados */
button:focus {
  outline: 2px solid blue;
  outline-offset: 2px;
}

/* O usa :focus-visible */
button:focus-visible {
  outline: 2px solid blue;
}