Persona usando tecnología asistiva para navegar en una computadora, representando el diseño inclusivo y accesible

Por qué la accesibilidad web importa (más allá de la ley)

Entre el 15% y el 20% de la población mundial tiene algún tipo de discapacidad. Visual, auditiva, motriz, cognitiva. Eso significa que de cada 10 personas que visitan tu sitio, una o dos podrían tener dificultades para usarlo si no fue diseñado con accesibilidad en mente.

Pero la accesibilidad no es solo para personas con discapacidades permanentes. Piensa en alguien que se rompió el brazo y no puede usar el mouse. Alguien que está en el sol y no distingue los colores de tu pantalla. Alguien mayor que necesita texto más grande. Alguien que navega con datos móviles lentos. La accesibilidad beneficia a todos.

Un sitio accesible es un sitio mejor diseñado. Punto. Las mismas prácticas que hacen tu sitio accesible también lo hacen más rápido, más fácil de navegar y mejor posicionado en Google.

No vamos a hablar de cumplir normas legales (aunque en muchos países ya es obligatorio). Vamos a hablar de los mínimos prácticos que cualquier sitio debería cumplir. Sin jerga técnica. Sin excusas.

El checklist mínimo de accesibilidad

1. Contraste de color

El texto de tu sitio debe ser legible. Parece obvio, pero la cantidad de sitios con texto gris claro sobre fondo blanco es alarmante. La regla es simple: el contraste entre el color del texto y el color del fondo debe tener un ratio mínimo de 4.5:1 para texto normal (lo que exige WCAG nivel AA).

¿Qué significa esto en la práctica?

  • Texto negro (#000) sobre fondo blanco (#fff): ratio de 21:1. Perfecto
  • Texto gris medio (#767676) sobre fondo blanco: ratio de 4.54:1. Apenas pasa
  • Texto gris claro (#aaa) sobre fondo blanco: ratio de 2.32:1. No pasa. Es ilegible para muchas personas

Para verificar, usa herramientas gratuitas como WebAIM Contrast Checker o la extensión axe DevTools para tu navegador. Toma 30 segundos revisar cada combinación de colores de tu sitio.

Esto aplica especialmente a botones, enlaces, placeholders de formularios y texto sobre imágenes. Si tienes texto sobre una foto, asegúrate de que haya un overlay oscuro suficiente para mantener el contraste.

2. Texto alternativo en imágenes

Cada imagen significativa en tu sitio necesita un atributo alt que describa lo que muestra. Los lectores de pantalla leen este texto en voz alta para personas que no pueden ver la imagen. Google también lo usa para entender de qué trata tu página.

  • Mal: alt="" en una foto de tu producto (la imagen queda invisible para lectores de pantalla)
  • Mal: alt="imagen" o alt="foto" (no aporta información útil)
  • Bien: alt="Equipo de Tank Studio Lab trabajando en una sesión de diseño colaborativo"

Para imágenes decorativas (fondos, separadores, adornos que no aportan información), sí usa alt="" vacío. Esto le dice al lector de pantalla "ignora esta imagen, es decorativa". La clave es distinguir entre imágenes informativas y decorativas.

3. Navegación por teclado

¿Puedes navegar tu sitio completo usando solo la tecla Tab? ¿Puedes abrir menús, llenar formularios, hacer clic en botones y navegar entre páginas sin tocar el mouse?

Si la respuesta es no, tu sitio es inaccesible para personas que usan teclado en lugar de mouse — ya sea por discapacidad motriz, porque usan tecnologías asistivas, o simplemente por preferencia.

Los problemas más comunes:

  • Indicador de foco invisible: cuando presionas Tab, debería haber una indicación visual clara de qué elemento está seleccionado. Muchos diseñadores eliminan el outline del foco porque "se ve feo". No lo hagas. Personaliza el estilo del foco, pero nunca lo elimines
  • Elementos interactivos no accesibles: si usas un <div> como botón en lugar de un <button>, el teclado no puede interactuar con él. Usa los elementos HTML correctos
  • Trampas de teclado: modales o menús que atrapan el foco y no te dejan salir con la tecla Escape

4. Etiquetas en formularios

Cada campo de formulario necesita una etiqueta visible (<label>) que diga qué información se espera. El texto de placeholder no es una etiqueta — desaparece cuando empiezas a escribir, y los lectores de pantalla no siempre lo detectan.

  • Mal: un campo con solo placeholder="Nombre" y sin etiqueta
  • Bien: una etiqueta visible "Nombre completo" encima del campo, más un placeholder opcional como guía

Además, los mensajes de error deben ser claros y estar asociados al campo que tiene el error. "Error en el formulario" no ayuda a nadie. "El campo de correo electrónico requiere un formato válido (ejemplo@dominio.com)" sí.

5. Estructura de encabezados

Los encabezados (h1, h2, h3...) no son solo estilos visuales. Son la estructura semántica de tu contenido. Los lectores de pantalla los usan para navegar la página como un índice: los usuarios pueden saltar directamente a la sección que les interesa.

Las reglas:

  • Un solo <h1> por página (el título principal)
  • Los <h2> son secciones principales dentro de la página
  • Los <h3> son subsecciones dentro de un <h2>
  • No saltes niveles: no pases de <h1> a <h3> sin un <h2> intermedio
  • No uses encabezados solo para hacer texto grande. Usa CSS para eso

Piensa en los encabezados como el esqueleto de tu página. Si alguien solo pudiera leer los encabezados, ¿entendería de qué trata la página y cómo está organizada?

6. Tamaño de fuente base

El texto base de tu sitio (el que se usa en párrafos) debería ser de mínimo 16 pixeles. Parece grande si vienes del mundo del diseño impreso, pero en pantalla es el mínimo legible a una distancia normal.

Muchos sitios usan 14px o incluso 12px como tamaño base. El resultado: los usuarios tienen que hacer zoom, lo cual rompe layouts no preparados para ello, o simplemente se van porque les cuesta leer.

Además, asegúrate de que tu sitio funciona correctamente cuando el usuario hace zoom al 200%. Esto es un criterio WCAG: el contenido debe seguir siendo usable con zoom ampliado. Si tu layout se rompe al hacer zoom, hay un problema de CSS que resolver.

7. Links descriptivos

"Haz clic aquí" no le dice nada a nadie. Cuando un lector de pantalla lista todos los enlaces de una página, el usuario escucha una lista de "clic aquí", "clic aquí", "clic aquí" — imposible saber a dónde lleva cada uno.

Cada enlace debería ser comprensible fuera de contexto. Si alguien solo lee el texto del enlace, ¿sabe a dónde lo va a llevar?

8. Video con subtítulos

Si tu sitio tiene contenido en video, necesita subtítulos. No solo para personas sordas o con discapacidad auditiva — el 85% de los videos en redes sociales se ven sin sonido. Los subtítulos aumentan la retención, mejoran la comprensión y hacen tu contenido accesible en ambientes ruidosos o silenciosos.

Los subtítulos automáticos (como los de YouTube) son un buen punto de partida, pero no son suficientes. Revísalos y corrígelos manualmente. Los errores de subtítulos automáticos pueden cambiar completamente el significado de lo que dices.

Si tu video es informativo y no tiene audio (por ejemplo, una animación o un tutorial visual), agrega una descripción textual alternativa que comunique la misma información.

Manos sobre un teclado de computadora, representando la navegación accesible y el uso de tecnología asistiva

La prueba de 3 minutos

No necesitas ser experto en accesibilidad para verificar lo básico. Haz estas tres pruebas en tu sitio ahora mismo:

Prueba 1: Navega sin mouse

Desconecta tu mouse (o deja de usarlo). Usa solo la tecla Tab para navegar tu sitio. ¿Puedes llegar a todas las secciones? ¿Puedes abrir menús? ¿Puedes enviar un formulario? ¿Ves claramente dónde está el foco en cada momento?

Prueba 2: Zoom al 200%

En tu navegador, presiona Ctrl + (o Cmd + en Mac) hasta llegar al 200% de zoom. ¿El contenido sigue siendo legible? ¿El layout no se rompe? ¿No se corta texto? ¿Los botones siguen siendo clicables?

Prueba 3: Lector de pantalla

Si usas Mac, activa VoiceOver (Cmd + F5). Si usas Windows, descarga NVDA (es gratuito). Cierra los ojos y navega tu sitio solo con el lector de pantalla. Esta experiencia es reveladora. Vas a descubrir problemas que nunca habrías notado visualmente.

Si tu sitio pasa estas tres pruebas sin problemas graves, estás por encima del 90% de los sitios en internet. Si no las pasa, ya sabes exactamente qué arreglar.

Accesibilidad no es un extra

La accesibilidad web no es un feature que se agrega al final. Es una forma de diseñar y desarrollar desde el inicio. Las mismas prácticas que hacen tu sitio accesible lo hacen mejor para SEO (Google premia contenido bien estructurado), mejor para móvil (interfaces simples y legibles), mejor para todos los usuarios (navegación clara y predecible).

En Tank Studio Lab la accesibilidad es parte de nuestro proceso de diseño UI/UX y desarrollo web desde el día uno. No es un checklist que revisamos al final — es un criterio de calidad que guía cada decisión de diseño y cada línea de código. Escríbenos si quieres un sitio que funcione para todas las personas.