jueves, 14 de septiembre de 2017

Scrolljacking y Parallax Scrolling en accesibilidad web. Peligro para personas con desordenes vestibulares, epilepsia y migrañas

Mujer con dolor de cabeza

Las WCAG 2.1 van a incluir un criterio de conformidad (2.2.9 Animation from Interactions, AAA) que trata el peligro de animaciones como el Scrolljacking y Parallax Scrolling para las personas con desordenes vestibulares, epilepsia y migrañas, y obligará a poder deshabilitar este tipo de animaciones.

Me ha parecido importante darle visibilidad a este problema porque seguramente es desconocido por muchos diseñadores, y porque la accesibilidad de estos componentes suele abordarse desde un punto de vista puramente técnico de implementación de código.

Más información sobre el criterio 2.2.9 de las WCAG 2.1

¿Qué son los desordenes vestibulares?

El sistema vestibular incluye las partes del oído interno y del cerebro que ayudan a controlar el equilibrio y los movimientos oculares. Cuando una enfermedad, el envejecimiento o una lesión daña este sistema, se puede desarrollar un desorden vestibular.

Las animaciones de contenido en movimiento o rotando, no solo provocan distracción en muchas personas, a las que les cuesta concentrarse en la lectura del contenido, también pueden provocar en las personas con desordenes vestibulares mareos, nauseas y dolores de cabeza. Además, sus síntomas pueden perdurar bastante después de finalizada la animación.

Por otra parte, en personas con epilepsia o propensión a las migrañas, puede ser un desencadenante.

Más información sobre el desorden vestibular.

¿Qué tipo de animaciones son peligrosas?

En mi opinión, el mejor artículo sobre el tema es de Val Head, publicado en A List Apart en 2015: Designing Safer Web Animation For Motion Sensitivity, al que me remito y os resumo brevemente.

Por hacernos una idea, señala que en EEUU, aproximadamente, 8 millones de adultos reportan un problema crónico con el equilibrio, mientras que otros 2,4 millones reportan un problema crónico con mareos.

La autora del artículo se entrevistó con dos personas con trastornos vestibulares y pone ejemplos concretos de animaciones y efectos problemáticos.

Entre sus conclusiones destacan:

  • Una animación más grande es más propensa a desencadenar una respuesta negativa.
  • El tamaño físico de la pantalla importa menos que el tamaño del movimiento en relación con el espacio disponible en pantalla. Un botón pequeño con rotación 3D probablemente no causará problemas.
  • Las animaciones que no implican movimiento (rotación, deslizamiento o reescalado de contenido en primer plano), sino que solo implican propiedades como color u opacidad es poco probable que sean problemáticas.
  • Las animaciones exageradas de scrolljacking y parallax scrolling son muy propensas a desencadenar una respuesta negativa, por que la mayor parte del tiempo estos efectos implican objetos de fondo que se mueven a velocidad diferente que los objetos de primer plano, a veces drásticamente.
  • Las animaciones que se mueven en una dirección (o a una velocidad) diferente a la dirección en la cual el usuario está escrolando también son problemáticas.
  • La cantidad de distancia espacial cubierta por una animación también es un factor importante. Por ejemplo, las transiciones de zoom 3D de iOS7 causaron problemas debido a la cantidad de espacio cubierto rápidamente.

Val Head destaca también los aspectos positivos que puede tener ofrecer una animación, pero hay que diseñarla de manera más segura. Ella propone:

  • la decisión de incluirla debe obedecer a un propósito claro,
  • se debe informar al usuario previamente,
  • el usuario debería poder deshabilitarla,
  • y debería abordarse también el problema desde la perceptiva de las opciones de los navegadores web.

Una de las personas con la que se entrevistó para este artículo es Greg Tarnoff, consultor de accesibilidad que experimenta vértigo y migrañas. Greg tiene un vídeo de 1 hora de duración en el cual explica toda la problemática y se ven ejemplos de webs:

Enlace YouTube: Infinite Canvas 6: Vestibular Disorders and Accessible Animation

Más ejemplos de animaciones problemáticas en:

Artículos relacionados:

domingo, 10 de septiembre de 2017

PDF accesibles. CheatSheet "Etiquetas estándar y su uso correcto"

Uno de los requisitos necesarios para que un PDF sea accesible es que sea un PDF etiquetado.

El validador de Acrobat puede identificar que un PDF está etiquetado o no, pero no si está correctamente etiquetado (salvo algunos aspectos muy básicos, como si una etiqueta <LI> está dentro de una etiqueta <L> o si los encabezados están bien anidadados)

Las etiquetas estándar que se pueden utilizar en un PDF y cómo utilizarlas correctamente se definen en la ISO 32000, concretamente en el capítulo "14.8 Tagged PDF".

Para facilitar su consulta he preparado una cheatsheet: "Etiquetas Estándar en PDF accesibles" (PDF, 678 KB).

En la cheatsheet incluyo todas las etiquetas estándar, indicando para cada una:

  • Etiqueta: el nombre de la etiqueta que aparecerá en el árbol de etiquetas.

    Árbol de etiquetas de un PDF. De una primera etiqueta Document cuelga una etiqueta H1 y una etiqueta Part que a su vez tiene anidadas otras etiquetas (H2, H3, P, etc.)

    Árbol de etiquetas de un PDF

  • Nombre en español: es el nombre de la etiqueta en el desplegable "Tipo" (cuando creas una etiqueta o cambias el tipo de etiqueta que es). El nombre no siempre tiene una traducción intuitiva, por ejemplo <Span> es "Flujo" o <Blockquote> es "Bloquear cita".

    Ventana Propiedades de una Etiqueta de un PDF. El primer desplegable Tipo está abierto con diversas opciones: Artículo, Anotación, Entrada de bibliografía, etc.

    Desplegable "Tipo" para seleccionar el tipo de etiqueta en un PDF

  • Descripción: breve descripción del uso de la etiqueta que puede ampliarse en la ISO 32000.

Por otra parte, debes tener en cuenta que la estructura de etiquetas de los PDF es extensible, es decir, se pueden utilizar otros nombre de etiquetas. Pero en ese caso, la etiqueta no estándar debe estar asociada una etiqueta estándar para que pueda ser interpretada correctamente.

La asignación entre etiquetas estándar y no estándar se realiza en el menú de Acrobat "Editar asignación de función". Es imprescindible revisarlo si el documento se ha creado en InDesign sin seguir ciertas pautas en la asignación de etiquetas.

Lo explico en el vídeo: PDF accesible. PDF correctamente etiquetado desde inDesign.

La cheatsheet "Etiquetas Estándar en PDF accesibles" la encontrarás también, junto con otros recursos, en el apartado de descargas de Usable y accesible.

Si necesitas ayuda con la conversión de un PDF en PDF accesible puedes pedirme presupuesto en el email info@usableyaccesible.com

Enlaces de interés: