It is really important to make web components fully accessible. Sometimes is might be tricky.

Accessibility for Web Components

When architecting web components, be sure to include these considerations so everyone can use your components.

Accessibility in UI5 Web Components

As the Web Components are a relatively new standard, there are still some gaps in regard to accessibility.

Accessibility with ID Referencing and Shadow DOM

About the most common mistake when making accessible components, id, and label associations.

Are Web Components Accessible?

Short answer: yes, but there's a couple of known issues around forms, labelling, and focus behavior.

Dialogs and shadow DOM: can we make it accessible?

A look at getting native dialogs to play nicely with shadow DOM.

How Shadow DOM and accessibility are in conflict

Encapsulation makes children of a shadow root private to any siblings or ancestors of the shadow host.

Managing focus in the shadow DOM

Managing focus in the DOM has never been particularly easy, and shadow DOM just makes things that much trickier.

Shadow DOM and accessibility: the trouble with ARIA

If you want to use shadow DOM without breaking accessibility, then this is one of the things you will have to grapple with.

Testing Accessibility with Shadow Roots

Building accessible web components on the example of an input element pattern with a label and help text.

The Accessibility Object Model (AOM)

Proposal that aims to provide JavaScript API to allow developers to modify the accessibility tree for an HTML page.

The future of accessibility for custom elements

When you define a new tag, the browser really has no way of knowing if you’re trying to build a button, or a slider.

The Guide to Accessible Web Components

Building proper UI Web Components can be quite a task, especially if you want them to be accessible.

Web Components and the Accessibility Object model

The AOM will make accessibility a first class citizen of the extensible web – exactly what it should be.

Web components, design systems and accessibility

Live stream recording with engineers and product owners from Adobe, IBM, SAP, Vaadin, and ING.

Web components still need to be accessible

Web components render as HTML, and either that HTML works or it doesn’t.

Edit this page on GitHub