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.

Matching moments

Balancing the trade-off between efficiency and resilience
03:38 MIN

Balancing the trade-off between efficiency and resilience

What 2025 Taught Us: A Year-End Special with Hung Lee

Rapid-fire thoughts on the future of work
02:44 MIN

Rapid-fire thoughts on the future of work

What 2025 Taught Us: A Year-End Special with Hung Lee

Why HR struggles with technology implementation and adoption
04:22 MIN

Why HR struggles with technology implementation and adoption

What 2025 Taught Us: A Year-End Special with Hung Lee

The future of recruiting beyond talent acquisition
03:15 MIN

The future of recruiting beyond talent acquisition

What 2025 Taught Us: A Year-End Special with Hung Lee

Breaking down silos between HR, tech, and business
03:39 MIN

Breaking down silos between HR, tech, and business

What 2025 Taught Us: A Year-End Special with Hung Lee

Automating formal processes risks losing informal human value
03:48 MIN

Automating formal processes risks losing informal human value

What 2025 Taught Us: A Year-End Special with Hung Lee

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Building collaborative design tools and the neo-brutalism trend
03:05 MIN

Building collaborative design tools and the neo-brutalism trend

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

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

Building Interactive Async UI with React 19 and Ariakit25:22

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

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

What’s New and What’s Next in Web UI22:46

What’s New and What’s Next in Web UI

Cleyra Uzcategui

Related Articles

View all articles
DC
Daniel Cranney
Web Developer Portfolio Inspiration and Examples - March 2025
Every developer needs a portfolio… of some sort. Whether it’s an all-singing all-dancing portfolio page, a blog, or a simple links page, it’s important to let others know what you have done, what you can do, and how they can contact you. A portfolio ...
Web Developer Portfolio Inspiration and Examples - March 2025
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering

From learning to earning

Jobs that call for the skills explored in this talk.