Accesibilidad y Estrés: Diseñar para usu ...

Accesibilidad y Estrés: Diseñar para usuarios agotados mentalmente

Mar 03, 2025

image

Los altos niveles de estrés y la constante sensación de cansancio han pasado a formar parte de nuestra rutina. La superproductividad y los niveles de autoexigencia están a la orden del día, y con ellas toda la sobrecarga de información a la que estamos expuestos a nivel online y offline.

¿Y qué tiene que ver esto con la accesibilidad? Todo. La accesibilidad es una cuestión de empatía, de entender las necesidades de las personas y de construir soluciones que les faciliten la vida. Una persona al entrar en una web/app necesita mucho más que comprar una prenda de ropa, reservar una habitación de hotel o contratar esas clases de pilates. Necesita que todo ese proceso, toda la experiencia de usuario, sea capaz de adaptarse a esos momentos en los que no son capaces de utilizar el 100% de sus capacidades.

Parece que cuando la carta de los criterios de accesibilidad se pone encima de la mesa, se da por hecho que únicamente son medidas que benefician "a un pequeño grupo de la sociedad", pero no es así. Ni se trata de un grupo reducido, ni las medidas benefician solo a ese porcentaje de la sociedad, es un beneficio generalizado hacia todas las personas. Por eso mismo lo más común debería ser que un producto digital fuese accesible.

Situación real 1:

Una pareja que haya tenido un bebé recientemente está tratando de adaptarse a su nueva vida, tienen los horarios del sueño trastocados, su mente comienza a generar preocupaciones que antes no existían y toda su atención está enfocada hacia el bebé . En esos momentos en los que puedan hacer uso de dispositivos electrónicos, puede que estén o muy cansados o muy estresados. Todo eso va a condicionar la forma de navegación, y sobre todo sus decisiones.

Situación real 2

Una persona que se haya pasado 8h delante de un ordenador durante toda su jornada laboral, puede que no tenga ganas de seguir mirando una pantalla el resto de su día, y si lo hace, lo hará con un cansancio mental que lleva horas arrastrando, por lo que la sensación de frustración no tardará en aparecer cuando al navegar en un portal web, no vea claro el camino.

Cuando una persona se encuentra bajo los efectos del estrés, la presión y el cansancio, no razona de la misma forma que con la mente en calma. Aquí es donde la correcta aplicación de los criterios de accesibilidad cobran un papel fundamental para garantizar el éxito de la navegación. Es imprescindible ponerse en la piel de estas personas y tener en consideración que en numerosas ocasiones, las persona que acceden a un sitio web se sienten:

  • Mentalmente saturadas

  • Con la vista cansada

  • Con altos niveles de impaciencia

  • Con propensión a sentirse abrumadas

  • Con sensación de ansiedad por terminar la tarea y perder el tiempo

  • Desmotivadas 

Consideraciones y criterios de las WCAG benefician a las personas con altos niveles de estrés y fatiga

  1. Disminuir la carga cognitiva: Cuando una persona se siente mentalmente saturada, tiene más dificultades para concentrarse, sobre todo si se encuentra frente a información compleja.

    ➡️ Utilizar frases cortas y claras reduce el esfuerzo de lectura y facilita la acción

    Criterios:

    📌 WCAG 3.1.5 – Lectura de Nivel Básico (AAA): Requiere que el contenido sea fácil de leer para la mayoría de los usuarios sin conocimientos avanzados.

    📌 WCAG 3.1.2 – Idioma de las Páginas (AA): Establece que el idioma debe estar definido en el código para mejorar la comprensión. Un texto claro y sin tecnicismos ayuda a usuarios con dislexia, dificultades de procesamiento o no nativos del idioma.

    Ejemplo:

    ❌ Introduce tu correo electrónico para recibir toda la información sobre nuestras ofertas

    ✅ Escribe tu correo para recibir ofertas.

    ➡️ Diseños limpios y sin sobrecarga de elementos: Reduce la fatiga y facilita la navegación sin esfuerzo.

    Criterios

    📌 WCAG 2.2.1 – Ajustes de Tiempo (A): Evita que los usuarios tengan que tomar decisiones rápidas bajo presión. Los Pop-ups intrusivos pueden generar ansiedad y hacer que el usuario abandone la página.

    📌 WCAG 2.2.2 – Pausar, Detener, Ocultar (A) Cualquier animación o contenido en movimiento que dure más de 5 segundos debe poder pausarse o desactivarse. Evitar animaciones innecesarias reduce la distracción y la fatiga visual.

    📌 WCAG 2.4.1 – Evitar Bloques de Contenido Repetitivos (A). Los usuarios deben poder saltar bloques repetitivos para encontrar información más rápido. Un diseño bien estructurado reduce la sobrecarga mental y mejora la eficiencia en la navegación.

    Ejemplo:

    ❌ Un sitio con múltiples pop-ups, anuncios y animaciones en movimiento que desvían la atención del usuario.

    ✅ Un diseño con información agrupada en bloques claros, sin interrupciones innecesarias.

  2. Textos legibles: La elección de una mala tipografía exige un esfuerzo extra al usuario para poder comprender el contenido.

    ➡️ Fuente grande y espaciada: Reduce el esfuerzo de lectura y hace la web más accesible para todos.

    Criterios

    📌 WCAG 1.4.4 – Cambio de Tamaño del Texto (AA): Permite que los usuarios aumenten el tamaño del texto hasta un 200% sin pérdida de funcionalidad. Utilizar una fuente mínima recomendada de 16px  mejora la lectura sin necesidad de zoom.

    📌 WCAG 1.4.12 – Espaciado del Texto (AA). Define requisitos mínimos de espaciado entre líneas, párrafos y caracteres para mejorar la legibilidad. Un buen interlineado (mínimo 1.5) reduce la fatiga visual y mejora la comprensión.

    📌 WCAG 1.4.8 – Presentación Visual (AAA). Evita la justificación completa del texto y requiere un ancho de línea razonable para facilitar la lectura. Los textos en párrafos largos y sin espaciado pueden hacer que la lectura sea más difícil para personas con fatiga visual o dificultades cognitivas.

    Ejemplo:

    ❌ Fuente de 12px con interlineado de 1.2, compactando el texto.

    ✅ Fuente de 16px o más con interlineado 1.5, permitiendo una lectura cómoda.

    ➡️ Alto contraste: Reduce el esfuerzo ocular y mejora la lectura en condiciones de fatiga visual.

    Criterios

    📌 WCAG 1.4.3 – Contraste (Mínimo) (AA). El texto y el fondo deben tener un contraste mínimo de 4.5:1 para facilitar la lectura. Un bajo contraste dificulta la visibilidad, especialmente para personas con baja visión o fatiga ocular.

    📌 WCAG 1.4.6 – Contraste (Mejorado) (AAA) Para usuarios con mayores dificultades visuales, se recomienda un contraste de al menos 7:1.

    Ejemplo:

    image

    ➡️ No justificar los textos, ya que al crear espacios irregulares, dificultan la lectura: Permite una lectura más natural y evita que el usuario tenga que esforzarse para seguir el contenido.

    Criterios

    📌 WCAG 1.4.8 – Presentación Visual (AAA) Evita la justificación total del texto, ya que genera espacios irregulares que dificultan la lectura. Las personas con dislexia o dificultades cognitivas pueden perder fácilmente el seguimiento de la línea de texto.

    Ejemplo:

    image

  3. Interacción sin esfuerzo: Un usuario cansado necesita que se lo pongas fácil, si no encuentra el elemento que está buscando… abandonará la navegación.

    ➡️ Botones grandes y visibles: Reduce el esfuerzo visual y facilita la interacción en cualquier estado físico o mental.

    Criterios

    📌 WCAG 2.5.5 – Tamaño del Área de Activación (AAA). Los elementos táctiles deben tener un tamaño mínimo de 44x44px para que sean fáciles de presionar sin precisión extrema. Beneficia a usuarios con dificultades motoras, manos temblorosas o que usan dispositivos móviles.

    📌 WCAG 1.4.11 – Contraste de Elementos No Textuales (AA). Asegura que los botones y elementos interactivos tengan suficiente contraste con el fondo. Evita botones de colores apagados o con poco contraste que dificulten su visibilidad

    Ejemplo:

    image

    ➡️ Posibilidad de usar solo el teclado: Permite que usuarios con fatiga o movilidad reducida interactúen sin esfuerzo.

    Criterios

    📌 WCAG 2.1.1 – Teclado (A). Todos los elementos interactivos deben ser accesibles solo con teclado (sin necesidad de usar el mouse). Beneficia a personas con dificultades motoras, usuarios de lectores de pantalla y quienes prefieren atajos de teclado.

    📌 WCAG 2.4.7 – Foco Visible (AA) Indica claramente qué elemento está seleccionado cuando se usa el teclado para navegar. Evita la frustración de no saber en qué parte de la web se está interactuando.

    Ejemplo:

    ❌ Formularios que no permiten avanzar con "Tab" y requieren uso del mouse.

    Navegación fluida con "Tab", Enter y teclas de dirección con un foco visible en cada elemento.

    ➡️ Mostrar los estados de forma clara: Reduce la incertidumbre y mejora la experiencia del usuario cansado o con dificultades cognitivas.

    Criterios

    📌 WCAG 3.2.2 – Entrada Coherente (A) Evita cambios inesperados en la interfaz cuando el usuario interactúa con un botón o formulario.Reduce la confusión en personas con fatiga o dificultades cognitivas.

    📌 WCAG 1.4.1 – Uso del Color (A). No depender únicamente del color para indicar estados (ej. error solo en rojo). Agregar mensajes de texto o iconos para reforzar el significado de cada estado.

    Ejemplo:

    ❌ Un enlace que, al hacer clic, redirige a otra página sin indicar visualmente que se ha abierto una nueva pestaña.
    ✅ Un enlace con estados claros:

    • Normal: Subrayado y con color diferenciado.

    • Hover: Cambio de color o subrayado más grueso.

    • Clic: Breve animación o cambio de color para indicar que se ha activado.

    • Nuevo contenido: Mensaje o icono indicando que se abrirá en una nueva pestaña.

  1. Evitar el estrés en los formularios. Cuando un formulario es largo y confuso, inevitablemente dispara los niveles de frustración y ansiedad del usuario.

    ➡️ Autocompletado activado: Ahorra tiempo al usuario.

    Criterios

    📌 WCAG 1.3.5 – Identificación del Propósito de Entrada (AA). Permite que los navegadores y herramientas de asistencia completen automáticamente los campos comunes (nombre, correo, dirección, etc.). Beneficia a usuarios con dificultades motoras, fatiga o que simplemente buscan rapidez.

    Ejemplo:

    image

     

    ➡️ No pedir datos innecesarios y ofrecer feedback instantáneo

    Criterios

    📌 WCAG 3.3.2 – Etiquetas o Instrucciones (A) Asegura que los formularios sean claros y pidan solo la información esencial. Incluir una instrucción breve sobre para qué se usará cada dato.

    📌 WCAG 3.3.6 – Prevención de Errores (AA). Evita pedir información innecesaria que pueda generar fatiga o rechazo. Si un dato no es obligatorio, debe indicarse claramente.

    Ejemplo:

    image

    ➡️ Mostrar errores en tiempo real: Reduce la frustración y evita el estrés de tener que rehacer todo el formulario.

    Criterios

    📌 WCAG 3.3.3 – Sugerencias ante Errores (AA) Si el usuario comete un error, el sistema debe sugerir cómo corregirlo de inmediato sin esperar hasta enviar el formulario.

    📌 WCAG 3.3.1 – Identificación de Errores (A) Los errores deben ser claros y visibles, no solo con color, sino con mensajes explicativos sobre cómo corregirlos.

    📌 WCAG 3.3.7 – Ayuda en la Entrada (AAA). Proporcionar opciones como autocompletar reduce el esfuerzo y la posibilidad de errores.

    Ejemplo:

    image

     

La respuesta está en las WCAG

Es un error pensar que las WCAG son unas herramientas "extra" al diseño. Las WCAG deben formar parte del diseño ¿por qué? porque nos ayudan a crear diseños que verdaderamente se puedan usar por todas las personas, independientemente de sus capacidades.

Sufrir estrés y fatiga mental no está considerado como discapacidad, pero aun así afecta directamente de forma temporal en las capacidades cognitivas, visuales y motoras de una persona, haciendo que sus necesidades durante la experiencia de usuario en un plataforma digital se asemeje a las de personas con ciertas limitaciones/discapacidades.

Ti piace questo post?

Offri un caffè a Alicia Parras Martínez

Altro da Alicia Parras Martínez