Web accessibility

The inclusive practice
of removing barriers
that prevent interaction with, or access to websites,
by people with disabilities.

Wikipedia says:

Most studies find that
about one fifth (20%) of the population has some
kind of disability.

WebAIM says:

Visual

Motor

Auditory

Cognitive

Visual

​blindness, low vision,
color-blindness

Motor

inability to use a mouse, slow response time,
limited fine motor control

Auditory

deafness,
hard-of-hearing

Cognitive

learning disabilities,
inability to remember or focus on large amounts
of information

How does this apply
to user experience?

Building for accessibility creates better ​
user experiences.

Small percentage
of users?

Non-retina display

Projection

Sun glare

Contrast compliance

Closed captioning

External decoders

 Over half of the TeleCaption decoders are actually sold to the hearing population

National Captioning Institute says:

Closed captioning

Podcast transcripts

Makes it accessible to the hearing impaired 

• SEO benefits
• Search and find
• Don’t need to listen
  to the audio

Accessibility
benefits everyone!

What are accessibility features that we should
be aware of?

Definitions

Associate labels
and inputs

Focus cursor

Larger target areas

Makes it easier for
people with motor disabilities.

Keyboard shortcuts

 through inputs

tab

On mobile, can use < >.

• ↑↓←→ to choose option for radio button

•              to select checkbox

Makes it usable for
blind users and users with low-mobility.

Assistive technology

Design + development

Stick to semantic HTML

Semantic HTML is a way
of writing HTML that emphasizes the meaning
of the encoded information

Wikipedia says:

HTML

<h1>

<p>

<label>

<input>

<select>

Accessibility is baked in when we begin with semantic HTML.

Semantic HTML

<form>
  <label for="name">Name:</label>
  <input name="name" id="name">
    
  <label for="food">Choose a food:</label>
  <select name="food" id="food">
    <option selected disabled>--</option>
    <option>Apples</option>
    <option>Coconuts</option>
    <option>Chocolate</option>
  </select>
    
  <input type="submit" value="Send">
</form>

Pro: native implementations

Pro: native implementations

Con: customization limits

What can we do if the browser doesn’t let us override default styles?

Workarounds

Customization for select

Don’t fight the browser!

Be careful
when hiding labels

Relying on placeholders

Visually hidden

.hide {
  display: none;
}

.hide {
  position: absolute;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

Many ways to do this

.is-hidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

Replace default focus state rather than removing it

Focus styles

Newer input types

Cross browser support

iOS number keypad

We can still do more!

Credit card number input

What other ways can we help out our users?

Workflow

1. Design
2. Semantic HTML
3. Test for a11y
4. Add CSS styles
5. Test again!

Example

Things to check for:

Label text is 18px and bold

Placeholder text?

Is that okay?
Hire us link also fails

The End!

Resources

Web Form Design
by Luke Wroblewski

WebAIM
(Web Accessibility in Mind)