Web Content Accessibility Guidelines «WCAG»: Accesibilidad e inclusión en la web

Si de verdadera inclusión se trata tenemos que pensar primero en las personas que tienen algún tipo de discapacidad visual o cognitiva. Pues, estos no están aptos para consumir apropiadamente todo lo que internet tiene para brindarles. Con el fin de reducir estas barreras de accesibilidad se crearon los lineamientos del WCAG.

La evolución de las WCAG permitió establecer mejoras en materia de accesibilidad e inclusión. Pues, estos lineamientos ayudaron a crear estándares en las distintas páginas web, y estas, a su vez han sido premiadas por los usuarios.

Entonces, estas mejoras, cómo subtítulos en imágenes, o etiquetas h, qué permiten al usuario la comprensión del contenido fueron los principales elementos. Pero no, los únicos.

Hoy veremos de qué se tratan estos lineamientos y cómo medirlo e implementarlo en nuestro sitio, para ayudar al público a entender nuestro contenido.


¿Qué son las WCAG?

WCAG es la abreviatura para Web Content Accessibility Guidelines. Estas WCAG son directrices qué nos orientan en cómo tenemos debemos diseñar nuestro sitio web con el fin de facilitar la accesibilidad a los usuarios. En especial a los usuarios qué tienen algunas limitaciones físicas o cognitivas.

Pero, ¿quién se encarga de qué se cumplan estos lineamientos?. Pues, para ello está el W3C, conocido también cómo el World Wide Web Consortium. El cual es un organismo internacional que se encarga de liderar los estándares del internet, en especial las tecnologías cómo HTML; XHTML; CSS; y WCAG.

Por eso entendemos qué la misión del W3C es la implementación de reglas comunes para incluir y adaptar el contenido a las necesidades del usuario.

En cuanto a las WCAG, la versión más actual es la WCAG 2.1, siendo esta presentada en el 2018. Para actualizar la versión del 2.0 del 2008. Y la WCAG 1.0 en el 1999. Siendo la WCAG basada en el WAI «Web Accessibility Initiative».


De WCAG 1.0 a 2.0

Las WCAG 1.0 se basan en 14 pautas que conforman los principios básicos del diseño accesible.

Cada una de estas pautas tiene asociados una X cantidad de puntos de verificación, hasta 65 en total. Entonces, estos puntos explican cómo se están aplicando las diferentes pautas, que a su vez, cada punto tiene asignada una prioridad (1, 2, 3).

El nivel de adecuación de accesibilidad (nivel de conformidad) será:

  • Simple A (A): cuando cumple todos los puntos de verificación de prioridad 1.
  • Doble A (AA): cuando cumple todos los puntos de verificación de prioridad 1 y 2.
  • Triple A (AAA): cuando cumple todos los puntos de verificación de prioridad 1, 2 y 3.

Sí determinadas partes de una web no cumplen con el grado de conformidad, no se le podrá dar dicha conformidad a toda la página.

Si estás desarrollando un proyecto ajustado a esta normativa, podés emitir una declaración de conformidad donde se incluya:

  • La fecha de declaración de conformidad
  • A qué WCAG se refiere dicha declaración
  • Nivel de conformidad alcanzado (A, AA o AAA)
  • Descripción sobre las webs del dominio a las que se refiere
  • Una lista de las técnicas web usadas y qué efecto tienen
  • Una versión legible por una máquina de las técnicas web usadas y una versión legible de la declaración de conformidad

Directrices del WCAG 2.0

Las WCAG determinan el nivel de accesibilidad del contenido de un determinado sitio web. Para ello, las WCAG se componen de doce directrices, las cuales se rigen dentro de cuatro principios básicos.

Estas directrices deben ser tomadas en cuenta, principalmente por desarrolladores, redactores, creadores de contenido y diseñadores web. Recordemos qué, estos principios básicos son la perceptibilidad, la usabilidad, la comprensión, y la robustez. Pues:

  • Perceptibilidad: Son la información y los componentes que forman la interfaz qué interactúa con el usuario «UI». Estos elementos deben ser desarrollados para qué puedan ser percibidos por cualquier usuario.
  • Usabilidad: Los componentes de la usabilidad incluyen tanto la UI, cómo la navegación web. Estos deben ser utilizables y accesibles.
  • Comprensión: El contenido web debe ser simple e intuitivo. Pues, deben ser diseñados para qué los usuarios comprendan rápidamente el funcionamiento y la información del mismo.
  • Robustez: El contenido debe poder ser interpretado sin dificultad por los navegadores. El código del sitio debe estar formulado correctamente, sin fisuras, y qué además, esta tecnología esté disponible para la mayoría de los usuarios.

Todos estos principios y directrices cambian con el tiempo, y para mantenerse actualizado de las últimas normativas, debemos entrar al sitio de la W3C ↗.


El WCAG 2.1 es el último estándar en la accesibilidad

El WCAG 2.1 tiene cómo objetivo mejorar la accesibilidad de contenidos para las personas con visión limitada, problemas cognitivos, e incluso con dificultades de aprendizaje. Estas directrices son muy similares a las 2.1, pero con una particularidad qué antes no era tenida en cuenta, el contenido web para móviles.

Sí bien, hay constantes modificaciones en cuanto a todo el entorno de la accesibilidad, las mismas pueden ser consultadas desde el sitio del W3C.

Entre las normas actualizadas, podemos ver que se ha tratado de mejorar la accesibilidad móvil. Pues, se pone foco en mejorar la orientación vertical del contenido web. Esto se ve en pequeñas cosas cómo, el espaciado en el texto, la altura de las líneas, espacio entre párrafos, atajos de teclado, etc.


Chequeando los cumplimientos de las WCAG

Es responsabilidad de los creadores de contenido y desarrolladores de los sitios web en cumplir con los requisitos de las WCAG. Pero, evaluar los puntos puede ser una tarea muy laboriosa, pero para ello se crearon ciertas herramientas para comprobar esto.

Entonces, a día de hoy, el WAI ha desarrollado cuatro estrategias para evaluar el sitio web de manera individual o en conjunto. Estas son las 4 estrategias de comprobación:

1. Easy Checks o primeras comprobaciones

En este punto se buscan muchos puntos críticos de una página web. El objetivo de esto es darle ideas a los desarrolladores por sobre cómo está el estado de su proyecto. Puntualmente, se revisan los siguientes atributos:

  • Títulos meta «metatitle».
  • Textos alternativos «alt text».
  • Títulos «titles».
  • Relación de contraste «Contrast ratio».
  • Estructura del sitio web «Web’s structure».
  • Accesibilidad «Accessibility».

2. Metodología de evaluación WCAG

Para saber con precisión sí la web es afín a las directrices de las WCAG, tenemos qué evaluar un WCAG-EM.

El WCAG-EM «Website Accessibility Conformance Evaluation Methodology» consta de cinco pasos:

  1. Determinar el alcance de la evaluación
  2. Evaluar la página web
  3. Seleccionar las páginas web representativas
  4. Evaluar las páginas web seleccionadas
  5. Crear un informe de conformidad

Este análisis es útil para evaluar páginas web qué ya están funcionando, pero también es funcional para los proyectos qué aún no se crearon.

3. Herramientas de evaluación

Hay muchos sitios que te permiten analizar la accesibilidad. Pero, lo importante es ir a los orígenes, para ello el W3C, ofrece un método de evaluación, el llamado Website Accessibility Evaluation Report Generator ↗.

Cuya principal función es generar un informe estructurado conforme a los criterios establecidos en el modelo WCAG-EM. El análisis en sí es un poco complejo, pero muy fidedigno para evaluar todas las postas de accesibilidad.

4. Evaluación de terceros

Lo ideal siempre es conseguir a un usuario qué te pueda brindar la información de primera mano. Pero esto, en muchas ocasiones no es posible, de ahí a la recurrencia de los métodos de evaluación mencionados.

Pero, utilizar estos métodos mencionados pueden estar bien, pero requieren cierto nivel de conocimiento informático. La ventaja de los evaluadores de terceros, es qué para competir, estos deben ser simples e intuitivos. Pues, sí un software quiere sobrevivir, debe ser altamente competitivo.

Hay muchos programas para hacerlo, pero sí tengo que elegir uno, me quedo con el Lighthouse.


Método de evaluación alternativo: Lighthouse

Para instalar Lighthouse debemos ir primero a la tienda de aplicaciones de Chorme, buscar el Lighthouse, e instalarlo. Una vez instalada la aplicación, debemos simplemente hacer clic en el ícono del Lighthouse y generar el reporte.

Tenemos qué tener en cuenta, qué Lighthouse evalúa muchas más variables, no solo la accesibilidad.

Luego de generar el reporte veremos algo cómo lo que se ve en la imagen de arriba. Para ver las variables de accesibilidad debemos hacer clic donde dice «Accessibility«, o bien hacer scroll hasta encontrar el título.

En esta sección veremos los atributos auditados. Tanto los qué pasaron la auditoría, cómo las que no lo hicieron.

Dentro de los errores tenemos las oportunidades de mejora.

Es de mencionar qué Lighthouse evalúa muchas de las variables de la WCAG, pero no todos los puntos. Tener un nivel de 100 en Lighthouse es muy bueno, pero no es completamente accesible.

Cómo consejo, podés encuestar usuarios con estas afecciones mencionadas sí realmente querés evaluar al 100% la accesibilidad.


Conclusión

Bueno, llegamos al final. Espero qué el post te haya servido de información con respecto a la inclusión y accesibilidad en la web.

Como consejo, la forma más efectiva es evaluar el sitio con Lighthouse. Pues, las otras metodologías requieren mucho conocimiento técnico, pero sí te animás y es funcional para tu sitio, debes hacerlo.

Para finalizar te dejo en el banner un regalo de 25 dólares para qué puedas crear tu próximo sitio web accesible.

Consigue 25 dólares para tu próximo sitio WordPress

Metodología Agile: qué es y cómo aplicarla a tu proyecto de alto rendimiento en tu flujo de trabajo

Cuando hablamos de cambios y procesos tecnológicos relacionados con la transformación digital, tendremos una gran cantidad de nuevos conceptos dentro de la nube de ideas de temas relacionados. Sin embargo, sí hablamos propiamente de la gestión de proyectos, un concepto se destaca por sobre el resto, estoy hablando, de la metodología Agile. Entonces, hablando netamente

Read More »

Mindset: Aprende sobre el poder de la mentalidad positiva o growth mindset «progresivo» y a detectar tu propio mindset con ejemplos

Este es un tema muy propio del desarrollo personal, pues, tener una mentalidad correcta, es crucial para tu crecimiento. Entonces, toca hablar del Mindset, y de los marcos mentales relacionados con el mismo. El Mindset es un término que ha ganado mucha popularidad en los últimos años. Este concepto es simple y la verdad, no

Read More »

Liderazgo: Aprende qué es este concepto con definiciones y ejemplos, los tipos de líderes, algunas frases

Bueno, se viene un post cortito y serio sobre Liderazgo y desarrollo personal. El liderazgo es una cualidad importante que tienen todas las personas, independientemente de su área de interés; pues, el liderazgo se encuentra a muchos niveles y tiene muchos matices. En este post, intentaré definir el liderazgo, y mencionar los tipos de liderazgo

Read More »

Diseño web: Aprende qué es y como un diseño profesional puede ayudarte a posicionar tu sitio web con este post tutorial

Bueno, el diseño web es un área enfocada en el desarrollo de interfaces digitales, como el diseño de sitios y aplicaciones para web «Progressive Web App». Para ello, los diseñadores web crean sitios utilizando lenguajes de programación como HTML, CSS, JavaScript, e incluso otros tantos más. Pero, siempre, el motivo del diseño debe estar orientado

Read More »

Diseño: Cuando el diseño es tu pasión nada puede malir sal

— La idea de este post ocurrió mientras estaba escuchando la siguiente canción que seguramente comparta por aquí debajo. Mientras lo hacía, no paraba de pensar en el meme que dice: «el diseño gráfico es mi pasión«. Bueno, siendo justos, tampoco soy un gran maestro del diseño, pues, todo lo que engloba al diseño requiere

Read More »
error: Content is protected !!