Una parte importante de la comunidad de cualquier club vive con alguna discapacidad, y muchas más personas usan la página web del club en momentos de "limitación temporal": el sol pegando de lleno en la pantalla del celular en la cancha, un brazo enyesado, la vista cansada que entrecierra los ojos frente a horarios de partidos en gris sobre blanco. Una página web accesible para tu club no es un detalle legal ni un asunto de grandes empresas: es la diferencia entre que un socio encuentre la hora de inicio de este sábado o que se rinda.
La buena noticia es que la accesibilidad web para clubes depende sobre todo de un puñado de hábitos cotidianos, no de magia técnica. El estándar internacional, las Pautas de Accesibilidad para el Contenido Web (WCAG, por sus siglas en inglés), se reduce, para lo que necesita un club, a una lista corta que puedes aplicar cada vez que publicas. Esta guía cubre esa lista en lenguaje sencillo.
Lo que pide WCAG, en un párrafo
WCAG (publicado por el W3C, el organismo que define los estándares de la web; consulta w3.org/WAI) organiza la accesibilidad en torno a cuatro ideas: el contenido debe ser perceptible (las personas pueden verlo u oírlo; de ahí el texto alternativo, el contraste y los subtítulos), operable (se puede usar con el teclado, no solo con el mouse), comprensible (lenguaje claro, navegación predecible, formularios con etiquetas) y robusto (funciona con tecnologías de apoyo como los lectores de pantalla).
En muchos países, los sitios web del gobierno están obligados a cumplir con WCAG en el nivel AA; a los clubes comunitarios no se los suele auditar, pero ese mismo estándar es el objetivo correcto, porque es simplemente lo que significa en la práctica "que todos puedan usarlo".
Así se aplica cada idea en la página web de un club.
Texto alternativo: describe tus imágenes
Los lectores de pantalla no pueden ver tus fotos: leen en voz alta el texto alternativo de la imagen (el "texto alt"). Todo editor de imágenes y todo creador de sitios web tiene un campo para eso; la mayoría de los clubes lo deja vacío, y entonces el lector de pantalla anuncia un inútil "imagen" o, peor, el nombre del archivo.
El hábito: cada vez que agregues una imagen, escribe una oración que diga qué muestra y por qué está ahí.
- Bien: "La categoría sub-12 festejando después de ganar la final, con el trofeo en alto."
- Inútil: "IMG_4032.jpg", "foto" o un relleno de palabras clave ("club fútbol equipo ganar campeón").
- Las imágenes decorativas (texturas de fondo, adornos puramente ornamentales) deben tener el texto alternativo vacío para que los lectores de pantalla las salten, no una descripción de la curva decorativa.
- Las imágenes que contienen información son la gran trampa. Un cartel con el horario de entrenamientos subido como JPEG es invisible para un lector de pantalla (y para Google). Publica el horario como texto real en la página y deja el cartel como complemento. Lo mismo vale para el texto incrustado en las imágenes de portada.
Si estás buscando fotos, nuestra guía de imágenes gratis para la página web del club explica dónde encontrarlas, y cada una que uses necesita texto alternativo.
Contraste de color: el gris sobre blanco no ayuda a nadie
El texto con poco contraste es la falla de accesibilidad más común en los sitios de clubes, y casi siempre llega de la mano de los colores del club: texto dorado sobre blanco, celeste sobre gris, blanco sobre una foto cargada. El nivel AA de WCAG pide una relación de contraste de al menos 4.5:1 para el texto normal (3:1 para los títulos grandes). Como regla práctica: si entrecierras los ojos y el texto se desvanece, no pasa.
Soluciones prácticas:
- Revisa tu paleta una vez. Los verificadores de contraste gratuitos (como el de WebAIM, en webaim.org) toman dos colores y te dicen si pasan o no. Prueba el texto principal, los botones y el color de los enlaces contra sus fondos.
- Los colores del club van en los detalles, no en el texto principal. Mantén los párrafos oscuros sobre claro (o bien claros sobre oscuro) y deja que el dorado del club viva en banners, bordes y botones que cumplan con el contraste.
- El texto sobre fotos necesita ayuda: una capa oscura o un panel sólido detrás, no letras blancas flotando sobre una foto de la tribuna.
- Nunca uses solo el color para transmitir un significado. "Los partidos en rojo están suspendidos" no sirve para quienes tienen daltonismo (aproximadamente el 8 % de los hombres); agrega también la palabra "Suspendido".
Un sistema de temas hace el trabajo pesado: define una paleta accesible una sola vez en la configuración de tema e identidad visual y todas las páginas la heredan, en lugar de volver a decidir los colores en cada banner.
En ClubHelix, además, el tema se niega a guardar un texto principal con un contraste menor a 4.5:1 frente al fondo de la página, así que la falla más común no puede llegar a tu sitio por accidente. A los títulos y al texto principal se les puede fijar un tamaño mínimo y uno máximo para que se adapten entre un celular y una computadora. Escribas la unidad que escribas, los tamaños se sirven en rem, de modo que el texto sigue respetando el tamaño de letra que cada visitante configuró en su navegador.
Títulos y estructura: el esqueleto con el que navegan los lectores de pantalla
Quien ve la página la recorre con la vista por su diseño; quien usa un lector de pantalla la recorre por su estructura de títulos, saltando de un título a otro. Eso solo funciona cuando los títulos son títulos de verdad y se usan en orden:
- Usa los estilos de título reales (Título 2, Título 3) del editor, no texto normal en negrita y más grande. Los títulos reales se anuncian y permiten navegar; la negrita es solo negrita.
- Mantén un orden lógico. Un título de página, luego H2 para las secciones principales y H3 debajo de ellas. No elijas un nivel de título porque te gusta su tamaño: para eso están los temas.
- Escribe títulos y textos de enlace descriptivos. "Horarios de entrenamiento" es mejor que "Más información", y un enlace que dice cómo crear la página web de tu club es mejor que uno que dice "haz clic aquí": los lectores de pantalla suelen listar los enlaces de una página fuera de contexto, y seis "haz clic aquí" no significan nada.
- Prefiere texto real y listas antes que muros de texto centrado en cursiva o contenido encerrado en PDF. Si tiene que ser un PDF (el estatuto, por ejemplo), resume también los puntos clave en la página.
Formularios: etiquetas, errores y acceso con teclado
Los formularios de inscripción y de contacto son donde las fallas de accesibilidad realmente les cuestan socios a tu club. Lo esencial:
- Cada campo necesita una etiqueta visible, no solo un texto de ejemplo que desaparece al hacer clic. Ese texto de ejemplo también perjudica a las personas con dificultades de memoria o de atención, que pierden la pista de qué pedía el campo a medio completar.
- Indica con palabras los campos obligatorios, no solo con un color o con un asterisco sin explicación.
- Los mensajes de error deben decir qué está mal y dónde. "Algo salió mal" deja a la gente varada; "Ingresa un número de teléfono en el campo Contacto de emergencia" lo resuelve.
- Todo el formulario tiene que funcionar con el teclado: pasar de un campo a otro con Tab y enviarlo con Enter. Esto viene incluido en las herramientas de formularios bien hechas y se rompe con los widgets incrustados copiados y pegados, así que pruébalo: guarda el mouse e intenta completar tu propio formulario de inscripción.
Si tus formularios se crean con el creador de formularios de tu propia plataforma web y no con un widget externo incrustado, las etiquetas, el orden del teclado y el manejo de errores se resuelven de forma uniforme: una cosa menos que un voluntario tiene que hacer bien a mano.
Subtítulos, video y todo lo demás
- Subtitula tus videos. Resúmenes de partidos, discursos de la noche de premiación, clips de entrenamiento: los subtítulos sirven a los socios sordos o con pérdida auditiva, y también a todos los que miran sin sonido en el transporte público. Los subtítulos automáticos de las grandes plataformas de video son un buen punto de partida; revísalos y corrige los nombres antes de compartir.
- Transcripciones para el audio. Si tu club graba un pódcast o anuncios en audio, publica también la versión en texto.
- Movimiento y destellos. Evita los videos que se reproducen solos con sonido y nunca publiques contenido con destellos rápidos: puede provocar convulsiones, y WCAG prohíbe más de tres destellos por segundo.
- Lenguaje sencillo en todas partes. Oraciones cortas, sin jerga, y las abreviaturas escritas completas la primera vez ("jugador más valioso (JMV)"). La accesibilidad y la buena escritura son el mismo trabajo. Nuestra guía de ideas de contenido para la página web del club sirve además como lista de verificación de lenguaje sencillo.
Una revisión de accesibilidad de 15 minutos para la página web del club
Hazla en tu página de inicio, en tu página de partidos o de eventos y en tu formulario de inscripción:
| Qué revisar | Cómo probarlo | Así se ve cuando pasa |
|---|---|---|
| Texto alternativo | Revisa el campo alt de cada imagen | Cada imagen con significado está descrita |
| Contraste | Pasa los colores del encabezado, el texto y los botones por un verificador | 4.5:1 o más para el texto principal |
| Títulos | Mira el esquema de títulos de la página | Un título, orden lógico de H2/H3 |
| Teclado | Desconecta el mouse; recorre la página y el formulario con Tab | Se llega a todo y el foco se ve |
| Enlaces | Lee solo el texto de los enlaces | Cada enlace se entiende fuera de contexto |
| Zoom | Amplía el navegador al 200 % | No se pierde contenido ni se superpone el texto |
| Significado del color | Busca señales que dependan solo del color | Hay palabras que respaldan cada señal de color |
| Video | Abre tu video más reciente | Tiene subtítulos y son más o menos correctos |
Agenda la revisión en el calendario del club una vez por temporada: la accesibilidad se va deteriorando a medida que los voluntarios agregan páginas, y un repaso regular lo detecta a tiempo.
Si prefieres partir de una base que ya es accesible, las plantillas de ClubHelix vienen con paletas con contraste verificado, una estructura de títulos correcta, formularios con etiquetas y navegación con teclado desde el primer momento, y pasamos verificaciones automáticas de accesibilidad sobre nuestras plantillas como parte de nuestro proceso de desarrollo (mira cómo encaramos la calidad y la seguridad en nuestra página de seguridad). Tu trabajo se reduce a los hábitos de contenido de arriba: texto alternativo, lenguaje sencillo y títulos con sentido. Puedes empezar gratis y heredar todo lo demás.
Preguntas frecuentes
¿Mi club está obligado por ley a cumplir con WCAG?
En muchos países, las leyes de discriminación por discapacidad y de igualdad se aplican en términos amplios a los servicios que se ofrecen al público, y se entiende en general que esa obligación alcanza a los sitios web; aun así, a los clubes comunitarios no se los suele auditar como a los sitios del gobierno. Toma el nivel AA de WCAG como el estándar correcto porque sirve a tus socios, y considera la tranquilidad legal como un beneficio adicional; para los detalles, consulta la orientación vigente del organismo de derechos humanos o de igualdad del lugar donde está tu club.
¿Cuál es la mejora de accesibilidad más importante para la página web de un club?
Arregla tu texto: títulos reales y en orden, colores lo bastante oscuros, enlaces descriptivos e información publicada como texto y no dentro de imágenes de carteles. Ese solo repaso ayuda a la vez a quienes usan lectores de pantalla, a los socios mayores, a quienes miran el celular a pleno sol y a tu posicionamiento en los buscadores.
¿Necesito contratar a un experto o comprar herramientas?
No para el sitio de un club. Los verificadores de contraste gratuitos, el zoom del navegador y la prueba de usar solo el teclado cubren la mayor parte del terreno práctico de WCAG, y una plantilla accesible se ocupa de la capa técnica de fondo.
¿Qué es el texto alternativo y cuándo debo dejarlo vacío?
El texto alternativo es la descripción breve que un lector de pantalla dice en lugar de una imagen. Escríbelo para cualquier imagen que tenga significado (fotos, carteles, logotipos de patrocinadores) y déjalo vacío a propósito en las imágenes puramente decorativas, para que los lectores de pantalla las salten.
