Pensando Diferente Acerca de a11y – Diseño de Sitios Web Accesibles para los Neurodivergentes

Rate this content
Bookmark

¿Sabías que aproximadamente 1 de cada 7 personas es neurodivergente? Dentro de ese grupo hay un espectro completo de personas cuyos cerebros procesan la información de manera diferente. Sin embargo, como ingenieros de frontend, a menudo olvidamos tener en cuenta estas idiosincrasias, o elegimos simplemente aplicar estándares de la industria como WCAG 2.1 AA sin profundizar más. En esta charla, Steph comparte algunas de las formas en que puedes crear mejores experiencias web para los neurodivergentes.

FAQ

La accesibilidad web se refiere a la inclusión de características como lectores de pantalla, roles de ARIA y HTML semántico que facilitan el acceso y la navegación en la web a personas con diversas discapacidades.

Los estándares AAA de WCAG no son legalmente obligatorios y son optativos, lo que resulta en una adopción variable. Estos estándares pueden ser mutuamente excluyentes, complicando su implementación completa.

La neurodivergencia se define como tener un cerebro que funciona de manera diferente a la mayoría de la población, no es un término médico, y se usa para describir a personas que no se consideran discapacitadas sino simplemente diferentes.

Aproximadamente el 15% de la población, o una de cada siete personas, es neurodivergente en el Reino Unido.

Las barreras incluyen problemas con la memoria de trabajo, el procesamiento del lenguaje, la sobrecarga sensorial, habilidades de comunicación, organización y conciencia espacial.

COGA ofrece recursos como historias de usuarios basadas en personas reales con discapacidades cognitivas y patrones de diseño que pueden consultar los gestores de productos y diseñadores UX.

Las nuevas directrices WCAG 2.2 incluyen criterios adicionales como entrada redundante para facilitar procesos y autenticación accesible para ofrecer alternativas a pruebas de función cognitiva complejas.

Stephanie Shaw
Stephanie Shaw
30 min
20 Oct, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La accesibilidad va más allá de los lectores de pantalla y el HTML semántico, y es importante considerar las necesidades de las personas neurodivergentes. Las discapacidades cognitivas plantean desafíos únicos, y COGA proporciona pautas valiosas para diseñar para la accesibilidad cognitiva. La personalización, la tolerancia al error y la compatibilidad con las extensiones del navegador son cruciales para mejorar la experiencia del usuario. El sistema de diseño del NHS prioriza la funcionalidad y ha demostrado ser efectivo en el manejo de emergencias. Comprender las necesidades del usuario y abogar por el cambio dentro de la industria tecnológica son esenciales para crear una web más accesible.

1. Introducción a la Accesibilidad

Short description:

Soy Stephanie Shaw, una ingeniera senior de front-end en Beamery, aquí para hablar sobre cómo la accesibilidad se relaciona con personas como yo. La accesibilidad a menudo se asocia con lectores de pantalla, roles de aria y HTML semántico, pero exploremos una perspectiva diferente.

Espero que todavía estén despiertos también. Ha sido un largo día, pero sí, soy Stephanie Shaw. Soy una ingeniera senior de front-end en Beamery, y tengo ADHD, y estoy aquí hoy para hablar sobre cómo la accessibility se relaciona con personas como yo. Entonces, ¿qué es la accessibility? Bueno, le pregunté a mi colega en Beamery, y ella cree que la accessibility es todo acerca de lectores de pantalla, y roles de aria, y HTML semántico, y todo eso. Tal vez pienses lo mismo. Mi objetivo es usar los próximos 20 minutos para quizás cambiar sus mentes, y hacerles pensar en la accessibility de una manera un poco diferente.

2. Diferentes Perspectivas de Usuario

Short description:

Conozcamos a tres personas: Amina, Ben y Caryl. Amina tiene una discapacidad visual y utiliza tecnologías de asistencia. Ben tiene discapacidades cognitivas debido a una lesión cerebral. Caryl es neurodivergente y prefiere considerarse a sí misma como neurospicy. La accesibilidad web a menudo se centra en usuarios como Amina, pero hay una falta de conciencia y comprensión para usuarios como Ben. Los estándares AAA ofrecen una mejor cobertura para las discapacidades cognitivas, pero su adopción es variable. El movimiento de la neurodiversidad tiene como objetivo cambiar la percepción de las condiciones y abrazar a los individuos neurodivergentes.

Entonces, conozcamos a tres personas, Amina, Ben y Caryl. Amina ha tenido una discapacidad visual desde su nacimiento. Ella utiliza un lector de pantalla y la navegación por teclado y gestos especiales en su móvil para ayudarla a navegar por la web. Ben tuvo un accidente de coche cuando era adolescente y sufrió lesiones físicas de las que se ha recuperado, pero todavía tiene una lesión cerebral traumática que significa que tiene algunas discapacidades cognitivas. Tiene problemas con su memoria de trabajo y con la comprensión lectora. Caryl siempre se sintió un poco diferente desde que era niña, pero no fue diagnosticada como autista hasta sus últimos veinte años, y eso es un escenario deprimentemente común para muchas personas neurodivergentes especialmente mujeres y personas de color.

Ahora, cuando pensamos en la accesibilidad web, a menudo estamos pensando en usuarios como Amina en muchas jurisdicciones, incluyendo en los EE.UU. con la Ley de Americanos con Discapacidades y en el Reino Unido con la Ley de Igualdad de 2010, los sitios web públicos están obligados a adherirse a la norma de accesibilidad WCAG AA como mínimo. Ha habido varios casos de alto perfil en los que usuarios con necesidades de accesibilidad como las de Amina han podido demandar con éxito a organizaciones por no cumplir con esa norma, como este famoso caso con el sitio web de Beyonce hace unos años. Y como ingenieros de front-end, porque los estándares AA son los que estamos legalmente obligados a implementar, esos son los que más conocemos. Pero sinceramente, en algunos lugares en los que he trabajado, puede ser un desafío conseguir que la gente haga literalmente el mínimo legal. Y aunque estemos haciendo lo mínimo, a menudo los gerentes de producto, los diseñadores de UX y los ingenieros de front-end se centran en cómo podemos crear experiencias hermosas para usuarios completamente capacitados sin necesariamente considerar cómo hacer que la experiencia sea hermosa o crear momentos de deleite para los usuarios que tienen necesidades adicionales de accesibilidad.

Ahora, Ben, se ha recuperado completamente de sus lesiones físicas después de su accidente de coche pero su lesión cerebral traumática significa que tiene discapacidades cognitivas que pueden dificultar el uso de sitios web, cosas como memorizar contraseñas o navegar por procesos complejos de varias etapas en la web. Mientras que algunas de estas discapacidades están cubiertas por los estándares AA, los estándares AAA de WCAG ofrecen un nivel de cobertura mucho mejor para sus necesidades. Sin embargo, el problema es que los estándares AAA no son legalmente obligatorios, son optativos. Y como resultado, significa que la adopción de los estándares AAA en la web es variable, por decir lo menos. Y no es necesariamente porque nosotros, como ingenieros de front-end, no nos importen personas como Ben. Quiero decir, a menudo, es posible que ni siquiera sepamos que existen personas como Ben. El principal problema, sin embargo, es que algunos de los estándares AAA son mutuamente excluyentes. Eso significa que es físicamente imposible implementar todos los estándares AAA, porque algunos de ellos entrarán en conflicto entre sí. Lo que se supone que debes hacer con los estándares AAA es tener un buen entendimiento de tus usuarios. Si esperas que un grupo de usuarios visite tu sitio web que tiene un conjunto particular de necesidades de accesibilidad, por ejemplo, si eres la Sociedad Nacional Autista, entonces adaptarías tus sitios web para personas como esa. Pero en general, no tiene mucho sentido desde una perspectiva de coste-beneficio implementar los estándares AAA en general, y dado que no necesitamos implementarlos legalmente, entonces a menudo, como ingenieros, tenemos una pobre comprensión de lo que realmente son.

¿Y qué pasa con alguien como Carol? Ella en realidad no se considera discapacitada. Su cerebro siempre ha funcionado de la misma manera desde que era niña, así que no sabe nada mejor. Tiene algunas discapacidades cognitivas, seguro, pero prefiere pensar en sí misma como neurodivergente o neurospicy si eres tonto y crónicamente en línea como yo. El movimiento de la neurodiversidad realmente tiene como objetivo cambiar la percepción de condiciones como el TDAH, el autismo, la dislexia, la discalculia y la dispraxia. Así que no estamos mirándolos como un impedimento o una discapacidad, sino simplemente como tener un cerebro que funciona un poco diferente a la norma, con sus propias fortalezas y debilidades. Así que neurodivergente como definición, es una persona que tiene un cerebro que funciona de una manera diferente a la mayoría de la población. No es un término médico. Por eso usamos palabras como neurospicy para dejar claro que no nos consideramos discapacitados, nos consideramos un poco diferentes.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
React Advanced Conference 2021React Advanced Conference 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
Los sistemas de diseño buscan aportar consistencia al diseño de una marca y hacer que el desarrollo de la interfaz de usuario sea productivo. Las bibliotecas de componentes con una API bien pensada pueden facilitar esto. Pero, ¡a veces una elección de API puede accidentalmente sobrepasar y ralentizar al equipo! Hay un equilibrio allí... en algún lugar. Exploremos algunos de los problemas y posibles soluciones creativas.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Seamos realistas: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica.En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
En esta charla, construiremos nuestro propio Jarvis utilizando Web APIs y langchain. Habrá codificación en vivo.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
Next.js y otros marcos de trabajo que envuelven a React proporcionan un gran poder en la construcción de aplicaciones más grandes. Pero con gran poder viene una gran responsabilidad de rendimiento - y si no prestas atención, es fácil añadir varios segundos de penalización de carga en todas tus páginas. ¡Vaya! Vamos a recorrer un estudio de caso de cómo unas pocas horas de depuración de rendimiento mejoraron tanto los tiempos de carga como los de análisis para la aplicación Centered en varios cientos por ciento cada uno. Aprenderemos no solo por qué ocurren esos problemas de rendimiento, sino cómo diagnosticarlos y solucionarlos. ¡Viva el rendimiento! ⚡️
De Monolito a Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
De Monolito a Micro-Frontends
Top Content
Muchas empresas en todo el mundo están considerando adoptar Micro-Frontends para mejorar la agilidad empresarial y la escala, sin embargo, hay muchas incógnitas cuando se trata de cómo se ve en la práctica el camino de migración. En esta charla, discutiré los pasos necesarios para migrar con éxito una aplicación React monolítica a una arquitectura de frontend más modular y desacoplada.

Workshops on related topic

Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construye una sala de chat con Appwrite y React
JSNation 2022JSNation 2022
41 min
Construye una sala de chat con Appwrite y React
WorkshopFree
Wess Cope
Wess Cope
Las API/Backends son difíciles y necesitamos websockets. Utilizarás VS Code como tu editor, Parcel.js, Chakra-ui, React, React Icons y Appwrite. Al final de este masterclass, tendrás los conocimientos para construir una aplicación en tiempo real utilizando Appwrite y sin necesidad de desarrollar una API. ¡Sigue los pasos y tendrás una increíble aplicación de chat para presumir!
Problemas difíciles de GraphQL en Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Problemas difíciles de GraphQL en Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
En Shopify a gran escala, resolvemos algunos problemas bastante difíciles. En este masterclass, cinco oradores diferentes describirán algunos de los desafíos que hemos enfrentado y cómo los hemos superado.

Tabla de contenidos:
1 - El infame problema "N+1": Jonathan Baker - Vamos a hablar sobre qué es, por qué es un problema y cómo Shopify lo maneja a gran escala en varios APIs de GraphQL.
2 - Contextualizando APIs de GraphQL: Alex Ackerman - Cómo y por qué decidimos usar directivas. Compartiré qué son las directivas, qué directivas están disponibles de forma predeterminada y cómo crear directivas personalizadas.
3 - Consultas de GraphQL más rápidas para clientes móviles: Theo Ben Hassen - A medida que tu aplicación móvil crece, también lo harán tus consultas de GraphQL. En esta charla, repasaré diversas estrategias para hacer que tus consultas sean más rápidas y efectivas.
4 - Construyendo el producto del futuro hoy: Greg MacWilliam - Cómo Shopify adopta las características futuras en el código actual.
5 - Gestión efectiva de APIs grandes: Rebecca Friedman - Tenemos miles de desarrolladores en Shopify. Veamos cómo estamos asegurando la calidad y consistencia de nuestras APIs de GraphQL con tantos colaboradores.
Accesibilidad web para Ninjas: Un enfoque práctico para crear aplicaciones web accesibles
React Summit 2023React Summit 2023
109 min
Accesibilidad web para Ninjas: Un enfoque práctico para crear aplicaciones web accesibles
Workshop
Asaf Shochet Avida
Eitan Noy
2 authors
En este masterclass práctico, te proporcionaremos las herramientas y técnicas que necesitas para crear aplicaciones web accesibles. Exploraremos los principios del diseño inclusivo y aprenderemos cómo probar nuestros sitios web utilizando tecnología de asistencia para asegurarnos de que funcionen para todos.
Cubriremos temas como el marcado semántico, los roles de ARIA, los formularios y la navegación accesibles, y luego nos sumergiremos en ejercicios de codificación donde podrás aplicar lo que has aprendido. Utilizaremos herramientas de prueba automatizadas para validar nuestro trabajo y asegurarnos de cumplir con los estándares de accesibilidad.
Al final de este masterclass, estarás equipado con el conocimiento y las habilidades para crear sitios web accesibles que funcionen para todos, y tendrás experiencia práctica utilizando las últimas técnicas y herramientas para el diseño inclusivo y las pruebas. ¡Únete a nosotros en este increíble masterclass de codificación y conviértete en un ninja de la accesibilidad web y el diseño inclusivo!
Pruebas automatizadas de accesibilidad con jest-axe y Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Pruebas automatizadas de accesibilidad con jest-axe y Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
¿Incluyen tus pruebas automatizadas verificaciones de accesibilidad? Este masterclass cubrirá cómo comenzar con jest-axe para detectar violaciones de accesibilidad basadas en código, y Lighthouse CI para validar la accesibilidad de las páginas completamente renderizadas. Ninguna cantidad de pruebas automatizadas puede reemplazar las pruebas manuales de accesibilidad, pero estas verificaciones se asegurarán de que tus probadores manuales no estén haciendo más trabajo del necesario.
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
JSNation 2023JSNation 2023
57 min
De 0 a Autenticación en una Hora para tu Aplicación JavaScript
WorkshopFree
Asaf Shen
Asaf Shen
La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
Mejoraremos una aplicación JS de pila completa (backend Node.js + frontend Vanilla JS) para autenticar usuarios con contraseñas de un solo uso (correo electrónico) y OAuth, incluyendo:
- Autenticación de usuario: Gestión de interacciones de usuario, devolución de JWT de sesión / actualización- Gestión y validación de sesiones: Almacenamiento seguro de la sesión para solicitudes posteriores del cliente, validación / actualización de sesiones
Al final del masterclass, también abordaremos otro enfoque para la autenticación de código utilizando Flujos de Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.