Making Interactions Accessible to All Users

Rate this content
Bookmark
The video covers various ways users interact with the web, emphasizing the importance of web accessibility. It discusses how to use ARIA labels to enhance form accessibility and the need for proper input labels. The video also highlights the significance of semantic HTML elements like buttons and links, and the role of tools like Chrome DevTools and Lighthouse in accessibility testing. It explains how to make dynamic information accessible using ARIA live regions and the importance of providing alt text for images used as links. Additionally, the talk touches on the challenges of using non-semantic HTML elements and the necessity of testing component libraries for accessibility.

From Author:

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.

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

Watch video on a separate page

FAQ

Anuradha's favorite MC is Metin.

Anuradha discussed making interactions accessible to all users.

Users interact with the web by clicking, hovering, scrolling, using the tab key, typing in input boxes, and using assistive technologies such as screen readers and braille displays.

Accessibility is important because it ensures that resources and services are usable by everyone, regardless of their disabilities, allowing diverse users to interact with the web effectively.

Some assistive technologies mentioned include screen readers, braille readers, braille display switches, and the keyboard.

A common accessibility issue with buttons is the lack of visual feedback when navigating with a keyboard, often due to developers removing the default browser outline on focus.

You can make non-semantic HTML elements accessible by adding extra code such as tabindex and keydown event handlers, and by using ARIA labels for better screen reader support.

Semantic HTML elements like buttons and links should be used because they provide built-in accessibility features and expected behaviors that enhance user interaction and accessibility.

Labels in forms are important because they provide necessary information for screen readers, ensuring that users understand what each input field is for, especially when additional validation information is required.

To make dynamic information accessible, use ARIA live regions to ensure that screen readers announce changes or important messages, allowing users to stay informed about updates or errors.

Anuradha Kumari
Anuradha Kumari
30 min
02 Jun, 2023

Comments

Sign in or register to post your comment.

Video Transcription

1. Introduction to Web Interaction

Short description:

Today's topic is making interactions accessible to all users. We'll start with quick introductions and then explore how users interact with the web and how to make it accessible. I'm a frontend consultant and a Google Developers Expert. Let's define interaction as contact between the user and the interface. Examples of web interaction include clicking, hovering, scrolling, and typing.

Thanks, Metin. It's actually my honor as well to be introduced by Metin. He's like my favorite MC, so, yeah.

And hi, everyone. I hope you are all enjoying the conference today. First of all, I would like to ask you, again, to give a big round of applause to all the organizers as well as all the volunteers. They have been doing a great job in organizing this. So give it up. Awesome.

So my topic for today is making interactions accessible to all the users. Okay. Good. So the agenda is we will start with some quick introductions. Then we will see a bit how users interact with the web and how can we make it accessible, right?

So before we start, a bit of introduction about myself. I'm working as a frontend consultant here in Amsterdam. I'm a Google Developers Expert for web. Microsoft MVP. Women Techmakers Ambassador and Cloudinary Ambassador. So you can connect with me on LinkedIn or Twitter at anrada15 or on Twitter at Miracle Underscore 404. So let's get started.

What exactly is interaction? So in simple terms, it just means some contact has happened between the user and the interface. So user could have done some action and there is some response from the interface and it is called an interaction.

So how do we all interact with the web? Can I get some examples? What do we do to interact with the web? You open a website. What do we do? Click. Yes. Hover. Scroll. Tab. Tab key, yes. Awesome! So yeah, we also type on it when we see an input box or something.

2. Understanding Web Interaction and Accessibility

Short description:

We interact with the web in various ways, such as filling information, hovering, scrolling, and using tabs. Accessibility is crucial because we build for diverse users with different disabilities who interact with the web using various assistive technologies. We can access the web using a mouse, keyboard, screen readers, braille readers, and more. It's important to be mindful of the different ways users navigate and interact with the web.

We have to fill the information. We hover. We scroll. We tab of course. So these are the ways in which we interact. We will see more just in a while.

But before that, what is accessibility? Accessibility means making resources and services usable by everyone regardless of their disabilities. Now, why should we care about accessibility? Because whatever we build, we build it for our users. So users should be able to use it, right? We have pretty diverse users. They can have different kinds of disabilities. And since they have different types of disabilities, they also interact with the web in different ways. Different kinds of technologies and devices. And they are called assistive technologies.

So there are multiple ways in which we can be accessing the web. We can be using the normal mouse, we can be using keyboard, screen readers, braille readers, a braille display switch, and so on. There are lots more. So now let's revisit. Yes, we interact with web in these ways. But we also can use tab. We can use enter if we want to go there. If we cannot click. If we cannot use a mouse. So maybe we are just reliant on keyboard. So we will go and press enter on it. Spacebar, we can use tab, scape to move away from a model, we can use arrow keys to navigate. So there are lots of ways in which we can navigate. And this is something which we need to be mindful of. So I will be showing some examples now. And the link is on Code Sandbox and I will be sharing the slides in the end. So don't worry about that.

QnA

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

Don't Solve Problems, Eliminate Them
React Advanced Conference 2021React Advanced Conference 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Using useEffect Effectively
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Today's Talk explores the use of the useEffect hook in React development, covering topics such as fetching data, handling race conditions and cleanup, and optimizing performance. It also discusses the correct use of useEffect in React 18, the distinction between Activity Effects and Action Effects, and the potential misuse of useEffect. The Talk highlights the benefits of using useQuery or SWR for data fetching, the problems with using useEffect for initializing global singletons, and the use of state machines for handling effects. The speaker also recommends exploring the beta React docs and using tools like the stately.ai editor for visualizing state machines.
Design Systems: Walking the Line Between Flexibility and Consistency
React Advanced Conference 2021React Advanced Conference 2021
47 min
Design Systems: Walking the Line Between Flexibility and Consistency
Top Content
The Talk discusses the balance between flexibility and consistency in design systems. It explores the API design of the ActionList component and the customization options it offers. The use of component-based APIs and composability is emphasized for flexibility and customization. The Talk also touches on the ActionMenu component and the concept of building for people. The Q&A session covers topics such as component inclusion in design systems, API complexity, and the decision between creating a custom design system or using a component library.
React Concurrency, Explained
React Summit 2023React Summit 2023
23 min
React Concurrency, Explained
Top Content
Watch video: React Concurrency, Explained
React 18's concurrent rendering, specifically the useTransition hook, optimizes app performance by allowing non-urgent updates to be processed without freezing the UI. However, there are drawbacks such as longer processing time for non-urgent updates and increased CPU usage. The useTransition hook works similarly to throttling or bouncing, making it useful for addressing performance issues caused by multiple small components. Libraries like React Query may require the use of alternative APIs to handle urgent and non-urgent updates effectively.
Managing React State: 10 Years of Lessons Learned
React Day Berlin 2023React Day Berlin 2023
16 min
Managing React State: 10 Years of Lessons Learned
Top Content
Watch video: Managing React State: 10 Years of Lessons Learned
This Talk focuses on effective React state management and lessons learned over the past 10 years. Key points include separating related state, utilizing UseReducer for protecting state and updating multiple pieces of state simultaneously, avoiding unnecessary state syncing with useEffect, using abstractions like React Query or SWR for fetching data, simplifying state management with custom hooks, and leveraging refs and third-party libraries for managing state. Additional resources and services are also provided for further learning and support.
TypeScript and React: Secrets of a Happy Marriage
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript and React: Secrets of a Happy Marriage
Top Content
React and TypeScript have a strong relationship, with TypeScript offering benefits like better type checking and contract enforcement. Failing early and failing hard is important in software development to catch errors and debug effectively. TypeScript provides early detection of errors and ensures data accuracy in components and hooks. It offers superior type safety but can become complex as the codebase grows. Using union types in props can resolve errors and address dependencies. Dynamic communication and type contracts can be achieved through generics. Understanding React's built-in types and hooks like useState and useRef is crucial for leveraging their functionality.

Workshops on related topic

React Performance Debugging Masterclass
React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Hooks Tips Only the Pros Know
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React, TypeScript, and TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Designing Effective Tests With React Testing Library
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Top Content
Featured Workshop
Josh Justice
Josh Justice
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn
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
Next.js 13: Data Fetching Strategies
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Data Fetching Strategies
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introduction- Prerequisites for the workshop- Fetching strategies: fundamentals- Fetching strategies – hands-on: fetch API, cache (static VS dynamic), revalidate, suspense (parallel data fetching)- Test your build and serve it on Vercel- Future: Server components VS Client components- Workshop easter egg (unrelated to the topic, calling out accessibility)- Wrapping up