Accesibilidad web

La accesibilidad en el desarrollo web busca que cualquier persona, independientemente de sus capacidades físicas, sensoriales o cognitivas, pueda navegar, interactuar y comprender un sitio web. Esto incluye a personas con discapacidad visual, auditiva, motriz, intelectual o neurológica.

No es solo una obligación legal en muchos países. Es una cuestión de responsabilidad y calidad. Aplicar accesibilidad desde el código mejora la experiencia de todos los usuarios y evita barreras digitales que podrían impedir el acceso al contenido o al uso de servicios en línea.

A continuación, se detallan algunas prácticas recomendadas para implementar accesibilidad en proyectos web desde el desarrollo.

Navegación por teclado

Una página web debe ser completamente operable sin necesidad de usar el mouse.

Qué tener en cuenta:

• Asegurar que todos los elementos interactivos (botones, enlaces, menús, formularios) sean alcanzables con la tecla Tab.

• Usar un orden lógico del foco, coherente con la jerarquía visual.

• Incluir tabindex="0" en elementos personalizados para que entren en el flujo de tabulación.

• Evitar tabindex mayor a 0, ya que rompe el orden natural.

Ejemplo HTML:

<button>Enviar</button> <a href="/ayuda">Ir a ayuda</a>

Personalización con JavaScript:
Para componentes personalizados (como modales o sliders), se debe manejar el foco manualmente.

modal.focus(); // cuando se abre un modal, por ejemplo

Contraste de colores y visibilidad

El contraste entre el texto y el fondo debe cumplir con los criterios WCAG (mínimo 4.5:1 para texto normal y 3:1 para textos grandes).

Recomendaciones:

• No usar texto gris claro sobre fondo blanco.

• Verificar con herramientas como WebAIM Contrast Checker.

• Ofrecer modo oscuro o de alto contraste si es posible.

CSS:

:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Esto ayuda a que el foco sea visible, algo esencial para quienes navegan con teclado.

HTML semántico

Usar etiquetas semánticas no es solo una buena práctica: facilita la navegación con tecnologías de asistencia como lectores de pantalla.

Ejemplos recomendados:

• <button> en lugar de un <div> con evento onclick.

• <nav>, <header>, <main>, <footer>, <article> para marcar secciones.

• Formularios correctamente etiquetados con <label for="id">.

Formulario accesible:

<label for="email">Correo electrónico</label> <input type="email" id="email" name="email" />

Atributos ARIA (Accessible Rich Internet Applications)

ARIA se usa para mejorar la accesibilidad cuando el HTML no es suficiente, como en componentes personalizados (tabs, modales, menús).

Ejemplos comunes:

<div role="dialog" aria-modal="true" aria-labelledby="titulo-modal">
  <h2 id="titulo-modal">Detalles del producto</h2>
</div>

Precaución: No usar ARIA como reemplazo de HTML semántico. Solo úsalo cuando sea necesario.

Control del foco y estados interactivos

Cuando se generan cambios dinámicos (como abrir un menú o cargar contenido), el foco debe guiar al usuario.

Ejemplo práctico:
Cuando se envía un formulario con error, el foco debería ir al primer campo con problemas.

document.querySelector('.input-error').focus();

También se deben comunicar los cambios de estado con regiones vivas:

<div role="alert" aria-live="assertive"> ¡Error al guardar los datos! </div>

Tamaños y escalabilidad

El contenido debe poder escalar al 200% sin romper el diseño.

Buenas prácticas:

• Usar unidades relativas como em, rem, % en lugar de px.

• Evitar layouts rígidos con width: 100vw que causen desbordamientos.

Multimedia accesible

Videos y audios deben incluir alternativas.

Recomendaciones:

• Subtítulos sincronizados.

• Transcripciones.

• Descripciones de audio cuando el contenido visual es clave.

<video controls>
  <source src="video.mp4" type="video/mp4" />
  <track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Español" />
</video>

Validación e inspección

Antes de publicar, es importante revisar la accesibilidad con herramientas automáticas y pruebas manuales.

Herramientas útiles:

• Lighthouse

• axe DevTools

• Navegación con teclado y uso de lectores de pantalla (NVDA, VoiceOver).

Conclusión

Implementar accesibilidad desde el desarrollo es una tarea continua, pero no compleja si se integra en el flujo habitual. Usar HTML semántico, cuidar el foco, permitir navegación por teclado, y asegurar un buen contraste son pasos clave que generan impacto real.

Hacer un sitio accesible no solo beneficia a personas con discapacidades. Mejora la calidad general del sitio, reduce errores de usabilidad y permite llegar a una audiencia más amplia.