How Web Components Extend the Accessible Browsing Experience
When a user is unable to see a website's layout or design, then in order to communicate the page content document structure becomes very much essential. The Document Object Model forms the underlying concept that is quite crucial to web accessibility.
DOM also finds significance when talking about Web Components. Client-side templating, built-in encapsulation and creating your own HTML tags are the major goals of Web components. Prior to creating the coming generation of soul-less div; we need to consider how semantics plays its part in the new technologies.
Its in browser rendering that the HTML tags are parsed as well as converted into certain objects with expected behavior. The importance of a meaningful, useful page structure is moreover highlighted by the interaction that occurs between the DOM and screen reader.
Consider for example, a content hierarchy is denoted by headings, lists group multiple items, users are directed to new references via links while buttons offer the interaction targets. Its only when we carry the power to supply our own custom elements to the Internet, that we must consider adding semantics so as to communicate their purpose as well as state. There are a few ways using which this can be done like -
Extending the existing element prototypes Making use of semantic elements inside custom components Making use of ARIA to add states, roles and properties
Shadow DOM offers you the way for extending the DOM using an encapsulation boundary whose scripts & styles mostly never cross. Owing to such specification, it becomes easy to create sandboxed widgets.
Do you know what exactly happens when Shadow DOM content is navigated by a screen reader or keyboard ? You would be amazed to know that assisting technology will encounter the pages only after they are suitably rendered with Javascript and CSS, users are given a single DOM.
Its also possible for you to use a polyfill like Polymer or X-Tag to build the custom elements you require, thus rounding out the modern browser support. You can also go for communicating state & purpose of your elements by extending the ones that are similar or by making use of ARIA where appropriate.
Till the time, your code follows best practices of accessibility, you can rest assured that your Web Components would remain accessible. All of the points discussed above validate the potential of Web components to simply & easily extend the accessible browsing experience.