Log in
React Conferences
React Advanced 2023React Advanced 2023
Talk Videos
EN

Video: Nested Interactive Elements: An Nightmare in Accessibility

Cat Johnson
Cat Johnson
Khan Academy
Rate this content
Bookmark
Read FAQ and transcription
accessibility
Video Summary and Transcription
The video addresses the challenges posed by nested interactive elements, which are interactive elements nested within other interactive elements, and their impact on web accessibility. It highlights the accessibility issues caused by these elements, particularly how screen readers struggle to interpret them, leading to garbled outputs. The talk suggests strategies to improve accessibility, such as using CSS overlay techniques instead of nesting, and restructuring the DOM to assign appropriate roles like 'listitem' or 'group'. The video also discusses the importance of unnesting interactive elements and limiting developer configurations to prevent accessibility conflicts. Additionally, the video emphasizes the continuous evolution of accessible solutions and the need for sharing learnings and documentation to improve accessibility across websites. Techniques like adjusting role properties and engaging with users for feedback are recommended to create a more cohesive experience.

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

Available in Español: Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad

FAQ

People can reach out to Cat Johnson at her website, catinthemachines.com.

The main topic of the talk is nested interactive elements and their impact on accessibility.

Cat Johnson specializes in front-end web components, specifically React components, with a focus on accessibility.

Cat Johnson's team decided to restructure the DOM elements to use appropriate roles, such as changing outer containers to 'listitem' or 'group', and ensuring that inner clickable elements are properly designated as buttons.

Cat Johnson received multiple accessibility bugs related to nested interactive elements in the Your Info page on account.Microsoft.com, which prompted her to investigate the issue further.

Nested interactive elements are interactive elements that are nested within other interactive elements, such as a button within a link.

The outcome was improved accessibility for screen reader users, better documentation within her organization, and sharing her findings to help others avoid similar issues.

The speaker of the talk is Catherine Johnson, also known as Cat Johnson.

Developers can avoid nested interactive elements by not creating them in the first place, unnesting elements where possible, limiting developer configurations, and using CSS to overlay elements instead of nesting them.

Nested interactive elements are problematic because screen readers, which build off of basic HTML, often have difficulty reading and interpreting them, leading to garbled or unclear output for users.

Video transcription and chapters available for users with access.
Available in other languages:

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

Accessibility at Discord
React Advanced 2021React Advanced 2021
22 min
Accessibility at Discord
Brandon Dail
Brandon Dail
Discord
This Talk discusses the accessibility efforts at Discord, focusing on keyboard navigation and the challenges faced with implementing focus rings and outlines. The speaker showcases a unified focus ring system and a saturation slider to address accessibility concerns. They also highlight the implementation of role colors and the use of CSS filters for accessibility improvements. The Talk concludes with insights on runtime accessibility checking and the development of a performant core runtime system for checking accessibility issues.
accessibilitycase study
Configuring Axe Accessibility Tests
TestJS Summit 2021TestJS Summit 2021
30 min
Configuring Axe Accessibility Tests
Top Content
Steven Lambert
Steven Lambert
Deque Systems
AXe is an accessibility engine for automated web UI testing that runs a set of rules to test for accessibility problems. It can be configured to disable or enable specific rules and run based on tags. Axe provides various options, but axe linter does not support all options. The importance of investing time and resources in accessibility is emphasized, as it benefits not only those with disabilities but improves the web for everyone. Manual testing is also highlighted as a necessary complement to automated tests for addressing accessibility issues.
axe core reacttestingaccessibility
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
JSNation 2023JSNation 2023
10 min
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
Hidde de Vries
Hidde de Vries
Web Developer, Netherlands
The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.
design systemsaccessibility
Building a Fast Website for Every Single Visitor
React Advanced 2024React Advanced 2024
31 min
Building a Fast Website for Every Single Visitor
Medhat Dawoud
Medhat Dawoud
Senior Software Engineer at Miro and a Google Developer Expert in Web Technologies
This talk focuses on building a fast and accessible website for all users, highlighting the importance of performance and user experience optimization. It emphasizes the need for adaptive implementation to cater to different devices and user conditions. The talk also discusses the factors beyond the developer's control, such as screen size, browsers, devices, internet connection, and sitting position. It highlights the significance of optimizing image components for various devices and the role of browser support and rendering engines. The speaker discusses the use of future APIs and the challenges of browser compatibility, as well as optimizing image formats and bundler compatibility. The talk provides insights on controlling bundler and device compatibility, optimizing CPU usage, internet connection, and JavaScript form submission. It concludes with a proposal to respond with save data instead of effective type for limited internet connections and recommends using React with adaptive hooks for better user experiences. Overall, the talk covers essential aspects of building a fast and accessible website.
performanceaccessibilitycase study
a11y and TDD: A Perfect Match
JSNation 2022JSNation 2022
24 min
a11y and TDD: A Perfect Match
Rita Castro
Rita Castro
Mentorship available
Volkswagen Digital Solutions | SDC Lisbon
This Talk explores the intersection of accessibility and test-driven development (TDD) in software development. TDD is a process that involves writing tests before writing production code, providing a safety net for code changes. The Talk demonstrates how to apply TDD principles to real-life examples, such as filling out a form, and emphasizes the importance of user-centric testing. By using atomic design principles, code can be organized in a clean and easy way. The Talk also discusses the use of labels and test IDs in tests for improved accessibility.
testingaccessibility
How to do Good Without Doing Anything
React Advanced 2021React Advanced 2021
32 min
How to do Good Without Doing Anything
Yuraima Estevez
Yuraima Estevez
Shopify
Accessibility is about making sure everyone can participate on the web, regardless of disability. Automated tools like Lighthouse and React Axe help identify accessibility errors and provide guidance on fixing them. Unit tests validate ARIA attributes and keyboard navigation, while integration and end-to-end tests focus on outcomes and simulate user experiences. Cypress.io is an open-source testing framework with excellent accessibility support. Implementing small changes leads to a deep understanding of web accessibility and bug resilience.
reactaccessibility

Workshops on related topic

Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
Workshop
Asaf Shochet Avida
Eitan Noy
2 authors
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
Automated accessibility testing with jest-axe and Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
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.
automated securitytestingautomationaccessibility
Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
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 ;)
web appsjavascriptaccessibility