Accesibilidad web en aplicaciones JavaScript

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
    Rate this content
    Bookmark

    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 ;)

    This workshop has been presented at React Summit 2022, check out the latest edition of this React Conference.

    FAQ

    Una estrategia efectiva es mostrar a la dirección cómo la accesibilidad influye positivamente en la vida de las personas, mediante ejemplos y vídeos de usuarios reales que se benefician de sitios web accesibles. Esto puede ayudar a generar empatía y comprensión sobre la importancia de la accesibilidad como un derecho humano esencial.

    Puedes utilizar herramientas como Accessibility Insights for Web que proporcionan verificaciones automatizadas y te ayudan a detectar problemas de accesibilidad. Sin embargo, estas herramientas solo detectan alrededor del 30-40% de los problemas, por lo que también es importante realizar pruebas manuales y asegurarse de que el sitio web sea funcional para usuarios con diversas necesidades.

    La preferencia 'prefiere-reducir-movimiento' se utiliza para detectar si los usuarios han solicitado que se minimicen las animaciones o los movimientos automáticos en las páginas web. Se puede implementar en CSS y JavaScript para ajustar o eliminar animaciones y hacer que el sitio sea más cómodo para usuarios que puedan experimentar malestar con movimientos constantes o rápidos.

    Es recomendable no envolver todo el bloque de contenido con un enlace, ya que esto puede ser confuso para los lectores de pantalla. En su lugar, puedes utilizar un enlace al final del contenido y hacer que cualquier clic dentro del bloque actúe como un clic en el enlace, manteniendo una estructura clara y accesible.

    Una superposición de accesibilidad es un widget que se instala en un sitio web con la afirmación de que hace que el sitio sea más accesible. Sin embargo, en realidad, puede hacer que el sitio web sea menos accesible y no soluciona los problemas de accesibilidad subyacentes. Es más efectivo arreglar la accesibilidad directamente en el sitio web en lugar de usar estas superposiciones.

    Sandrina Pereira
    Sandrina Pereira
    161 min
    30 Jun, 2022

    Comments

    Sign in or register to post your comment.
    Video Summary and Transcription
    La masterclass sobre accesibilidad web en aplicaciones JavaScript abarca diversos temas, incluyendo enrutamiento, enlaces, botones, interfaces conmutables, manejo de errores e interfaces personalizadas. La accesibilidad no es solo para personas ciegas, también ayuda a personas con discapacidades visuales, auditivas, motoras y cognitivas. Las Pautas de Accesibilidad al Contenido Web (WCAG) proporcionan directrices para hacer que la web sea accesible. Los atributos ARIA pueden mejorar la accesibilidad para los lectores de pantalla, pero deben usarse selectivamente. Es importante realizar pruebas con personas reales y considerar sus comentarios para la accesibilidad. Priorizar la accesibilidad y crear componentes personalizados inclusivos son cruciales. Reducir las animaciones según las preferencias del usuario y utilizar herramientas como Accessibility Insights for Web puede ayudar a mejorar la accesibilidad. Demostrar el impacto de la accesibilidad en la vida de las personas puede ayudar a convencer a la dirección de priorizar las mejoras de accesibilidad.
    Video transcription and chapters available for users with access.

    Watch more workshops on topic

    Domina los Patrones de JavaScript
    JSNation 2024JSNation 2024
    145 min
    Domina los Patrones de JavaScript
    Top Content
    Featured Workshop
    Adrian Hajdin
    Adrian Hajdin
    Durante esta masterclass, los participantes revisarán los patrones esenciales de JavaScript que todo desarrollador debería conocer. A través de ejercicios prácticos, ejemplos del mundo real y discusiones interactivas, los asistentes profundizarán su comprensión de las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables. Al final de la masterclass, los participantes ganarán una nueva confianza en su capacidad para escribir código JavaScript de alta calidad que resista el paso del tiempo.
    Puntos Cubiertos:
    1. Introducción a los Patrones de JavaScript2. Patrones Fundamentales3. Patrones de Creación de Objetos4. Patrones de Comportamiento5. Patrones Arquitectónicos6. Ejercicios Prácticos y Estudios de Caso
    Cómo Ayudará a los Desarrolladores:
    - Obtener una comprensión profunda de los patrones de JavaScript y sus aplicaciones en escenarios del mundo real- Aprender las mejores prácticas para organizar el código, resolver desafíos comunes y diseñar arquitecturas escalables- Mejorar las habilidades de resolución de problemas y la legibilidad del código- Mejorar la colaboración y la comunicación dentro de los equipos de desarrollo- Acelerar el crecimiento de la carrera y las oportunidades de avance en la industria del software
    Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
    React Summit 2024React Summit 2024
    92 min
    Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
    Featured Workshop
    Vivek Nayyar
    Vivek Nayyar
    Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
    Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
    React Day Berlin 2022React Day Berlin 2022
    86 min
    Uso de CodeMirror para construir un editor de JavaScript con Linting y AutoCompletado
    Top Content
    WorkshopFree
    Hussien Khayoon
    Kahvi Patel
    2 authors
    Usar una biblioteca puede parecer fácil a primera vista, pero ¿cómo eliges la biblioteca correcta? ¿Cómo actualizas una existente? ¿Y cómo te abres camino a través de la documentación para encontrar lo que quieres?
    En esta masterclass, discutiremos todos estos puntos finos mientras pasamos por un ejemplo general de construcción de un editor de código usando CodeMirror en React. Todo mientras compartimos algunas de las sutilezas que nuestro equipo aprendió sobre el uso de esta biblioteca y algunos problemas que encontramos.
    Pruebas de Aplicaciones Web utilizando Cypress
    TestJS Summit - January, 2021TestJS Summit - January, 2021
    173 min
    Pruebas de Aplicaciones Web utilizando Cypress
    WorkshopFree
    Gleb Bahmutov
    Gleb Bahmutov
    Este masterclass te enseñará los conceptos básicos de cómo escribir pruebas de extremo a extremo utilizando Cypress Test Runner.
    Cubriremos la escritura de pruebas, abarcando todas las características de la aplicación, estructurando las pruebas, interceptando solicitudes de red y configurando los datos del backend.
    Cualquier persona que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir el masterclass.
    Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
    React Day Berlin 2023React Day Berlin 2023
    149 min
    Desatando los Componentes del Servidor React: Una Inmersión Profunda en el Desarrollo Web de la Próxima Generación
    Workshop
    Maurice de Beijer
    Maurice de Beijer
    ¡Prepárate para potenciar tus habilidades de desarrollo web con los Componentes del Servidor React! En esta inmersiva masterclass de 3 horas, desbloquearemos el potencial completo de esta tecnología revolucionaria y exploraremos cómo está transformando la forma en que los desarrolladores construyen aplicaciones web rápidas y eficientes.
    Únete a nosotros mientras nos adentramos en el emocionante mundo de los Componentes del Servidor React, que combinan sin problemas el renderizado del lado del servidor con la interactividad del lado del cliente para un rendimiento y una experiencia de usuario inigualables. Obtendrás experiencia práctica a través de ejercicios prácticos, ejemplos del mundo real y orientación experta sobre cómo aprovechar el poder de los Componentes del Servidor en tus propios proyectos.
    A lo largo de la masterclass, cubriremos temas esenciales, incluyendo:- Entender las diferencias entre los Componentes del Servidor y del Cliente- Implementar Componentes del Servidor para optimizar la obtención de datos y reducir el tamaño del paquete JavaScript- Integrar Componentes del Servidor y del Cliente para una experiencia de usuario fluida- Estrategias para pasar datos efectivamente entre componentes y gestionar el estado- Consejos y mejores prácticas para maximizar los beneficios de rendimiento de los Componentes del Servidor React
    0 a Auth en una Hora Usando NodeJS SDK
    Node Congress 2023Node Congress 2023
    63 min
    0 a Auth en una Hora Usando NodeJS SDK
    WorkshopFree
    Asaf Shen
    Asaf Shen
    La autenticación sin contraseña puede parecer compleja, pero es fácil de agregar a cualquier aplicación utilizando la herramienta adecuada.
    Mejoraremos una aplicación JS de pila completa (backend de Node.JS + frontend de React) para autenticar usuarios con OAuth (inicio de sesión social) y contraseñas de un solo uso (correo electrónico), incluyendo:- Autenticación de usuario - Administrar interacciones de usuario, devolver JWT de sesión / actualización- Gestión y validación de sesiones - Almacenar la sesión para solicitudes de cliente posteriores, validar / actualizar sesiones
    Al final del masterclass, también tocaremos otro enfoque para la autenticación de código utilizando Flujos Descope en el frontend (flujos de arrastrar y soltar), manteniendo solo la validación de sesión en el backend. Con esto, también mostraremos lo fácil que es habilitar la biometría y otros métodos de autenticación sin contraseña.
    Tabla de contenidos- Una breve introducción a los conceptos básicos de autenticación- Codificación- Por qué importa la autenticación sin contraseña
    Requisitos previos- IDE de tu elección- Node 18 o superior

    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

    Escalando con Remix y Micro Frontends
    Remix Conf Europe 2022Remix Conf Europe 2022
    23 min
    Escalando con Remix y Micro Frontends
    Top Content
    This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
    Componentes de Full Stack
    Remix Conf Europe 2022Remix Conf Europe 2022
    37 min
    Componentes de Full Stack
    Top Content
    RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
    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.
    Haciendo JavaScript en WebAssembly Rápido
    JSNation Live 2021JSNation Live 2021
    29 min
    Haciendo JavaScript en WebAssembly Rápido
    Top Content
    WebAssembly enables optimizing JavaScript performance for different environments by deploying the JavaScript engine as a portable WebAssembly module. By making JavaScript on WebAssembly fast, instances can be created for each request, reducing latency and security risks. Initialization and runtime phases can be improved with tools like Wiser and snapshotting, resulting in faster startup times. Optimizing JavaScript performance in WebAssembly can be achieved through techniques like ahead-of-time compilation and inline caching. WebAssembly usage is growing outside the web, offering benefits like isolation and portability. Build sizes and snapshotting in WebAssembly depend on the application, and more information can be found on the Mozilla Hacks website and Bike Reliance site.
    ¿Webpack en 5 años?
    JSNation 2022JSNation 2022
    26 min
    ¿Webpack en 5 años?
    Top Content
    In the last 10 years, Webpack has shaped the way we develop web applications by introducing code splitting, co-locating style sheets and assets with JavaScript modules, and enabling bundling for server-side processing. Webpack's flexibility and large plugin system have also contributed to innovation in the ecosystem. The initial configuration for Webpack can be overwhelming, but it is necessary due to the complexity of modern web applications. In larger scale applications, there are performance problems in Webpack due to issues with garbage collection, leveraging multiple CPUs, and architectural limitations. Fixing problems in Webpack has trade-offs, but a rewrite could optimize architecture and fix performance issues.
    Hacia una Biblioteca Estándar para Runtimes de JavaScript
    Node Congress 2022Node Congress 2022
    34 min
    Hacia una Biblioteca Estándar para Runtimes de JavaScript
    Top Content
    There is a need for a standard library of APIs for JavaScript runtimes, as there are currently multiple ways to perform fundamental tasks like base64 encoding. JavaScript runtimes have historically lacked a standard library, causing friction and difficulty for developers. The idea of a small core has both benefits and drawbacks, with some runtimes abusing it to limit innovation. There is a misalignment between Node and web browsers in terms of functionality and API standards. The proposal is to involve browser developers in conversations about API standardization and to create a common standard library for JavaScript runtimes.