Cómo hacer que un sitio web sea accesible y qué significa el cumplimiento de WCAG

Qué significa la accesibilidad web

La accesibilidad web significa que las personas pueden usar un sitio sin luchar contra él. Un usuario de lector de pantalla, un visitante que usa solo el teclado, alguien en un teléfono con luz brillante y una persona con baja visión se encuentran en la misma página con diferentes necesidades, y la página debería funcionar para cada uno de ellos.

Eso suena simple. Rara vez lo es.

Un buen enfoque de accesibilidad no comienza solo con la tecnología. Comienza con una pregunta: ¿puede una persona completar una tarea en 3 clics, con un ratón, solo con un teclado o con software de asistencia? Si la respuesta es no para incluso un camino, el sitio web es más difícil de lo que debería ser.

La accesibilidad también ayuda a los usuarios comunes en situaciones comunes. Un subtítulo ayuda a alguien en una estación de tren ruidosa. Estados de enfoque claros ayudan a alguien que ha perdido el rastro del cursor. Buenas cabeceras ayudan a un lector a escanear una página larga en 20 segundos en lugar de 2 minutos.

Los equipos a menudo tratan la accesibilidad como una característica especial. Esa es la forma incorrecta. Pertenece a la estructura, texto, formularios, medios y navegación. Si ya has trabajado en un sitio web corporativo, ya sabes que la estructura afecta a cada página; la accesibilidad simplemente hace que esa estructura sea utilizable por más personas.

Lo que significa el cumplimiento de WCAG

WCAG significa Pautas de Accesibilidad al Contenido Web. Es un estándar publicado para hacer que el contenido web sea más accesible, y la gente a menudo habla de la conformidad con WCAG como si fuera un solo interruptor. No lo es.

La conformidad con WCAG significa que un sitio web cumple con los criterios de éxito relevantes a un nivel definido. La mayoría de los equipos apuntan a AA porque equilibra el esfuerzo práctico y el impacto en el mundo real. Un sitio puede ser parcialmente conforme, casi conforme o completamente conforme dependiendo de lo que se ha probado y lo que aún falla.

También hay una diferencia entre seguir algunas pautas y seguir el estándar en su totalidad. Una página con texto alternativo en imágenes pero con un comportamiento de teclado roto no es “suficientemente accesible” solo porque se haya marcado una casilla. Un sitio con un contraste hermoso pero con campos de formulario sin etiquetar aún deja a las personas atrapadas en el punto de acción.

Piensa en la conformidad con WCAG como una disciplina, no como un distintivo. El estándar te proporciona criterios verificables, y esos criterios ayudan a los equipos a evitar promesas vagas. Si una revisión menciona “cómo hacer que un sitio web sea accesible y qué significa la conformidad con WCAG”, debería conectar los dos: uno es el trabajo práctico, el otro es el estándar que lo mide.

Comienza con una auditoría de accesibilidad

Una auditoría de accesibilidad te da la primera lista de problemas. Comienza con una muestra de 10 a 20 páginas importantes, no con todo el sitio de una vez, porque las barreras comunes suelen repetirse: falta de texto alternativo, bajo contraste, trampas de teclado, formularios sin etiquetar y encabezados que saltan de H2 a H4 sin ninguna razón.

Utiliza tanto verificaciones automatizadas como revisiones humanas. La automatización detecta patrones rápidamente, pero no te dirá si una etiqueta de botón tiene sentido en contexto o si un modal se cierra correctamente. Una prueba manual rápida con un teclado puede revelar más de 50 alertas automatizadas.

Revisa las imágenes una por una. Las imágenes decorativas generalmente deben ser ignoradas por la tecnología asistiva, mientras que las imágenes significativas necesitan texto alternativo que diga lo que importa. “Gráfico que muestra el crecimiento de ventas de 2024” es mejor que “gráfico”, y “Foto del equipo” es mejor que “imagen123”.

Los formularios necesitan atención especial. Cada entrada debe tener una etiqueta clara, no solo texto de marcador de posición, porque los marcadores de posición desaparecen cuando las personas comienzan a escribir. Un campo de inicio de sesión sin etiqueta se convierte en un juego de adivinanzas. Eso es un fallo en el primer paso.

Audita los encabezados con un mapa simple. Una página no debe usar encabezados solo para estilizar, y un usuario debe poder revisar el esquema en orden. Si la estructura es desordenada, la página es más difícil para los usuarios de lectores de pantalla y también para cualquiera que intente leer rápido.

Construye una estructura de contenido accesible

La estructura de contenido accesible comienza con encabezados semánticos. Usa H2 para secciones principales y H3 para subtemas. El objetivo no es la decoración; es la navegación. Los usuarios de lectores de pantalla saltan por encabezados, y un esquema claro les permite moverse a través de una página en segundos en lugar de leer cada línea.

La organización de la página importa tanto como eso. Coloca la tarea principal cerca de la parte superior, mantén el contenido relacionado junto y evita dispersar acciones clave en cinco bloques no relacionados. Un camino claro es mejor que tres que compiten. Un diseño desordenado puede hacer que una acción simple se sienta como un rompecabezas.

Los enlaces deben indicar a dónde van. “Leer más” es débil por sí solo. “Leer más sobre el soporte del sitio web después del lanzamiento” le dice al usuario lo que obtendrá, y eso importa cuando una página contiene 12 enlaces. Usa texto descriptivo cada vez que el destino no sea obvio a partir de la oración circundante.

Para un ejemplo práctico, compara “descargar” con “descargar el PDF de la lista de verificación de accesibilidad.” La segunda versión es más larga, pero es utilizable. En una lista de enlaces de un lector de pantalla, las palabras adicionales no son relleno; son el mapa.

El texto alternativo debe ser significativo, no teatral. Una foto de producto puede necesitar el nombre del producto y un detalle distintivo. Una captura de pantalla puede necesitar una breve explicación del estado de la interfaz. Un adorno decorativo puede permanecer en silencio. Esa distinción ahorra tiempo a los usuarios que escuchan cada descripción de imagen en secuencia.

La legibilidad también importa. Los párrafos cortos ayudan. Los términos simples ayudan aún más. Si una oración está haciendo el trabajo de un párrafo, divídela. Si una oración tiene tres ideas, dale 2 oraciones. Los lectores de pantalla pueden manejar contenido largo, pero la atención humana aún tiene límites.

Una página construida de esta manera también apoya proyectos con mucho contenido, incluyendo un portal de contenido sobre inversiones, donde los usuarios necesitan escanear rápidamente, tener secciones claras y una terminología que no cambie de página a página.

Haz que la navegación y los controles sean amigables con el teclado

El acceso por teclado no es opcional. Los menús, botones, diálogos y formularios deben funcionar sin un ratón. Si alguien puede tabular a un control pero no puede activarlo, el control está roto.

Prueba el orden de tabulación primero. Presiona Tab a través de la página y observa si el enfoque se mueve en una secuencia lógica de arriba hacia abajo, de izquierda a derecha. Si el enfoque salta a un elemento oculto o se salta un botón clave, la página necesita ajustes. La visibilidad del enfoque importa tanto; si no puedes ver dónde está el teclado, estás adivinando.

Los diálogos necesitan una tecla de Escape u otra acción clara para cerrar. El enfoque debe moverse al diálogo cuando se abre, y luego regresar al disparador cuando se cierra. Sin ese comportamiento, los usuarios de teclado pueden quedar atrapados o perdidos. Nadie quiere presionar Tab 18 veces para encontrar la salida.

Los menús deben abrirse y cerrarse de manera predecible. Un menú que solo se activa al pasar el ratón no es suficiente. Un menú desplegable que depende de un puntero de ratón puede excluir a los usuarios de teclado y a los usuarios táctiles al mismo tiempo. La regla es simple: si un control existe, debe ser operable de más de una manera.

Los formularios merecen una revisión más. Los mensajes de error deben aparecer cerca del campo, usar un lenguaje claro y estar vinculados al campo mismo. Un mensaje que solo dice “entrada no válida” no ayuda a nadie. Di qué salió mal. Di cómo solucionarlo. Dos oraciones pueden ahorrar un ticket de soporte.

Para construcciones más grandes, ayuda combinar el trabajo de accesibilidad con un sitio que ya maneje flujos complejos, como infraestructura de red privada, porque la misma disciplina que mantiene los sistemas internos predecibles también mantiene las interfaces públicas utilizables.

Mejorar la accesibilidad de color, contraste y medios

El contraste de color tiene un efecto directo en la legibilidad. El texto que se mezcla con el fondo puede parecer elegante en un diseño y fallar en el uso diario. Verifica el contraste con una herramienta, luego inspeciónalo en pantallas reales.

No confíes solo en el color para transmitir significado. Si los campos obligatorios son rojos, márcalos también con texto o un ícono más texto. Si un gráfico utiliza rojo y verde, añade etiquetas o patrones. Una pista de color puede desaparecer para los usuarios daltónicos, pero la tarea aún debería tener sentido.

Los subtítulos son el primer paso para el video. Ayudan a las personas que no pueden escuchar el audio y a las personas que mantienen el sonido apagado en público. Un transcripción ayuda aún más cuando un usuario quiere buscar, citar o revisar detalles más tarde. Las descripciones de audio son importantes para videos donde la información visual no se habla en voz alta.

Las imágenes con texto dentro de ellas necesitan cuidado adicional. Si el texto es esencial, colócalo también en el texto de la página. Un banner que dice “Regístrate antes del viernes” no debería obligar a alguien a descifrar una captura de pantalla solo para encontrar la fecha límite. Pequeña decisión, gran diferencia.

Las verificaciones de color y medios también deberían ser parte de las revisiones de seguridad del sitio web, porque un sitio que parece seguro pero oculta texto clave o tiene medios rotos a menudo crea la misma desconfianza del usuario que un fallo técnico. Si ya estás rastreando seguridad del sitio web, incorpora las verificaciones de accesibilidad en esa misma ventana de revisión.

Probar, corregir y mantener la accesibilidad a lo largo del tiempo

La accesibilidad no es una limpieza única. Los sitios cambian semanalmente, a veces diariamente. Un nuevo banner, una actualización de formulario o un menú rediseñado pueden introducir los mismos problemas antiguos en 30 minutos.

Construye un flujo de trabajo simple. Primero, ejecuta verificaciones automatizadas en las páginas cambiadas. Segundo, prueba los caminos clave de los usuarios manualmente con un teclado y un lector de pantalla. Tercero, recopila comentarios de los usuarios y registra el problema con la URL de la página, el navegador y el paso exacto donde aparece el problema. Cuatro campos en un ticket superan una queja vaga.

El mantenimiento se vuelve más fácil cuando la accesibilidad está dentro del trabajo de lanzamiento regular. Si los desarrolladores añaden componentes, esos componentes necesitan etiquetas, estados de enfoque y comportamiento del teclado antes de ser enviados. Si los editores suben imágenes, necesitan un hábito para el texto alternativo. Si los comercializadores añaden bloques promocionales, necesitan verificar el contraste y el texto del enlace.

Utiliza plantillas versionadas siempre que sea posible. Un encabezado fijo, un bloque de formulario estándar y un patrón modal probado reducen errores repetidos. Esa es una razón por la que los equipos que se preocupan por soporte del sitio web después del lanzamiento a menudo manejan la accesibilidad mejor: el trabajo está integrado en el soporte, no parcheado después de las quejas.

Los comentarios de usuarios reales son la prueba más aguda. Un usuario de teclado encontrará la trampa en un menú de tres elementos más rápido que cualquier herramienta de auditoría. Un usuario de lector de pantalla escuchará si una etiqueta de botón tiene sentido en el primer uso. Si 2 personas informan el mismo bloqueo, trátalo como un patrón, no como una coincidencia.

Un último hábito ayuda mucho: mantén las verificaciones de accesibilidad vinculadas a cada actualización de contenido. Si un equipo publica una nueva página sin verificar encabezados, etiquetas y medios, el sitio lentamente se aleja hacia atrás. Una lista de mantenimiento con 5 elementos puede detener esa deriva antes de que se extienda a cada página.