Accesibilidad en Discord

Rate this content
Bookmark

FAQ

La navegación por teclado en Discord es una función de accesibilidad diseñada para permitir que los usuarios operen la plataforma únicamente con un teclado, sin necesidad de un mouse. Esto es crucial para personas que no pueden o tienen dificultades para usar un mouse, mejorando la inclusividad de la aplicación.

Los desafíos incluyeron problemas con la propiedad CSS 'outline', como el recorte del contorno debido a 'overflow hidden', la aplicación limitada del contorno solo al elemento objetivo, y la incapacidad de 'outline' para adaptarse a diferentes colores de fondo o respetar radios de borde asimétricos.

El control deslizante de saturación en Discord permite a los usuarios ajustar la saturación de colores en la interfaz de usuario, reduciéndola desde un 100% (colores completos) hasta 0% (escala de grises). Esto ayuda a usuarios con sensibilidad a colores intensos a tener una experiencia visual más cómoda.

React D&D Accessible Backend es una biblioteca desarrollada para mejorar la accesibilidad en funciones de arrastrar y soltar en Discord, proporcionando soporte tanto para teclado como para lectores de pantalla. Está diseñada para integrarse con React D&D y facilitar una interacción más inclusiva.

La verificación de accesibilidad en tiempo de ejecución en Discord es una funcionalidad en desarrollo que permite identificar y reportar problemas de accesibilidad automáticamente mientras los desarrolladores trabajan en la aplicación. Utiliza avanzadas técnicas de programación para ejecutar comprobaciones sin interrumpir la experiencia del usuario.

Los usuarios pueden enviar comentarios sobre la accesibilidad en Discord a través de un formulario especializado disponible en la URL dis.gd/A11y. Esto permite a los desarrolladores recibir retroalimentación directa para mejorar continuamente las funciones de accesibilidad de la plataforma.

Brandon Dail
Brandon Dail
22 min
25 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute los esfuerzos de accesibilidad en Discord, centrándose en la navegación por teclado y los desafíos enfrentados al implementar anillos de enfoque y contornos. El orador muestra un sistema unificado de anillos de enfoque y un control deslizante de saturación para abordar las preocupaciones de accesibilidad. También destacan la implementación de colores de roles y el uso de filtros CSS para mejoras de accesibilidad. La charla concluye con ideas sobre la verificación de accesibilidad en tiempo de ejecución y el desarrollo de un sistema central de tiempo de ejecución eficiente para verificar problemas de accesibilidad.
Available in English: Accessibility at Discord

1. Introducción a la accesibilidad en Discord

Short description:

Soy Brandon Dale, un ingeniero de software en Discord, y hablaré sobre la accesibilidad en Discord. Nuestro primer gran proyecto es la navegación por teclado, que garantiza que los usuarios puedan realizar todas las acciones con un teclado. Esto es crucial para la accesibilidad y también ayuda con la compatibilidad con lectores de pantalla. Permítanme demostrar la navegación por teclado de Discord. Primero, me enfocaré en la entrada de mensajes, luego usaré la tecla de tabulación para navegar a través de los elementos enfocables. También puedo navegar a través de los mensajes y usar atajos para acciones como responder. Uno de los desafíos que enfrentamos fue implementar anillos de enfoque, que resultaron tener muchos casos especiales. El uso de la propiedad CSS outline causó complicaciones, especialmente al tratar con contenedores con elementos enfocables y desbordamiento oculto.

Estoy aquí para hablar sobre la accesibilidad en Discord. Esta será una charla amplia centrada en la ingeniería donde hablaré sobre algunos de los problemas más interesantes en los que hemos trabajado, los espacios problemáticos en torno a ellos y luego analizaré los detalles técnicos de las soluciones que hemos construido. Ahora, antes de hacer eso, quiero agradecer al resto de mi equipo porque estoy definitivamente aquí en nombre de muchas personas realmente geniales que han hecho gran parte del trabajo del que voy a presumir. Así que solo algunas presentaciones rápidas. Nuestro equipo incluye a Evelyn, nuestra gerente de ingeniería, John es otro ingeniero, Saan es un diseñador, Nick nos ayuda con el marketing, Meghan es otra ingeniera y, por supuesto, yo mismo, otro ingeniero.

Ahora, el primer gran proyecto del que quiero hablar es la navegación por teclado. Esto fue algo que hicimos el año pasado y fue un proyecto con un objetivo muy amplio de asegurarnos de que puedas hacer todo lo que necesitas hacer en Discord solo con un teclado. Esta es una característica de accesibilidad realmente importante porque hay muchas personas que no pueden o tienen dificultades para usar un mouse. Y también descubrimos que un buen soporte de teclado es un buen indicador de cómo podría funcionar un lector de pantalla en ciertos casos, ya que ambos se basan en la navegación de un cursor entre elementos enfocables. Así que obtuvimos muchos beneficios en ambos casos.

Permítanme demostrar cómo se ve la navegación por teclado en Discord, en caso de que no estén familiarizados con Discord y no hayan utilizado la navegación por teclado. Aquí lo tengo en funcionamiento y solo quiero llamar su atención aquí abajo, porque ahí es donde voy a empezar. Así que voy a enfocar esta entrada de mensajes, presionar tabulación, y ahora verán este anillo de enfoque azul alrededor de la entrada de mensajes. Si presiono tabulación nuevamente, puedo moverme a través de otros elementos enfocables, shift + tabulación para retroceder. Vamos a un canal que tiene algunos mensajes. Vamos a hacer React Internals. Verán que mi anillo de enfoque persiste porque usé el teclado para llegar a este canal. Y si presiono la flecha hacia arriba, puedo moverme hacia arriba a través de los mensajes, la flecha hacia abajo me lleva hacia abajo. Puedo usar atajos de teclado mientras estoy enfocado en los mensajes, como R para responder, y luego puedo usar una navegación similar con las teclas de flecha en todas las demás listas que pueden ver aquí. Antes de hablar sobre el proyecto, quiero mencionar esta publicación de blog de John. Él hizo gran parte del trabajo del que voy a hablar y escribió esta publicación de blog realmente excelente sobre el tema. Así que si quieres leer una versión más extensa de esto, te recomiendo que lo revises. Tiene muchos detalles realmente interesantes.

Ahora, la primera parte importante de la navegación por teclado de la que quiero hablar son los anillos de enfoque, porque son engañosamente simples. Parece algo que debería ser relativamente fácil, pero encontramos que hay muchos casos especiales que lo hacen realmente complicado si quieres escalarlo. Tradicionalmente, esto es algo que se implementaría con la propiedad CSS outline. Y esto es algo que intentamos hacer, pero encontramos que había muchas complicaciones que quiero explicar rápidamente. Así que hubo algunos problemas con el uso de outline que encontramos bastante rápido. El primero fue que al usar overflow hidden en un contenedor que puede tener elementos enfocables

2. Desafíos con Anillos de Enfoque y Contornos

Short description:

Si me desplazo a este botón, verás el anillo de enfoque en todos los lados excepto en el más a la izquierda, debido a que está fuera del área de desbordamiento. Los navegadores recortan este anillo de enfoque, lo cual se puede solucionar teniendo cuidado con los márgenes y rellenos. La propiedad outline solo se puede aplicar al elemento objetivo, no a su contenedor. CSS carece de una buena solución para esto, ya que la pseudo clase focus-within aplica el estilo a cualquier descendiente. Además, la propiedad outline no se adapta a diferentes colores de fondo. Una solución futura en la que se está trabajando es la función de contraste de color en la especificación de nivel cinco del módulo de color de CSS. La propiedad outline-offset solo permite una aplicación uniforme, a diferencia de los márgenes y rellenos.

Corríamos el riesgo de recortar el contorno. Así que te lo mostraré aquí. Si me desplazo a este botón, verás que puedes ver el anillo de enfoque en todos los lados excepto en el más a la izquierda. Y eso se debe a que está justo fuera de esa área de desbordamiento. Y tal como está, los navegadores recortarán ese anillo de enfoque. Esto es algo que generalmente se puede solucionar teniendo más cuidado con los márgenes y rellenos. Pero estábamos usando desbordamiento por algunas otras razones, así que fue un poco complicado. Y también queríamos evitar la posible batalla cuesta arriba de tener que arreglar siempre, ya sabes, el uso de desbordamiento oculto para evitar esto. Lo siguiente con lo que nos encontramos es que el contorno solo se puede aplicar al elemento objetivo. Entonces, al elemento que se está enfocando. Así que, si miras a la derecha aquí, tenemos una entrada de chat que se parece mucho a lo que tenemos en Discord, donde tenemos una entrada y luego un botón, y todos están en este contenedor lógico. E idealmente, lo que queremos es, cuando me enfoco en esta entrada, no queremos que se aplique ese anillo de enfoque al elemento de entrada real. Queremos que se aplique en ese contenedor con el borde negro. Y si miras Discord, esto es lo que hacemos. Pero con CSS y la propiedad outline, no hay una buena manera de hacerlo ahora mismo. Hay esta pseudo clase focus-within que te permite aplicar un estilo si algún descendiente está enfocado. Y si lo habilitamos y hacemos clic aquí, verás que nos da lo que queremos, pero la advertencia es que se aplica si algún descendiente está enfocado. Entonces, si presiono tabulación para salir de la entrada, verás que el botón está enfocado, y ese anillo de enfoque en el contenedor permanece. Entonces, esta propiedad simplemente no es lo suficientemente granular para nosotros.

Otra cosa es que esta propiedad outline no puede adaptarse automáticamente a diferentes colores de fondo. Así que verás aquí que tenemos un botón, y esto es generalmente lo que tenemos, es un botón a nivel del sistema de diseño que se utiliza en muchos contextos diferentes. Y si me desplazo al primero, ese anillo de enfoque azul se ve bastante bien. Pero en el siguiente con este fondo borroso, no tanto. Ya sabes, es difícil de ver. Y queríamos una solución donde los diseñadores e ingenieros no tuvieran que pensar y aplicar manualmente diferentes anillos de enfoque según el contexto. Y con outline, eso simplemente no es posible actualmente. Ahora, hay algo en lo que se está trabajando llamado la función de contraste de color en la especificación de nivel cinco del módulo de color de CSS, pero aún es un trabajo en progreso y aún no tiene soporte en los navegadores. Pero estamos deseando mucho que esto suceda, porque esto ayudará a resolver muchos de estos problemas de adaptación de color del anillo de enfoque. Y luego esto es algo más pequeño y molesto, la propiedad outline-offset, que es lo que se puede usar para desplazar el contorno del elemento objetivo hacia afuera o hacia adentro. Solo puede tomar un valor único, por lo que solo se puede aplicar de manera uniforme. Entonces, a diferencia de los márgenes, rellenos y bordes redondeados, no te permite aplicar un contorno que sea

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

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.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 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.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced Conference 2023React Advanced Conference 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.
De Monolito a Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
De Monolito a Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

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.