1 of 38

A call to action

“UI accessibility is not an accessory, a 'nice to have'. If a UI is not accessible it's incomplete, substandard, half baked - a neckbeard UI”

Steve Faulkner - Larrikin*

* playfully rebellious against and contemptuous of authority and convention.

2 of 38

Opera accessibility MIA

3 of 38

a web components

world

Steve Faulkner

the paciello group

4 of 38

A call to action

I think of (UI) demons

for you

Can’t focus

Can’t See

Can’t Understand

Can’t Operate

5 of 38

I think of demons - Roky Erickson

6 of 38

You may think

this guy is a negative creep

7 of 38

you are probably right

8 of 38

How do I (we) get from here to...

9 of 38

Accessible, usable UI brings joy to all

10 of 38

I want to assure you all - There is nothing to fear with web components

11 of 38

custom elements

This specification describes the method for enabling the author to define and use new types of DOM elements in a document.

12 of 38

examples of custom elements

or

<button is="w3c-disclosure">Expand</button>

<html5-h>Ramones: Hey! Ho! Let's Go</html5-h>

Recognised as legitimate elements in browsers that have implemented custom elements or use a polyfill *

*elements must be registered

13 of 38

shadow DOM

This specification describes a method of combining multiple DOM trees into one hierarchy and how these trees interact with each other within a document, thus enabling better composition of the DOM.

14 of 38

shadow DOM has always been here before

15 of 38

user agent shadow DOM

#shadow root (user agent)

</input>

16 of 38

author shadow DOM

DOM source

<button is="w3c-disclosure" controlfor="details2" type="button" aria-controls="details2" aria-expanded="false">Expand section 2

#shadow root

:host #icon:before {

content:"►"; font-size: 1em;

}

:host #icon.expanded:before {

content:"▼"; font-size: 1em;

}

</style>

</button>

HTML source

Expand section 2</button>

17 of 38

HTML IMPORTS

HTML Imports are a way to include and reuse HTML documents in other HTML documents.

18 of 38

HTML IMPORTS example

<head>

...

</head>

Import a html page containing a web component definition

19 of 38

template

Is a method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents.

20 of 38

template code example

<style>

h1 :host {

font-size:80%;

color:#039;

font-style:italic;

}

:host {

display: block;

font-size:1.2em;

}

</style>

<div><span>sub heading:</span><content></content></div>

</template>

<w3c-subhead> demo

21 of 38

browser support for web components

✓

✘

22 of 38

POLYFILL

for web components

23 of 38

are polymer crew shape shifting aliens?

Polyfill�Nothing particularly scary about the polymer crew

24 of 38

The man behind web components and polymer speaks and sings

25 of 38

Where are the frights?

<template>?
Imports?
Shadow DOM?
Custom elements?
Polymer?

26 of 38

What patrick lauke may have said if he wasn’t busy doing pixel font re-creations

There is nothing inherent within web components as a technology that makes it harder to build usable and accessible UI’s

The challenges with web components are pretty much the same as what we have dealt with for years with HTML/JavaScript custom controls

27 of 38

A complex web UI- Google Drive

Is an example of doing it right!

28 of 38

Accessible, usable UI brings joy to all

29 of 38

climbing wall with many multi colored and shaped hand and foot holds.

30 of 38

sucker punch wall video - people fall off into mud as they attempt to traverse.

31 of 38

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"

32 of 38

Web Components Punch list

design consideration	description
focusable	Can you get to the control via the keyboard?
operable	Can you use the control with the keyboard?
expected operation	Can you use the standard keys for the control type to operate it?
clear indication of focus	Can you easily see it when the control has focus?
label	Does the control have a text label that is exposed as an accessible name in accessibility APIs

33 of 38

Web Components Punch list - continued

design consideration	description
role	The control has an appropriate role exposed in accessibility APIs
states and properties	The control has any UI states and properties that it has exposed in accessibility APIs
color contrast	The control label/description/icon is perceivable/usable for low vision users (Use a color contrast checker.)
high contrast mode	The control is perceivable/usable when High Contrast Mode is enabled (e.g. Windows HC mode)