Hace un tiempo venimos hablando sobre accesibilidad.

La accesibilidad implica que todas las personas puedan comprender el entorno, informarse, comunicarse, moverse y ser parte.

La accesibilidad puede referirse a diferentes ámbitos: el físico, por ejemplo si hablamos de espacios amplios, mobiliario adaptable. El arquitectónico, si hablamos de rampas, sanitarios adaptados. El sensorial, si hablamos de estímulos lumínicos y sonoros reducidos o el uso de señales claras y contrastantes, etc.

También hablamos de accesibilidad cognitiva cuando nos referimos a la posibilidad de comprender el lugar donde estamos, un producto o servicio que consumimos, una información, un libro o una página web.

 Y es este último punto el que nos interesa remarcar.

Actualmente muchas de las actividades cotidianas se desarrollan en la web: realizar trámites, hacer compras por internet, informarse, entretenerse. 

Internet ha cambiado la manera en la que nos relacionamos. Y ha modificado nuestra forma de convivir. 

La accesibilidad, entonces,  es la medida en la que las personas pueden comprender y utilizar las oportunidades que ofrece el mundo digital. Por eso es tan importante.

¿De qué se trata la accesibilidad web?

La accesibilidad web es el puente que conecta a todas las personas con el mundo digital. Un sitio web accesible es aquel diseñado para que cualquiera, sin importar sus capacidades, pueda navegarlo de forma sencilla e intuitiva. Desde discapacidades visuales o motoras hasta dificultades cognitivas o temporales, la accesibilidad garantiza una experiencia en línea equitativa para todos.

Lo que debemos tener en cuenta es que la diversidad de usuarios en internet es inmensa. La accesibilidad web reconoce esta realidad y se centra en crear sitios web que se adapten a las necesidades de cada persona. 

Desde personas mayores hasta usuarios con discapacidad temporal, como aquellos que utilizan dispositivos móviles en entornos con poca luz, entre otras cuestiones.

Existen ciertas pautas o estándares internacionales que determinan si una web es o no accesible.Y los grados de accesibilidad. 

En esta oportunidad nos centraremos en estos estándares.

Vamos a detallar de manera simple algunas de las pautas que se tienen en cuenta a nivel internacional para considerar si una web es accesible.

Y aportaremos algunos consejos o tips a tener en cuenta para que nuestras webs sean accesibles. Sin meternos en la parte de diseño, un ámbito que no nos pertenece.

Pautas de Accesibilidad para el contenido web

Existen unas Pautas de Accesibilidad web (WCAG) que son el estándar internacional para la accesibilidad web. Estas pautas proporcionan una serie de criterios de éxito que, al ser implementados, hacen que los sitios web sean más accesibles para personas con discapacidad, pero también para cualquier usuario. 

Los beneficios de seguir las WCAG incluyen una mejor experiencia de usuario, un mayor alcance de audiencia y una mejor optimización para motores de búsqueda.

Estructura de la WCAG

Las Pautas de Accesibilidad al Contenido Web (WCAG) ofrecen una estructura flexible para crear sitios web accesibles. 

Estas pautas se organizan en niveles de guía, desde principios fundamentales hasta criterios de éxito específicos: “ principios fundamentales, pautas generales, criterios de éxito verificables y una amplia colección de técnicas suficientes, técnicas aconsejadas y fallos comunes documentados con ejemplos, vínculos a recursos y código” (ANDIS). 

Esta estructura permite a los desarrolladores seguir las pautas en sus proyectos y adaptarlas a las necesidades de su audiencia. Al seguir estas pautas, los creadores de contenido pueden asegurar que sus sitios web sean comprensibles, operables, perceptibles y robustos para el mayor número de personas posible

Ahora veamos estas  pautas de una manera simple y cómo ayudan a lograr la accesibilidad.

Los 4 Principios Fundamentales de las WCAG 2.0 y sus Pautas:

1. Perceptibilidad: Todo el contenido debe ser perceptible.

• Proporcionar texto alternativo: En vez de usar solo imágenes, agregar un texto que describa la imagen. Por ejemplo, en una imagen de un perro, el texto alternativo podría ser “Un perro marrón jugando con una pelota”.
• Subtítulos y descripciones de audio: Para videos, agregar subtítulos y descripciones de audio que expliquen los sonidos importantes.
• Contraste de colores: Usar colores que contrasten lo suficiente para que las personas con dificultades visuales puedan distinguirlos.
• Cualquier instrucción o enlace que incluya no debe depender de un sonido, color o ubicación: Ejemplo: evitar expresiones como “haga clic en el boton azul” “haga clic en el enlace de abajo” o “responda al escuchar el sonido”.
• En los campos de n formulario, debe quedar muy clara la indicación. Ej: si se trata de completar el correo electrónico, especificar si es el correo personal o laboral.
• Al hacer zoom hasta un 200 % en la pantalla, el texto debe ser legible sin interrumpir información.
• Todo tipo de sonido que no sea el principal de un audio o video debe ser bajo, inexistente o tener un control simple que permita apagarlo.

2. Operabilidad: La interfaz debe ser operable.

• Teclado: Todas las funciones del sitio web deben ser accesibles usando solo el teclado.
• Tiempo suficiente: Dar a los usuarios tiempo suficiente para leer y completar tareas.
• Si una sesión autenticada caduca, cualquier persona debe poder continuar sin pérdida de datos al realizar una nueva autenticación.
• Evitar contenido que provoque ataques: No diseñar el sitio para que cause convulsiones o mareos.
• Cualquier elemento que tenga movimiento automático o parpadeo y que dure más de 5 segundos, debe tener algún tipo de control para que la personal pueda pausar, detener u ocultar.
• Ayudas para la navegación: Incluir un menú claro, un buscador y un mapa del sitio.
• La persona debe tener la opción de ignorar el contenido repetitivo como por ejemplo el menú de navegación, con algún tipo de control.
• Estructura simple: todas las páginas deben tener un título que describa su propósito.
• El propósito de un enlace debe explicarse en el texto del mismo enlace.
• Toda funcionalidad que depende de un movimiento de arrastrar y soltar debe tener un método alternativo para que la funcionalidad también se lleve a cabo tocando o con un clic.

3. Comprensibilidad: El contenido debe ser comprensible.

• Lenguaje claro: Usar un lenguaje sencillo y evitar jerga o tecnicismos innecesarios: si se utilizan metáforas o abreviaturas, se debe mostrar una forma de explicación.
• Diseño consistente: Mantener un diseño coherente en todo el sitio web para facilitar la navegación: Ejemplo: mantener los botones de búsqueda en la misma ubicación y con el mismo estilo en todas las pantallas que conformen la web o app.
• Ayudar a evitar errores: Mostrar mensajes claros y concisos cuando el usuario cometa un error de manera textual y audible. Ejemplo: ante un error mostrar cambio de color en el elemento, mensaje de texto indicando el error y un icono de alerta
• Al rellenar un formulario se debe proporcionar un formulario que confirme los datos y el envío así como la posibilidad de cancelar el envío. Todo esto presentado de una manera simple y clara..

4. Robustez: El contenido debe ser compatible con tecnologías actuales y futuras.

• Compatibilidad: Asegurarse de que el sitio funcione correctamente en diferentes navegadores y dispositivos.
• Tecnologías asistivas: El sitio debe funcionar con lectores de pantalla, lupas y otros dispositivos de asistencia.

Los Niveles de Conformidad:

• Nivel A: Lo básico. Es lo mínimo necesario para que un sitio sea accesible.
• Nivel AA: El estándar más común. Satisface las necesidades de la mayoría de los usuarios.
• Nivel AAA: El nivel más alto. Cubre todas las necesidades, pero puede ser más difícil de alcanzar.

¿Qué significan estos niveles?

Imagina un camino. El nivel A es como un camino de tierra, suficiente para llegar a tu destino, pero con algunos baches. El nivel AA es como un camino pavimentado, más cómodo y seguro. El nivel AAA es como una autopista, perfecta para todos los conductores.

¿Por qué son importantes las WCAG?

Las WCAG hacen que internet sea más inclusivo para todos, sin importar sus capacidades. Al seguir estas pautas, estás asegurando que más personas puedan acceder a la información y disfrutar de la web.

Ejemplos prácticos

Elementos clave que debería tener una web de comercio electrónico accesible:

• Navegación intuitiva:
  • Menú principal claro y conciso, accesible desde cualquier punto de la página.
  • Búsqueda avanzada que permita filtrar productos por diferentes criterios (tamaño, color, precio, etc.).
  • Mapa del sitio detallado para una fácil orientación.
• Contenido claro y conciso:
  • Descripción detallada de los productos, utilizando un lenguaje sencillo y evitando jerga técnica.
  • Imágenes de alta calidad con texto alternativo descriptivo.
  • Tablas comparativas para facilitar la elección de productos.
• Accesibilidad visual:
  • Contraste de colores adecuado entre el texto y el fondo.
  • Opción de ajustar el tamaño de la fuente.
  • Modo de alto contraste para usuarios con baja visión.
• Accesibilidad auditiva:
  • Subtítulos en los videos.
  • Transcripciones de los contenidos audiovisuales.
• Accesibilidad motora:
  • Navegación completa mediante teclado.
  • Tiempo suficiente para realizar las acciones.
  • Formularios sencillos y con etiquetas claras.
• Accesibilidad cognitiva:
  • Diseño minimalista y sin distracciones.
  • Instrucciones claras y concisas.
  • Opciones de personalización para adaptar la experiencia a las necesidades del usuario.

Un sitio web de una tienda de ropa que cumple con las WCAG tendría:

• Imágenes con texto alternativo: “Vestido rojo de verano”
• Subtítulos en los videos de moda
• Un menú claro y fácil de navegar
• Un contraste de colores adecuado entre el texto y el fondo
• La posibilidad de ajustar el tamaño de la fuente
• Un formulario de contacto con etiquetas claras y mensajes de error útiles

En resumen, las WCAG son como un manual de buenas prácticas para hacer que los sitios web sean accesibles para todos. Siguiendo estas pautas, podemos crear una internet más inclusivo y equitativo.

Compartimos la Guía Descargable a continuación:

Referencias

Guía WCAG: https://guia-wcag.com/es/

Pautas de Accesibilidad para el contenido en la web. ANDIS: https://www.argentina.gob.ar/sites/default/files/pautas-de-accesibilidad-para-el-contenido-de-la-web.pdf

10 pautas para crear contenidos accesibles en páginas web y apps. Plena Inclusión: https://www.plenainclusion.org/publicaciones/buscador/10-pautas-para-crear-contenidos-accesibles-en-paginas-web-y-apps/

Tercer Sector Digital: https://www.tercersector.com.es/blog/accesibilidad-web-claves-para-cumplir-las-pautas-wcag