Building Accessible React Components

Manjula Dube

a11y and TDD: A Perfect Match

Rita Castro

Creating Accessible React Native Apps

Scott Vinkle

Achieving A11y Automation Testing

Ava Wroten

Automated accessibility testing with jest-axe and Lighthouse CI

Bonnie Schulkin

Button vs Div: What's the Big Deal Anyway?

React Accessibility: Beyond the Basics

Jen Luker

Design Systems Carnival! One Accessible Component, Many Pretty Masks

Kathleen McMahon

Accessibility as a First Class Citizen

Sophie Au

The Digital Accessibility Legal Landscape – why it matters for developers 

Lainey Feingold

Accessible CI/CD 

Accessible Component System Through Customization

Maya Shavin

Building UIs - By the People, for the People!

Nikhil Sharma

Accessibility at Discord

Brandon Dail

How to do Good Without Doing Anything

Yuraima Estevez

Configuring Axe Accessibility Tests

Steven Lambert

How to Catch a11y Defects During Unit and E2E Testing

Emily Xiong

Creating an Accessible Web Together in 5 Simple Steps

Shruti Kapoor

Accessibility Credit and How to Pay it

Eva Ferreira

Lifting Privacy and Accessibility Up

Ibrahim Cesar Bevilacqua

Thinking Differently About a11y – Accessible Website Design for the Neurospicy

Stephanie Shaw

Web Accessibility in JavaScript Apps

Sandrina Pereira

Making Interactions Accessible to All Users

Anuradha Kumari

Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications

My Accessibility Journey: the Quest for an Accessible Component Library

Asaf Shochet Avida

How to Start Your Journey Into Mobile Accessibility?

How Time-Consuming Is It to Build an Accessible Mobile App?

Alessandro Senese

Demystifying Web Accessibility

Josefine Schaefer

Conquering Forms in Vue

Justin Schroeder

How Popovers Are About to Become a Whole Lot Easier to Build

Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups

Hidde de Vries

WHOA, I Wrote This React App With My Voice!

Rizel Scarlett

Eitan Noy

A11y Beyond the Theory: Integrating Accessibility Testing Into Your Workflow

Lucky Nkosi

Automating Accessibility Testing for Your Component Library

Praveen Kumar D

Nested Interactive Elements: An Nightmare in Accessibility

Cat Johnson

React Advanced

React Advanced Conference 2021

DevOps.js

DevOps.js Conf 2024

CI/CD has been essential for any productive web product development and release. However, while accessibility is always an important aspect for any Web product included UI, it is often overlooked or considered as a time-consuming manual step, outside of the CI/CD flow. How can we automate accessibility testing within our CI/CD for better developer experience and team collaboration? What tools can we use to integrate and leverage accessibility compliance in our CI/CD? Join my talk and let's find out.

React Summit US

React Summit US 2023

A practical look at automating core accessibility testing and integrating it into your workflow.

Design System components are like guests at a Venetian Carnival, enjoying the festivities. One guest — the disclosure widget — wears three distinct masks, elevating a Carnival to a Masquerade Ball. Or… is it? What kind of Carnival are you attending if those masks get mixed? In this talk, you’ll learn the secret to creating a reusable — and accessible — component that can masquerade as many and give your component library access to the most exclusive of Carnival attractions.

React Advanced Conference 2023

Are you a developer tired of manual accessibility testing and the long feedback loops it entails? Do you want to efficiently audit and test the accessibility of your components while saving time and effort? Look no further! In this talk, we’ll explore how Storybook, a widely-used open source tool to document your UI components, can be used to automate accessibility testing.

There have been numerous remarkable new UX experiences developed over the years, such as cards displaying an array of products and clickable list items with dynamic menu options, among others. However, only a few are aware of the challenges involved in building these structures with accessibility in mind, and unfortunately, some of them are completely inaccessible.  In today's talk, we will explore some of these prevalent web UX patterns and delve into the hidden challenges they present. While we may be able to mitigate some of these issues, others serve as cautionary tales in accessibility.

Did you know that approximately 1 in 7 people are neurodivergent? Within that group there is an entire spectrum of people whose brains process information differently. However, as frontend engineers we often forget to take these idiosyncrasies into account, or choose to simply apply industry standards such as WCAG 2.1 AA without digging deeper. In this talk, Steph shares some of the ways you can create better web experiences for the neurodivergent.

You've probably build one of these before: tooltips, date pickers, menus, teaching UI… they're all examples of “popover” content. Good news: it's going to get a whole lot easier to build these, with some proposed web platform features. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, when to use modality and access to the top layer.

React Summit

React Summit 2023

Have you ever imagined writing code without even touching the keyboard? In this talk, I'll show you how I wrote a React app with my voice. But more importantly, I'll demonstrate how this technology can developers with disabilities to write code with ease and efficiency. Together, we'll explore the ways in which voice-activated AI assistants can revolutionize the way we think about coding. Join me as we explore the exciting possibilities of voice-activated AI programming in the React community and the ways in which it can make React coding more accessible and fun for everyone.

Are your websites accessible to all users? Are all the users able to interact with your application as intended regardless of their disabilities? Accessibility often remains an afterthought even today, and I am here to share how we can change that. In this talk, we will explore best practices for designing and building user interactions for websites that are accessible and user-friendly for our users. Using semantic HTML and ARIA attributes, we will cover strategies for interaction from a simple button, to navigation, to different form elements and custom components.

JS Nation

JSNation 2023

Most current UI libraries provide great user experience with a vast of components. But when it comes to heavy customization, and non-standard scenarios, especially for E-Commerce, they become hard to manage, scale or even slow down performance. How to create a UI library that provides users the most possible freedom in customizing components, while keeping our performance and scalability to the fullest? How much accessible we can provide out of the box to our users? How much customization freedom is enough? That's what my talk's about.

Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.

Vue.js Live Conference

Vue.js London 2023

Web forms are the connective tissue of the internet. Without them, people cannot request their health records, apply for university, order pad thai, or book a plane ticket. Yet too often, the tools we use to build those forms are a grab bag of libraries and DIY solutions that can result in a subpar user experience, poor accessibility, and low maintainability.In this talk, we will introduce FormKit — a form-building framework — and explore how this tool can empower Vue developers to write consistent, accessible, even delightful forms without spending a lifetime building them.Talk table of contents:<ul><li>- The problem with forms, why they’re hard</li><li>- Introduction to FormKit</li><li>- Input library</li><li>- Validation</li><li>- Accessibility</li><li>- Form architecture</li><li>- Generating forms from JSON</li><li>- Next steps and closing statements</li></ul>

React Day Berlin

React Day Berlin 2022

We want to learn about mobile accessibility to build an accessible mobile app, but where do we start? What does making an app accessible mean? What should we developers do? We will answer that by deep diving into the fundamentals of accessibility and assistive technologies.

Remix Conf Europe

Remix Conf Europe 2022

Accessibility is a decisive tool to make the internet a more inclusive place, it is absolutely crucial and despite the popular belief that only a small user group is affected, it benefits every single one of us. After a brief introduction, we will dive into practical tools to create more accessible websites and test for the most common web accessibility issues. Let's make the web more inclusive, one page at a time!

React Advanced Conference 2022

Creating web applications can be challenging. Creating accessible ones - even more so. However the real challenge lies in maintaining accessibility in your project since it requires knowledge and skills beyond those of traditional web development. To make this happen, one must choose the proper tools to keep the accessibility level high when code gets refactored, monitor the accessibility status and test it automatically during CI. To tackle these challenges, I’ll introduce a different approach that intertwines accessibility into the gut of the web application by creating an accessible React components library. I’ll discuss the principles, tools and techniques I use to test and maintain the accessibility level over time, and provide you with the initial recipe to drive the accessibility change in your organization.

The most common misconceptions about accessibility are that it is time-consuming or can be easily left as the last thing to be added. But, of course, this is not the case. We’ll look at how easy and quick adopting accessibility as a First-Class Citizen and, on the contrary, how difficult and time-consuming it is to add accessibility to an existing project.

Accessibility is often left as an afterthought in the software development cycle. However, with 5 simple techniques, we can build accessibility in our apps from the get-go. In this talk, I will talk about how to test for accessibility, aria tags you need to know, and how to use them. We will see a walkthrough of how jarring a non-accessible app can be for users, and how to fix it. We will also look at how Slack has built an accessible app while going above and beyond.

React Summit 2022

In React, Lifting State Up is a core concept. The aim of this talk is address two very important concerns in our landscape: privacy and accessibility and how we can achieve it and built in right from the components. This talk will show my work with a little open source component ad its evolution to address privacy and accessibility with the help of community and how we as developers need to care and ship the best for our people using our tools down to the most simple component.

JSNation 2022

What if you get to know that your UI is not usable to roughly 20% of the world? And also you might be sued due to it in many countries? It's normal to get terrified but thanks to a concept called accessibility that we can resolve this and make our UI more reachable and in a much exciting way with this talk!

Tech debt comes as free credit for our lack of experience, wrong deadlines or simply a mix of bad decisions; but no matter how it gets there, the cost is usually on accessibility. The first to sacrify is the one tool that allows all people to surf the web without constraints.How do we tackle a technical debt for accessibility? Where do we begin? How fast and far can we get? In this talk we will go through real-world examples on how to begin fixing the most important technical debt out there.

Accessibility has been web development's ugly duckling for quite some time now. I often get asked, "when should you test for a11y in your apps?" My answer is simple, "right from the start!". Regardless of the framework considered - React, Svelte, Vue, YourOwn™️ - as developers we are in a privileged position to help the ugly duckling grow into a beautiful swan. How? By diving deep into the pond and harnessing the power of Javascript APIs to build the right components for your web apps. And how can do you know you are building them right? By pairing Test Driven Development with the Testing Library family. Ready to grow your web apps into swans?

TestJS Summit

TestJS Summit 2021

Axe-core is a popular accessibility testing engine that is used Google, Microsoft, and hundreds of other companies to ensure that their websites are accessible. Axe-core can even integrate into many popular testing frameworks, tools, and IDEs. In this advanced session, we'll be learning how to configure axe and its integrations to fine tune how it runs and checks your pages and code for accessibility violations. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

For developers, it is better to catch any a11y defects during unit and e2e testings. This talk is going to show how to automate a11y testing using jest and cypress. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

There’s no arguing that building accessible websites is a force for good. But ensuring that our React websites and apps work for everyone can be time-consuming and isn’t always easy to get right. Luckily, investing a little bit of time on your accessibility workflow and setting up a series of automated tools will end up saving you tons of time and energy in the long run.In this talk I will demonstrate how you can leverage automated tools, clearly documented code standards and a well-defined development process in order to make building and testing accessible React apps a breeze. I will discuss the ways that I automate certain aspects of my development workflows to catch accessibility errors, define and set up tests and go through the entire lifecycle of accessibility feature development using a real-world example. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Finland

React Finland 2021

Digital accessibility is a human right of people with disabilities around the globe. That means developers have an important role to play in advancing human rights! Join U.S. disability rights lawyer Lainey Feingold for a practical interactive discussion about laws and policies around the globe that impact digital accessibility. Come learn best practices for digital accessibility and how we all can “put the law in our pocket” to help make the digital world inclusive for everyone. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit Remote Edition

React Summit Remote Edition 2020

Accessibility advocates often say "use the platform," but why? In this lightning talk, I'll be showing you implementation differences between the behavior of native HTML elements and their DIV counterparts. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit 2020

All too often A11Y is only an afterthought and will be added to a project "when we have time" i.e. never. But there are a many reasons why you should develop with a11y in mind from the start including some that will convince The Higher-Ups. We'll explore tools we can use to help us develop more accessibly and talk about some of the quirks and limitations that React Native has. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Accessibility in React has been a hot topic in the last few years, but in this talk, we'll be going beyond the basics. We'll discuss what disability means beyond what you've heard before, and then use code examples to learn why semantic HTML is helpful, and when it's just not enough. We'll then look into tooling, and talk about how you can introduce accessibility testing into your teams and existing code. You'll leave with the tools and knowledge to make a difference starting today. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

TestJS Summit - January, 2021

Accessibility testing has come a long way in recent years. We'll dive into how EmberJS prioritized A11y with meaningful RFC's, Addons, tooling and docs. Most importantly, we'll discuss how these successes can be applied to your very own apps be they Vue, React, Angular or anything else! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Summit Remote Edition 2021

With the growing community and great tutorials, it's fairly easy nowadays to start building web applications with React. However, the vital aspect of accessibility is often missing which leads to web applications creating exclusions. Nothing in React prevents us from building accessible web experiences, but we need to learn to harness its power in the right way while dealing with some unique challenges caused creating web pages with JavaScript. This talk will focus on how to solve these issues in the context of React. It'll also emphasis why it is important to build accessible web apps. In the end, I will also share some cool stuff and tools in order to make your web app more accessible. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

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!

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

Do your automated tests include a11y checks? This workshop will cover how to get started with jest-axe to detect code-based accessibility violations, and Lighthouse CI to validate the accessibility of fully rendered pages. No amount of automated tests can replace manual accessibility testing, but these checks will make sure that your manual testers aren't doing more work than they need to. <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

React Native is a framework used to create native iOS and Android apps in a way web developers may already be familiar with. But how do you ensure your React Native apps are inclusive and usable everyone? Scott will share tips on how to test and build React Native apps with accessibility baked-in! <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#accessibility