Manuel Mauky

Accessibility with Web Components

The Shadow DOM makes web components powerful but breaks accessibility. Discover the emerging AOM specification that will finally provide a native solution.

Accessibility with Web Components
#1about 7 minutes

Understanding web components and their core technologies

Web components offer a framework-agnostic way to build reusable UI with standards like Custom Elements for behavior and Shadow DOM for encapsulation.

#2about 5 minutes

Using ARIA attributes to make web components accessible

Custom elements require manual ARIA attributes to be recognized by assistive technology, but this approach has drawbacks like host manipulation and ID scoping issues.

#3about 4 minutes

Introducing the upcoming Accessibility Object Model (AOM)

The Accessibility Object Model (AOM) provides a JavaScript API to define default accessibility properties without directly modifying the host element's attributes.

#4about 3 minutes

Implementing custom keyboard navigation and focus management

Developers must manually implement keyboard interactions and manage focus flow within components to ensure they are navigable without a mouse.

#5about 5 minutes

Exploring the limitations of extending native HTML elements

Extending native HTML elements to inherit accessibility is an option, but it is severely limited by the lack of Shadow DOM and poor browser support in Safari.

Related jobs
Jobs that call for the skills explored in this talk.

Job ad Dark

SabIna compys

SabIna compys
Vienna, Austria

Remote
€20-100K
Intermediate
JavaScript
.NET
+1

Matching moments

Q&A on framework choice and accessibility
03:52 MIN

Q&A on framework choice and accessibility

Extending HTML with Web Components

Challenges of building custom interactive UI components
01:27 MIN

Challenges of building custom interactive UI components

Building Interactive Async UI with React 19 and Ariakit

Understanding the role and value of web components
03:17 MIN

Understanding the role and value of web components

Keith Cirkle of GitHub on React Fatigue

Q&A on practical accessibility challenges
18:43 MIN

Q&A on practical accessibility challenges

Preventing Accessibility Issues Instead Of Fixing Them

The importance of web accessibility as a core developer craft
07:01 MIN

The importance of web accessibility as a core developer craft

WAD Live 22/01/2025: Exploring AI, Web Development, and Accessibility in Tech with Stefan Judis

The accessibility challenges of canvas-based UIs
04:08 MIN

The accessibility challenges of canvas-based UIs

WeAreDevelopers LIVE - Is Software Ever Truly Accessible?

Introducing accessibility work and the upcoming WCAG 3
01:08 MIN

Introducing accessibility work and the upcoming WCAG 3

WeAreDevelopers LIVE - Accessibility isn't magic, Longevity, Devrel in times of AI and more

Building with Web Components and the Lit library
06:45 MIN

Building with Web Components and the Lit library

Making of paint.js.org—a Web Component-based Productivity PWA

Featured Partners

Related Videos

See all videos
Making Interactions Accessible to All Users31:38

Making Interactions Accessible to All Users

Anuradha Kumari

Mastering Keyboard Accessibility27:16

Mastering Keyboard Accessibility

Tanja Ulianova

The What, Why, Who and How of accessibility on the web29:59

The What, Why, Who and How of accessibility on the web

Konstantin Tieber

Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

Frameworkless: How to use Web-Components in production?46:39

Frameworkless: How to use Web-Components in production?

Tobias Münch

Oh S***! There's a New Accessibility Law and I'm Not Ready!24:30

Oh S***! There's a New Accessibility Law and I'm Not Ready!

Emma Dawson

Accessibility Test Driven Development23:33

Accessibility Test Driven Development

Maria Korneeva

Related Articles

View all articles
DC
Daniel Cranney
The State of HTML 2024: What can we learn from it?
The results of the State of HTML 2024 survey are in! Though the name suggests it’s HTML-only, the survey focuses on the web platform in a more general sense, giving us some fascinating insights into not only the state of the web, but also some sense ...
The State of HTML 2024: What can we learn from it?

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend-Entwickler

Frontend-Entwickler

infomax websolutions GmbH
Grassau, Germany

Intermediate
Senior
CSS
HTML
JavaScript
TypeScript
Frontend Developer

Frontend Developer

JO Media Software Solutions GmBh
Brunn am Gebirge, Austria

Senior
CSS
Angular
JavaScript
TypeScript