Accesibilidad básica: una web que todos puedan usar

Una web accesible es una que pueden usar personas con distintas capacidades: quienes no ven bien, no oyen, no pueden usar un ratón o les cuesta leer letra chica. También resulta más fácil para todos los demás, como alguien bajo el sol fuerte, alguien con un niño en brazos o alguien con la muñeca enyesada. En esta lección vemos con palabras simples qué significa la accesibilidad, qué son las WCAG y la ADA, qué revisiones básicas puedes hacer tú mismo y cómo diseñar y escribir para todos. Es información general y no una asesoría legal: para las dudas legales, consulta con un profesional.

Qué significa accesibilidad

Las personas encuentran barreras en los sitios web de muchas maneras. Algunas son permanentes: ceguera, poca visión, sordera, movilidad reducida o una diferencia de aprendizaje. Otras son temporales, como una lesión. Y otras dependen de la situación, como el reflejo en la pantalla, un lugar ruidoso o tener una sola mano libre. Un sitio que funciona para todos ellos es más accesible, y casi siempre es mejor también para cualquier visitante.

Estos son algunos ejemplos de cómo se ve la accesibilidad en la práctica.

• Una persona ciega escucha la página con un lector de pantalla, un programa que lee el texto en voz alta. Necesita texto de verdad, títulos y descripciones de las imágenes para hacer su trabajo.
• Una persona que no puede usar un ratón recorre la página con la tecla Tab. Cada botón y cada enlace tienen que poder alcanzarse, y el que está activo debe verse.
• Una persona con poca visión agranda el texto o necesita un contraste fuerte entre las letras y el fondo.
• Una persona sorda necesita subtítulos en los videos.
• Una persona con temblor necesita botones lo bastante grandes para acertar.

Las WCAG en palabras simples

WCAG significa Web Content Accessibility Guidelines, es decir, Pautas de Accesibilidad para el Contenido Web. Son un conjunto de pautas técnicas publicadas por el World Wide Web Consortium, llamado W3C, el grupo que desarrolla los estándares de la web. Hay varias versiones, y la más nueva, WCAG 2.2, se publicó en octubre de 2023. Cada pauta se compone de pruebas concretas llamadas criterios de conformidad.

Los criterios se agrupan en tres niveles: A, AA y AAA. Cada nivel incluye al anterior, así que cumplir el AA significa cumplir también el A. El nivel AA es del que hablan la mayoría de las leyes, los contratos y los abogados. Las WCAG son una vara de medir, no una ley en sí mismas.

La ADA y los sitios web en palabras simples

La Ley de Estadounidenses con Discapacidades, conocida como ADA, es una ley de derechos civiles. Su Título III abarca a los negocios abiertos al público, como tiendas, restaurantes, clínicas y hoteles. La ley no enumera reglas técnicas para los sitios web. En la práctica, los tribunales, los abogados y las agencias suelen usar las WCAG, casi siempre el nivel AA, como medida de si un sitio es accesible. Una regla publicada en 2024 por el Departamento de Justicia fija las WCAG 2.1 nivel AA como el estándar para los sitios web de los gobiernos estatales y locales. Esa regla no se aplica a los negocios privados.

¿Qué significa esto para ti? Conviene saber tres cosas. Primero, muchos reclamos de accesibilidad sobre sitios web vienen de personas particulares y de sus abogados, no del gobierno. Segundo, si la ADA se aplica a un sitio concreto, y cómo, depende de los hechos y a veces del tribunal, así que ningún artículo puede decirte cuál es tu riesgo exacto. Tercero, un sitio que más gente puede usar es mejor para tus clientes y reduce las barreras que llevan a los reclamos. Para cualquier tema legal, consulta con un abogado que conozca esta materia.

Diez revisiones fáciles que cualquiera puede hacer

El propio W3C publica una lista breve de revisiones fáciles. Llevan minutos y detectan muchos problemas comunes. El W3C también aclara que estas revisiones cubren solo una parte de la accesibilidad, así que aprobarlas no significa que una página sea totalmente accesible. Tómalas como una primera revisión.

1. Texto alternativo de las imágenes. Toda imagen con significado debería tener una descripción breve que explique su propósito a quienes no pueden verla.
2. Título de la página. Cada página necesita un título claro, que la gente ve en la pestaña del navegador y que los lectores de pantalla anuncian primero.
3. Títulos y subtítulos. Deben seguir la estructura real de la página. Quienes usan lectores de pantalla saltan de un título a otro.
4. Contraste de color. El texto necesita suficiente contraste con el fondo. El nivel AA de las WCAG pide una relación de al menos 4.5 a 1 para el texto común, y de 3 a 1 para el texto grande, que equivale a unos 24 píxeles, o unos 19 píxeles en negrita.
5. Foco visible del teclado. Pulsa Tab varias veces. Siempre deberías ver qué botón o enlace está seleccionado.
6. Enlace para saltar al contenido. Lo primero que alcanza quien usa el teclado debería ser un enlace que lleve directo al contenido principal.
7. Idioma de la página. La página debe declarar su idioma para que el lector de pantalla pronuncie bien las palabras. Es especialmente importante en un sitio bilingüe.
8. Ampliación. Agranda la página. El texto y las imágenes deben seguir siendo legibles y utilizables.
9. Video y audio. Los videos necesitan subtítulos. El audio necesita una transcripción escrita. Los videos con información visual importante pueden tener además una audiodescripción.
10. Etiquetas y campos obligatorios en los formularios. Cada campo necesita una etiqueta visible, y los campos obligatorios deben estar bien marcados.

Las WCAG 2.2 suman una regla de tamaño para lo que se toca: en el nivel AA, un área para tocar debe medir al menos 24 por 24 píxeles, con algunas excepciones. Más grande es mejor, como explicó la lección 3 de esta serie.

Escribe texto alternativo que ayude

El texto alternativo es la descripción escrita de una imagen. Un lector de pantalla la lee en voz alta, y el navegador la muestra si la imagen no carga. Unos pocos hábitos la vuelven útil.

• Describe el propósito. Di qué importa de la imagen para esta página, en una frase corta.
• Sé concreto. Una balsa con remeros que cruzan aguas bravas dice más que foto de rafting.
• Ahórrate la introducción. Los lectores de pantalla ya anuncian que es una imagen, así que no empieces con imagen de.
• Repite las palabras que forman parte de la imagen. Si un gráfico dice Abierto los siete días, el texto alternativo también debe decirlo.
• Deja vacía la decoración. Una imagen puramente decorativa lleva una descripción vacía, para que el lector de pantalla la salte.
• En un logo, usa el nombre del negocio. En un botón hecho con una imagen, describe la acción.
• No llenes de palabras clave. El texto es para las personas primero.

Color, contraste y tamaño del texto

• Revisa el contraste. El texto gris claro sobre blanco es uno de los problemas más comunes. Existen verificadores de contraste gratuitos, y el selector de color de las herramientas para desarrolladores de tu navegador muestra la relación de cualquier texto.
• No dependas solo del color. Si los errores son solo rojos o las fechas libres son solo verdes, las personas con daltonismo pueden no notarlos. Agrega palabras, iconos o patrones.
• Usa texto de verdad. Pon los horarios, los precios y las direcciones en texto dentro de la página, no dentro de una imagen. La lista de Snowmelt que ves abajo es texto simple con líneas cortas, fácil de leer para un lector de pantalla, para un traductor automático y para un buscador.
• Cuida la comodidad de la letra. Texto de al menos 16 píxeles, buen interlineado y líneas cortas de unos 50 a 75 caracteres.
• Protege el texto sobre imágenes. Usa una capa oscura detrás de las palabras o colócalas en una parte tranquila de la imagen.

Formularios, botones y enlaces

• Ponle una etiqueta a cada campo con texto visible, como en el formulario de Heyday que ves abajo, y muestra cuáles son obligatorios.
• Escribe errores claros junto al campo, con palabras.
• Dale a cada botón el nombre de lo que hace: Ask for a test ride es claro, y una flecha sin palabras no lo es.
• Escribe enlaces con sentido. Ver nuestros precios se entiende leído solo, y haz clic aquí no.
• Haz las zonas táctiles lo bastante grandes para tocarlas, con espacio entre ellas.

Las herramientas pueden ayudar a usar una página, pero la página tiene que dar la información. En la calculadora de Norvane que ves abajo, cada control tiene un nombre, el valor actual está escrito al lado y los resultados son texto, no solo un gráfico. Quien usa un lector de pantalla, o quien simplemente no puede calcular un control deslizante a ojo, igual puede entender cada número.

Teclado y lectores de pantalla

Puedes hacer una prueba básica en tres minutos. Deja el ratón a un lado y pulsa la tecla Tab en tu página de inicio. ¿Llegas a cada enlace, botón y campo de formulario? ¿Ves dónde estás? ¿El orden tiene sentido? ¿Un menú se abre con el teclado? Después prueba un lector de pantalla. La mayoría de los aparatos trae uno: VoiceOver en los dispositivos de Apple, TalkBack en Android y Narrator en Windows, y NVDA es una opción gratuita para Windows. Escucha la primera pantalla con los ojos cerrados. Si la página no tiene sentido, una persona que usa uno tampoco puede entenderla.

Video, audio y movimiento

• Agrega subtítulos a los videos con voz y una transcripción al audio.
• No hagas sonar nada solo. Las WCAG piden una forma de detener o bajar el audio que se reproduce automáticamente durante más de tres segundos.
• Da una forma de pausar el contenido en movimiento. Las WCAG piden un control para pausar, detener u ocultar lo que se mueve solo durante más de cinco segundos junto a otro contenido.
• Sé suave con el movimiento. Las animaciones grandes pueden molestar a algunas personas. Mantenlas pequeñas y con sentido.

Cuidado con las promesas de arreglo rápido

Algunos productos prometen volver accesible, o conforme, cualquier sitio web con una sola línea de código. Ten cuidado. La accesibilidad sale de un diseño, un contenido y un código bien construidos. Una herramienta puede ayudar a encontrar problemas, pero no reemplaza el buen trabajo. Pregúntale a cualquier proveedor exactamente qué revisa y qué corrige, y consulta con un profesional del derecho sobre el cumplimiento.

Una lista de control de accesibilidad en una página

• Toda imagen con significado tiene una descripción breve
• Cada página tiene un título claro y subtítulos reales
• El texto tiene un contraste fuerte y mide al menos 16 píxeles
• Nada depende solo del color
• Los horarios, los precios y las direcciones son texto de verdad
• Cada campo tiene una etiqueta visible, y los errores se escriben con palabras
• Los botones y los enlaces dicen lo que hacen
• Las zonas táctiles son grandes, con espacio entre ellas
• Toda la página funciona con la tecla Tab, y se ve dónde estás
• Los videos tienen subtítulos, y nada reproduce sonido solo
• La página funciona cuando se agranda
• El idioma de la página está indicado

Lo que Good Sites Only puede y no puede decir

Somos un estudio de diseño, no un servicio legal, y no certificamos que un sitio cumpla con ningún estándar legal. Lo que sí podemos decir es cómo funciona nuestro proceso: tus textos se escriben para ti, ves una maqueta los días 3 y 4, y puedes pedir cambios en cada etapa, como letra más grande o un contraste más fuerte. El hosting, la versión para celular y los formularios de contacto están incluidos. Si la accesibilidad es importante para tu negocio, dilo cuando respondas nuestras primeras preguntas. Para una revisión formal o una orientación legal, trabaja con un profesional en accesibilidad o con un abogado. Cuando quieras empezar, empieza tu sitio.

Preguntas frecuentes