Qué es WCAG

¿Qué significa WCAG?

El Estándar Internacional de Accesibilidad (WCAG 2.0) son una serie de recomendaciones y pautas definidas por el W3C con el objetivo de aumentar la usabilidad y accesibilidad en productos digitales y páginas web.

El propósito de este estándar es conseguir que el contenido y la experiencia de uso sea más agradable e interactiva para todo tipo de personas con discapacidades o dificultades.

¿Que es la accesibilidad?

La accesibilidad web explicado de una manera breve es, la capacidad que tiene una página web o entorno digital para garantizar que todas personas independientemente de las condiciones que tenga sea capaz de tener un acceso y experiencia de uso satisfactoria.

¿Por qué preocuparse por implantar WCAG 2.1?

En el mundo existen multitud de personas con condiciones y discapacidades distintas, cada vez más de esas personas tienen la posibilidad de acceder a internet y hacer uso de los espacios digitales que compartimos y creamos.

El cumplimiento y la implantación de las WCAG tiene como objetivo ayudar a todo tipo de usuarios con diferentes condiciones y afecciones, como limitaciones cognitivas o de movilidad, problemas del habla, fotosensibilidad, afecciones auditivas o visuales… Además, estas pautas benefician al resto de colectivos ya que en cualquier momento se puede encontrar en situaciones adversas o disfuncionales.

Principios y requisitos para implementar WCAG

Los requisitos necesarios para cumplir con WCAG se organizan según cuatro principios de diseño(POUR).

  • Perceptible: Los elementos e información de la interfaz de usuario deben estar presentables para los usuarios de manera que puedan percibirlos.
  • Operable: Los elementos de la interfaz de usuario y la navegación deben estar operativos.
  • Comprensible: La información y el funcionamiento de la interfaz de usuario deben ser entendibles y comprensibles.
  • Robusto: El contenido debe ser lo suficientemente “sólido” o coherente como para que pueda ser interpretado por una amplia variedad de agentes usuario (tanto usuarios como tecnologías de asistencia).

Existe una lista donde se agrupan todos los requisitos y pautas necesarias para estar al día con WCAG 2.0

Niveles de conformidad WCAG

Además de la lista de requisitos de WCAG existen 3 niveles con los que se evalua el grado de conformidad y éxito de estas pautas.

Estos niveles son nombrados como A, AA y AAA.

Progresión de los niveles de conformidad WCAG

Siendo el grado A es el más bajo, AA un punto intermedio y el AAA es el más alto y estricto.

Estos niveles son acumulativos, por lo que si cumples con el estándar AA también cumples con el nivel A.

¿Que nivel de accesibilidad debe tener un sitio web?

Aunque no es obligatorio cumplir con las normativas de WCAG (salvo que seas una web institucional) debería ser un objetivo a tener en cuenta en cualquier web o entorno digital.

Conseguir cumplir con el nivel de accesibilidad AAA de WCAG en todo un sitio web o producto digital es muy complicado. Siendo lo más habitual y recomendado mantenerse en el nivel AA, ya que este nivel permite generar soluciones visuales un poco más complejas y bonitas pero permitiendo una amplia accesibilidad para la mayoría de usuarios.

Para quien van dirigido este estandar WCAG

Las pautas de WCAG están diseñadas principalmente para desarrolladores web, diseñadores UX/UI y web, evaluadores de sitios o cualquier persona que quiera o necesite unas pautas para garantizar la accesibilidad en una web.

Cómo hacer que un sitio web cumpla con el estándar WCAG 2.0

No es tarea fácil conseguir que toda una web cumpla con todos los requisitos WCAG, pero si se busca mejorar la accesibilidad de una web, algunos puntos básicos y clave para empezar a ir por el buen camino son:

  • Añadir textos alternativos(alt) en las imágenes.
  • Aumentar el tamaño de “las cosas” y las tipografías.
  • Asegurar que todas las funciones son compatibles con el teclado.
  • Verificar que los colores utilizados tienen contraste suficiente.
  • Crear metadescripciones adecuadas al contenido que se indexa.

Quién creó las pautas WCAG

WCAG fue definido por el World Wide Web Consortium o W3C. Esta organización o consorcio se fundó en 1994 con el objetivo de crear estándares internacionales para la World Wide Web, o WWW (por eso delante de “todo internet” vemos www.)

La siglas WCAG significan Web Content Accesibility Gidelines, y existen diferentes versiones, es por ellos que lo habitual hoy en día es referirnos a las versión 2.0 o 2.1 cuando nombramos el estándar WCAG, aunque desde diciembre de 2021 existen las WCAG 3.0.

La organización W3C no solo ha creado pautas para la accesibilidad, si no que además definen otra variedad de pautas para agentes usuario (UAAG) o requisitos de accesibilidad de lenguaje natural.

Herramientas para evaluar el nivel de accesibilidad

Hay muchas herramientas y webs que ayudan a medir y evaluar la accesibilidad web de diferentes elementos. Algunas están más orientadas en indicar si el contraste de los colores de los textos es óptimo o si los elementos son fácilmente interactuables.

Webs donde validar por URL el nivel de accesibilidad acorde a WCAG de una web:

TAW, Tenon, más opciones en UsablesyAccesibles.

Valida si el contraste entre colores de texto y fondo es accesible:

Colourcontrast

Analiza si el contenido es fácilmente legible y comprensible:

Yoast SEO o Legible

Ejemplo de poco contraste de color entre texto y fondo y cómo no supera los estándares WCAG

Espero que después de haber leído este post quede un poco más claro que es el estándar WCAG y tengas algunos medios con los que afrontar y mejorar la accesibilidad y UX en webs y productos digitales.


Óscar López Poveda

Diseñador UX/UI y de producto digital.

Soy Óscar López y vivo diseñando y creando ideas, me encanta descubrir, aprender y compartir todo lo que aprendo sobre entornos, productos digitales y UX. Me apasiona el diseño y siempre estoy abierto a apuntarme a un «bombardeo» de poryectos y descubrir personas que les apasione el mundo digital.

Recibe todas las semanas contenido de calidad sobre Diseño UX y UI en tu mail👇🏼👇🏼

Sigue leyendo...

  • Atajos de teclado en Figma

    Si eres diseñador digital y trabajas en el mundo de producto digital…. fijo que conoces y utilizas Figma. Como en…
  • Regla 60 30 10

    En el momento de diseñar, ya sea para interfaces de usuario o publicaciones en redes sociales, existe un momento crucial:…
  • Qué es el No Code

    El No Code, también conocido como desarrollo Sin Código, se refiere a un movimiento y un conjunto de herramientas y…