Accesibilidad web para Ninjas: Un enfoque práctico para crear aplicaciones web accesibles

Rate this content
Bookmark

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!

FAQ

La accesibilidad web se refiere a la práctica de hacer que los sitios web sean utilizables por el mayor número posible de personas, incluyendo aquellas que tienen discapacidades. Esto implica asegurar que las aplicaciones web sean utilizables con tecnologías de asistencia, como lectores de pantalla, y que todos los usuarios puedan navegar y interactuar con el contenido de manera efectiva.

Para hacer un sitio web accesible, es necesario implementar prácticas de diseño y desarrollo que consideren a los usuarios con discapacidades. Esto incluye la utilización de semántica HTML adecuada, asegurando que todos los elementos interactivos sean accesibles con el teclado, proporcionando textos alternativos para las imágenes, y asegurando un buen contraste de colores, entre otros aspectos.

Las tecnologías de asistencia más comunes incluyen lectores de pantalla, que convierten el texto y los elementos de la interfaz en audio, y software de reconocimiento de voz, que permite controlar un ordenador con comandos verbales. También se utilizan dispositivos de entrada especializados como teclados adaptados y dispositivos de seguimiento ocular.

Los desafíos incluyen la navegación inaccesible, como la falta de soporte para navegación solo con teclado, contenido visual que no tiene alternativas textuales, formularios que no están claramente etiquetados, y videos que no ofrecen subtítulos o descripciones de audio. Estos problemas pueden impedir que las personas con discapacidades accedan a la información y usen servicios en línea de manera efectiva.

Un lector de pantalla es una tecnología de asistencia que lee en voz alta el contenido de la pantalla de un ordenador o dispositivo móvil. Esto permite a las personas con discapacidades visuales o ceguera navegar por internet y usar aplicaciones mediante audición, en lugar de visión.

Para probar la accesibilidad de un sitio web, puedes utilizar herramientas automatizadas como Lighthouse de Google, que proporciona un informe de accesibilidad, o extensiones de navegador específicas para accesibilidad. También es crucial realizar pruebas manuales, incluyendo la navegación del sitio usando solo el teclado y revisando la compatibilidad con lectores de pantalla.

Existen varias legislaciones a nivel mundial que requieren accesibilidad web, como la ADA (Americans with Disabilities Act) en Estados Unidos y la Directiva de Accesibilidad de los Contenidos Web en la Unión Europea. Estas leyes aseguran que los servicios y sitios web públicos sean accesibles para todos, incluidas las personas con discapacidades.

Asaf Shochet Avida
Asaf Shochet Avida
Eitan Noy
Eitan Noy
109 min
20 Jun, 2023

Comments

Sign in or register to post your comment.
Video transcription, chapters and summary available for users with access.

Watch more workshops on topic

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.
Accesibilidad web en aplicaciones JavaScript
React Summit 2022React Summit 2022
161 min
Accesibilidad web en aplicaciones JavaScript
Workshop
Sandrina Pereira
Sandrina Pereira
A menudo vemos que JavaScript daña la accesibilidad de un sitio web. En esta masterclass, aprenderás cómo evitar errores comunes y cómo utilizar JS a tu favor para mejorar la accesibilidad de tus aplicaciones web.
En esta masterclass exploraremos múltiples ejemplos del mundo real con problemas de accesibilidad, y aprenderás cómo hacer que funcionen para las personas que utilizan un mouse o un teclado. También aprenderás cómo se utilizan los lectores de pantalla, ¡y te mostraré que no hay razón para tener miedo de usar uno!
Únete a mí y déjame mostrarte cómo la accesibilidad no limita tus soluciones o habilidades. ¡Al contrario, las hace más inclusivas!
Al final, serás capaz de:- Comprender los principios de WCAG y cómo están organizados- Conocer casos comunes en los que JavaScript es esencial para la accesibilidad- Crear enlaces, botones y elementos conmutables inclusivos- Utilizar regiones en vivo para errores y estados de carga- Integrar la accesibilidad en el flujo de trabajo de tu equipo de inmediato- Darte cuenta de que crear sitios web accesibles no es tan difícil como parece ;)
Creando aplicaciones React Native accesibles
React Summit Remote Edition 2021React Summit Remote Edition 2021
91 min
Creando aplicaciones React Native accesibles
Workshop
Scott Vinkle
Scott Vinkle
React Native es un framework utilizado para crear aplicaciones nativas de iOS y Android de una manera con la que los desarrolladores web ya pueden estar familiarizados. Pero, ¿cómo asegurarse de que tus aplicaciones React Native sean inclusivas y utilizables para todos? Scott compartirá consejos sobre cómo probar y construir aplicaciones React Native con accesibilidad integrada.

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

Accesibilidad en Discord
React Advanced Conference 2021React Advanced Conference 2021
22 min
Accesibilidad en Discord
Configurando las Pruebas de Accesibilidad de Axe
TestJS Summit 2021TestJS Summit 2021
30 min
Configurando las Pruebas de Accesibilidad de Axe
Top Content
Axe-core es un motor de pruebas de accesibilidad popular que es utilizado por Google, Microsoft y cientos de otras empresas para asegurar que sus sitios web sean accesibles. Axe-core incluso puede integrarse en muchos marcos de pruebas populares, herramientas e IDEs. En esta sesión avanzada, aprenderemos cómo configurar axe y sus integraciones para afinar cómo se ejecutan y revisan tus páginas y código en busca de violaciones de accesibilidad.
Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes
JSNation 2023JSNation 2023
10 min
Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes
Nuestros sistemas de diseño comúnmente incluyen componentes que se muestran encima de otro contenido: tooltips, date pickers, menús y enseñanza de la interfaz de usuario, por nombrar solo algunos. Las actualizaciones propuestas para la plataforma web están a punto de hacer que construir estos sea mucho más fácil. Es posible que ni siquiera necesites JavaScript. En esta charla, aprenderás todo sobre el próximo atributo 'popover', la modalidad y la capa superior.
a11y y TDD: Una Combinación Perfecta
JSNation 2022JSNation 2022
24 min
a11y y TDD: Una Combinación Perfecta
La accesibilidad ha sido el patito feo del desarrollo web durante mucho tiempo. A menudo me preguntan: "¿cuándo deberías probar la accesibilidad en tus aplicaciones?" Mi respuesta es simple: "¡desde el principio!". Independientemente del framework considerado - React, Svelte, Vue, YourOwn™️ - como desarrolladores, estamos en una posición privilegiada para ayudar al patito feo a convertirse en un hermoso cisne. ¿Cómo? Sumergiéndonos en el estanque y aprovechando el poder de las APIs de Javascript para construir los componentes adecuados para nuestras aplicaciones web. ¿Y cómo puedes saber si los estás construyendo correctamente? Combinando el Desarrollo Dirigido por Pruebas con la familia de bibliotecas de pruebas. ¿Listo para convertir tus aplicaciones web en cisnes?
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
React Advanced Conference 2023React Advanced Conference 2023
23 min
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
Se han desarrollado numerosas y notables nuevas experiencias de UX a lo largo de los años, como tarjetas que muestran una variedad de productos e ítems de listas clickeables con opciones de menú dinámicas, entre otros. Sin embargo, solo unos pocos son conscientes de los desafíos involucrados en la construcción de estas estructuras teniendo en cuenta la accesibilidad, y desafortunadamente, algunas de ellas son completamente inaccesibles.
En la charla de hoy, exploraremos algunos de estos patrones de UX web prevalentes y nos adentraremos en los desafíos ocultos que presentan. Si bien podemos ser capaces de mitigar algunos de estos problemas, otros sirven como cuentos de advertencia en accesibilidad.
Cómo hacer el bien sin hacer nada
React Advanced Conference 2021React Advanced Conference 2021
32 min
Cómo hacer el bien sin hacer nada
No hay discusión de que construir sitios web accesibles es una fuerza para el bien. Pero asegurarse de que nuestros sitios web y aplicaciones de React funcionen para todos puede llevar tiempo y no siempre es fácil hacerlo correctamente. Afortunadamente, invertir un poco de tiempo en tu flujo de trabajo de accesibilidad y configurar una serie de herramientas automatizadas te ahorrará toneladas de tiempo y energía a largo plazo.En esta charla, demostraré cómo puedes aprovechar las herramientas automatizadas, los estándares de código claramente documentados y un proceso de desarrollo bien definido para hacer que la construcción y prueba de aplicaciones de React accesibles sea pan comido. Discutiré las formas en que automatizo ciertos aspectos de mis flujos de trabajo de desarrollo para detectar errores de accesibilidad, definir y configurar pruebas y recorrer todo el ciclo de vida del desarrollo de funciones de accesibilidad utilizando un ejemplo del mundo real.