Web universal

¿Cómo aplicar los 4 principios de accesibilidad web en un proyecto digital?

Todos los esfuerzos invertidos en un proyecto digital pueden malgastarse si los usuarios no logran acceder a los contenidos. Te enseñamos cómo aplicar en tu sitio los cuatro principios de la accesibilidad web.

Accesibilidad web

La accesibilidad web es un aspecto muy relevante, pero mayoritariamente ignorado entre los profesionales.

Por mucho que un sitio presente buenos contenidos, con un diseño atractivo y productos de calidad, nadie los verá si estos no pueden ser accedidos. El fundamento de la accesibilidad es asegurar el acceso universal de los usuarios, independiente de sus características. 

Si bien la usabilidad responde a una necesidad similar, la accesibilidad establece normas específicas para crear plataformas que pueden ser consumidas por cualquier persona y desde cualquier dispositivo. Es decir, considera las condiciones especiales de movimiento, percepción o cognición de los usuarios. También contempla las particularidades del entorno, como la luminosidad, ruido ambiente, idioma o lenguaje técnico.

En un artículo anterior explicamos la relación que existe entre el responsive web design y la accesibilidad web, ambos enfocados a asegurar el acceso al contenido en cualquier dispositivo. En esta oportunidad explicaremos los principios formulados por la W3C. Además, presentamos algunas aplicaciones concretas para los proyectos digitales.

¿Cuáles son los principios de accesibilidad web?

Perceptible

La información y los componentes de la interfaz presentada a las personas en formas que ellos puedan percibir. Esto considerando todos los contenidos e interacciones ofrecidas y todos los tipos de usuarios posibles, incluso aquellos que tienen diferentes capacidades físicas o necesidades especiales.

¿Cuáles son sus características más importantes?

Texto o alternativa textual

Debes ofrecer un texto alternativo para el contenido que no esté escrito, de esta forma los usuarios podrán cambiarlo a otros formatos.

Ejemplos de aplicación

  • Agrega una descripción a los gráficos de datos que resuma el contenido expuesto e indique las características del gráfico.
  • Incluye una transcripción de los archivos de audio publicados.

Contenido multimedia dependiente del tiempo

Los contenidos multimedia que se sincronicen en tiempo real deben tener una alternativa para que los usuarios los accedan.

Ejemplos de aplicación

  • Agregar transcripciones a los videos y audios.
  • Enlazar a contenidos que entreguen la información en texto.

Adaptable

Los contenidos deben ser adaptables de distintas formas sin perder información o alterar su estructura. Para lograr esto se deben establecer relaciones clara de los datos, programar secuencias significativas e incluir instrucciones para entender y operar el contenido.

Ejemplo de aplicación

  • Organiza la página usando títulos y encabezados en distintos niveles.

Distinguible

Los usuarios deben poder distinguir la importancia del contenido y su estructura con facilidad.

Esto considerando los siguientes elementos:

  • Uso del color: El color crea jerarquías y destaca. Además, se deben considerar formas alternativas de percepción del color.
  • Control de audio: Si cualquier audio en un sitio se activa automáticamente por más de 3 segundos, debe haber un mecanismo para pausarlo o detenerlo, además de un sistema para controlar el volumen.
  • Contraste: La presentación visual del texto y las imágenes deben tener un radio de al menos 4:5:1. Cuando se trata de fuentes muy grandes este puede ser de minimo 3:1. La única excepción son los componentes inactivos o decorativos.
  • Texto adaptable: Debe existir la posibilidad de agrandar hasta 200% las tipografías, sin perder funcionalidad o contenido.

Ejemplos de aplicación

  • Usa tipografías legibles, de buen tamaño, contraste y que cumplan la norma. En el siguiente artículo explicamos algunos aspectos fundamentales para trabajar las tipografías en el diseño web.
  • Asegúrate de que el texto en imágenes tenga un tamaño de al menos 14 pixeles y un buen contraste.

Operable

El usuario debe poder manejar los componentes de la interfaz y la navegación.

¿Cuáles son sus características más importantes?

Control desde el teclado

Debes ofrecer una forma de controlar las funciones desde el teclado, sin requerir tiempos específicos para llevar a cabo acciones.

Ejemplo de aplicación

  • Ofrece atajos de teclado para las funciones más importantes.

Tiempo suficiente

Entrega un tiempo razonable para leer y utilizar el contenido. Si hay un tiempo delimitado, el usuario debe poder parar el contador, ajustar su duración y/o extenderlo. A menos de que se trate de un proceso en el que el tiempo límite es esencial, como por ejemplo en un prueba online.

Ejemplo de aplicación

  • Si hay un tiempo límite de sesión, ofrece la oportunidad de extenderlo al menos 20 segundos antes de que este se acabe.
  • En videos con instrucciones textuales entregar opciones de reproducción a velocidad variable.

Pausar, detener, esconder

Debes ofrecer un mecanismo para pausar, detener o esconder información que se mueva o actualice automáticamente.

Ejemplo de aplicación

  • Indica el tiempo que falta para que se actualice la información, en los slider por ejemplo.

Ataques epilépticos

Evista los diseños que pueden causar ataques epilépticos. Las páginas no deberían tener nada que haga flashes más de tres veces por segundo y se debe hacer lo posible para reducir el efecto de destello.

Ejemplos de aplicación

  • Reduce el contraste de los contenidos que hacen flash.
  • No uses rojos totalmente saturados en contenido que destelle.

Navegación

Ayuda a los usuarios a navegar y buscar contenido. Se puede lograr mediante el uso de enlaces, títulos y encabezados, entre otros.

Ejemplos de aplicación

  • Permite que los enlaces importantes y los controles puedan ser accedidos desde el teclado.
  • Incluye enlaces para saltar contenido.

Comprensible

La información y las operaciones deben ser comprensibles.

¿Cuáles son sus directrices más importantes?

Legible

Crea contenido legible y comprensible. Se puede ofrecer un mecanismo para ver el significado de abreviaciones o identificar la correcta pronunciación de palabras, entre otros.

Ejemplo de aplicación

  • Añade explicaciones de palabras poco conocidas en cajas desplegables cuando el usuario pase el cursor sobre ellas.

Previsible

La apariencia y la forma de utilizar las interfaces digitales debe ser previsible. Los mecanismos de navegación y los componentes que comparten una misma función deben ser similares y consistentes a través del sitio. Además, las funciones automáticas deben ser anunciadas o contextualizadas.

Ejemplos de aplicación

  • Avisa al usuario cuando se vaya a abrir una ventana emergente.
  • Usa la misma barra de navegación para todo el sitio.
  • Evita que desde la barra de navegación principal se vincule a un sitio externo.

Asistencia a la entrada de datos

Se debe notificar a los usuarios cuando ha ocurrido un error o algo es incorrecto y hay que guiarlos para que entiendan cómo interactuar con la plataforma.

Ejemplos de aplicación

  • Cuando un usuario realiza una acción de forma incorrecta, despliega un ejemplo de cómo hacerlo correctamente. En caso de ejecutarla con éxito, se confirma con mensaje en pantalla.
  • Ofrece instrucciones para el llenado de formularios.

Robusto

El contenido deber ser suficientemente robusto para que pueda ser bien interpretado por una gran variedad de agentes de usuario, incluyendo tecnologías de asistencia.

¿Cuáles son sus directrices más importantes?

Compatible

El sitio y sus contenidos deben ser compatibles con los navegadores y las aplicaciones actuales y futuras.

Ejemplo de aplicación

  • Diseña para navegadores actuales y obsoletos.
  • Incluye etiquetas alt a las fotografías para que puedan ser leídas por tecnologías de asistencia para personas con visión limitada.
  • Estas etiquetas alternativas deben presentar información semántica de la imagen desplegada.

Criterios de cumplimiento

Existen tres niveles de conformidad a la norma: A, AA y AAA. Todos se rigen por los mismos principios, midiendo la cantidad de acciones que se realizan para cumplir las directrices.

Si ya optimizaste tu sitio y quieres comprobar su nivel de accesibilidad, puedes utilizar la herramienta Wave para revisar que todo esté en orden. Además, puedes revisar la guía detallada sobre la aplicación de los principios que está disponible en la W3C.

Recuerda que si quieres diseñar una plataforma que cumpla con estos principios, en IDA tenemos experiencia desarrollando proyectos con estas características. Contáctanos y cuéntanos tu idea.

Director de Negocios
Valoro al diseño de experiencia como eje fundamental para el éxito de cualquier estrategia digital. En 14 años he trabajado en diseño, código, AI, usabilidad, accesibilidad y gestión, lo que me entrega una perspectiva global para liderar proyectos y crear equipos de elite como el logrado en IDA.

Comentarios

Alexis

hace 2 años

Wow.. Me ha encantado esta referencia… La verdad si novato en esto del diseño web pero este articulo me ha dado un nuevo punto de foco, asi como tambien un encaminamiento hacia el perfeccionamiento en otras áreas… Gracias.