Page Title:
January 20, 2022 03:17

Closed shadow DOM requires manual check.

Page 1:

Actions

Severity Action
no actions
Hidden 81 custom elements are hidden and only the custom elements with features that may become visible need to be checked for accessibility.

Details

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.
WCAG Success Criteria

2.1.1 Keyboard (Level A, Primary 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

Element Results

Element Identifier Result Element Position Message

Column Definitions

Element Identifier
Information about the element associated with the result.
The information typically includes the tag name, accessible name or other information related to the rule requirements.
"Page" means that the result applied to the page. For example, the rule "One main landmark on the page" is a page level rule.
Element Position
The element position is based on the DOM order of elements in the page.
The element position maybe useful in helping to locate a specific element on the page evaluated (e.g smaller numbers are typically toward the beginning of a page and larger numbers typically toward the end of a page).
Element position 1 is the first element.
The highest element position is the last element.
Element position values for most rule/page results will not be consecutive since a rule only applies to a sub set of elements found on a page.