Log in
React conferences
React Summit 2022React Summit 2022
workshops

Accesibilidad web en aplicaciones JavaScript

Sandrina Pereira
Sandrina Pereira
Remote
Recording available for Multipass and Full ticket holders
Please login if you have one.
Get Multipass
    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 ;)

    FAQ

    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.

    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 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.

    javascriptweb appsaccessibility
    Sandrina Pereira
    Sandrina Pereira
    161 min
    30 Jun, 2022

    Comments

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

    Watch more workshops on topic

    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.
    javascriptbuild tools
    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.
    e2e testingjavascripttestingcypress
    Construye un potente DataGrid en pocas horas con Ag Grid
    React Summit US 2023React Summit US 2023
    96 min
    Construye un potente DataGrid en pocas horas con Ag Grid
    WorkshopFree
    Mike Ryan
    Mike Ryan
    ¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo empezar con AG Grid, cómo podemos habilitar la ordenación y el filtrado de datos en la cuadrícula, la representación de celdas y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
    Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto e impulsar la innovación. En esta masterclass, verás lo fácil que es empezar con AG Grid.
    Prerrequisitos: React y JavaScript básicos
    Nivel de la masterclass: Principiante
    javascriptreact
    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
    javascriptauthenticationnode.js
    Construye una Potente Rejilla de Datos con AG Grid
    React Summit 2024React Summit 2024
    168 min
    Construye una Potente Rejilla de Datos con AG Grid
    WorkshopFree
    Brian Love
    Brian Love
    ¿Tu aplicación React necesita mostrar eficientemente una gran cantidad de datos en una rejilla? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor rejilla JavaScript del mundo y está repleta de funciones, altamente eficiente y extensible. En este masterclass, aprenderás cómo empezar con AG Grid, cómo habilitar la ordenación y filtrado de datos en la rejilla, la personalización y renderización de celdas, y más. Saldrás de este masterclass gratuito de 3 horas equipado con los conocimientos para implementar AG Grid en tu aplicación React.
    javascriptreact
    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!
    accessibility

    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
    Adrien Baron
    Adrien Baron
    Maker of clashofstats.com, Vue GWT and Tiny Frontend
    ¿Tienes un producto grande construido por muchos equipos? ¿Estás luchando para lanzar a menudo? ¿Se convirtió tu frontend en un monolito inmantenible masivo? Si, como yo, has respondido sí a cualquiera de esas preguntas, ¡esta charla es para ti! Te mostraré exactamente cómo puedes construir una arquitectura de micro frontend con Remix para resolver esos desafíos.
    javascriptmicro-frontendsarchitectureremix
    Componentes de Full Stack
    Remix Conf Europe 2022Remix Conf Europe 2022
    37 min
    Componentes de Full Stack
    Top Content
    Kent C. Dodds
    Kent C. Dodds
    Creator of EpicWeb.dev, EpicReact.Dev, TestingJavaScript.com
    Remix es un marco de trabajo web que te ofrece el modelo mental simple de una aplicación de múltiples páginas (MPA) pero el poder y las capacidades de una aplicación de una sola página (SPA). Uno de los grandes desafíos de las SPA es la gestión de la red que resulta en una gran cantidad de indirecciones y código defectuoso. Esto es especialmente notable en el estado de la aplicación que Remix elimina por completo, pero también es un problema en los componentes individuales que se comunican con un punto final de backend de un solo propósito (como una búsqueda de combobox, por ejemplo).
    En esta charla, Kent demostrará cómo Remix te permite construir componentes de interfaz de usuario complejos que están conectados a un backend de la manera más simple y poderosa que hayas visto. Dejándote tiempo para relajarte con tu familia o lo que sea que hagas para divertirte.
    javascriptarchitecturefullstackremix
    Haciendo JavaScript en WebAssembly Rápido
    JSNation Live 2021JSNation Live 2021
    29 min
    Haciendo JavaScript en WebAssembly Rápido
    Top Content
    Lin Clark
    Lin Clark
    Fastly
    JavaScript en el navegador se ejecuta muchas veces más rápido de lo que lo hacía hace dos décadas. Y eso sucedió porque los proveedores de navegadores pasaron ese tiempo trabajando en intensivas optimizaciones de rendimiento en sus motores JavaScript.Debido a este trabajo de optimización, JavaScript ahora se está ejecutando en muchos lugares además del navegador. Pero todavía hay algunos entornos donde los motores JS no pueden aplicar esas optimizaciones de la manera correcta para hacer las cosas rápidas.Estamos trabajando para resolver esto, comenzando una nueva ola de trabajo de optimización de JavaScript. Estamos mejorando el rendimiento de JavaScript para entornos completamente diferentes, donde se aplican reglas diferentes. Y esto es posible gracias a WebAssembly. En esta charla, explicaré cómo funciona todo esto y qué vendrá a continuación.
    javascriptwebassembly
    Depuración de JS
    React Summit 2023React Summit 2023
    24 min
    Depuración de JS
    Top Content
    Mark Erikson
    Mark Erikson
    Replay.io
    Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.
    web developmentjavascriptcase studybest practicesdebug
    ¿Webpack en 5 años?
    JSNation 2022JSNation 2022
    26 min
    ¿Webpack en 5 años?
    Top Content
    Tobias Koppers
    Tobias Koppers
    Webpack and Turbopack Creator
    ¿Qué podemos aprender de los últimos 10 años para los próximos 5 años? ¿Hay un futuro para Webpack? ¿Qué necesitamos hacer ahora?
    javascriptbuilders and founderswebpack
    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
    James Snell
    James Snell
    Workers team @Cloudflare
    Puedes revisar las diapositivas de la charla de James aquí.
    javascriptnode.jscomponent library