Análisis de accesibilidad de una página web

¡Muy buenas a todos 😊! En esta entrada, vamos a explicar y analizar la accesibilidad de una página web. Para ello, empezaremos con un breve resumen de qué es la accesibilidad web y aplicaremos ese resumen a la hora de analizar dos páginas web distintas.

Antes de seguir, expliquemos qué es la W3C y sus principios.

La World Wide Web Consortium (W3C) es una organización neutral e independiente que se dedica a desarrollar protocolos y directrices que aseguren el crecimiento de la web a largo plazo.
Para que la W3C funcione, se siguen varios principios:

-WEB PARA TODO EL MUNDO:  Valor social que aporta la web, que hace posible la comunicación humana, el comercio y las oportunidades para compartir conocimiento. El objetivo de la W3C es hacer que estos beneficios este disponibles para todo el mundo.
-WEB PARA CUALQUIER DISPOSITIVO: ha crecido bastante el número de dispositivos para acceder a la página web.

Ahora, ¿qué es la accesibilidad web?

Cuando hablamos de accesibilidad web, hablamos de un accesibilidad universal, que sea independiente del tipo de hardware, software, infraestructura de la red o incluso el idioma, la cultura, localización geográfica y capacidades de los usuarios.
De aquí nace la Iniciativa de Accesibilidad Web (WAI), desarrollada por la W3C para facilitar el acceso de las personas con discapacidad, aplicando pautas de accesibilidad, mejorando herramientas para la evaluación y reparación de accesibilidad web.

Os preguntaréis para que sirve, bien, la idea principal radica en hacer la Web más accesible para todos los usuarios independientemente de las circunstancias y los dispositivos involucrados a la hora de acceder a la información.

Y para ello, se han desarrollado unas Pautas de Accesibilidad al Contenido en la Web (WCAG), cuya función es guiar el diseño de las páginas web hacia un diseño accesible. La WCAG consisten en 1pautas que proporcionan soluciones de diseño y que utilizan como ejemplo situaciones comunes en el que el diseño de una página puede producir problemas de acceso a la información. Estas pautas tienen una serie de puntos de verificación que ayudan a detectar posibles errores, y estos están asignados a uno de los tres niveles de prioridad establecidos por las pautas.

Prioridades y niveles:

-Prioridad 1: estos son puntos que el desarrollador debe cumplir, ya que si no, algunos usuarios no podrían acceder a la web.
-Prioridad 2: aquellos que los desarrolladores deberían cumplir para que ciertos grupos de usuarios puedan acceder a la información
-Prioridad 3: aquellos puntos que los desarrolladores deberían cumplir para que los usuarios no tengan ninguna dificultad a la hora de acceder a la información.

• -Nivel de conformidad A: todos los puntos de verificación de prioridad 1 satisfacen.
• -Nivel de conformidad "doble A": todos los puntos de verificación de prioridad 1 y 2 satisfacen.
• -Nivel de conformidad "triple A": todos los puntos de verificación de prioridad 1, 2 y 3 satisfacen.

Análisis de accesibilidad web:
Ahora que hemos explicado lo básico, pasemos a analizar varias páginas web.

Como primer ejemplo, tenemos la página web del ayuntamiento de Leganés: http://www.leganes.org/portal/

Esta página ofrece un nivel de conformidad "doble A", incluyendo los puntos de verificación de prioridad 1 y 2 que se establecen en las directrices.

Para empezar, hablemos de los puntos fuertes de esta página:
-Todas las imágenes tienen una alternativa textual (Nivel A de conformidad, criterio 1.1.1).
-Se identifica el idioma de la página principal con el código "es" (Nivel A de conformidad, criterio 3.1.1).
-La página tiene un elemento title (Nivel de conformidad A, criterio 2.4.2).

Y ahora, pasemos a los errores que debería corregir esta página para poder ofrecer un mayor nivel de conformidad:
-Hay 7 enlaces cuyo contenido es sólo una imagen sin alternativa textual (Nivel A y Nivel AAA, criterios en los que falla: 2.4.4, 2.4.9 y 4.1.2) -> debido al uso de alternativo nulo en una imagen que constituye el único contenido de un enlace.
-Hay 22 enlaces con el mismo texto pero con diferente destino (Nivel de conformidad AAA, falla en el criterio 2.4.9) -> debido al uso de un enlace no específico tal como "pinche aquí" o "más" sin un mecanismo para cambia el texto del enlace a un texto específico.
-Hay un formulario sin botón de envío (Nivel de conformidad A, criterio en el que falla: 3.2.2) -> no proporciona botones de envío.
-No se usan encabezados en la página (Nivel de conformidad A, criterio en el que falla: 1.3.1) -> no utiliza encabezados, por lo que no se distinguen los títulos.
-Hay 1 imagen con una alternativa textual que no sirve como alternativa (Nivel de conformidad A, criterios en los que falla: 1.1.1 y 1.2.1) -> uso indebido de alternativas textuales que no sirven como alternativas.


Segunda página web: http://www.mecd.gob.es/portada-mecd/



Esta página web ofrece un nivel de conformidad "triple A" también, incluyendo los puntos de verificación de prioridad 1 y 2 que se establecen en las directrices.
En realidad, esta página no tiene muchos fallos y ofrece una buena accesibilidad, pero aún así, puede mejorar.

Hablemos de algunos de sus puntos fuertes:
-Uso de 13 elementos de encabezado (Niveles de conformidad A y AAA, criterios 1.3.1 y 2.4.10)
-Todas las imágenes tiene una alternativa textual (Nivel de conformidad A, criterio 1.1.1)
-Todos los controles de formulario tienen una etiqueta asociada (Nivel de conformidad A, criterios 1.1.1, 1.3.1, 3.3.2 y 4.1.2)
-Todos los formularios tienen un botón de envío (Nivel de conformidad A, criterio 3.2.2)

Y por último, vamos a algunos de sus errores y el por qué de ellos:
-El primer enlace de la página no lleva al contenido principal de la misma (Nivel de conformidad A, criterio en el que falla: 2.4.1) -> no ha agregado un enlace que lleve al área del contenido principal de la página (para evitar bloques de material que se repiten).
-No existen enlaces para saltar bloques de contenido (Nivel de conformidad A, criterio en el que falla: 2.4.1) -> no ha agregado un enlace que pueda saltarse el bloque de material repetitivo y llevarlo al final de este.
-Hay un elemento que no tiene alternativa textual (Nivel de conformidad A, criterio en el que falla: 1.1.1) -> no proporciona alternativas textuales.
-Hay 24 enlaces con el mismo texto pero diferente destino (Nivel de conformidad AAA, criterio en el que falla: 2.4.9) -> debido al uso de un enlace no específico tal como "pinche aquí" o "más" sin un mecanismo para cambia el texto del enlace a un texto específico.

Como último ejemplo, os dejo una página web con nivel de conformidad "triple A": http://www.consumer.es

Y por mi parte ya estaría todo. Ya sabéis que si tenéis alguna duda o cualquier crítica, podéis dejarme un comentario e intentaré resolverlo lo mejor posible. ¡Hasta la próxima 😊!