♿ 1.4 · Accesibilidad Web: la web es para todas las personas

🎯 Objetivo del tema

🗺️ Mapa del tema

Según la OMS, el 15% de la población mundial vive con alguna forma de discapacidad. Además, todos envejecemos, todos nos lesionamos alguna vez, y todos tenemos momentos donde no podemos usar el mouse (cargando cosas, en una pantalla rota, en el transporte público). La accesibilidad no es caridad: es diseñar productos que funcionen para el 100% de las personas.

1.4.1 Qué es accesibilidad y por qué importa

Accesibilidad web significa que personas con discapacidad pueden percibir, entender, navegar e interactuar con tu página, y contribuir a ella. Es lo opuesto a una 'barrera': un elemento que excluye a alguien. No es opcional: en México y muchos países es OBLIGACIÓN LEGAL.

Los tres argumentos a favor

• Ético: excluir personas por diseño es discriminación. Punto.
• Legal: en México, la Ley Federal de Telecomunicaciones y la NOM-151 exigen accesibilidad. En la UE y EE.UU. las multas son millonarias.
• Comercial: el 15% de la población mundial + 100% que envejece + 100% que en algún momento tiene una limitación = un mercado enorme que tus competidores ignoran.

El mito del '1% de usuarios'

Algunas empresas argumentan 'solo el 1% de nuestros usuarios necesita accesibilidad' para no invertir en ella. El dato real, según la OMS y la W3C:

1.4.2 Las 4 categorías de discapacidad

Para diseñar bien, hay que entender las barreras. Las WCAG dividen las discapacidades en 4 categorías. Cada una requiere soluciones diferentes: lo que ayuda a una persona puede no servir a otra.

Además de estas 4 categorías, considera la accesibilidad TEMPORAL: brazo enyesado, ojos cansados, ambiente ruidoso, conexión lenta. Y la accesibilidad SITUACIONAL: usuario con prisa, en transporte público, con luz solar directa en la pantalla. Las buenas prácticas de WCAG cubren todos estos casos.

1.4.3 WCAG y los 4 principios POUR

Las Pautas de Accesibilidad para el Contenido Web (WCAG, por sus siglas en inglés) son el estándar internacional creado por la W3C. Organizan TODAS las reglas de accesibilidad alrededor de 4 principios fáciles de recordar, con el acrónimo POUR.

Los 3 niveles de conformidad

• Nivel A: mínimo indispensable. Sin esto, hay contenido INACCESIBLE para grupos enteros (ej: video sin subtítulos excluye a sordos).
• Nivel AA: el estándar legal en la mayoría de países. Cumple la mayoría de usuarios (ej: contraste mínimo 4.5:1).
• Nivel AAA: oro puro. A veces imposible de cumplir para TODO el contenido (ej: contraste 7:1 + lenguaje de nivel primaria).

1.4.4 Contraste, color y tipografía accesibles

El contraste de color es la barrera más fácil de detectar y la más común. Según estudios, el 8% de hombres y 0.5% de mujeres tienen algún grado de daltonismo. Una combinación de colores 'bonita' para ti puede ser INVISIBLE para ellos.

La regla 4.5:1

Para texto normal, la proporción de contraste entre el color del texto y el color de fondo debe ser al menos 4.5:1 (Nivel AA). Para texto grande (18pt o 14pt bold), basta 3:1. Esto se mide con fórmulas de luminancia relativa, pero hay herramientas que lo calculan por ti: WebAIM Contrast Checker, Stark, axe DevTools.

Nunca comuniques solo con color

Tipografía accesible

• Tamaño mínimo: 16px para texto corrido. Para texto de UI (botones, labels), 14px mínimo.
• Interlineado: 1.5x el tamaño de la fuente como mínimo.
• Longitud de línea: entre 50 y 75 caracteres (ch a monoespaciado).
• Alineación: justificado solo en columnas estrechas. Mejor izquierda para texto largo.
• Familias sans-serif (Arial, Helvetica, Inter, Roboto) son más legibles en pantalla que las serif.

1.4.5 Navegación por teclado y focus

El 30% de usuarios con discapacidad motora NO usa mouse. Personas ciegas navegan exclusivamente con teclado. Tu página DEBE ser operable solo con Tab, Enter, flechas, Escape y atajos. Si no lo es, estás excluyendo a millones de personas.

El orden del foco

Cuando el usuario presiona Tab, el foco debe ir al siguiente elemento interactivo en orden LÓGICO de lectura (de izquierda a derecha, arriba a abajo en idiomas occidentales). El orden natural del DOM suele funcionar, pero a veces el CSS lo rompe (position: absolute, flexbox con order personalizado). En ese caso, usa tabindex="0" para forzar el orden.

El indicador de foco DEBE verse

/* Mal: quita el focus visible y no pone nada en su lugar */
button:focus { outline: none; }

/* Bien: focus visible, claro y con buen contraste */
button:focus-visible {
  outline: 3px solid #FF6B00;
  outline-offset: 2px;
}

/* O personalizar para cada estado */
button:focus {
  box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.5);
}

Estilos de focus accesibles (CSS)

El 'skip link'

El skip link (enlace de salto) es un enlace invisible al inicio de la página que permite a usuarios de teclado saltarse el menú de navegación e ir directo al contenido. Aparece solo cuando recibe foco con Tab. Es un detalle pequeño que mejora enormemente la experiencia.

<!-- Al inicio del <body> -->
<a href="#contenido-principal" class="skip-link">
  Saltar al contenido principal
</a>

<!-- ... header y nav ... -->

<main id="contenido-principal" tabindex="-1">
  <!-- El contenido principal -->
</main>

Skip link en HTML

/* Skip link: invisible por defecto, visible al recibir foco */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

CSS del skip link

1.4.6 ARIA: cuando HTML no alcanza

ARIA (Accessible Rich Internet Applications) es un conjunto de atributos especiales que se agregan al HTML para hacerlo más comprensible para las tecnologías de asistencia. La regla #1 de ARIA es: usa HTML semántico primero, y solo agrega ARIA cuando no haya una etiqueta que exprese lo que necesitas.

Los 3 tipos de atributos ARIA

Casos de uso comunes

<!-- Botón solo con icono: necesita texto accesible -->
<button aria-label="Cerrar ventana">
  <svg aria-hidden="true">...</svg>
</button>

<!-- Formulario con descripción adicional -->
<label for="email">Correo electrónico</label>
<input type="email" id="email"
       aria-describedby="ayuda-email"
       aria-required="true">
<small id="ayuda-email">
  Nunca compartiremos tu correo con terceros.
</small>

<!-- Menú desplegable accesible -->
<button aria-expanded="false" aria-controls="menu-1">
  Menú
</button>
<ul id="menu-1" role="menu" hidden>
  <li role="menuitem"><a href="/">Inicio</a></li>
  <li role="menuitem"><a href="/blog">Blog</a></li>
</ul>

Ejemplos de ARIA en uso

Herramientas para auditar accesibilidad

• Lighthouse (Chrome DevTools > Lighthouse > Accessibility): auditoría rápida con puntaje 0-100.
• WAVE (wave.webaim.org): analiza cualquier URL y muestra errores, alertas y mejoras.
• axe DevTools (extensión de Chrome): auditoría detallada con explicación de cada problema.
• Léelo en voz alta: macOS VoiceOver (Cmd+F5), Windows Narrator (Ctrl+Win+Enter), NVDA o JAWS (gratuito el primero, pago el segundo).

📚 Contenido ampliado

Material adicional, referencias externas verificadas y ejemplos extendidos.