Desmitificando la Accesibilidad Web

Rate this content
Bookmark

La accesibilidad es una herramienta decisiva para hacer de Internet un lugar más inclusivo, es absolutamente crucial y a pesar de la creencia popular de que solo un pequeño grupo de usuarios se ve afectado, beneficia a cada uno de nosotros. Después de una breve introducción, nos sumergiremos en herramientas prácticas para crear sitios web más accesibles y probar los problemas de accesibilidad web más comunes. ¡Hagamos que la web sea más inclusiva, una página a la vez!

11 min
18 Nov, 2022

Video Summary and Transcription

La accesibilidad web garantiza que las personas con discapacidades puedan usar y participar de manera equitativa en la web. Más del 15% de la población mundial tiene algún tipo de discapacidad. Mejorar la accesibilidad web se puede hacer utilizando herramientas como ex-DEV tools y el simulador de discapacidad web. El contraste de color juega un papel crucial en la legibilidad, y HTML semántico y el orden de pestañas ayudan con la funcionalidad y el flujo del usuario. También hay herramientas y extensiones adicionales disponibles para una mayor exploración.

Available in English

1. Introducción a la accesibilidad web

Short description:

Hola a todos, gracias por unirse a mi charla. Mi nombre es Josephine, mis pronombres son ella, ella, y en los próximos minutos hablaré sobre la accesibilidad web y las formas en que puedes comenzar con ella. La accesibilidad web significa que las herramientas, tecnologías y sitios web que construimos están diseñados e implementados de manera que las personas con discapacidades puedan usarlos y participar de manera equitativa en la web. Más del 15% de la población mundial experimenta algún tipo de discapacidad a lo largo de su vida. Diferentes grupos de usuarios se benefician de la accesibilidad web, incluyendo personas con discapacidades y aquellas sin discapacidades en diversas situaciones. Para comenzar a mejorar la accesibilidad web, puedes utilizar herramientas generales como ex-DEV tools para una auditoría de accesibilidad y el simulador de discapacidad web para experimentar tu página desde la perspectiva de diferentes grupos de usuarios.

ella, y en los próximos minutos hablaré sobre la accesibilidad web y las formas en que puedes comenzar con ella. Así que vamos directo al grano. ¿Qué es la accesibilidad web? La accesibilidad web significa que las herramientas, tecnologías y sitios web que construimos están diseñados e implementados de manera que las personas con discapacidades puedan usarlos y participar de manera equitativa en la web. También es un derecho humano básico según lo definido por las Naciones Unidas. Y ahora, si eso no es suficiente para ti y aún te preguntas si la accesibilidad web es algo para ti o las personas que quieres que usen tu sitio web, hubo un informe de la Organización Mundial de la Salud y encontraron que más del 15% de la población mundial experimenta algún tipo de discapacidad a lo largo de su vida. Y, por supuesto, los datos globales son difíciles de medir y la experiencia de la discapacidad también. Pero incluso si es solo una estimación, en mi opinión, eso es muy poderoso. Y realmente espero que si te acercas a esto tal vez desde una perspectiva empresarial, el simple hecho de la cantidad de personas que se ven afectadas te convenza de que esto también es relevante para ti. Además, todos estamos envejeciendo, y esto incluso se va a ampliar a largo plazo, ¿verdad? Muy bien. Entonces aquí en esta diapositiva, hay varios grupos de usuarios diferentes que pueden beneficiarse de la accesibilidad web, y aquí vemos diferentes tipos de discapacidades o impedimentos como discapacidad física, auditiva, cognitiva, neurológica, del habla o visual. Pero también vemos personas sin discapacidades, personas que tal vez usan un dispositivo más pequeño como un teléfono móvil, o tal vez estás usando tu control remoto para poner tu programa favorito en la televisión. También tenemos discapacidades temporales como tal vez un brazo roto o situacionales, tal vez un nuevo padre sosteniendo a un bebé, o si tienes una conexión a internet más lenta y tal vez las imágenes no se cargan, vas a depender de la accesibilidad web y obtener algunos textos alternativos, por ejemplo. Así que hay muchas situaciones en las que la accesibilidad web es muy beneficiosa, y en la práctica, eso puede verse de muchas maneras diferentes, ¿verdad? Entonces puede significar tener suficiente contraste de color para que todo sea realmente visible en la página, estar abierto a diferentes métodos de entrada, no solo el mouse y el trackpad, sino también un teclado o tecnología de asistencia, utilizar HTML semántico para proporcionar suficiente contexto para la tecnología de asistencia como lectores de pantalla, pero también para tu navegador, o cosas como explicar términos desconocidos, estar abierto al hecho de que no todos tienen el mismo conocimiento básico y que tenemos que adherirnos a estos diferentes estándares o antecedentes, ¿verdad? Pero, ¿qué significa eso? ¿Dónde podemos empezar? Ahora que te he convencido, espero, de que esto es importante para todos nosotros, ¿cómo podrías empezar? Y en realidad voy a cambiar al navegador para esto. Esta Storyblock, la empresa para la que trabajo, somos un CMS sin cabeza. Pero ese no es el punto. El punto es que actualmente estamos haciendo una auditoría de accesibilidad. Y una de las cosas que hice en nuestra propia página de inicio, por ejemplo, esto es realmente bastante grande, así que lo voy a hacer un poco más pequeño, fue, por ejemplo, ejecutar una de estas herramientas generales. Hay, por ejemplo, las herramientas ex-DEV. Solo voy a abrir esto, escanear toda la página y va a encontrar muchos problemas. Así que ahora 30 parece mucho. No significa que todo esté roto en esta página, pero nos va a guiar a través de lo que está mal aquí, ¿verdad? Así que tenemos un elemento debe tener suficiente contraste de color. Ya mencioné el contraste de color y en un minuto veremos cómo puedes probar eso. Los valores de los atributos ID deben ser únicos. Y así, paso a paso nos va a guiar a través de todas las cosas que se pueden mejorar, y que deberás revisar para mejorar la accesibilidad en tu página, ¿verdad? Y esto es realmente bueno, así que si abro esta aplicación, te proporcionará más información, puedes compartirla, puedes identificarla en el código. Así que esto es realmente útil para una primera visión general Por supuesto, no va a encontrar todos los problemas, también tendrás que probarlos manualmente, pero es un buen punto de partida sin duda. Así que voy a cerrar esta aplicación y voy a abrir la siguiente herramienta, que es el simulador de discapacidad web. Esto te permite experimentar cómo diferentes grupos de usuarios experimentan tu página, ¿verdad? Y ahora voy a seleccionar aquí la Daltonismo total, por ejemplo, y me mostrará cómo las personas con daltonismo tal vez experimenten nuestro sitio web. También puedo aprender más o restablecer y elegir algo más como daltonismo rojo-verde, por ejemplo, eso se verá completamente diferente, pero todo

2. Contraste de color y niveles de accesibilidad

Short description:

Si cambias a un fondo brillante como la luz del sol, necesitarás más contraste para garantizar la legibilidad. La herramienta de verificación de contraste de color puede ayudarte con esto. Te permite elegir colores de fondo y primer plano y proporciona niveles de accesibilidad para cumplir con los estándares. Apunta a una relación de contraste de color de 4.5 a 1 para cumplir con los estándares AA. Los colores más oscuros sobre blanco tienden a proporcionar una mejor visibilidad para personas con discapacidades visuales.

todavía se ve visible, ¿verdad? Es un buen punto de partida. Ahora, si cambio aquí a luz del sol, verás que necesitamos mucho más contraste para poder leer lo que dice, por ejemplo, en el botón aquí y es realmente difícil de decir, creo que aquí hay algo escrito pero no puedo decirlo con certeza. Esto ya te muestra que hay muchos casos de uso diferentes para la accesibilidad web, ¿verdad? Quiero decir, esto es realmente difícil pero es un buen punto de partida sin duda.

Y ahora, si quieres entrar en un poco más de detalle sobre el contraste de color, tengo otra herramienta para nosotros. Es la herramienta de verificación de contraste de color. Hay muchas diferentes disponibles. Esta es simplemente la que más me gusta y esto te va a ayudar. Puedes elegir un color de fondo. Yo simplemente voy a elegir tal vez este turquesa y puedes elegir un color de primer plano, blanco, y vemos aquí que en realidad estamos fallando en diferentes niveles. Estos son diferentes niveles de accesibilidad que puedes elegir cumplir. AA es generalmente el más común al que la gente intenta cumplir. Y para cumplir con AA necesitamos un contraste de color de 4.5 a 1. Lo que significa que el fondo y el primer plano son lo suficientemente diferentes como para tener una buena relación allí. Y con el turquesa sobre el blanco, estamos fallando en eso. Esto es algo a tener en cuenta. Y ahora, si comprobamos aquí solo para comparar, vemos que este color azul oscuro sobre el blanco nos da una puntuación muy buena, y estamos pasando todos los diferentes niveles. Esto es más o menos a lo que debes apuntar. Algo que también puedas leer con tal vez una luz del sol brillante o

3. HTML Semántico y Orden de Pestañas

Short description:

El HTML semántico aporta funcionalidad inherente y ayuda con diferentes métodos de entrada. Es importante tener estilos de enfoque visibles y contrastantes para saber dónde te encuentras al usar el teclado. Asegurarse de que el orden de las pestañas siga el flujo del usuario y utilizar herramientas como Tab Ally puede ayudar a lograr esto. Esto fue una breve introducción a la accesibilidad web, pero hay más por aprender. No dudes en consultar el código QR para acceder a herramientas y extensiones o contactarme para continuar la discusión.

personas con discapacidades visuales. Ahora, también hay cosas que mencioné anteriormente, como estar abierto a diferentes métodos de entrada, y el HTML semántico realmente ayuda con eso porque aporta funcionalidad inherente. Y muchas cosas con las que necesitaremos interactuar, por ejemplo, con un teclado en nuestra página. Y ahora, si uso la tecla de pestaña para recorrer mi página, puedo ir hasta aquí. Ahora estoy retrocediendo. Ves que tengo un estilo de enfoque alrededor de mi botón. Y eso me ayudará a saber dónde estoy si estoy usando el teclado. Y ves, se ve un poco diferente en el botón. Algo está sucediendo, pero no es completamente visible. Y si no lo hiciera, no sabría dónde estoy en este momento, si toco el siguiente botón de nuevo, se muestra rápidamente, pero es difícil de decir. Creo que es blanco y luego lo mismo aquí. Y ahora está un poco recortado. Así que esto también es algo en lo que querría investigar, ¿verdad? ¿Cómo se ven los estilos de enfoque? ¿Tienen suficiente contraste? ¿Son visibles? ¿Son lo suficientemente grandes? ¿Sé en todo momento, dónde estoy si no estoy navegando con el mouse? Y una cosa de la que también quiero asegurarme, es que el orden de las pestañas. Así es como recorro los elementos interactivos de mi página correctamente. Y cuando digo correctamente, me refiero a que en este caso, el idioma de esta página es inglés. Así que leería de arriba a la izquierda hacia abajo a la derecha, ¿verdad? Y así es como iría el flujo del usuario. Y quiero asegurarme de que el orden de las pestañas sea el mismo. Y tengo otra herramienta que podemos usar rápidamente para visualizar el orden de las pestañas. Se llama Tab Ally y nos ayudará a mostrar en qué orden se pueden alcanzar los elementos interactivos. Solo toma un segundo. Ahora, vemos aquí que vamos desde la parte superior a través de nuestra navegación y saltamos a los botones, al video. Esto se ve bien. Y esto es más o menos lo que queremos lograr, ¿verdad? Vamos de arriba a abajo y de derecha a izquierda. Lo único que debemos verificar aquí es, bueno, ¿puedo ver realmente el enfoque donde estoy, ¿verdad? Y eso fue todo. Fue una inmersión rápida en la accesibilidad web. Y dije inmersión, no fue profunda. Fue una breve introducción a la accesibilidad web. Espero que tengas curiosidad por aprender más. Si estás interesado en alguna de las herramientas, no dudes en consultar este código QR. Encontrarás las herramientas y los enlaces a las extensiones allí. O si quieres discutir algo relacionado con la accesibilidad web o cualquier otro tema, no dudes en contactarme en las redes sociales o por correo electrónico. Espero conocerte. Disfruta del resto de la conferencia.

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

React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Humans are natural problem solvers and we're good enough at it that we've survived over the centuries and become the dominant species of the planet. Because we're so good at it, we sometimes become problem seekers too–looking for problems we can solve. Those who most successfully accomplish their goals are the problem eliminators. Let's talk about the distinction between solving and eliminating problems with examples from inside and outside the coding world.
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Featured WorkshopFree
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
React Summit 2023React Summit 2023
106 min
Back to the Roots With Remix
Featured Workshop
The modern web would be different without rich client-side applications supported by powerful frameworks: React, Angular, Vue, Lit, and many others. These frameworks rely on client-side JavaScript, which is their core. However, there are other approaches to rendering. One of them (quite old, by the way) is server-side rendering entirely without JavaScript. Let's find out if this is a good idea and how Remix can help us with it?
Prerequisites- Good understanding of JavaScript or TypeScript- It would help to have experience with React, Redux, Node.js and writing FrontEnd and BackEnd applications- Preinstall Node.js, npm- We prefer to use VSCode, but also cloud IDEs such as codesandbox (other IDEs are also ok)
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
How to Solve Real-World Problems with Remix
Featured Workshop
- Errors? How to render and log your server and client errorsa - When to return errors vs throwb - Setup logging service like Sentry, LogRocket, and Bugsnag- Forms? How to validate and handle multi-page formsa - Use zod to validate form data in your actionb - Step through multi-page forms without losing data- Stuck? How to patch bugs or missing features in Remix so you can move ona - Use patch-package to quickly fix your Remix installb - Show tool for managing multiple patches and cherry-pick open PRs- Users? How to handle multi-tenant apps with Prismaa - Determine tenant by host or by userb - Multiple database or single database/multiple schemasc - Ensures tenant data always separate from others
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Build and Launch a personal blog using Remix and Vercel
Featured Workshop
In this workshop we will learn how to build a personal blog from scratch using Remix, TailwindCSS. The blog will be hosted on Vercel and all the content will be dynamically served from a separate GitHub repository. We will be using HTTP Caching for the blog posts.
What we want to achieve at the end of the workshop is to have a list of our blog posts displayed on the deployed version of the website, the ability to filter them and to read them individually.
Table of contents: - Setup a Remix Project with a predefined stack- Install additional dependencies- Read content from GiHub- Display Content from GitHub- Parse the content and load it within our app using mdx-bundler- Create separate blog post page to have them displayed standalone- Add filters on the initial list of blog posts
React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.