TÉCNICAS DE ACCESIBILIDAD Y

USABILIDADTema 3 – UF1302 – Creación de Páginas Web con el lenguaje de marcas

Conceptos Básicos

◦ A la hora de crear una página web es muy importante crear páginas que sean accesibles y usables. Una página permite la accesibilidad cuando es capaz de adaptarse al usuario y a las características del dispositivo que utiliza. Y una página es usable cuando un usuario puede utilizar la página sin la necesidad de tener muchos conocimientos. Es decir, la accesibilidad se refiere a que la página se adapta al usuario para que pueda acceder a ella cómodamente, mientras que el objetivo de la usabilidad es que la página sea fácil de utilizar por el usuario.

Accesibilidad

◦ La accesibilidad es la capacidad que tiene una web para el acceso a sus contenidos por todas las personas independientemente del hardware, software, idioma, localización que usen y/o de las capacidades de los distintos usuarios.

◦ El principal objetivo de la accesibilidad es que todas las personas puedan acceder en igualdad de condiciones a los contenidos. De hecho, los gobiernos e instituciones de varios países están creando leyes y normativas que regulan esta capacidad. A nivel mundial el máximo organismo encargado de regularla es W3C (World Wide Web Consortium) desde su grupo de trabajo denominado WAI (Web Accessibility Initiative).

◦ Para conseguir que una web sea accesible la WAI estipula que la base son cuatro principios que proporcionan los fundamentos de la accesibilidad web , y por debajo de ellos se establecen "Las pautas de accesibilidad al contenido en la web (WCAG)" con el objetivo principal de guiar a los diseñadores hacia la meta de una web accesible, rompiendo las barreras y allanando el camino hacia la información.

Guía WCAG: Principios

• Principio 1. Perceptible: La información y los componentes de la interfaz de usuario deben ser presentado de forma que sean entendibles para el usario.

• Principio 2. Operable: Los componentes de la interfaz de usuario y la navegación deben de ser operables.

• Principio 3. Comprensible: La información y el manejo de la interfaz de usuario deben ser comprensibles.

• Principio 4. Robusto: El contenido debe der ser lo suficientemente robusto como para que pueda ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo las tecnologias asistivas.

Ventajas de Accesibilidad

◦ Aumento de la satisfacción y comodidad del usuario. Una web accesible, por lo general es una web usable con el contenido bien estructurado y fácilmente adaptable a cualquier dispositivo. Ganando así la confianza del usuario.

◦ Incremento del número de visitantes, ya que entorno un 15% de la población mundial presenta algún tipo de discapacidad y si gran parte de los sitios no son accesibles, se obtiene una ventaja competitiva.

◦ Disminución en la tasa de errores cometidos por el usuario. Si todo está claramente definido, el usuario cometerá menos errores y reducirá su estrés, obteniendo así su fidelidad.

◦ Una página accesible normalmente obtiene un mejor posicionamiento, porque tiene más texto que imágenes, está semánticamente bien construida y éstos son puntos muy importantes para los robots.

Usabilidad

◦ La usabilidad es la facilidad con las que las personas aprenden y utilizan una herramienta o cualquier otro objeto fabricado. Si el término se refiere a la usabilidad web, indica la claridad y sencillez del sitio para poder verlo y utilizarlo cualquier usuario. Aunque es difícil diseñar un sitio web claro y sencillo para todos los usuarios, ya que cada usuario lo va a ver desde una perspectiva distinta, el diseñador debe realizar estos esfuerzos para realizar el diseño lo más sencillo posible.

Principales Factores

• Facilidad de aprendizaje. Una página ha de ofrecer a un usuario que no la ha visitado antes, la manera más rápida y sencilla de navegar por la web y mostrarle su información.

• Eficiencia de uso. Una vez realizado el aprendizaje, la página debe ofrecer al usuario la forma más rápida de trabajar o llegar a los contenidos.

• Errores. Se debe intentar minimizar los errores que puedan producirse, ganando así la fidelidad del usuario.

• Flexibilidad. Debe ofrecer la posibilidad al usuario de la multiplicidad de vías para realizar el mismo cometido.

Beneficios

◦ Mejora la imagen corporativa de la web. Ya que el cliente está más satisfecho.

◦ Optimización de los costes de diseño, rediseño y mantenimiento.

◦ Disminución del aprendizaje del usuario.

◦ Aumento de la satisfacción del cliente.

◦ Fidelidad del usuario.

Verificando la accesibilidad:

NIVELES

Para establecer la accesibilidad de una página web, W3C establece tres niveles de prioridades:

• Prioridad 1. Puntos de obligado cumplimiento, que todo desarrollador debe cumplir, ya que si no se cumplen, cierto grupo de usuarios no pueden acceder a la web.

• Prioridad 2. Son aquellos puntos que un desarrollador debe cumplir, ya que en caso contrario ciertos usuarios tienen dificultades de acceso.

• Prioridad 3. Punto que de no cumplir provocarán ciertas dificultades de acceso a la información.

Niveles de conformidad

Existen tres niveles de conformidad:

• WCAG 2.0 Nivel A: para lograr conformidad con el Nivel A (el mínimo), la página web debe satisfacer todos los Criterios de Conformidad del Nivel A, o proporcionar una versión alternativa conforme.

• WCAG 2.0 Nivel AA: para lograr conformidad con el Nivel AA, la página web debe satisfacer todos los Criterios de Conformidad de los Niveles A y AA, o proporcionar una versión alternativa conforme al Nivel AA.

• WCAG 2.0 Nivel AAA: Para lograr conformidad con el Nivel AAA, la página web debe satisfacer todos los Criterios de Conformidad de los Niveles A, AA y AAA, o proporcionar una versión alternativa conforme al Nivel AAA.

WCAG 1.0Guía de

referencia rápida

◦ Imágenes y animaciones: Usar texto alternativo (atributo alt) para describir la función de los elementos visuales.

◦ Mapas de imagen: Usar mapas de cliente y texto alternativo para las zonas activas.

◦ Multimedia: Facilitar subtítulos y trascripción de los ficheros de sonido, descripción de los vídeos y versiones accesibles en el caso de usar formatos accesibles.

◦ Enlaces de hipertexto: Usar texto que tenga sentido cuando se lea fuera de contexto. Por ejemplo, no usar instrucciones como “haga clic aquí”.

◦ Organización de las páginas: Usar encabezados, listas y estructura consistente. Usar hojas de estilos en cascada (CSS) para maquetación y estilo, donde sea posible.

◦ Gráficos: Resumir o usar el atributo longdesc.

◦ Scripts, applets y plug-in: Ofrecer alternativas accesibles en el caso de que las características activas no sean accesibles o no tengan apoyo.

◦ Marcos: Utilizar noframes y títulos con sentido.

◦ Tablas: Realizarlas de manera que se puedan leer línea a línea. Incluir un resumen.

◦ Revisar el trabajo: Validar el código HTML. Usar herramientas de evaluación y navegadores “sólo texto” para verificar la accesibilidad.

INTRODUCCIÓN A LAS WCAG 2.0WCAG 1.0 (1999) Y WCAG (DIC 2008)

WCAG Estructura Puntos de Verificación, Criterios de Conformidad Nivel de Conformidad Documentación

WCAG

1.0 (1999)14 pautas con 65 puntos de verificación

Los Puntos de Verificación tienen asignado un Nivel de Prioridad 1, 2 o 3.

Nivel A, AA, AAA

Técnicas fundamentales

Técnicas HTML

Técnicas CSS

WCAG

2.0 (2008)

4 principios básicos con 12 pautas que contienen un total de 61 criterios de éxito.

Los Criterios de Conformidad tienen asignados un Nivel de Conformidad A, AA ó AAA.

Nivel A, AA, AAAComo satisfacer / Comprender

Técnicas suficientes y aconsejables.

Introducción a las WCAG

2.0Principios y

pautas

Principio 1.- Perceptible: La información y los componentes de la interfaz de usuario deben ser presentados a los usuarios de modo que ellos puedan percibirlos.

◦ Pauta 1.1.- Proporcionar alternativas textuales para todo contenido web no textual, de manera que el acceso al contenido se ajuste a las necesidades de los usuarios.

◦ Pauta 1.2.- Medios tempodependientes: Proporcionar alternativas sincronizadas para el contenido web multimedia sincronizado que sea tempodependiente.

◦ Pauta 1.3.- Crear contenido que pueda presentarse de diferentes formas (por ejemplo, con una disposición más simple) sin perder información o estructura.

◦ Pauta 1.4.- Facilitar a los usuarios ver y oír el contenido, incluyendo la separación entre el primer plano y el fondo

Introducción a las WCAG

2.0Principios y

pautas

Principio 2.- Operable: Los componentes de la interfaz de usuario y la navegación deben ser operables.

◦ Pauta 2.1.- Proporcionar acceso a toda la funcionalidad mediante el teclado.

◦ Pauta 2.2.- Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido.

◦ Pauta 2.3.- No diseñar contenido de un modo que se sepa podría provocar ataques, espasmos o convulsiones.

◦ Pauta 2.4.- Proporcionar medios para ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.

Introducción a las WCAG

2.0Principios y

pautas

Principio 3.- Comprensible: Comprensible -La información y el manejo de la interfaz de usuario deben ser comprensibles.

◦ Pauta 3.1.- Hacer que los contenidos textuales resulten legibles y comprensibles.

◦ Pauta 3.2.- Hacer que las páginas web aparezcan y operen de manera predecible.

◦ Pauta 3.3.- Ayudar a los usuarios a evitar y corregir los errores.

Introducción a las WCAG

2.0Principios y

pautas

Principio 4.- Robusto: El contenido debe ser suficientemente robusto como para ser interpretado de forma fiable por una amplia variedad de aplicaciones de usuario, incluyendo las ayudas técnicas.

◦ Pauta 4.1: Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo las ayudas técnicas.

◦ Insertar un contenido audiovisual en web de forma accesible, implica tener en consideración los tres eslabones de la cadena de la accesibilidad.

Contenido audiovisual accesible

Acceso accesible

Interacción usable

MULTIMEDIAACCESIBLE

Accesibilidad a los contenidos multimediaCadena de la Accesibilidad

Accesibilidad a los

contenidos multimedia

Cadena de la Accesibilidad

◦ Cadena de la accesibilidad de los contenidos audiovisuales en Web

1. Contenido en sí: El contenido debe ser accesible (Pauta 1.2 WCAG 2.0)

2. Cómo llegar al contenido: El acceso a ese contenido debe ser accesible (WCAG 2.0)

3. Control e interacción con el usuario: Ofrecer alternativas atendiendo a preferencias del usuario, y la interacción del usuario al acceder al contenido debe ser usable.

Evaluación de

accesibilidad WCAG

Metodología

Verifique la accesibilidad con herramientas automáticas y revisión humana. Los métodos automáticos son generalmente rápidos y convenientes, pero no pueden identificar todos los problemas de accesibilidad. La revisión humana puede ayudar a garantizar la claridad del lenguaje y la facilidad de navegación

◦ Recomendaciones generales de WAI:

◦ Valide la accesibilidad con herramientas automáticas y revisión humana

◦ Comience utilizando métodos de validación desde los primeras fases del desarrollo

◦ Metodologías

Evaluación de

accesibilidad WCAG

Metodología. Evaluación automática

◦ Ventajas:

◦ Permite un funcionamiento rápido y sistemático.

◦ Se revisan muchos aspectos simultáneamente.

◦ Ofrece una calificación global de la accesibilidad de la página.

◦ Se puede certificar que no se cumple.

◦ Desventajas:

◦ La interpretación de los resultados del análisis es compleja y exige conocer los principios básicos de accesibilidad.

◦ Muchos aspectos de la accesibilidad sólo pueden verificarse mediante una revisión manual complementaria.

◦ No pueden certificar que sí se cumple.

Evaluación de

accesibilidad WCAG

Metodología. Evaluación

manual

◦ Ventajas◦ Se entienden mejor los problemas de la página. ◦ Se puede comparar la validez de distintas

soluciones.◦ Es el único medio posible para revisar algunos

aspectos: adecuación texto alternativo, títulos de marcos, etc.

◦ Desventajas◦ Proceso mucho más costoso en tiempo.◦ Hacen falta más navegadores alternativos,

simuladores de navegadores o configuraciones distintas del mismo navegador entre otras herramientas.

◦ Exige el juicio personal del revisor. ◦ Hay que conocer mejor los problemas para

detectarlos. ◦ Algunas cosas son difíciles de simular.◦ Puede no detectar algunos fallos de

accesibilidad.

Recursos para

evaluación

◦ Audit Tool WCAG 2.1◦ Es una herramienta en formato Excel que permite ir

recogiendo los datos obtenidos durante la revisión automática y manual del sitio de acuerdo a las WCAG. Hay una versión para las WCAG 2.0 y otra para las WCAG 2.1. Te genera gráficas y estadísticas de cumplimiento e incumplimiento por página, nivel, principio o criterio de conformidad.

◦ Herramientas automáticas de validación◦ https://www.tawdis.net/

◦ WCAG-EM Report Tool◦ https://www.w3.org/WAI/eval/report-tool/

◦ Multinavegador y mutidispositivo

◦ Distintos contextos y resoluciones

◦ Textos, Complejidad, Ortografía, etc.

◦ Color, Contraste, …

Fuente: https://www.usableyaccesible.com/

Recursos para

evaluación (2)

http://www.tawdis.net/http://www.cynthiasays.com/

http://validator.w3.org/unicorn/http://wave.webaim.org

http://www.sidar.org/recur/aplica/heraffx.php

http://www.cogentis.com.au/online-free-accessibility-test.html

Diseño de sitios web

usables

◦ Secciones del sitio web:• Tiene una página principal.• Ofrece el contenido de manera

atractiva.• Existe un buscador de los contenidos

del sitio.• Tiene un mapa de la página e índice

de contenidos que están siempre accesibles.

• Se ofrece ayuda a la navegación.• El sitio cuenta con una zona de

novedades.• Tiene un menú accesible.• Tiene páginas de ayuda.

Diseño de sitios web

usables (2)

◦ Para cada página:• Tiene un título que describe el contenido

de la página.

• Incluye el copyright y el logotipo del sitio.

• Una página no tiene nunca más de 4 o 5 pantallas de contenido.

• Se mantiene la coherencia y consistencia en todas las páginas del sitio.

• Elegir una selección de colores lo más apropiado posible, con el mayor contraste para los contenidos y respetando los colores corporativos.

Diseño de sitios web

usables (3)

◦ Accesibilidad:• Todas las páginas del sitio web son

accesibles desde la página principal.• Cualquier contenido debe ser accesible

con tres clics desde la página principal.• El sitio está diseñado de forma

eficiente y sencilla.• Se ha validado el sitio según la W3C.

Diseño de sitios web

usables (4)

◦ Formularios:• Se validan los datos de los formularios antes de enviar.• Si se disponen de formularios largos se indica en qué

estado del proceso se encuentra (paso 1 de 3).

• Texto:• Utilizar fuentes redondeadas, ya que son más legibles

en pantalla, tipo: arial, verdana, etc.• Emplear espacios en blanco para que el usuario

descanse de la lectura.• No utilizar más de 3 tipos de fuente distintos en el

sitio.• Utilizar sólo la negrita para los textos importantes.

• Enlaces: Se diferencian entre los enlaces visitados y los no visitados.

• Imágenes: Las imágenes tienen los tamaños adecuados y poseen información alternativa.

• Hojas de estilo: Las hojas de estilo ha sido validadas.