Web Accessibility Cookbook

Chapter 12. Creating Custom Elements

Web components are a set of web platform APIs that allow you to build your own fully featured DOM elements.

Being able to create custom elements to build interactive websites natively is exciting, but it also introduces new accessibility issues. You must be aware of the limitations and opportunities of custom elements and their related APIs. With the right architecture and enough planning, web components can encourage an accessibility-first development mindset and create great experiences. They can also break accessibility inherently, if used without caution.

12.1 Working with IDs

Problem

It’s impossible to reference an element from Light DOM in Shadow DOM, or vice versa, using the id attribute. If you’re not aware of this limitation and try to create these references anyway, the broken relation can affect users:

• Skip links may not work, making navigation harder.

• Form elements may not have proper labels, making it harder for screen reader users to distinguish them.

• ARIA references may break, resulting in missing information or feedback for screen reader users.

Solution

In a form, put both the label and the form field in Light DOM or both in Shadow DOM, but don’t mix the two contexts, as shown in Examples 12-1 and 12-2.

Example 12-1. The label and input field are in Light DOM

<label for="email">E-Mail</label>

<the-input>
  <input type="email" id="email" />
</the-input>

<script>
  class TheInput extends HTMLElement {
    constructor() ...