Accessibility Note

This presentation uses an out-of-the box HTML slideshow script which by itself is unaccessible. 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.

What is this thing and what does it do?

With Karl Groves, The Paciello Group

What is this thing and what does it do?

With Karl Groves, The Paciello Group

But first: Who is this guy and what does he do?

Karl Groves is a Viking

OK, really

What

is

This thing?

And what does it do?

What does this do?

                <a href="#" class="button">Search</a>
				
https://gist.github.com/karlgroves/6281550

Hints:

Calling it a button and styling it like a button doesn't make it a button.

Adding JavaScript so it acts like a button doesn't make it a button.

Adding a 'role' attribute of button doesn't make it a button.

"Is the command button used to initiate an immediate action? If not, use another control." ~ Microsoft UX Guide

DOM & Accessibility

Accessibility is boring

Piles of Requirements

Policies, procedures, standards, laws, rules,
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

Let's bury developers under a pile of documentation

  1. WCAG 2.0: 36 pages, printed

I have a better idea

Let's teach designers & developers to only do one thing.

Markup

The term markup is derived from the traditional publishing practice of "marking up" a manuscript, which involves adding handwritten annotations in the form of conventional symbolic printer's instructions in the margins and text of a paper manuscript or printed proof.

Markup

HTML documents are SGML documents with generic semantics that are appropriate for representing information (Source)

Browser Wars

What is this thing?

custom combobox

What does it do?

What does it do?

What does it do?

What does it do?

What does it do?

What does it do?

What does it do?

What does it do?

What does it do?

Hey ya'll watch this!

Let's talk DOM

OOP, Interfaces, and DOM

Classes

OOP, Interfaces, and DOM

Interfaces

What is this thing?

Are these radio buttons?

What does it do?

With a radio button, users make a single choice among a set of mutually exclusive, related options. Users can choose one and only one option.

Microsoft Dev. Guidelines - controls

Hey ya'll watch this!

What does it do?

Custom Radio Buttons DOM screenshot

DOM, GUIs & Accessibility APIs

The high level structure of a browser
See also: A Reference Architecture for Web Browsers [PDF]

DOM, GUIs & Accessibility APIs

Relationship map of the DOM and accessibility APIs

DOM, GUIs & Accessibility APIs

HTML5 Roles Mapping

What is this thing?

Toolbar with options for Home, Favorites, Comments, and Cloud

What does it do?

The DOM of the toolbar shows how broke it was.  But I fixed it.

POUR

WCAG 4.1.2: Name, Role, Value

THE most important WCAG Success Criteria

Name
What do we call this thing?
State
What is this thing doing? Implicitly, what can it do?
Role
What is it?
Value
What value does it represent?

What does this all mean?

Developing Accessibility Usability

The Principle of Least Astonishment:

the result of performing some operation should be obvious, consistent, and predictable. Cunningham & Cunningham

Developing Accessibility Usability

“If it looks the same, it should act the same” - Android Developers, Design Principles

Developing Accessibility Usability

“Consistency lets people transfer their knowledge and skills from one part of an app’s UI to another and from one app to another app. A consistent app isn’t a slavish copy of other apps and it isn’t stylistically stagnant; rather, it pays attention to the standards and paradigms people are comfortable with and it provides an internally consistent experience.” - iOS Human Inferface Guidelines

Developing Accessibility Usability

An OS X user automatically knows how to use such standard user interface elements, regardless of the app in which they appear. OSX Human Interface Guidelines

Developing Accessibility Usability

The central aim of KDE HIG is to create a consistent experience across the software compilation. This means to apply the same visual design and user experience as well as consistent access and predictable behavior of common elements in the interface – from simple ones such as buttons and icons up to more complex constructions, such as dialog boxes.” – KDE Human Interface Guidelines

In other words: ask yourself,

What is this thing?

What does it do?

Does your control exist?

Yes:
THEN USE IT!
Yes, but...
Support sucks: Use Progressive Enhancement
CSS styling is hard: Give the designer a wedgie, then use Progressive Enhancement
No:
You're screwed.
Just kidding. WAI-ARIA is your friend

WAI-ARIA is your friend

ARIA Roles Mapping

WAI-ARIA is your friend

WAI-ARIA is intended to be a bridging technology. It is not appropriate to create objects with style and script when the host language provides a semantic element for that type of objects. ARIA spec
Native datepicker, only reliably implemented in Opera
jQueryUI datepicker, which can be used when native support does not exist.

The truth about WAI-ARIA

WAI-ARIA is your friend

WAI-ARIA doesn't do anything. You're still on the hook to make it:

Good Design

...is the convergence between creativity and capability

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