Web Components - The Right Way

Bruce Lawson and Karl Groves

Bruce Lawson, Karl Groves, Web Components Done Right (mimics cover of Sex Pistols' Never Mind The Bollocks' album cover
Paciello Group and Opera logos
woman yawning
screenshot of ancient version of lawsociety.org.uk with old design, fixed widths
screenshot of ancient version of lawsociety.org.uk with its many layout table cells highlighted


<table summary="this is a layout table">

    <img src=spacer.gif alt="spacer">

    <a href="contact.html"
    title="click here to contact us">
    contact us</a>

WCAG 1 - table summaries

5.5 Provide summaries for tables. [Priority 3] For example, in HTML, use the "summary" attribute of the TABLE element.
Guideline 5. Create tables that transform gracefully.

WCAG 1 - alt text

1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). [Priority 1]
Guideline 1. Provide equivalent alternatives to auditory and visual content.

WCAG 1 - alt text

1.1 Provide a text equivalent for every non-text element (e.g., via "alt", "longdesc", or in element content). [Priority 1]
Guideline 1. Provide equivalent alternatives to auditory and visual content.

WCAG 1 - titles on links

13.1 Clearly identify the target of each link. [Priority 2] … In addition to clear link text, content developers may further clarify the target of a link with an informative link title (e.g., in HTML, the "title" attribute)
Guideline 13. Provide clear navigation mechanisms.

Problems with these "accessibility" features

Horror movie-style poster: 'the night of the AJAX websites'

Rich Internet Applications

WAI-ARIA provides a framework for adding attributes to identify features for user interaction, how they relate to each other, and their current state. WAI-ARIA describes new navigation techniques to mark regions and common Web structures as menus, primary content, secondary content, banner information, and other types of Web structures.


Most developers don't use assistive technologies

So they either

HTML5 logo

Built-in beats bolt-on

Design features to be accessible to users with disabilities. Access by everyone regardless of ability is essential. This does not mean that features should be omitted entirely if not all users can make full use of them, but alternate mechanisms should be provided.
HTML Design Principles: Accessibility

"HTML is too complex"

The vast majority don’t use any of the semantic elements unless it’s by accident like a thoughtless copy-paste …Unless there is an immediate visual or behavioural benefit to using an element, most people will ignore it
HTML is too complex
diagram showing HTML divs with author-defined IDs and classes for styling
diagram showing same HTML divs with ARIA roles banner, navigation, contentinfo
diagram showing same page strucutre with HTML5 header, footer, nav, main, article elements
photo of a rabbit, with a small bird perched on its back

<dialog> element

  <p>ActiveX Pistols</p>
  <button id="close">Close</button>
<button id="show">Open Dialog!</button>
var dialog = document.querySelector('dialog');
  = function() {dialog.showModal();
  = function() {dialog.close();

Things are getting better

For the first time in 5 years of surveys, respondents are more positive about web accessibility progress than in the previous survey. Only 21.8% thought web content has become less accessible, compared to 25.2% in May 2012.
Screen Reader User Survey #5 Results: Web Accessibility Progress
Superheros: Web Component and Shadow Dom

Web Components

Web Components enable Web application authors to define widgets with a level of visual richness and interactivity not possible with CSS alone, and ease of composition and reuse not possible with script libraries today.
Introduction to Web Components

Extend existing HTML elements

var p = Object.create(HTMLButtonElement.prototype);
        var FancyButton = document.registerElement
        {extends: 'button', prototype: p});
        <button is="fancy-button">

Current mess

<DIV id=:rk class="J-K-I J-J5-Ji L3 J-K-I-JO" tabIndex=0
        unselectable="on" closure_hashCode_l16mgm="182" act="">
        <DIV class="J-J5-Ji J-K-I-Kv-H" unselectable="on">
        <DIV class="J-J5-Ji J-K-I-J6-H" unselectable="on">
        <DIV class=J-K-I-KC unselectable="on">
        <DIV class=J-K-I-K9-KP unselectable="on"> </DIV>
        <DIV class=J-K-I-Jz unselectable="on">Search Mail</DIV>

Custom tags

When there isn't a HTML element that is semantically close to their custom element, authors can omit the extends attribute … these kinds of elements are called custom tags. A user agent that does not support custom elements will treat this as the semantically undifferentiated HTMLUnknownElement.
Introduction to Web Components
nuts and bolts

Good News

You can totally make these things accessible. This changes nothing from the accessibility perspective.

Bad News

Web Components are the new jQuery plugins

How to do it right

Picture I borrowed from Steve Faulkner. It says:
Something Karl Groves said: I'm writing a new talk titled "Demystifying Web Components Accessibility". It has one slide. It says "Same as regular ole web accessibility. Seriously. Stop overthinking it"

First: follow all your standard accessibility best practices

Don't reinvent the wheel

Solve Real Problems

Longdesc web component

Consider the User

Example web component

No, really. Consider the User

Flipbox example component

Be Creative

Example of image-caption


CSV-to-HTML table, fixed by Karl to be accessible

Some Cautions

Get a head start

Web Components punch list, by Steve Faulkner
extensible web manifesto

HTML imports

Custom elements can be loaded from external files using the link tag:

<link rel="import" href="goodies.html">

List of good, curated, open-source web components sites

Passion please?

"This is the kind of passion I want to see from accessibility advocates, these are the voices we need. Not another library to add ARIA to badly thought-out HTML".
The passion accessibility presentations need
- Christian Heilmann
github pull request to add live regions to a wordpress plugin
wordpress plugin stats: 44,525 all-time downloads.

Passion, please…with pull requests

github logo

Thank you!



Contact Us


Contact Us