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 😊!

PDFs interactivos: botones

¡Hola a todos 😊! Hoy os traigo otra entrada bastante chula sobre los PDFs interactivos. En este hemos trabajado con botones, que funcionan igual que los hipervínculos.

Estos botones los podéis modificar para darles la forma y el color que queráis para decorar bien vuestro pdf o hacerlo más ameno. También, estos botones os ayudaran a que el pdf sea mucho más interactivo y la gente no se aburra al tener que estar volviendo para atrás o hacia delante buscado la información que desea.

En este PDF (creado con Indesign), os iré explicando unos conceptos básicos para que lo entendáis perfectamente y os podáis iniciar en el mundo de internet 😁. Ya sabéis que si tenéis una duda o cualquier crítica, me podéis dejar un comentario y yo intentaré responder lo mejor posible.

Espero que os haya gustado y os sirva en algún futuro. ¡Hasta la próxima!

Análisis páginas web

¡Hola a todos 😁! Hoy os traigo el análisis de tres páginas web. Pero primero, vamos a hacer una clasificación de las páginas web según su contenido para dar comienzo a esta entrada.

Las páginas web se pueden clasificar en:

• Corporativas.
• Comerciales.
• Educativas.
• Personales.
• Tiendas online.
• Informativas o sitios web de noticias.
• Wikis.
• Foros.
• Redes sociales.
• Blogs.
• Páginas gubernamentales.

Antes de seguir, os voy a explicar brevemente lo que es la usabilidad:

"La usabilidad es la medida de la calidad de la experiencia que tiene un usuario al interactuar con un producto o un sistema. Esto se mide a través del estudio de la relación que hay entre las herramientas del sitio web y el usuario que la vaya a utilizar. Así, se establece la eficiencia y la efectividad de estas." Para ello, vamos a seguir una serie de criterios a la hora de analizar la página web.

• Criterios de usabilidad:

             - Jerarquía visual.
             - Control de usuario.
             - Facilidad de interacción.
             - Simplificación de contenidos.


1ª página web: Para empezar con este análisis, pongamos como primer ejemplo una página web informativa. Este tipo de páginas web se dedica a ofrecer noticias que ocurren por todo el mundo y/o actualizaciones de estas mismas. Vamos a analizar https://actualidad.rt.com

• Jerarquía visual: la jerarquía en si no está mal, pero se podría mejorar bastante con algunos cambios. Uno de estos es aumentar el tamaño de la tipografía de los titulares para hacerlos más llamativos u ordenarlos por orden de importancia. El tamaño de la letra es óptimo (10px mínimo) para que todo el mundo pueda leer perfectamente, ya sea en monitor o en un dispositivo móvil.

• Control del usuario: es muy fácil navegar por esta página web. Si quieres acceder a una noticia, con un solo clic ya estás leyéndola. Los titulares están bien diferenciados, aunque podrían cambiar un poco el tamaño de la letra o hacer el cuerpo de la noticia un poco más interesante sin dejar tantos espacios.
• Facilidad de interacción: el usuario no va a tener ningún problema de navegación, como ya he dicho en el apartado anterior. Es muy fácil de navegar por este sitio web, aunque tampoco es que haya muchas opciones de interacción (clicar y poco más).
• Simplificación de contenidos: esta página es un gran ejemplo de simplificación de contenidos. ¿Quieres una noticia clara y concisa? Aquí la tienes, sin rodeos ni titulares confusos.

2ª página web: como segundo ejemplo, vamos a poner una página web corporativa. Estas páginas web pertenecen a una empresa o entidad y no sólo sirven para ofrecer sus productos al mundo, sino darse a conocer y mantener una relación entre empresa y cliente. Como ejemplo tenemos https://empresa.nestle.es/es 

• Jerarquía visual: no está nada mal. Lo más importante está lo primero, y bien grande para que el usuario lo vea sin problemas. El tamaño de letra es óptimo y el contraste es bueno (elementos grises y azules sobre un fondo blanco para que se distinga bien). Todo está bien ubicado para que el usuario no se pierda y deje la página.
• Control del usuario: para el usuario, esta página es un paraíso. Todo está a un clic o dos para acceder, e incluye una barra con varias pestañas dirigidas a informar sobre sus colaboraciones, productos, etc.
• Facilidad de interacción: esta página ofrece varias opciones de interacción, como puede ser arrastrar de izquierda a derecha las noticias principales del día o abrir pestañas que dirigen a otros apartados. Es rápido, sencillo e intuitivo.
• Simplificación de contenido: una página web bastante sencilla y concisa la verdad. Es bastante difícil perderse o aburrirse al mirar el contenido de esta página. Yo no le he podido encontrar ninguna pega.

3ª página web: para terminar con este análisis, concluiremos con un foro. Este tipo de página web sirve para crear una relación entre usuarios y que establezcan conversaciones sobre diversos temas, como puede ser sobre videojuegos, series, noticias e incluso consejos sobre cocina. Para ello, vamos a hablar sobre https://www.3djuegos.com/foros/

• Jerarquía visual: es un foro bastante bien jerarquizado, diferenciando varios temas (videojuegos, noticias, debates de actualidad, etc). La diferenciación entre títulos y subtítulos es clara, cambiando el tamaño y el color de letra. El contraste es bueno, haciendo que al usuario no se le canse la vista.
• Control del usuario: fácil, sencillo y bien diferenciado. El usuario no se puede aburrir de esta página con todas las opciones que tiene. ¿Quieres videojuegos? Toma apartado. ¿Quieres noticias? Toma noticias. Y todo a un sólo clic o dos de distancia.
• Facilidad de interacción: diferentes secciones, diferentes barras de opciones (una con las consolas/dispositivos disponibles y otra con diferentes secciones), barra de búsqueda, etc. El usuario que accede a esta página tiene un diverso abanico de opciones para no aburrirse y poder encontrar la información que desea.
• Simplificación de contenido: esto es un foro y se habla de diversos temas, pero hay una simplificación bastante buena del contenido para que los usuarios encuentren lo que buscan rápidamente lo que buscan (por ejemplo si se quedan atrancados en un nivel de cualquier juego, o si tienen dudas sobre algunas herramientas, armas, recetas, etc).

Y por mi parte ya estaría todo chicos. Ya sabéis que si tenéis una duda o cualquier crítica, podéis dejarme una comentario y lo intentaré solucionar. Muchas gracias por leerme y espero que paséis un buen día 😊.