Diseño web accesible: cómo crear sitios inclusivos en Costa Rica

Un sitio web accesible es uno que cualquier persona puede usar: quien no ve bien la pantalla, quien navega solo con el teclado, quien usa un lector de pantalla o quien tiene una mano lesionada y usa el celular con la otra. En Costa Rica, cerca de 676 000 personas adultas, el 17,2 %, viven con alguna discapacidad, según la Encuesta Nacional sobre Discapacidad 2023 del INEC (Observador.cr). La proporción es mucho mayor entre adultos mayores, que además son clientes con poder de compra.

La buena noticia: la mayoría de las mejoras de accesibilidad son sencillas, no cambian el diseño y hacen el sitio más fácil para todos. Esta guía explica qué piden los estándares, cómo revisar su sitio en media hora y qué corregir primero.

Por qué la accesibilidad le conviene a su negocio

• Más clientes. Si una persona no puede completar su formulario o su carrito, compra en otro lado.
• Mejor experiencia para todos. Buen contraste, botones grandes y textos claros ayudan también a quien lee al sol, con prisa o desde un celular pequeño.
• Mejor SEO. Google lee su sitio de forma parecida a un lector de pantalla: le sirven los títulos ordenados, el texto alternativo en las imágenes y los enlaces descriptivos. Lo explicamos en la guía de SEO.
• Menos riesgo legal. La Ley 7600 de Igualdad de Oportunidades para las Personas con Discapacidad establece el derecho de acceso a la información y la comunicación. No existe todavía una norma técnica obligatoria para sitios privados, pero la referencia internacional son las pautas WCAG.

Qué son las pautas WCAG

Las Pautas de Accesibilidad para el Contenido Web (WCAG) son el estándar internacional del W3C. La versión vigente es la 2.2, publicada en 2023 (resumen oficial en español). Se organizan en tres niveles:

• A: lo mínimo indispensable (por ejemplo, que todo se pueda usar con teclado).
• AA: el nivel recomendado para sitios comerciales y públicos, y el que piden la mayoría de leyes en el mundo.
• AAA: el nivel más exigente, para secciones especializadas.

Y se basan en cuatro principios: el contenido debe ser perceptible (se puede ver, oír o leer), operable (se puede usar con distintos métodos), comprensible (se entiende y se comporta de forma predecible) y robusto (funciona con distintas tecnologías, incluidos los lectores de pantalla).

Revise su sitio en 30 minutos

No necesita ser programador para encontrar los problemas más comunes:

1. Navegue solo con el teclado. Use Tab para avanzar y Enter para activar. ¿Puede llegar al menú, al formulario y al botón de compra? ¿Siempre ve dónde está el foco? Si se queda atrapado o el foco desaparece, hay un problema.
2. Aumente el zoom al 200 %. Todo el texto debe seguir legible y sin cortarse, y no debería aparecer una barra de desplazamiento horizontal.
3. Revise el contraste. Texto gris claro sobre blanco es el error más frecuente. WCAG AA pide una relación de 4,5:1 para texto normal y 3:1 para texto grande.
4. Mire las imágenes. Las que comunican algo (un producto, un gráfico) necesitan texto alternativo; las decorativas, no.
5. Envíe un formulario con errores. ¿Le dice qué campo está mal y por qué, con palabras, y no solo con un color rojo?
6. Pase una herramienta automática. WAVE o la auditoría de accesibilidad de Lighthouse (en Chrome) señalan muchos problemas en segundos. Las herramientas solo detectan una parte; las pruebas manuales de arriba completan el cuadro.
7. Escuche su página. Active VoiceOver (iPhone y Mac) o TalkBack (Android) y recorra la página de inicio. Es la forma más rápida de entender cómo la vive una persona ciega.

Qué corregir primero

Estructura y textos

• Un solo H1 por página y subtítulos en orden (H2, luego H3), usados por su significado y no por el tamaño de letra.
• Enlaces que digan a dónde llevan. "Ver precios de tiendas en línea" en vez de "clic aquí".
• Lenguaje claro, frases cortas y el idioma de la página declarado (español de Costa Rica), para que el lector de pantalla pronuncie bien.

Imágenes y multimedia

• Texto alternativo útil: describa lo que importa de la imagen en su contexto ("Camiseta roja de algodón, vista frontal"), sin empezar con "imagen de".
• Imágenes decorativas con texto alternativo vacío (alt="") para que el lector las ignore.
• Subtítulos en los videos y transcripción en los audios.
• Nada que parpadee más de tres veces por segundo.

Color y lectura

• Contraste suficiente en textos, botones y campos de formulario.
• No comunique solo con color: un error en rojo también necesita un mensaje y un ícono.
• Texto de al menos 16 px en el cuerpo y que se pueda agrandar.

Teclado y foco

• Todo lo que se puede hacer con el mouse se debe poder hacer con el teclado: menús, carruseles, ventanas emergentes y selectores de fecha.
• Foco visible en cada elemento (el contorno que muestra dónde está). Nunca lo elimine en el diseño.
• Un enlace "Saltar al contenido" al inicio de la página ayuda a quien usa teclado o lector de pantalla.

Formularios

• Cada campo con su etiqueta visible (el texto de ejemplo dentro del campo no cuenta como etiqueta).
• Mensajes de error junto al campo, explicando cómo corregirlo.
• Indicar qué campos son obligatorios y usar el tipo de campo correcto (correo, teléfono), para que el celular muestre el teclado adecuado.
• Tiempo suficiente para completar procesos como el pago, o la opción de extenderlo.

Un detalle técnico

Use HTML con significado: botones como botones (<button>), listas como listas y formularios con <label>. Los atributos ARIA (como aria-label o aria-expanded) sirven para componentes personalizados, pero no reemplazan al HTML correcto: un ARIA mal usado empeora la accesibilidad.

La accesibilidad en el celular

En Costa Rica la mayoría de las visitas llegan desde un teléfono, así que la accesibilidad móvil importa tanto como la de escritorio: botones de al menos 44 × 44 píxeles, separados entre sí, texto que se agranda sin romper el diseño y formularios cortos. Lo ampliamos en la guía de diseño web responsivo.

Cómo lo hacemos en WEB.CR

En los sitios que construimos, incluido este, cada formulario tiene etiquetas visibles, mensajes de error con texto, foco visible y navegación completa con teclado, y revisamos el contraste de la paleta antes de aprobar el diseño. Cuesta muy poco hacerlo desde el inicio y bastante más corregirlo después; por eso la accesibilidad es parte del diseño visual, no un extra (vea cómo el diseño visual transforma un sitio web).

Recursos

• WCAG 2.2, resumen en español (W3C)
• WAVE, evaluador gratuito de WebAIM
• Ley 7600 de Costa Rica
• Consejo Nacional de Personas con Discapacidad (CONAPDIS), referencia nacional en inclusión.

¿Quiere saber qué tan accesible es su sitio hoy? Agende una reunión y lo revisamos juntos.