From the course: React: Accessibility
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
How to ensure events are accessible by keyboard - React.js Tutorial
From the course: React: Accessibility
How to ensure events are accessible by keyboard
- [Instructor] In this lesson, let's implement some features to make mouse and pointer events accessible via keyboard. I currently have the company homepage running locally on my computer. On this homepage, I've added a browse link in the nav bar, that triggers a dropdown menu. I can click browse, to show the dropdown, and click away to close it. But what happens if I try to access this open-close feature via keyboard? Let's give it a try. Now, if I click the navigation bar, and tab to the browse link, I can click enter to trigger the dropdown menu. But if I continue to tab, we can see that once I get through all of the dropdown options, and onto the next elements in the page, the dropdown menu remains open. This feature causes an issue. For keyboard users, it blocks elements on the website. Ideally, we would want to be able to tab through all of the dropdown options. And when we move to the next element, in…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.