|Custom elements (HTML elements created using the Web Components APIs) with closed Shadow DOMs must be manually checked for accessibility requirements.
- Because custom elements use the Shadow DOM and thus are not part of the legacy DOM, they can only be accessed by the evaluation library for programmatic checking of accessibility features when the shadow DOM is "open".
- The evaluation library is unable to analyze custom elements created with "closed" shadow DOMs. In the case of the "closed" shadow DOM all accessibility requirements require manual checks, possibly by using other DOM inspection tools to identify accessibility issues and features.
|WCAG Success Criteria
2.1.1 Keyboard (Level A, Primary Success Criterion)
Custom elements created using web components API with closed shadow DOM.
- In evaluating custom elements with "closed" shadow DOMs that render as interactive widgets, the most important manual checks involve keyboard navigation and operability, and focus styling, which are related to the various ways a user may interact with the widget.
- Test with screen readers to verify functionality is operable by a screen reader user.
- Test the graphical rendering in operating system using high contrast settings to verify content is perceivable by people with visual impairments.
- Use accessibility tools in browser DOM inspectors to assist with manual inspection, since the DOM inspector of most browsers allows access to the Shadow DOM of the custom element.
- You can use the accessibility rules in this tool to help guide your manual testing procedures.