Estudio de accesibilidad de la tienda online de adolfodominguez.com Informe de accesibilidad web | Noviembre 2012

INTRODUCCIÓN Este documento presenta los principales problemas de accesibilidad detectados en el informe para adolfodominguez.com. El contenido de esta presentación se divide en: Niveles de adecuación y normativa aplicable Perfiles de usuario y razones para ser accesible Recomendaciones generales Estructura y diseño visual Navegación Contenido no textual Adaptabilidad Conclusiones 1 | 2 | 3 | 4 | 2/11

NIVELES DE ADECUACIÓN Y NORMATIVA APLICABLE La WCAG 2.0 identifica 3 niveles de prioridad y 3 niveles de adecuación que influyen en las posibilidades de integración del contenido web para las personas con discapacidad. Nivel de adecuación “A” (A): Cumple puntos de prioridad 1 Nivel de adecuación “Doble A” (AA): Cumple puntos de prioridad 1 y 2 Nivel de adecuación “Triple A” (AAA): Cumple puntos de prioridad 1,2 y 3 Normativa española En España, el nivel de adecuación requerido por la normativa es “Doble A” (AA) (UNE 139803:2012) 1 | 2 | 3 | 4 | 3/11

PERFILES DE USUARIO Y RAZONES PARA SER ACCESIBLE Para facilitar el uso de un producto o servicio por personas que poseen distintas capacidades. Los criterios de la WCAG 2.0 cubren, con distintos niveles de prioridad, cada perfil de usuario. PERFILES DE USUARIO CUBIERTOS RAZONES PARA SER ACCESIBLE Personas con discapacidad visual. Personas con discapacidad cognitiva. Personas con discapacidad física. Personas mayores con algún tipo de discapacidad. Personas con conexiones lentas o que utilizan tecnologías antiguas. Personas con nivel de alfabetización o uso de idioma bajos. Personas con discapacidad auditiva. El número de personas con discapacidad alcanza los 3,8 millones, lo que supone el 8,5% de la población. Notable mejora en el posicionamiento orgánico de los buscadores. Facilitar la adaptación a dispositivos móviles. Cumplir la normativa Española. 1 | 2 | 3 | 4 | 4/11

RECOMENDACIONES GENERALES ESTRUCTURA Y DISEÑO VISUAL La jerarquía del contenido se debe establecer mediante el uso correcto del marcado semántico para cada elemento del HTML. El color no debe ser utilizado cómo único método para distinguir visualmente los elementos. La relación de contraste entre el color del texto y el color de fondo de la página debe ser superior a 4.5:1. Permitir al usuario tener el control sobre todos los elementos animados o sonoros de la página. El idioma principal de la página debe identificarse correctamente mediante el atributo “lang”. ¿Qué mejoraríamos? La comprensión del contenido a todos los usuarios. El control del usuario sobre el contenido. La satisfacción del usuario. 1 | 2 | 3.1 | 4 | 5/11

RECOMENDACIONES GENERALES NAVEGACIÓN: ENTRE PÁGINAS Los menús de navegación deben mantener una coherencia y jerarquía entre las diferentes páginas. No duplicar enlaces entre menús. El texto de los enlaces debe ser descriptivo para poder identificar de forma inmediata su propósito. La navegación y los elementos comunes en todas las páginas deberían ofrecer un enlace que permita “saltarlos” (skip) para evitar la repetición innecesaria. Incluir un mapa de navegación correctamente jerarquizado para facilitar otra alternativa de acceso a todos los contenidos. Las opciones del menú superior deberían cambiar de apariencia cuando están seleccionadas para indicar la ubicación del usuario. ¿Qué mejoraríamos? Facilitar navegación a todo tipo de usuarios. Minimizar pasos para acceder al contenido deseado. 1 | 2 | 3.2 | 4 | 6/11

RECOMENDACIONES GENERALES NAVEGACIÓN: DENTRO DE LA MISMA PÁGINA Y FORMULARIOS Añadir “accesskeys” para permitir que toda la funcionalidad esté accesible mediante atajos de teclado y crear una sección de accesibilidad para mostrar qué atajos existen. Todas las funcionalidades importantes deberán ser accesibles mediante el tabulador, siguiendo un orden específico marcado a través del atributo “tabindex”. El orden de lectura, marcado por la navegación con el tabulador por los diferentes elementos interactivos de la página, deberá seguir la lógica del contenido. Indicar el estilo del :focus en los enlaces para permitir identificarlos a los usuarios que navegan con teclado. ¿Qué mejoraríamos? Accesibilidad para usuarios con dificultades visuales o motrices Accesibilidad del contenido para lectores de pantalla y motores de búsqueda 1 | 2 | 3.2 | 4 | 7/11

RECOMENDACIONES GENERALES NAVEGACIÓN: DENTRO DE LA MISMA PÁGINA Y FORMULARIOS II Evitar el uso de javascript que oculte parte del contenido de la página ya que las herramientas de ayuda a la lectura y los motores de búsqueda tienen problemas al interpretar este lenguaje. Los campos de los formularios relacionados entre sí deben ser asociados por medio de los atributos <fieldset> y <legend>. Los inputs del formulario deben ir acompañados de sus etiquetas <label> asociadas o del atributo “title” cuando estas no puedan usarse, y los botones deben contener el atributo “value”. En el caso de que un campo de formulario dé un error de validación, el foco se debe situar sobre el primer campo erróneo según el orden de navegación. ¿Qué mejoraríamos? Accesibilidad para usuarios con dificultades visuales ó motrices Accesibilidad del contenido para lectores de pantalla y motores de búsqueda 1 | 2 | 3.2 | 4 | 8/11

RECOMENDACIONES GENERALES CONTENIDO NO TEXTUAL Añadir texto alternativo, descriptivo y conciso, mediante los atributos “alt” y “title” a todas las imágenes cuyo contenido resulte relevante para el usuario. Los elementos multimedia incrustados (embedded) se identificarán mediante textos accesibles. En el caso de que el elemento sea un video pregrabado se debería ofrecer una transcripción o una audio descripción para todo el contenido. ¿Qué mejoraríamos? Contenido interpretado por distintas herramientas de accesibilidad para usuarios con discapacidad Contenido accesible para buscadores 1 | 2 | 3.3 | 4 | 9/11

RECOMENDACIONES GENERALES ADAPTABILIDAD Usar unidades relativas en lugar de absolutas al especificar los valores en las hojas de estilo, de modo que los elementos en pantalla se adapten a cualquier resolución sin que se solapen contenidos o aparezca el scroll secundario. La página fuerza la visualización a la escala original, lo que impide que se ajuste a distintas pantallas. Si la web no está optimizada con CSS Media Queries, no forzar la escala de visualización a escala original. Para garantizar la correcta visualización de los contenidos en distintas resoluciones la opción más recomendable es el responsive design mediante CSS Media Queries. Optimizar los tiempos de carga ya que son excesivos para conexiones lentas o 3G. ¿Qué mejoraríamos? Página legible y funcional con redimensionamiento de hasta 200% Correcta visualización en distintas resoluciones Correcta visualización en dispositivos móviles 1 | 2 | 3.4 | 4 | 10/11

CONCLUSIONES En resumen, consideramos que estos son los puntos de mayor importancia para mejorar la accesibilidad de la página: Estructura y diseño visual Navegación Contenido no textual Adaptabilidad Con las sugerencias propuestas pretendemos: Aumentar cobertura de target actual (8,5% población con discapacidad) Cumplir con normativa Mejorar el posicionamiento orgánico Mejorar experiencia de usuario y facilitar la navegación Incrementar tráfico desde dispositivos móviles Mejorar la comprensión del contenido a todos los usuarios 1 | 2 | 3 | 4 | 11/11