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.

This talk has been presented at React Advanced 2023, check out the latest edition of this React Conference.

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 2021React Advanced 2021
47 min
Sistemas de Diseño: Caminando la Línea Entre Flexibilidad y Consistencia
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
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
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
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
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Solucionando Problemas de Rendimiento en React
React Advanced 2023React Advanced 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.

Workshops on related topic

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
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.