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.
Karl Groves, The Paciello Group.
Karl Groves, The Paciello Group
We need a way to define UI objects and behaviors that extend outside what standards provide.
HTML is and always has been limited.
Done well they can be:
Never really took off
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.
I promise this won't be too painful
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
Enables an object or class inherits the methods and properties of its parent class
Not necessary for this discussion, but DOM interfaces are a great example of these concepts.
What happens when we want to make something that does not exist?
<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.
<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
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
<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)
<button is="w3c-disclosure"
controlfor="details1" expanded>
Expand section 1
</button>
<section id="details1">
Lorem ipsum dolor sit amet, consectetur ...
</section>
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 |
You can totally make these things accessible. This changes nothing from the accessibility perspective.
Web Components are the new jQuery plugins
90% ofscience fictionjQuery pluginsWeb Components are shit.-- Theodore Sturgeon
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"