Accessibility Note

This presentation uses an out-of-the box HTML slideshow script which by itself is inaccessible. Keybindings exist to traverse forward and backward with arrow keys, but focus never shifts as the slides advance. The slides themselves are well structured, so you can use a read all command to listen to everything linearly. I've also added a live region which should work well for screen readers that support live regions. As you traverse through the slides using arrow keys, the slide's content will be added to the live region. If all else fails, you can also access the slideshow content by turning off CSS and JavaScript.

Web Components, Demystified

Karl Groves, The Paciello Group.

Web Components, Demystified

Karl Groves, The Paciello Group

Trust me, I'm an "expert"

We have a problem

We need a way to define UI objects and behaviors that extend outside what standards provide.

HTML is and always has been limited.

Proposed solutions

UI Widget Framework Benefits

Done well they can be:

But there are...

challenges

XML/ XHTML/ XForms

Never really took off

UI Widget Frameworks

Often constructed of semantically void elements like DIV & SPAN

Liberal use of JS & CSS for appearance needs. Applying behavior and style that wouldn't otherwise exist

All are limited – at most – to constructing a series of single UI components.

OOP Crash Course

I promise this won't be too painful

OOP Crash Course

Classes

Interfaces

Encapsulation

Containment of all methods and properties for the object within that object. On one hand you can think of it as "hiding" the methods and properties, but in this case we're just as concerned about making sure we have everything the object needs

Inheritence

Enables an object or class inherits the methods and properties of its parent class

Abstraction & Polymorphism

Not necessary for this discussion, but DOM interfaces are a great example of these concepts.

DOM is a series of Objects

OMG Y U No tell us about Web Components?

Back to our problem:

What happens when we want to make something that does not exist?

Animated gif showing series of widgets often seen on the web that don't exist in HTML

We should be able to create custom UI objects!

Web Components, FTW!

Templates

<template id="new-hotness">
<!--//  Your cool CSS, JS, HTML goes here  //-->
</template>

The template declares fragments of HTML that can be cloned and inserted in the document. The template is "inert". It holds all of the necessary bits for the custom element but it isn’t rendered. In other words, using the OOP analogy, the template is the "class" which must be instantiated to be used. Nothing is loaded until the item is called elsewhere.

Custom Elements

<script>
var XFoo = document.registerElement('x-foo');
document.body.appendChild(new XFoo());
</script>
<x-foo>content goes here</x-foo>

The custom element defines the name and available attributes whereas its template content contains the "guts" for the custom element's methods and properties.

Super awesome feature: You can (and should) extend existing elements

Shadow DOM

var host = document.querySelector('button');
var root = host.createShadowRoot();
root.textContent = 'Clicky! Clicky!';

Where encapsulation happens including all your JS methods & properties and styling

Those dirty browser vendors have been using this for a while now

Imports

<head>
<link rel="import" href="/path/to/new/hotness.html">
</head>

How we get the new element (and, any of its dependencies) in our page. We can include and reuse the element(s)

<template id="bargraph-template">
    <style>/** CSS all the things */</style>
    <content></content>
    </template>
    <script>
        var doc = document.currentScript.ownerDocument,
        BargraphProto = Object.create(HTMLElement.prototype),
        template = doc.querySelector("#bargraph-template"),
        graph = template.content.cloneNode(true);

        BargraphProto.createdCallback = function() {
            // moar stuff here

            var shadow = this.shadow = this.createShadowRoot();
            this.shadow.appendChild(graph);

            // even moar stuff here

            var Bargraph = doc.registerElement('bar-graph', {
                'prototype': BargraphProto
            });
     </script>
Bar Graph (accessible)

Using Custom Elements

<button is="w3c-disclosure"
    controlfor="details1" expanded>
            Expand section 1
</button>
<section id="details1">
Lorem ipsum dolor sit amet, consectetur ...
</section>
Disclosure Button

But Why?!?

The real point of web components is to build cohesive applications

Support

Nelson, a character from the Simpsons, pointing and laughing.

Support

Browser Support as of September 2014
Specification Chrome Opera Firefox Safari IE
Templates Yes Yes Yes No No
HTML Imports Yes Yes Sort of No No
Custom Elements Yes Yes Sort of No No
Shadow DOM Yes Yes Sort of No No

On to the Accessibility!

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

Great demo of extending an existing element

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

WAI-ARIA

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

Some Cautions

Contact Me

Karl Groves

Phone
+1 410.541.6829
Email
karl@karlgroves.com
Work
The Paciello Group
Twitter
@karlgroves
Blog
karlgroves.com
LinkedIn
http://www.linkedin.com/in/karlgroves

Resources

Moar Resources

So many Resources

Bonus Material

Bonus Material

Bonus Material

Bonus Material