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.

#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.