Web Accessibility in JavaScript Apps

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

    Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!


    In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!


    Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!


    By the end, you will:

    - Understand WCAG principles and how they're organized

    - Know common cases where JavaScript is essential to accessibility

    - Create inclusive links, buttons and toggleble elements

    - Use live regions for errors and loading states

    - Integrate accessibility into your team workflow right away

    - Realize that creating accessible websites isn’t as hard as it sounds ;)

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

    FAQ

    Web accessibility ensures that websites, tools, and technologies are designed and developed so that people with disabilities can use them. It involves making your web content and navigation accessible to everyone, including those who have disabilities affecting their hearing, movement, sight, or cognitive ability.

    You can make JavaScript applications more accessible by ensuring interactive elements are keyboard accessible, providing appropriate ARIA labels and roles for custom components, managing focus for dynamic content changes, and implementing error handling and state changes in a way that is perceivable to all users.

    Best practices for using ARIA include using native HTML elements when possible, using ARIA roles and properties only when necessary, ensuring that ARIA attributes are used in accordance with the spec, and testing accessibility with actual screen readers and other assistive technologies to ensure compatibility.

    Animations can impact accessibility by causing issues for users with motion sensitivity or other visual impairments. They can be managed by providing options to reduce or disable animations, using the 'prefers-reduced-motion' media query to respect user preferences for reduced motion, and ensuring animations do not distract from important content.

    Tools like the Axe Accessibility Checker, WAVE, and Lighthouse can help test web accessibility. These tools provide reports on accessibility violations and suggest fixes. Additionally, manual testing with screen readers, keyboard-only navigation, and consulting WCAG guidelines are crucial for comprehensive accessibility auditing.

    Sandrina Pereira
    Sandrina Pereira
    161 min
    30 Jun, 2022

    Comments

    Sign in or register to post your comment.

    Video Summary and Transcription

    The workshop on web accessibility in JavaScript apps covers various topics including routing, links, buttons, toggle interfaces, error handling, and custom interfaces. Accessibility is not just for blind people, it helps people with visual impairments, hearing impairments, motor difficulties, and cognitive challenges. The Web Content Accessibility Guidelines (WCAG) provides guidelines for making the web accessible. ARIA attributes can improve accessibility for screen readers, but should be used selectively. Testing with real people and considering their feedback is important for accessibility. Prioritizing accessibility and creating inclusive custom components are crucial. Reducing animations based on user preferences and using tools like Accessibility Insights for Web can help improve accessibility. Demonstrating the impact of accessibility on people's lives can help convince management to prioritize accessibility improvements.
    Video transcription and chapters available for users with access.

    Watch more workshops on topic

    Master JavaScript Patterns
    JSNation 2024JSNation 2024
    145 min
    Master JavaScript Patterns
    Featured Workshop
    Adrian Hajdin
    Adrian Hajdin
    During this workshop, participants will review the essential JavaScript patterns that every developer should know. Through hands-on exercises, real-world examples, and interactive discussions, attendees will deepen their understanding of best practices for organizing code, solving common challenges, and designing scalable architectures. By the end of the workshop, participants will gain newfound confidence in their ability to write high-quality JavaScript code that stands the test of time.
    Points Covered:
    1. Introduction to JavaScript Patterns2. Foundational Patterns3. Object Creation Patterns4. Behavioral Patterns5. Architectural Patterns6. Hands-On Exercises and Case Studies
    How It Will Help Developers:
    - Gain a deep understanding of JavaScript patterns and their applications in real-world scenarios- Learn best practices for organizing code, solving common challenges, and designing scalable architectures- Enhance problem-solving skills and code readability- Improve collaboration and communication within development teams- Accelerate career growth and opportunities for advancement in the software industry
    Integrating LangChain with JavaScript for Web Developers
    React Summit 2024React Summit 2024
    92 min
    Integrating LangChain with JavaScript for Web Developers
    Featured Workshop
    Vivek Nayyar
    Vivek Nayyar
    Dive into the world of AI with our interactive workshop designed specifically for web developers. "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" offers a unique opportunity to bridge the gap between AI and web development. Despite the prominence of Python in AI development, the vast potential of JavaScript remains largely untapped. This workshop aims to change that.Throughout this hands-on session, participants will learn how to leverage LangChain—a tool designed to make large language models more accessible and useful—to build dynamic AI agents directly within JavaScript environments. This approach opens up new possibilities for enhancing web applications with intelligent features, from automated customer support to content generation and beyond.We'll start with the basics of LangChain and AI models, ensuring a solid foundation even for those new to AI. From there, we'll dive into practical exercises that demonstrate how to integrate these technologies into real-world JavaScript projects. Participants will work through examples, facing and overcoming the challenges of making AI work seamlessly on the web.This workshop is more than just a learning experience; it's a chance to be at the forefront of an emerging field. By the end, attendees will not only have gained valuable skills but also created AI-enhanced features they can take back to their projects or workplaces.Whether you're a seasoned web developer curious about AI or looking to expand your skillset into new and exciting areas, "Hands-On AI: Integrating LangChain with JavaScript for Web Developers" is your gateway to the future of web development. Join us to unlock the potential of AI in your web projects, making them smarter, more interactive, and more engaging for users.
    Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
    React Day Berlin 2022React Day Berlin 2022
    86 min
    Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
    Top Content
    WorkshopFree
    Hussien Khayoon
    Kahvi Patel
    2 authors
    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.
    Testing Web Applications Using Cypress
    TestJS Summit - January, 2021TestJS Summit - January, 2021
    173 min
    Testing Web Applications Using Cypress
    WorkshopFree
    Gleb Bahmutov
    Gleb Bahmutov
    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.
    React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
    React Day Berlin 2023React Day Berlin 2023
    149 min
    React Server Components Unleashed: A Deep Dive into Next-Gen Web Development
    Workshop
    Maurice de Beijer
    Maurice de Beijer
    Get ready to supercharge your web development skills with React Server Components! In this immersive, 3-hour workshop, we'll unlock the full potential of this revolutionary technology and explore how it's transforming the way developers build lightning-fast, efficient web applications.
    Join us as we delve into the exciting world of React Server Components, which seamlessly blend server-side rendering with client-side interactivity for unparalleled performance and user experience. You'll gain hands-on experience through practical exercises, real-world examples, and expert guidance on how to harness the power of Server Components in your own projects.
    Throughout the workshop, we'll cover essential topics, including:- Understanding the differences between Server and Client Components- Implementing Server Components to optimize data fetching and reduce JavaScript bundle size- Integrating Server and Client Components for a seamless user experience- Strategies for effectively passing data between components and managing state- Tips and best practices for maximizing the performance benefits of React Server Components
    0 to Auth in an Hour Using NodeJS SDK
    Node Congress 2023Node Congress 2023
    63 min
    0 to Auth in an Hour Using NodeJS SDK
    WorkshopFree
    Asaf Shen
    Asaf Shen
    Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
    We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
    At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
    Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
    Prerequisites- IDE for your choice- Node 18 or higher

    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

    Scaling Up with Remix and Micro Frontends
    Remix Conf Europe 2022Remix Conf Europe 2022
    23 min
    Scaling Up with Remix and 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.
    Full Stack Components
    Remix Conf Europe 2022Remix Conf Europe 2022
    37 min
    Full Stack Components
    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.
    Debugging JS
    React Summit 2023React Summit 2023
    24 min
    Debugging JS
    Top Content
    Watch video: Debugging JS
    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.
    Making JavaScript on WebAssembly Fast
    JSNation Live 2021JSNation Live 2021
    29 min
    Making JavaScript on WebAssembly Fast
    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 in 5 Years?
    JSNation 2022JSNation 2022
    26 min
    Webpack in 5 Years?
    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.
    Towards a Standard Library for JavaScript Runtimes
    Node Congress 2022Node Congress 2022
    34 min
    Towards a Standard Library for JavaScript Runtimes
    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.