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.

I have a better idea

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

Always ask:

What is this thing and what does it do?

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?

What does it do?

Click it and select one, right?

What does it do?

The HTML select (
<select>
) element represents a control that presents menu of options.
The options within the menu are represented by
<option>
elements, which can be grouped by
<optgroup>
elements.
Options can be pre-selected for the user.

What does it do?

Tab moves focus into the field. A second Tab key selects the current item on the list, updates the field's value, closes the dropdown list, and moves focus to the next focusable item in the tab order.

What does it do?

Alt Down Arrow and or Space opens the dropdown list and moves focus to the selected option. (If nothing is selected, then focus moves to the first option in the list). If the combobox is not editable, then the space bar may also be used to open the dropdown list.

What does it do?

Up and Down Arrow moves focus up and down the list. As focus moves inside the dropdown list, the edit field is updated.

What does it do?

Enter selects the current item on the list, updates the value, highlights the selected item in the dropdown list, closes the dropdown list and returns focus to the field.

What does it do?

Escape key closes the dropdown list, returns focus to the field, and does not change the current selection.

What does it do?

Typing a letter (printable character) key moves focus to the next instance of a visible node whose title begins with that printable letter.

Developing Accessibility Usability

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?

What is this thing?

What are the goals of the user?

What are the goals of the business?

How would this UI element contribute to both goals?

How is this UI element better for the user than the competing options?

What does it do?

How does this control operate via mouse?

How does this control operate via keyboard?

How is focus managed to, through, and from this UI control?

What happens when the user acts upon the control?

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