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:Memoria de Titulo Accesibilidad Web - Raquel Cataldo y Yorka Castillo.pdf
URLhttps://youtu.be/5wM3tny5j M

Edición Final

Sistemas de Apoyo y Evaluación para el desarrollo Digital

Presentación Final

Exploración Conceptual

  1. Raquel Cataldo: Mapa de Temas de Accesibilidad
  2. Yorka Castillo: Mapa de Conocimiento

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)[1]. "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)[2].
    • 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[3]. 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[4].
    • 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)[5]. 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)[6]. 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[7].
  • 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)[8]. “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)[9].
    • 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[10].
    • 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

Accesibilidad cognitiva

¿Qué es la accesibilidad cognitiva?

Tiene que ver con lo fácil y simple que puede ser el acceso al conocimiento para las personas, enfocándose en la inclusión de las personas con discapacidad intelectual o del desarrollo. Se le otorga un simple y fácil acceso a la información a estas personas y sus familias desde que nacen hasta que son mayores, desarrollándose en las áreas de educación, el empleo, ciudadanía, comunicación e web, etcétera.

La accesibilidad es fundamental en la vida de cualquier persona, porque sólo así se puede garantizar igualdad de condiciones y oportunidades, o bien, hacer esta brecha más pequeña. Pero hacer accesible la información no es lo mismo que hacer accesible un espacio de manera físico-arquitectónica. Se debe asegurar la comprensión total de la información. [11]

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 [12]

¿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) [13].

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) [14].

¿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) [15].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” [14].

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%

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.

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.

Casos de Estudio

  1. Accesibilidad Cognitiva - (María Ignacia von Unger,Antonella Pastén)
  2. Sistema pictográfico para la accesibilidad cognitiva en servicios - (María Ignacia von Unger,Antonella Pastén)
  3. Me muevo con PICTOS - (María Ignacia von Unger,Antonella Pastén)
  4. Estándares de Accesibilidad Web - (Yorka Castillo, Raquel Cataldo)
  5. Pautas de Accesibilidad Web - (Yorka Castillo, Raquel Cataldo)
  6. Métodos y Herramientas de Evaluación Web - (Yorka Castillo, Raquel Cataldo)

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 - Primer Semestre

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.

Muestras de Accesibilidad Web

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.

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

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

Guia 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 Evaluación

(Enlace del documento para una mejor visualización)

Me muevo con PICTOS

¿Qué es?

Primer encuentro

Descubrimiento de la plataforma en linea

Evaluación de Accesibilidad y Usabilidad

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.

Objetivo

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.

Presentación Primer Semestre

Carpeta

Enlace directo - Carpeta de Titulo

Presentación

...

Diseño de Propuesta

Carta Gantt - Segundo Semestre

Sistema de Apoyo Virtual

Mapa de flujo

MapadeflujoAWRYC1.png

Wireframe

WireAWRYC1.png WireAWRYC2.png WireAWRYC3.png WireAWRYC4.png WireAWRYC5.png WireAWRYC6.png

Evaluación Web

Introducción

Análisis de evaluaciones Automáticas

Se hicieron pruebas automáticas de accesibilidad web para poder sacar un listado de las pautas que se podían evaluar desde la página y cuáles debían ser evaluadas manualmente. Para eso se hizo una tabla comparativa en Excel, donde la primera hoja muestra las pautas automáticas que analizo dos páginas que evalúan accesibilidad web. En la segunda página se encuentran las pautas que la misma página arrojó que se debían evaluar manualmente. Las pautas que están marcadas con un * son las que necesitan una segunda revisión de forma manual porque no se pueden evaluar automáticamente en un 100%.

(Enlace del documento para una mejor visualización)

Pauta de Evaluación

(Enlace del documento para una mejor visualización)

(Enlace del documento para una mejor visualización)

Mapa de flujo

Centre

Wireframe

Centre Centre Centre Centre Centre Centre

Visualización

Pruebas de Color

Se hacen pruebas de color en las pantallas principales de PICTOS, con la intension de hacer una diferencia entre los servicios fisicos y virtuales, pero se perdian mucho dentro de la estetica y simpleza de la combinacion de colores que posee PICTOS, entonces estos fueron descartados.

Pantalla Principal

Pantalla Secundaria

Paleta de Color Final

Centre

PaletadecolorEWYRC2.png PaletadecolorEWYRC3.png PaletadecolorEWYRC4.png

Propuestas de Iconos

IcocnoPICTOSYRC4.png IcocnoPICTOSYRC2.png IcocnoPICTOSYRC3.png

Propuesta de Burbuja/Pop Up

Barra Superior con Check

BurbujaAWRYC1.png

Burbuja Flotante y Barra Inferior

BurbujaAWRYC2.png

Burbuja y Barra lateral con avance

BurbujaAWRYC3.png

Barra kit de Herramientas

BurbujaAWRYC4.png

Servicios y Accesibilidad web

Propuesta 1: Red Salud Valparaíso

Solicitar una hora médica

Propuesta 1

Propuesta1AWRC1.png
Propuesta1AWRC2.png
Propuesta1AWRC3.png
Propuesta1AWRC4.png

Propuesta 2

Propuesta1AWRC5.png

Propuesta 3

Propuesta1AWRC6.png
Propuesta1AWRC7.png
Propuesta1AWRC8.png
Propuesta1AWRC9.png


Propuesta 4

Propuesta1AWRC10.png
Propuesta1AWRC11.png
Propuesta1AWRC12.png

Evaluación de la Web

Propuesta1AWYC1.png
Propuesta1AWYC2.png
Propuesta1AWYC3.png
Propuesta1AWYC4.png
Propuesta1AWYC5.png

Propuesta 2: Registro Civil

Bloquear Carnet

Propuesta 1

Propuesta2AWRC1.png
Propuesta2AWRC2.png

Propuesta 2

Propuesta2AWRC3.png
Propuesta2AWRC4.png
Propuesta2AWRC5.png

Propuesta 3

Propuesta2AWRC6.png
Propuesta2AWRC7.png
Propuesta2AWRC8.png

Propuesta 4

Propuesta2AWRC9.png
Propuesta2AWRC10.png
Propuesta2AWRC11.png
Propuesta2AWRC12.png
Propuesta2AWRC13.png
Propuesta2AWRC14.png

Evaluación de la Web

Propuesta2AWYC1.png
Propuesta2AWYC2.png
Propuesta2AWYC3.png
Propuesta2AWYC4.png
Propuesta2AWYC5.png

Propuesta 3: Metro de Valparaíso

Cargar Tarjeta

Evaluación de la Web

Propuesta3AWYC1.png
Propuesta3AWYC2.png
Propuesta3AWYC3.png
Propuesta3AWYC4.png
Propuesta3AWYC5.png
Propuesta3AWYC6.png
Propuesta3AWYC7.png
Propuesta3AWYC8.png

Pruebas de Usuario

Protocolo

(Enlace del documento para una mejor visualización)

Propuesta Final

(Link Directo a Figma)

Sistema de Apoyo en Tareas Web

Evaluación de Accesibilidad en paginas web

Referencias

  1. Krippendorf, K. (2006). The semantic turn—a new foundation for design. Nueva York: CRC Press/Taylor and Francis Group.
  2. Endsley, M. - Jones, D. (2016). Designing for situation awareness: An approach to user-centered design. Boca de Ratón: CRC Press.
  3. Universitat Oberta de Catalunya. ¿Qué es? - Codiseño. Encontrado en: http://design-toolkit.recursos.uoc.edu/es/codiseno/
  4. 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//
  5. Plena Inclusión. Qué es discapacidad intelectual. Encontrado en: https://www.plenainclusion.org/discapacidad-intelectual/que-es-discapacidad-intelectual
  6. 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
  7. Accesibilidad y Capacidades Cognitivas. (2012). Capacidades Cognitivas. Encontrado en: http://accesibilidadcognitivaurbana.fundaciononce.es/capacidadesCognitivas.aspx
  8. Liferay. (2010). ¿Qué es la Experiencia Digital?. Encontrado en: https://www.liferay.com/es/resources/l/digital-experience
  9. Hinshaw, M. Digital Experience: The New Heart Of Customer Engagement. Encontrado en: https://cmo.adobe.com/
  10. 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.
  11. Accesibilidad Cognitiva
  12. Accesibilidad. Editores: Shawn Lawton Henry y Liam McGee. Encontrado en: https://www.w3.org/standards/webdesign/accessibility
  13. Luján S., (2006). ¿Qué es la accesibilidad web?. Encontrado en: http://accesibilidadweb.dlsi.ua.es/
  14. 14,0 14,1 Lawton S., (2005). Introducción a la Accesibilidad Web. Encontrado en: https://www.w3.org/WAI/fundamentals/accessibility-intro/
  15. Lawton S., (2005). Introducción a la Accesibilidad Web. Encontrado en: https://www.w3c.es/Traducciones/es/WAI/intro/accessibility