Accesibilidad Web: Estudio y Evaluación para el desarrollo Digital

De Casiopea


TítuloAccesibilidad Web: Estudio de los principios y criterios de conformidad
Tipo de ProyectoProyecto de Titulación
Palabras Claveaccesibilidad, web, interfaz, HTML
Período2020-2020
AsignaturaTaller de Titulación de Diseño
Del CursoTaller de Título: Accesibilidad e Inclusión
CarrerasDiseño
Alumno(s)Raquel Cataldo, Yorka Castillo
ProfesorHerbert Spencer
PDFArchivo:Carpeta de Titulacion - Raquel Cataldo, Yorka Castillo.pdf
URLhttps://youtu.be/HpjkQsv-zhU

Carpeta de titulo

Enlace directo - Carpeta de Titulo

Presentación de titulo

Accesibilidad Web

El poder de la Web está en su universalidad.

El acceso de todos, independientemente de la discapacidad, es un aspecto esencial.

Tim Berners-Lee, Director del W3C e inventor de la World Wide Web [1]

¿Qué es la Accesibilidad Web?

La accesibilidad Web es una característica del diseño de una página o aplicación Web. Esta permite que, el usuario pueda percibir, entender, navegar e interactuar con la Web de una manera mucho más accesible, además aporta también en contenido. La accesibilidad Web beneficia al máximo de usuarios, servicios y organizaciones posibles. Es por eso que “tiene como objetivo lograr que las páginas web sean utilizables por el máximo número de personas, independientemente de sus conocimientos o capacidades personales, y las características técnicas del equipo utilizado para acceder a la Web” (Luján, 2006) [2].

Los sitios web y las nuevas tecnologías, deben estar diseñados para que las personas con discapacidad puedan hacer uso de ellas sin dificultad. “Cuando los sitios y las herramientas web están adecuadamente diseñados y codificados, las personas con discapacidad pueden usarlos. Sin embargo, actualmente muchos sitios y herramientas se desarrollan con barreras de accesibilidad que los hacen difíciles o imposibles de usar para algunas personas” ( Lawton, 2005) [3].

¿Por qué la Accesibilidad Web es importante?

“La Web es un recurso muy importante para diferentes aspectos de la vida: educación, empleo, gobierno, comercio, sanidad, entretenimiento y muchos otros”( Lawton, 2005) [4].Es importante que la Web sea accesible, para proporcionar oportunidades de interacción y acceso equitativo a la información.

Para las empresas y servicios, en algunos países, la accesibilidad Web es un requisito establecido por leyes y políticas, debido a que, el acceso a la información y comunicación (a través de la Web) está definido como un derecho humano básico en la Convención Internacional de la Organización de las Naciones Unidas sobre los Derechos de las personas con discapacidad o diferentes habilidades, las leyes establecen normas sobre Igualdad de oportunidades e Inclusión social. “El diseño accesible mejora la experiencia y satisfacción de las personas usuarias, en una variedad de situaciones, a través de diferentes dispositivos. Además, la accesibilidad puede mejorar su marca, impulsar la innovación y ampliar su alcance en el mercado” [3].

Beneficios Beneficiados
  • Facilita el acceso a sitios web del Gobierno, que son una gran fuente de información, reduciendo la brecha digital.
  • Contribuye a que personas con discapacidad participen más activamente en la sociedad.
  • Aumenta el rango de público que llega al sitio web de la entidad o servicio.
  • Permite el acceso a trámites en línea favoreciendo a todas las personas.
  • Usuarios que presentan algún grado de discapacidad (física, sensorial, cognitiva, etc.)
  • Usuarios de edad avanzada con dificultades producidas por el envejecimiento.
  • Usuarios con mal servicio de Internet y/o conexiones con capacidades limitadas.
  • Usuarios inexpertos que presentan inseguridad frente a la utilización de dispositivos electrónicos.
  • Usuarios que utilizan sitios web normalmente.

Accesibilidad y Usabilidad (Web)

El concepto de usabilidad web se refiere a la simplicidad o facilidad que hay a la hora de navegar en una página web cuando un usuario navega e interactúa con ella. El sitio web es claro, práctico, intuitivo y permite navegar de manera segura.

Por otro lado la accesibilidad es un aspecto clave y necesario para una buena usabilidad del sitio web, independientemente de las capacidades y/o experiencias de los usuario, o el dispositivo que están utilizando para navegar en la web.

Es por eso que la usabilidad y la accesibilidad van de la mano, ambas comparten el mismo objetivo: que el sitio web o la aplicación sean fáciles de usar para todos los usuarios. Ambas buscan la efectividad, la eficiencia y la satisfacción general del usuario, midiendo cuán fácil es usar una interfaz. Es por eso que la usabilidad utiliza una combinación de factores que incluyen:

Diseño intuitivo: Los usuarios entienden rápidamente la estructura del sitio y la navegación, con esto se logra que la interacción sea natural y no le cueste moverse por la web.
Orientación: El usuario no se pierde en ningún momento. Siempre sabe dónde se encuentra y cómo acceder a otro enlace.
Seguridad: Los usuarios deben sentirse seguros dentro del sitio web a la hora de navegar en el e introducir sus datos personales o al realizar una compra.
Consistencia: Los usuarios pueden realizar fácilmente las tareas de la página web cuando es utilizada en distintos dispositivos tecnológicos.
Prevención de errores: El usuario tiene a su alcance todas las opciones posibles para poder corregir cualquier error que cometa dentro del sitio web.
Rapidez de Respuesta: El usuario siempre se mantiene informado con lo que está pasando en el sitio web. Además ofrece cortos tiempos de carga haciendo que funcione más fluida la navegación.

La accesibilidad intenta vencer las discapacidades del usuario para acceder a la información; mientras que la usabilidad busca mejorar la experiencia del usuario al usar las páginas web.

100%

Conceptos Claves

  • Diseño Universal: Conocido como “Diseño para todos”, es el diseño de productos y entornos que puedan utilizar todas las personas, independiente de su edad, capacidad o condición de vida. Considera desde el momento inicial la diversidad de la población y no solo las necesidades de las personas con discapacidad.
  • Diseño Centrado en el usuario: "El diseño centrado en el usuario ubica al ser humano como centro, inicio y fin del proceso de diseño" (Krippendorf, 2006)[5]. "Su propuesta es desafiar a los diseñadores a moldear la interfaz en torno a las capacidades y necesidades de los operadores, en lugar de mostrar información centrada en los sensores y las tecnologías que lo producen, integrando esta información de manera que se ajuste a las metas, tareas y necesidades de los usuarios" (Endsley - Jones, 2016)[6].
    • Buen Diseño: Un buen diseño es el resultado de un proceso exitoso, es un ciclo de desarrollo que toma en consideración lo que estos realmente necesitan y hace ajustes explorando, probando y acomodando el diseño hasta que estas necesidades sean satisfechas. El resultado es un alto nivel de usabilidad: el diseño es eficaz, eficiente, atractivo y fácil de aprender. El proceso se puede aplicar a todas las prácticas de diseño que tienen el objetivo de proporcionar una buena experiencia de usuario. Esto incluye diseño web, diseño de interfaz, diseño de producto, diseño editorial, diseño urbano, orientación, diseño de servicios y arquitectura (Design Council).
  • Codiseño: “Diseño participativo” Consiste en incorporar en el proceso de diseño a las personas (clientes, usuarios, ciudadanos) que utilizarán el producto o servicio, así como también a todas las personas implicadas en él. El codiseño incluye tanto un planteamiento filosófico como político sobre el diseño, al tiempo que implica la incorporación de un conjunto de métodos y actividades en el proceso de diseño[7]. Esta perspectiva se basa en la creencia de que las personas son creativas y buscan maneras de expresar su creatividad y que los usuarios son especialistas de sus propias experiencias, con diferentes puntos de vista que contribuyen al proceso de innovación y diseño.
    • Co-Creación: Consiste en dejar participar a los usuarios en la creación o mejoramiento de un producto o servicios, de tal manera que el resultado final sea algo ajustado a sus preferencias y con todos los elementos que el cliente ayudó a construir[8].
    • Investigación Inclusiva: Es la que logra que personas en situación de exclusión social contribuya en los procesos de investigación, no solo como validadores sino también como personas creativas capaces de proponer ideas y soluciones.
  • Discapacidad Intelectual: Implica una serie de limitaciones en las habilidades que la persona aprende para funcionar en su vida diaria y que le permiten responder ante distintas situaciones y lugares. La discapacidad intelectual se expresa en la relación con el entorno. Por tanto, depende tanto de la propia persona como de las barreras u obstáculos que tiene alrededor (Plena Inclusión)[9]. Es importante destacar que el entorno es el responsable de la discapacidad, son los espacios y nos las personas.
  • Accesibilidad: Son diversas características que debería tener el entorno donde la persona va a realizar una acción generando comodidad, seguridad, igualdad y autonomía sobre los espacios, objetos y plataformas que utiliza.
    • Accesibilidad Cognitiva: La accesibilidad cognitiva es la característica de los entornos, procesos, actividades, bienes, productos, servicios, objetos o instrumentos que permiten la fácil comprensión y la comunicación (Plena Inclusión)[10]. Para las personas con discapacidad intelectual o del desarrollo abre la puerta a todos los derechos como el acceso a la cultura, la educación, salud o el empleo.
    • Capacidades cognitivas: Son aquellas que se refieren a lo relacionado con el procesamiento de la información, esto es la atención, percepción, memoria, resolución de problemas, comprensión, establecimientos de analogías entre otras[11].
  • Experiencia digital: Es la interacción entre un usuario (cliente, partner o empleado) y una organización a través del medio online. Y es posible gracias a las tecnologías digitales (Liferay)[12]. “Una estrategia de experiencia digital no es una iniciativa impulsada por la tecnología; se trata de una iniciativa impulsada por las necesidades del cliente. Hay una enorme diferencia entre el simple uso de la tecnología digital y el hecho de aprovecharla para mejorar la experiencia del cliente y satisfacer mejor sus necesidades” (Michael Hinshaw)[13].
    • Interfaz Web: Cuando se habla de Sitios Web, se denomina interfaz al conjunto de elementos de la pantalla que permiten al usuario realizar acciones sobre el Sitio Web que está visitando. Por lo mismo, se considera parte de la interfaz a sus elementos de identificación, de navegación, de contenidos y de acción[14].
    • Barreras digitales: Son limitaciones generadas por la brecha digital y la baja alfabetización en línea, también los riesgos en seguridad, y la marginación de comunidades, son algunas de las barreras que existen actualmente en el mundo digital. Sin embargo, las principales barreras para la transformación digital no son tecnológicas, sino humanas.
02CONCEPCLAV1 RY.png

Como hacer la Web Accesible

La Iniciativa de Accesibilidad Web (WAI) desarrolla especificaciones técnicas, pautas, y recursos que describen soluciones de accesibilidad, y estos son considerados estándares internacionales para la accesibilidad web. Una de sus funciones es desarrollar principios, criterios y pautas que proporcionen soluciones accesibles para el software Web y para los desarrolladores Web, estas son consideradas como estándares internacionales de accesibilidad Web.

Es esencial que varios componentes diferentes del desarrollo web y la interacción trabajen juntos para que la web sea accesible para las personas con discapacidad. Estos componentes incluyen:

Contenido: La información en una página web o aplicación web, que incluye: Información natural como texto, imágenes y sonidos, código o marcado que define la estructura, presentación, etc.
Tecnología de asistencia: Lectores de pantalla, teclados alternativos, interruptores, software de escaneo, etc.
Desarrolladores: Diseñadores, programadores, autores, etc., incluidos los desarrolladores con discapacidades y los usuarios que aportan contenido.
Herramientas de autor: Software que crea sitios web.
Herramientas de evaluación: Herramientas de evaluación de accesibilidad web, validadores HTML, validadores CSS, etc.

Principios, Pautas, Puntos y Criterios

La accesibilidad se ha introducido fuertemente en el uso de Internet, es por eso que el World Wide Web Consortium (W3C) desarrolló guías de Accesibilidad para Contenidos Web (WCAG) 2.0, material validado y utilizado como antecedentes para Ia creación de un sitio web. Estas herramientas entregadas por la W3C, se componen de 4 principios, 12 pautas y 61 puntos de cumplimiento o éxito, además de técnicas suficientes y de asesoramiento para su implementación.

Cada uno de los cuatro principios se indica con una sola palabra: Perceptible, Operable, Comprensible y Robusto, y dan base a las recomendaciones del W3C. Estos se dividen en 12 pautas, y son las que proporcionan los objetivos básicos que los creadores del sitio web deben desarrollar para crear contenido más accesible para los usuarios. Las Pautas de Accesibilidad WCAG 2.0 permiten usar cualquier tecnología que sea compatible con la accesibilidad siempre que se use de forma accesible (compatible con los productos de apoyo) y siempre que los agentes de usuario y productos de apoyo soporten dicha tecnología.

CYP0RY.png
CYP2RY.png
CYP3RY.png
CYP4RY.png

Criterios de conformidad por niveles

Cada uno de los 61 puntos que se originan a partir de los cuatro grandes principios de la accesibilidad web (anteriormente mencionados) cuenta con criterios de conformidad verificables de las WCAG 2.0. Estos son los 61 criterios o puntos, divididos en 3 niveles:

Nivel A: Son 25 criterios Para lograr conformidad con el Nivel A (el mínimo), la página web satisface todos los Criterios de Conformidad del Nivel A, o proporciona una versión alternativa conforme.
Nivel AA: Son 13 criterios Para lograr conformidad con el Nivel AA, la página web satisface todos los Criterios de Conformidad de los Niveles A y AA, o se proporciona una versión alternativa conforme al Nivel AA.
Nivel AAA: Son 23 criterios Para lograr conformidad con el Nivel AAA, la página web satisface todos los Criterios de Conformidad de los Niveles A, AA y AAA, o proporciona una versión alternativa conforme al Nivel AAA.

Métodos y Herramientas de Evaluación

La evaluación de la accesibilidad web permite analizar, estudiar y validar las páginas web con el objetivo de reducir o eliminar los problemas de accesibilidad que se encuentran, se rige bajo el cumplimiento de las pautas y criterios de accesibilidad, todo esto con el fin de que los sitios web puedan ser usados de forma satisfactoria por diversos tipos de personas, basándose en los principios del diseño web para todos.

Al desarrollar o rediseñar un sitio web, se debería evaluar la accesibilidad desde un principio y durante todo el proceso de desarrollo para así identificar los problemas desde el inicio, cuando es más fácil resolverlos. Existen herramientas que ayudan en la evaluación. Sin embargo, ninguna herramienta por sí sola puede determinar si un sitio cumple con las pautas de accesibilidad, Es por eso que se requieren buenos conocimientos para determinar si un sitio es accesible[3].

Se puede lograr una buena evaluación de accesibilidad web a través de:

Herramientas: Son programas de software o servicios en línea que ayudan a determinar si el contenido web cumple con los estándares de accesibilidad.
Evaluación de la conformidad: Ayuda a determinar el grado en que las páginas o las aplicaciones web cumplen los estándares de accesibilidad.
Informes: Comunicar los resultados de la evaluación claramente, incluyendo el ámbito de aplicación.
Personas: La participación de las personas con las habilidades adecuadas hace que sus evaluaciones de accesibilidad sean más eficaces.

Evaluación Automática

La evaluación automática permite realizar una evaluación rápida, que ayuda a tener una primera impresión de la accesibilidad de una página web. Para lograrla evaluación automática se necesita de una herramienta de revisión de accesibilidad web, que es un programa informático que permite medir el nivel de accesibilidad que posee una página web, según una serie de parámetros o indicadores. Las herramientas de revisión pueden existir como software que se tiene que descargar e instalar en el ordenador del usuario o como servicio en Internet que se puede acceder y emplear a través de una página web. Estas deben cumplir con:

  • Permiten realizar una recolección rápida de datos o análisis automáticos sobre la accesibilidad, calidad, cumplimiento de estándares u otros aspectos técnicos de las páginas del sitio web.
  • Pueden efectuarse tantas veces como se considere necesario, pudiendo hacer seguimientos continuos.
  • Sólo detectan los problemas con carácter automático para los que no es necesaria la intervención del criterio de un experto.
  • Se pueden realizar sobre un elevado número de páginas o sobre el sitio web entero, siendo así más exhaustivas en la recolección de datos y detección de problemas.

Es útil realizar como primera instancia un análisis automático, ya que es una evaluación rápida que genera un resultado preliminar o primera impresión de la accesibilidad de la página. La WAI recomienda el uso de al menos dos herramientas para la evaluación de las páginas de muestra.

Las herramientas más destacadas para evaluar automáticamente son:

Herramienta Página Web
Validadores de código del w3c: La página Web del W3C ofrece un servicio de validación automática para la comprobación del código HTML y de las hojas de estilo (CSS). Realiza un análisis de la sintaxis de la página e indica los errores encontrados para facilitar al programador su corrección. Si se cumple con los criterios de accesibilidad ofrece un logotipo para exhibir en la página e indicar que ésta cumple los estándares. El proceso de validación se realiza por parte de los servidores del W3C, lo que garantiza que los resultados se evalúan directamente desde la norma. https://jigsaw.w3.org/css-validator/
TAW3: Programa de evaluación automática basada en la WAI de accesibilidad, que sirve de ayuda a los desarrolladores de páginas Web y consigue que su trabajo cumpla las normas de accesibilidad. Esta herramienta es gratuita y se puede descargar en su página Web para diversos sistemas operativos, además dispone de una versión on-line y una off-line. Mediante TAW3 se pueden analizar, de forma automática, aquellos puntos referidos a las tres prioridades de la norma WCAG sobre accesibilidad. La página web se puede encontrar en Español, lo que la vuelve una herramienta mucho más fácil de utilizar. https://www.tawdis.net/
HiSoftware Cynthia Says: Se trata de un conocido analizador on-line para el análisis de la accesibilidad de páginas Web. Dispone de un analizador para la Sección 508 y los tres niveles de la norma WAI de accesibilidad del W3C. El análisis de una página Web al utilizar esta herramienta da resultados similares al resto de programas de estudio de la accesibilidad, indicando los puntos críticos, tanto automáticos como manuales, que se han encontrado; los manuales deben ser analizados posteriormente por el personal experto, que tenga conocimiento sobre las pautas y criterios de accesibilidad. http://www.cynthiasays.com/

Evaluación Manual

Las revisiones manuales deben ser realizadas por personal experto, estos identifican las desviaciones y proponen correcciones acordes a los requisitos de accesibilidad web. Se utilizan técnicas de recolección de datos por parte de los usuarios, como encuestas, test de usabilidad, etc, estas necesitan realizarse o evaluarse de forma manual, así que son un muy buen complemento para evaluar accesibilidad web de esta forma, ya que proporcionan un mayor detalle y fiabilidad en cuanto a los problemas detectados.

Debido al esfuerzo extra, las revisiones tendrán una demora mayor a las revisiones automáticas realizándose generalmente trimestral o semestralmente. Su ejecución es más lenta la detección, concentración y corrección de las desviaciones. Otro contratiempo que se puede encontrar en este tipo de evaluación es que solo se podrá realizar sobre un conjunto limitado de páginas (muestra de páginas, nuevos contenidos, etc). Es importante acceder y navegar las partes importantes del sitio web para que durante la exploración se puedan identificar páginas con visibles o potenciales problemas de accesibilidad como problemas relacionados con el color, contraste, uso de encabezados, independencia del dispositivo, uso de elementos de programación, multimedia, etc. Las acciones principales a realizar durante esta fase son, identificar:

  • Las páginas comunes del sitio web
  • Los diferentes tipos de páginas
  • Las funcionalidades esenciales del sitio web
  • Las tecnologías de las que se depende

Existen herramientas de ayuda en la evaluación manual, algunas facilitan el proceso de evaluación, como extensiones para diferentes navegadores web. Algunas de estas herramientas son:

Herramienta Página Web
Web Accessibility Toolbar: La barra de herramientas Web Accessibility Toolbar (WAT), es de una empresa privada de consultoría en estándares web, es un plugin gratuito para Internet Explorer que ha sido desarrollado para facilitar la evaluación manual de la accesibilidad de las páginas web. https://developer.paciellogroup.com/resources/wat/
Web Developer Toolbar: Es una extensión gratuita que añade una barra de herramientas con varias funciones de utilidad para los desarrolladores web. Está enfocada hacia el desarrollador web en general, aunque también incluye funciones útiles para la evaluación de la accesibilidad. https://chrispederick.com/work/web-developer/
Colour Contrast Analyser: Para comprobar el correcto contraste entre los colores de primer plano y los colores de fondo podemos emplear esta herramienta gratuita, basada en el algoritmo del W3C para comprobar diferencias de color y de luminosidad según las WCAG 2.1. También informa si el contraste es suficiente o no teniendo en cuenta la combinación de varios supuestos: texto grande, texto pequeño, nivel AA o nivel AAA. https://developer.paciellogroup.com/resources/contrastanalyser/
Headingsmap: Es una extensión gratuita para Firefox que genera un índice o mapa de cualquier documento web estructurado mediante el uso de encabezados (permitiendo navegar por el documento al utilizarlo) y también muestra la estructura de secciones del documento según el HTML outline (estructuración de los contenidos en base a las secciones y encabezados de HTML). https://addons.mozilla.org/es/firefox/addon/headingsmap/

Método de Evaluación

Para obtener los mejores resultados a la hora de evaluar la accesibilidad web es recomendable emplear más de un método de validación.Se deben combinar técnicas automáticas que proporcionen abundante información con métodos manuales que proporcionan información más detallada, tal como indica el W3C, la WCAG-EM. Una evaluación automática como primera instancia, más una evaluación manual, puede considerarse como un análisis completo de la accesibilidad de una página web.

Aunque existen múltiples herramientas útiles de evaluación automática para mejorar la accesibilidad de un sitio web, existen aspectos que esta evaluacion no puede comprobar, por lo que será necesaria una revisión manual. La evaluación manual complementaria consiste en probar las páginas HTML con diferentes herramientas o productos de apoyo, así como la verificación de aquella parte del código que las herramientas automáticas no pueden comprobar.

Acerca del Proyecto

Normalmente la discapacidad se relaciona directamente con alguna deficiencia física y no se asocia mucho a lo cognitivo, por lo que los productos o servicios adaptados a este tipo de usuario con discapacidad intelectual son escasos, es por este motivo que la prioridad ahora es diseñar para personas con capacidades cognitivas diferentes, y en este caso diseñar sitios web accesibles.

La elaboración de una página web accesible es un trabajo bastante diligente, cuyos esfuerzos se ven recompensados cuando los contenidos que entrega se vuelven accesibles para las personas con discapacidad. En muchas ocasiones este tipo de usuario no lograba acceder a la información y realizar tareas dentro de la web, ya que estas no fueron elaboradas con las pautas establecidas para hacer la web accesible con un enfoque directo desde el diseño.

Se hizo una serie de análisis de accesibilidad web, donde se desarrolló una propuesta de metodología o guía para realizar un diseño accesible en sitios web. Todo esto nos hizo cuestionarnos ¿Cómo podríamos evaluar la accesibilidad dentro de una página web con ayuda de las personas que utilizan este servicio? y ¿Cómo se puede medir la accesibilidad cognitiva en sitios web existentes, de una manera no intrusiva?

Para resolver estas incógnitas no propusimos como objetivo diseñar una metodología y herramienta tecnológica de evaluación de accesibilidad web, haciendo partícipes a las personas que utilizan estos sitios y a las personas con discapacidad cognitiva que son las que mayormente tienen dificultades a la hora de utilizar estos servicios web. Con esto valoramos las instancias de participación de personas con discapacidad intelectual generando un mundo más accesible al crear herramientas inclusivas que permitan la participación de todos.

Para desarrollar este objetivo fuimos incorporadas a PICTOS, una aplicación que permite al usuario aprender a realizar tareas específicas de los servicios por medio de apoyos visuales o pictogramas, para luego evaluar su accesibilidad. Este es un proyecto del Núcleo de Accesibilidad e Inclusión de la Pontificia Universidad Católica de Valparaíso y tiene como objetivo que las personas puedan realizar tareas por medio de los apoyos visuales o pictogramas, evaluar la accesibilidad de los servicios y colaborar incorporando tareas o visualizaciones que no se encuentren y sean necesarias. El primer contacto directo que tuvimos con la aplicación fue la evaluación de accesibilidad del prototipo y los resultados fueron compartidos con los colaboradores que trabajan en la aplicación. También se realizó un prueba de usabilidad con dos tipos de usuario diferentes personas con discapacidad intelectual (Grupo Asesor) y personas que no viven en la región de Valparaíso, generando resultados interesantes entre los diversos participantes.

Carta Gantt

04CG1 RY.png

Debido a la situación mundial de pandemia y cuarentena obligatoria, toda investigación y pruebas han sido realizadas de manera remota, utilizando diversas herramientas y material digital.

Análisis de Investigación

Se realizan pruebas de escritura y visualización de tres conceptos importantes dentro del contenido web, estos otorgan legibilidad dentro de las pantallas y hacen que la web sea más fácil de comprender. Este estudio se desarrolla bajo los puntos de accesibilidad web que fueron investigados con la premisa de encontrar un diseño que fuese accesible, para los usuarios con discapacidad cognitiva o visual.

Pruebas de Accesibilidad

Tipografía

Escoger una tipografía accesible suena difícil por las diversidad de características que poseen, como: sin serif o con serif, tener variaciones de la fuente, poder escoger el tamaño, espaciado, etc. Debido a esto se utilizan directrices específicas para elegir la tipografía más accesible para la página web. La forma más fácil de hacer accesible su tipografía es elegir una fuente común y limitar el número de fuentes. Hay algunas características que pueden ayudar a la legibilidad de la pagina web. Estas deben ser:

  • Prominentes ascendentes (por ejemplo la línea vertical en d).
  • Descensores prominentes (por ejemplo, la línea hacia abajo en y).
  • La comparación entre “d/b” o “p/q” no deben ser una imagen exacta del espejo del otro.
  • I mayúscula, l minúsculas y 1 debe tener diferentes características entre sí.
  • Evitar fuentes que tienen un espaciado de letra apretada, dificulta la lecturabilidad.
  • Evitar el uso de fuentes de fantasía o manuscritas o fuentes que sólo tienen un caso de carácter disponible (sólo mayúsculas ej.).

Un aspecto principal de la investigación fue observar y comparar la accesibilidad de diversas tipografías. Para las personas con discapacidad visual o dislexia, ciertas letras o combinaciones pueden ser confusas, es por eso que una mala elección en la tipografía, puede llevar a no comprender el mensaje correctamente, produciendo confusiones en el usuario al navegar en el sitio web.

Sin Serif: Es la tipografía sin remates en los trazos, con una formas simplificada que las hace adecuadas para pantallas, permitiendo una buena legibilidad en formatos pequeños. Destacan aquellas que no poseen serif, debido a que, se diferencian en ser más sencillas, sin adornos y legibles.

70%
70%
70%

Con Serif: Es la tipografía que lleva remate en los extremos. Tienen su origen en la antigüedad, cuando se tallaban en bloques de piedra. El tallador desarrolló esta técnica para asegurar que los bordes de las letras fueran rectos.

70%
70%

Debido a las pruebas visualizadas anteriormente, se llegó a la conclusión que aquellas tipografías sin serif, que poseen un carácter sencillo, legible y diferenciable, tendrían prioridad a la hora de escoger alguna para utilizar en la página web. Entre ellas, destacan “Source Sans”, “Signika”, “Tahoma” y “verdana” como aquellas que tuvieron una mejor recepción.

Párrafos

Los Párrafos deben seguir estándares para mantener una legibilidad y eficacia a la hora de desarrollar las ideas que intenta entregar. La página debe tener sentido a usuarios en cualquier punto de interrupción y dispositivo usando un mouse, teclado, pantalla táctil pantalla u otro dispositivo de tecnología adaptativa. Una vez esta estructura esquelética, el estilo de cada oración y párrafo entra en juego. Las personas con ciertas deficiencias cognitivas tienen dificultades para seguir el texto cuando las líneas están muy unidas, es por eso que se sugiere:

  • Líneas cuya extensión oscila entre los 70 a 90 caracteres, debido a que, un texto sintetizado y claro ayuda a mejorar la comprensión.
  • No justificar el texto. Esto puede generar grandes brechas entre las palabras y la mala experiencia de lectura.
  • Priorizar el interlineado que viene por defecto en la tipografía, este es de al menos, un espacio y medio dentro de los párrafos y el espacio entre párrafos es, al menos, 1.5 veces mayor que el espacio entre líneas.

Párrafos según alineados

80%

Párrafos según interlineado

80%

Color y Contraste

En base a las paletas disponibles, existen 216 colores seguros para la web, dentro de estos existe una normativa de colores contrastados los cuales están regidos bajo una ley. Esta medida fue realizada, para que aquellas personas con discapacidad visual, puedan interpretar la información que se les entrega de manera legible.

Paleta de Colores Accesibles en Contraste

PruebadeContrasteColorRCYC.png

Las personas con ciertas dificultades visuales o cognitivas necesitan tener la opción de poder cambiar el color del texto y del fondo, debido a que ellos necesitan combinaciones que no son demasiado intuitivas para quienes no tienen sus mismas dificultades. A veces son combinaciones con muy poco contraste; otras veces sólo pueden usar algunas combinaciones muy específicas de color. Para estas personas resulta muy importante tener el control sobre los colores y otros aspectos de la presentación de los textos.

Es por eso que se deben considerar colores que no provoquen molestia en el usuario a la hora de utilizar una página web. Un ejemplo son los colores fluorescentes, estos pueden provocar incomodidad a la hora de ser visualizados, es por eso que hay que evitarlos. Dentro de estas consideraciones, se debe atender con especial apremio aquellas personas que padecen daltonismo o sean fotosensibles, puesto que, son más propensos a ser afectados por estos errores.

Prueba de Contraste con tipografía

PCC2RY.png

Propuestas de Diseño Web Accesible

Diseño de Formulario Accesible

El formulario es una herramienta que recolecta información, datos o contenido con la misión de ser registrados de manera sencilla. Es importante que estos tengan un diseño optimizado para atraer a los usuarios, convencerlos, guiarlos y apoyarlos a lo largo del desarrollo. La idea de hacerlo accesible es que se genere un diálogo con la persona para recolectar la información necesaria, en compañía de una navegación fluida, que no se frustre al usuario al momento de completarlo. Debemos ponernos en su lugar, y ver el formulario bajo su punto de vista, no desde el de la aplicación, ya que los usuarios tienen una gran influencia en el rendimiento y efectividad del proyecto en general desde el punto de vista de la experiencia. Al hablar de un formulario accesible, nos referimos a aquellos que han sido sometidos a diversas reglas, para que sean comprendidas por los usuarios.

FA RY.png

Metodología de Diseño de una página web Accesible

Se ha escrito más sobre el diseño de sitios web que cualquier otra área de las comunicaciones digitales, pero son poco los que se arriesgan en lograr la accesibilidad cognitiva en interfaces digitales. La elaboración de una página web accesible constituye un hacendoso trabajo, cuyos esfuerzos se ven recompensados en el momento en el que los contenidos pasan a ser accesibles para las personas con discapacidad, es por eso que la experiencia del usuario debe ser puntual, y requerir de un contenido, diseño y funcionalidad para que la página sea simple y fácil de usar.

Esta modalidad de diseño se basa en sus requerimientos y nuestra experiencia, es una guía de accesibilidad cognitiva para pantallas con el enfoque del diseño. No basta simplemente con tener una página web, sino que hay que hacerla efectiva y que tenga lo necesario para que sea usable y accesible para todo tipo de usuario. Se debe diseñar una página web basada en la accesibilidad desde el primer momento de creación. Al ser muchas las reglas para cumplir con la accesibilidad web y estar escritas en un lenguaje para desarrolles expertos en web,resumimos las 61 reglas de accesibilidad web que existen dentro de la W3C, y las adaptamos a una guia con 6 categorías escritas en un lenguaje simple, y 20 reglas claves para que cualquier persona interesada en hacer su sitio web accesible pueda hacerlo.

Guía de Criterios de Evaluacipon

(Enlace del documento para una mejor visualización)

Metodología de Evaluación de Accesibilidad y Usabilidad de PICTOS

Esta etapa se desarrolla en conjunto a la aplicación web PICTOS que permite al usuario aprender a realizar tareas específicas de los servicios por medio de pictogramas. También busca orientar a las instituciones públicas en el desarrollo de plataformas online, bajo el concepto del Diseño Universal, aportando así a la inclusión social de las personas en situación de discapacidad y al acceso a la información para la ciudadanía en general. Para poder lograr ese objetivo se nos hace entrega de un prototipo funcional de la interfaz web PICTOS, el cual debemos evaluar para saber si cumple con requisitos básicos de accesibilidad cognitiva, usabilidad y diseño. Se proponen dos tipos de evaluación, las de carácter automático y manual, y una prueba de usabilidad.

100%

Fase 1 - Evaluación Piloto

Como primer paso para comenzar a evaluar la accesibilidad web en PICTOS, se hace una revisión rápida de exploración, para verificar que pasos dentro de ella están funcionando y cual es el flujo de la navegación a evaluar, y así no se pasa por alto ninguna pantalla.

Resultados - Evaluación Manual

Para realizar esta prueba se hace uso de la guía de criterios de evaluación explicada anteriormente, ya que las recomendaciones técnicas que se encuentran en esta propuesta se basa en los lineamientos establecidos en las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0, publicadas en 2008 por la Iniciativa para la Accesibilidad Web (WAI) del World Wide Web Consortium (W3C). Gracias a esto la evaluación manual no pierde veracidad a la hora de presentar los problemas encontrados.

La prueba manual fue evaluada en 4 formatos distintos, es decir, se utilizaron diversos dispositivos tecnológicos. Es por eso que para poder presentar los datos encontrados se elaboró un documento, que incluye visualizaciones de las pantallas evaluadas y comentarios sobre cada pantalla que presentó problemas, ya sea de distribución, navegación, entre otros.

(Enlace del documento para una mejor visualización)

Resultados - Evaluación Automática

En esta prueba de accesibilidad se utilizan 3 plataformas online de evaluación automática, CSS Validation Service, TAW y Cynthia Says. Estas agrupan sus resultados de análisis de acuerdo a los 4 Principios que definen a un sitio Web accesible: Perceptible, Operable, Comprensible y Robusto; donde cada recomendación contiene uno o más puntos de verificación que explican cómo ésta debe ser aplicada, y a su vez, cada punto de verificación tiene asignada una prioridad que indica el impacto del punto de verificación en la accesibilidad del sitio.

En el siguiente documento se presentan los resultados que arrojaron las tres herramientas y exponen la atención de las necesidades de acceso a la información de los usuarios de los sitios Web, teniendo en cuenta además que la accesibilidad web no sólo depende de un contenido accesible sino también de la accesibilidad de los navegadores y otras aplicaciones de usuario.

(Enlace del documento para una mejor visualización)

Fase 2 - Prueba de Usabilidad Remota

La evaluación con personas reales ofrece muchos beneficios para tener en cuenta cómo funciona realmente el sitio o herramienta web, debido a que se comprenden de mejor manera los problemas de accesibilidad que se pueden encontrar. La evaluación debería ser de carácter inclusivo, otorgando la oportunidad de ser evaluadores a personas con discapacidades y a usuarios adultos mayores que puedan identificar problemas de usabilidad que no se descubren solo con la evaluación de conformidad. Al volver las pruebas de evaluaciones accesibles e inclusivas, consigues que tu sitio web se vuelva accesible para todo tipo de usuario, porque ya estás invitando a personas con diversas capacidades a utilizar tu sitio y no por esto significa que sea lo suficientemente accesible y fácil de utilizar, pero ellos podrán encontrar mayores problemas si es que los hay u ofrecer posibles soluciones cuando tengan alguna dificultad.

La experiencia de los usuarios al utilizar la aplicación o sitio web puede ser medida a través de las Pruebas de Usabilidad, que se enfocan en medir la manera en que el usuario se relaciona con las interfaces ofrecidas por el sitio web y cómo ésta cumple con las metas que ofrece el servicio. Es importante considerar que si bien la usabilidad siempre busca el mismo objetivo, lograr que una persona pueda interactuar con el contenido y funcionalidades de una página web de manera simple y directa.

Al tener presente todos los aspectos anteriores, se procede a organizar y realizar una prueba de usabilidad remota en PICTOS. Esta prueba fue realizada en conjunto a otro profesional del área educacional, y los usuarios evaluadores fueron personas con discapacidad y personas que viven fuera de Valparaíso. Al tratarse de una prueba remota se utiliza un software llamado LookBack, el cual permite la realización de varios tipos de test de forma remota, adaptándose a las necesidades de hoy donde las reuniones son de forma virtual por la pandemia. También se utilizó la aplicación para dispositivos digitales llamada LookBack Participate, esta era utilizada por los usuarios evaluadores para realizar la prueba de usuario desde sus propios dispositivos digitales.

  • Software - LookBack: Permite la realización de varios tipos de test remotos. Es una especie de nube virtual donde se crea la prueba de usuario con su descripción correspondiente. Aquí se guardarán todos los videos de pantallas grabadas en directo luego de realizar la prueba de usabilidad en otros dispositivos. A continuación las páginas principales del sitio web:
  • Aplicación - LookBack Participate: Es una aplicación que sirve para guiar al usuario de forma remota dentro de la aplicación o sitio web a evaluar. Su función es grabar la interacción que tiene el usuario con su dispositivo a la hora de comenzar la prueba de usabilidad. Posee muchas pantallas de guía y autorización de permisos antes de comenzar a grabar la pantalla del dispositivo que utilizará el usuario.


Protocolos

La prueba se divide en dos grupos evaluadores, uno de ellos es el del grupo asesor, que son personas adultas con discapacidad intelectual que han trabajado con PICTOS antes de comenzar a desarrollar la aplicación web. Y el segundo es el grupo de personas externas, que son los que no viven en la región de Valparaíso y no saben utilizar el metro de la ciudad, estos últimos fueron elegidos con esas características porque el recorrido de navegación habilitado en PICTOS es la tarea de cómo utilizar el metro de Valparaíso.

En los siguientes documentos se da a conocer las características y los pasos a seguir del test de usuario que permitirá saber si existen dificultades de navegación dentro de la aplicación, y así volverla más accesibles y fácil de usar.

  • Protocolo - Grupo Asesor

(Enlace del documento para una mejor visualización)

  • Protocolo - Personas Externas

(Enlace del documento para una mejor visualización)

Resultados

En el siguiente documento se encuentra el registro y los resultados obtenidos dentro de las dos pruebas de usuario realizadas. Cada página contiene visualizaciones de las pantallas o iconos con los comentarios mas relevantes, y debajo de estos datos se encuentran las observaciones para evidenciar las posibles correcciones que sean necesarias realizar.

(Enlace del documento para una mejor visualización)

En una primera instancia, la aplicación LookBack no permite ser utilizada junto a Google Meet, pues induce a la aparición de un error, el cual no se logró identificar. Desde nuestra perspectiva, la aplicación tiene una excesiva cantidad de pasos antes de iniciar la grabación, algunos de estos pasos solo contenían mensajes de apoyo o sugerencias, que podrían ser omitidos o entregados en la sesión. La pantalla que solicita los datos, quita una excesiva cantidad de tiempo antes de poder iniciar la prueba, de ser necesarios, pueden ser consultados en la entrevista.

En segunda instancia, se destacarán las observaciones encontradas con el grupo asesor, este presentó dificultades técnicas al intentar realizar pruebas de usuario, fue difícil situar a los usuarios en el escenario que se buscaba, al indicarles que debían imaginar que no sabían utilizar el metro, ellos nos decían que sí habían estado antes en el metro y por eso no podían imaginar la situación. Además, indican reconocer los pictogramas como correctos a pesar de poseer ciertos errores, debido a que ya habían utilizado y visto pictogramas parecidos con anterioridad.

Acerca del primer grupo de participantes, eran todos pertenecientes a la región de Valparaíso, fueron situados en un escenario, en el cual deben ser capaces de llegar a la estación de metro Hospital, debido a que, tenían una enfermedad estomacal ligera, en respuesta a esto, uno de ellos seleccionó como primera opción la estación de destino Hospital, pero la opción correcta era colocar la estación desde la cual se realizará el viaje, en este caso viña del mar. También, por el hecho de ser una enfermedad, muchos participantes apretaban el botón de ir hacia el “hospital”, en vez de seleccionar la opción de transporte, la cual corresponde a la estación de metro.

Acerca del segundo grupo de participantes, eran personas que no vivían en la región de Valparaíso y en su mayoría, no sabían utilizar el metro. En esta segunda instancia, no le fue difícil situarse en el escenario indicado, puesto que, al no poseer conocimientos previos, no tenían experiencias que interrumpieron el aprendizaje entregado por la aplicación. Todas las preguntas fueron realizadas con normalidad y respondidas en detalle.

Conclusiones

El primer contacto con PICTOS, fue la evaluación de accesibilidad del prototipo y los resultados fueron compartidos con los colaboradores que desarrollan la aplicación. Algunos de los errores fueron, el mal diseño de los pictogramas, al momento de explicar tareas y una mala adaptabilidad de la pantallas al utilizarla en distintos dispositivos digitales.

Además, se realizó un prueba de usabilidad con dos tipos de usuario, el primer grupo, eran personas con discapacidad intelectual y el segundo, personas que no viven en la región de Valparaíso.

Las observaciones realizadas en la prueba de usuario, fueron guiadas auditivamente por la aplicación LookBack. La retroalimentación enfatizó, en la falta de pasos al realizar las tareas y el no poder regresar a la página de inicio. Otro punto importante es que algunos usuarios pensaron que la aplicación los guiará paso a paso hasta llegar a su destino, esto pasaba porque se consideraba la posibilidad de que se abriera un mapa que les mostrará el recorrido en tiempo real.

Proyección - Concepto de Diseño

El proyecto tiene como objetivo diseñar una herramienta tecnológica de evaluación de accesibilidad web, para ello, se utilizará una metodología centrada en el usuario. Se le pedirá una retroalimentación basada en preguntas cerradas, en las cuales el usuario evaluará distintas cualidades de la página web. Además, se hará énfasis en preguntas respecto a la accesibilidad y utilidad otorgadas por la página. Luego, esta información será analizada y contrastada, para desarrollar mejoras en ella.

Herramienta para Evaluar Accesibilidad en Sitios Web de Servicios Públicos

Épicas

Esta herramienta, es un sistema de evaluación de accesibilidad aplicable a los sitios web de los principales servicios de tu ciudad. Con esta plataforma, se puede evaluar la accesibilidad web de los servicios y las principales tareas que se pueden realizar dentro de sus sitios en internet. Por ejemplo, podrás evaluar los servicios de salud, transporte, bibliotecas y museos, entre otros. Es por esto que, será adaptable, ya que, principalmente será ocupada desde un dispositivo móvil.

El presente documento, tiene como objetivo sistematizar las funcionalidades y relaciones entre los distintos soportes y servicios que conformarán la plataforma de evaluación conversacional, mediante la descripción de historias de usuario.

Enlace del documento para una mejor visualización

Mapa de Flujo

El mapa de flujo, muestra el recorrido que se provocaría en la interfaz de la herramienta que mide la accesibilidad web. Este comienza con la opción de evaluar o no la página web del servicio, si el usuario accede a la opción de evaluar, las demás pantallas se dividen en 2 categorías, la primera de ellas, contiene preguntas cerradas dicotómicas y la segunda de ellas, propone preguntas de escala numérica. La intención es generar una especie de diálogo entre el usuario evaluador y la herramienta, para que la evaluación no se vuelva monótona.

100%

Continuación del Proyecto

Para el proyecto del segundo semestre, esperamos responder con claridad a la pregunta ¿Cómo se puede medir la accesibilidad cognitiva en sitios web existentes, de una manera no intrusiva? Para esto, durante el segundo semestre se creará la herramienta encargada de medir la accesibilidad en sitios web. Esta herramienta aplicará y recopila un formulario accesible, este tiene como objetivo mejorar dichas páginas web. Se espera que en el transcurso del próximo semestre, la página web Pictos esté funcionando con público real, por lo que la cantidad de retroalimentación que reciba nuestro proyecto será mayor. Además, Pictos integrará nuestra interfaz en diversas páginas web para evaluar la accesibilidad de estas. Esto nos permitirá crear una lista de problemáticas, en las que tanto Pictos como las páginas web, deberán mejorar. Para finalizar, se realizará un análisis del funcionamiento de la herramienta en condiciones reales, y si los datos entregados son los esperados, para así poder mejorar las páginas en las cuales la interfaz es aplicada.

Conclusión

Para resolver las incógnitas que nos planteamos anteriormente, nuestro objetivo final de semestre será diseñar una metodología y herramienta tecnológica de evaluación de accesibilidad web, para lograr esto, haremos partícipes a las personas que utilizan estos sitios y a aquellos usuarios con discapacidad cognitiva porque son los que mayormente presentan dificultades a la hora de utilizar estos servicios web. Con esto queremos valorar las instancias de participación de personas con discapacidad intelectual, de esta manera, se generara un mundo más accesible al crear herramientas inclusivas que permitan la participación de todos.

El realizar esta actividad en una pandemia, resalta la importancia de la accesibilidad web, debido a que, la gente comenzó a necesitar utilizar paginas web como el principal medio de interacción con el mundo. Debido a esto, se debe tener en cuenta la importancia de que los sitios web tengan una fácil y simple interfaz de navegación para realizar tareas en ellos. Esto resalta los objetivos del proyecto, debido a que, se busca evaluar el funcionamiento adecuado de los sitios web para que cumplan con sus objetivos, y sean accesibles para todo tipo de personas.

También, se dio la oportunidad de pensar un sistema que realmente se proponga existir en lo virtual. Esto nos provocó un desafío, ya que, no habíamos tenido experiencias de trabajo y aprendizaje de forma remota, además, se tuvo que desarrollar pruebas de usuario de forma remota, a través de reuniones virtuales, a pesar de esta barrera, estas resultaron exitosas y nos hizo plantearnos la posibilidad de crear una herramienta virtual de evaluación web.

Referencias

  1. Accesibilidad. Editores: Shawn Lawton Henry y Liam McGee. Encontrado en: https://www.w3.org/standards/webdesign/accessibility
  2. Luján S., (2006). ¿Qué es la accesibilidad web?. Encontrado en: http://accesibilidadweb.dlsi.ua.es/
  3. 3,0 3,1 3,2 Lawton S., (2005). Introducción a la Accesibilidad Web. Encontrado en: https://www.w3.org/WAI/fundamentals/accessibility-intro/
  4. Lawton S., (2005). Introducción a la Accesibilidad Web. Encontrado en: https://www.w3c.es/Traducciones/es/WAI/intro/accessibility
  5. Krippendorf, K. (2006). The semantic turn—a new foundation for design. Nueva York: CRC Press/Taylor and Francis Group.
  6. Endsley, M. - Jones, D. (2016). Designing for situation awareness: An approach to user-centered design. Boca de Ratón: CRC Press.
  7. Universitat Oberta de Catalunya. ¿Qué es? - Codiseño. Encontrado en: http://design-toolkit.recursos.uoc.edu/es/codiseno/
  8. MarketingYFinanzas. (2017). ¿Qué es la Co creación? y ¿Cómo sacar provecho de ella?. Encontrado en: https://www.marketingyfinanzas.net/2017/01/que-es-la-co-creacion//
  9. Plena Inclusión. Qué es discapacidad intelectual. Encontrado en: https://www.plenainclusion.org/discapacidad-intelectual/que-es-discapacidad-intelectual
  10. Plena Inclusión. (2018). ¿Por qué en Plena inclusión hablamos de accesibilidad cognitiva?. Encontrado en: https://www.plenainclusion.org/informate/actualidad/noticias/2018/por-que-en-plena-inclusion-hablamos-de-accesibilidad-cognitiva
  11. Accesibilidad y Capacidades Cognitivas. (2012). Capacidades Cognitivas. Encontrado en: http://accesibilidadcognitivaurbana.fundaciononce.es/capacidadesCognitivas.aspx
  12. Liferay. (2010). ¿Qué es la Experiencia Digital?. Encontrado en: https://www.liferay.com/es/resources/l/digital-experience
  13. Hinshaw, M. Digital Experience: The New Heart Of Customer Engagement. Encontrado en: https://cmo.adobe.com/
  14. Guía Digital. ¿Qué es una Interfaz?. Encontrado en: http://www.guiadigital.gob.cl/articulo/que-es-una-interfaz.html#:~:text=Cuando%20se%20habla%20de%20Sitios,de%20contenidos%20y%20de%20acci%C3%B3n.