Interactive web developer Marcy Sutton discusses the potential of Web Components to extend the accessible browsing experience.
When a web user can't see design or layout, document structure becomes crucial to communicating page content. As developers, we might not always remember the underlying concept that's vital to web accessibility: the Document Object Model. The DOM as an object data structure is also important in the world of Web Components, a group of new specifications moving through the W3C and into modern browsers.
The goals of Web Components include built-in encapsulation, client-side templating and the ability to create your own HTML tags ( taco-button , anyone?) Before we create the next generation of soulless div ; tags, we should consider the role of semantics in shiny, new technologies.
Adding semantics
In browser rendering, HTML tags are parsed and converted into objects with expected behaviour. The interaction between the DOM and a screen reader highlights the importance of a meaningful page structure.
For example: headings denote a content hierarchy, lists group multiple items, links take users to new references and buttons provide interaction targets. Part of the appeal of Web Components is not having to wait for new browser defaults to be implemented.
If we are to be trusted with the power to supply the internet with our own custom elements, we must add semantics in order to communicate their purpose and state. We can do this in a few ways:
- Extend existing element prototypes
- Use semantic elements inside your custom components (button verus div)
- Use ARIA to add roles, states and properties
Shadow DOM is a way to extend the DOM with an encapsulation boundary that styles and scripts (mostly) do not cross. With this specification, we can finally create sandboxed widgets. So what happens when a screen reader or keyboard tries navigating Shadow DOM content?
It's actually pretty amazing. Because assistive technology encounters pages after they're rendered with CSS and JavaScript, users are presented with a single DOM – a seamless, accessible browsing experience.
You can create the custom elements of your dreams today with a polyfill such as Polymer or X-Tag to round out modern browser support. Communicate the purpose and state of your elements by extending similar ones or by using ARIA where appropriate. As long as your code follows accessibility best practices, your Web Components will be accessible.
Quote : Marcy Sutton
Source : CreativeBloq