Horrors
<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 - 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
- they "bolted on"
- they were to satisfy conformance checkers
- they gave a sense of false security
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.
W3C
WAI-ARIA
- cheered me up!
- More to bolt on
- complex spec ("Content authors MUST NOT use abstract roles because they are not implemented in the API
binding.")
- hard to test
Most developers don't use assistive technologies
So they either
- don't care and don't bolt anything on
- do care, but don't understand what they're doing
- bolt stuff on which then suffers
metadata rot
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
<dialog> element
<dialog>
<p>ActiveX Pistols</p>
<button id="close">Close</button>
</dialog>
<button id="show">Open Dialog!</button>
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick
= function() {dialog.showModal();
};
document.querySelector('#close').onclick
= function() {dialog.close();
};
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
('fancy-button',
{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>
</DIV></DIV></DIV></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
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
90% of science fiction jQuery plugins Web Components are shit.
-- Theodore Sturgeon
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
- Semantics and structure
- Keyboard accessibility and focus control
- Color contrast
- Proper labeling and alternative formats
No, really. Consider the User
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
Passion, please…with pull requests
