Mejorar la accesibilidad web no exige necesariamente reconstruir un sitio desde cero. En muchos proyectos existentes se pueden corregir primero los obstáculos que más afectan la navegación y luego avanzar por etapas. El objetivo es que el contenido y las funciones puedan ser utilizados por personas con distintas capacidades visuales, auditivas, motrices o cognitivas, incluso cuando navegan con teclado, lector de pantalla, ampliación o comandos de voz.
Las Pautas de Accesibilidad para el Contenido Web WCAG 2.2 del W3C son una referencia internacional para organizar esta revisión. Sus criterios se agrupan en cuatro principios: el sitio debe ser perceptible, operable, comprensible y robusto. En la práctica, muchos proyectos toman el nivel AA como objetivo, aunque el alcance concreto depende del sitio y de los requisitos aplicables.
Comenzá con un inventario de páginas y tareas importantes
No todas las páginas tienen la misma prioridad. Identificá primero las acciones esenciales: comprender la propuesta del sitio, navegar por el menú, buscar información, completar un formulario, comprar, iniciar sesión o solicitar soporte. Elegí una muestra que incluya la portada, páginas de contenido, formularios, tablas, ventanas emergentes y cualquier plantilla diferente.
Esta selección evita limitar la auditoría a una sola página y permite corregir componentes reutilizados. Un problema solucionado en el encabezado, el menú o un campo común puede mejorar muchas URLs al mismo tiempo.
Revisá la estructura y el HTML semántico
Los encabezados deben describir la jerarquía del contenido y mantener un orden lógico. No deberían utilizarse sólo para modificar el tamaño visual del texto. También conviene emplear elementos nativos como enlaces, botones, listas, tablas y campos de formulario en lugar de imitar su comportamiento con elementos genéricos.
- Asigná a cada página un propósito y una estructura comprensibles.
- Utilizá enlaces para navegar y botones para ejecutar acciones.
- Proporcioná títulos descriptivos a las páginas y nombres claros a los controles.
- Indicá el idioma principal del documento.
- No agregues atributos ARIA si un elemento HTML nativo ya resuelve correctamente la función.
Un marcado semántico también facilita el mantenimiento y puede ayudar a los buscadores a interpretar el contenido. Si estás reorganizando páginas, podés complementar esta tarea con nuestra guía sobre cómo agregar nuevas secciones y contenido a un sitio web.
Probá toda la navegación con teclado
Desconectá temporalmente el mouse y recorré el sitio con Tab, Shift + Tab, Enter, Espacio y las flechas cuando corresponda. El orden del foco debe acompañar el orden visual y ninguna función importante debería quedar inaccesible.
El indicador de foco tiene que ser visible y no quedar oculto detrás de encabezados fijos, banners o ventanas emergentes. Evitá eliminar el contorno mediante CSS sin proporcionar una alternativa claramente perceptible. Comprobá además que no existan “trampas de teclado”: si el foco entra en un menú, modal o reproductor, el usuario debe poder salir de él.
Texto, contraste, ampliación y diseño adaptable
El color del texto debe contrastar suficientemente con el fondo. WCAG 2.2 establece, para el nivel AA, una relación mínima de 4.5:1 para texto normal y de 3:1 para texto grande. Los límites de campos, iconos esenciales y estados de foco también necesitan ser distinguibles.
No utilices únicamente el color para comunicar un error, una selección o una disponibilidad. Acompañalo con texto, iconos o patrones. Probá ampliar el navegador al 200 % y verificá que el contenido se redistribuya sin superponerse, desaparecer ni exigir desplazamiento horizontal para leer párrafos.
Imágenes, audio y video
Las imágenes que aportan información necesitan un atributo alt breve y útil. El texto alternativo debe comunicar la función o el significado dentro del contexto, no repetir automáticamente el nombre del archivo. Si la imagen es puramente decorativa, utilizá un texto alternativo vacío para que el lector de pantalla pueda ignorarla.
Los gráficos complejos requieren una explicación equivalente en el contenido cercano o una descripción más extensa. Los videos deberían contar con subtítulos sincronizados y, cuando la información visual no se entiende sólo con el audio, una alternativa o audiodescripción adecuada. Evitá reproducciones automáticas difíciles de detener.
Formularios y mensajes de error
Cada campo debe tener una etiqueta asociada de forma programática. El texto dentro de un placeholder no reemplaza esa etiqueta porque desaparece al escribir y suele presentar poco contraste. Indicá con claridad qué datos son obligatorios y explicá el formato esperado antes de que ocurra el error.
Cuando una validación falla, conservá los datos ya ingresados, identificá el campo afectado y explicá cómo corregirlo. El mensaje debe poder ser detectado por tecnologías de asistencia y no depender sólo de un borde rojo. La protección contra abuso también debe ofrecer una alternativa accesible; podés consultar nuestra guía para proteger formularios web contra spam.
Menús, ventanas emergentes y componentes dinámicos
Los menús desplegables, pestañas, acordeones y modales suelen concentrar problemas. Comprobá que posean nombres accesibles, estados identificables y un orden de foco previsible. Al abrir un modal, el foco debería trasladarse a su interior; al cerrarlo, debería regresar al control que lo abrió.
Los mensajes dinámicos importantes —por ejemplo, un producto agregado al carrito o un formulario enviado— deben anunciarse sin obligar al usuario a buscar visualmente el cambio. Si el sitio utiliza un constructor o un complemento, revisá el resultado generado en el navegador: que una herramienta ofrezca opciones de accesibilidad no garantiza que la configuración final sea correcta.
Las herramientas automáticas no reemplazan las pruebas manuales
Un analizador automático puede detectar texto alternativo ausente, contraste insuficiente, identificadores duplicados o ciertos errores de estructura. Sin embargo, no puede decidir por sí solo si una descripción es útil, si el orden de lectura tiene sentido o si una tarea completa resulta comprensible.
Combiná al menos estas comprobaciones:
- Validador automático sobre páginas representativas.
- Recorrido completo usando únicamente teclado.
- Prueba con un lector de pantalla disponible en el sistema.
- Ampliación y revisión en diferentes anchos de pantalla.
- Pruebas reales de formularios, menús y procesos críticos.
Cómo organizar las correcciones
Registrá cada hallazgo indicando página, componente, impacto, criterio relacionado y forma de reproducirlo. Priorizá los bloqueos que impiden completar una tarea, luego los componentes presentes en todo el sitio y finalmente los ajustes de menor impacto. Guardá una copia antes de modificar plantillas o estilos y probá los cambios en un entorno seguro cuando sea posible.
La accesibilidad no termina con una auditoría. Incorporá estas comprobaciones al proceso de publicación, capacitación y actualización del sitio. Una revisión breve antes de lanzar cada nueva sección evita que los mismos problemas vuelvan a aparecer y suele mejorar la experiencia de todos los visitantes, no sólo de quienes utilizan tecnologías de asistencia.
