Desmitificando la Accesibilidad Web

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

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

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.