| Rule ID |
Widget 16 |
| Definition |
Custom elements (HTML elements created using the Web Components APIs) with closed Shadow DOMs must be manually checked for accessibility requirements. |
| Purpose |
- Custom elements, defined using the Web Components APIs of HTML 5, are typically used for creating interactive widgets on a web page. A custom element effectively creates a self-scoped package of HTML, CSS and JavaScript that uses the Shadow DOM to insulate itself from other CSS and JavaScript defined by the parent document.
- 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.
|
| Mappings |
-
HTML4 Legacy Techniques
(Required)
-
HTML5 and ARIA Techniques
(Required)
|
| WCAG Success Criteria |
2.1.1 Keyboard (Level A, Primary Success Criterion)
Other Related Success Criterion:
|
| Rule Category |
Widgets/Scripting |
| Scope |
Element |
| Target Resources |
Custom elements created using web components API with closed shadow DOM.
|
| Techniques |
- 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.
|
| Informational Links |
|