Log in
React Summit 2022React Summit 2022
workshops

Web Accessibility in JavaScript Apps

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

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

    javascriptweb appsaccessibility
    161 min
    30 Jun, 2022
    Video transcription, chapters and summary available for users with access.

    Watch more workshops on topic

    React Day Berlin 2022React Day Berlin 2022
    86 min
    Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
    Top Content
    WorkshopFree
    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.
    javascriptbuild tools
    TestJS Summit - January, 2021TestJS Summit - January, 2021
    173 min
    Testing Web Applications Using Cypress
    WorkshopFree
    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.
    javascripte2e testingcypresstesting
    Node Congress 2023Node Congress 2023
    63 min
    0 to Auth in an Hour Using NodeJS SDK
    WorkshopFree
    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
    javascriptauthenticationnode.js
    React Summit US 2023React Summit US 2023
    96 min
    Build a powerful DataGrid in few hours with Ag Grid
    WorkshopFree
    Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
    We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
    Prerequisites: Basic React and JavaScript
    Workshop level: Beginner
    javascriptreact
    React Summit 2023React Summit 2023
    109 min
    Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
    Workshop
    In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.
    We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.
    By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!
    accessibility
    Node Congress 2023Node Congress 2023
    49 min
    JavaScript-based full-text search with Orama everywhere
    Workshop
    In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.
    javascript

    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

    Remix Conf Europe 2022Remix Conf Europe 2022
    23 min
    Scaling Up with Remix and Micro Frontends
    Top Content
    Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
    javascriptarchitecturemicro-frontendsremix
    Remix Conf Europe 2022Remix Conf Europe 2022
    37 min
    Full Stack Components
    Top Content
    Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
    In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
    javascriptarchitecturefullstackremix
    JSNation Live 2021JSNation Live 2021
    29 min
    Making JavaScript on WebAssembly Fast
    Top Content
    JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
    javascriptwebassembly
    React Summit 2023React Summit 2023
    24 min
    Debugging JS
    Top Content
    As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
    javascriptweb developmentbest practicescase studydebug