Introduction to
Web Accessibility

WordPress Leeds - 26th April 2016

Hi.

Andrew Macpherson

Senior developer at Annertech

Contributor at Drupal project

@MartianWebDev on Twitter.
Fuzzbomb on GitHub, and most other places.
We don't get cool handles on LinkedIn.

This sort of thing just happens.

What is web accessibility?

UK government statistics estimate 11.6 million people are living with some kind of disablity in UK.

  • Works for everyone, regardless of disability.
  • Works with varied devices, including assistive technology.
  • Remove barriers to participation.
  • Increase social mobility (c.f. the digital divide).
  • Related terms: universal design, inclusive design.

Why accessibility?

Reasons for making a web site accessible include:

  • It's the right thing to do.
  • Websites shouldn't be hard to use. Accessible websites are easier for everyone.
  • Increase your audience/customer base.
  • Future-proofing - easier to maintain, better prepared for new devices (e.g. VR goggles, TV).
  • UN Convention on the Rights of Persons with Disabilities
  • UK Equality Act 2010 (and earlier legislation) - the law says you mustn't disciminate.

Who benefits?

We all do!

Broad categories of impairments...

  • Cognitive impairments
    learning diferences, distractability, dyslexia, ...
  • Hearing impairments
    deafness, hard-of-hearing, tinnitus
  • Motor impairments
    limited fine motor control, slow response time
  • Visual impairments
    blindness, low-vision, colour-blindness

Disability in Context

Disability isn't always clear-cut. It depends...

  • Mild to severe.
  • Permanent or temporary - broken wrist in plaster cast.
  • When acquired? During childhood, or later in life.
  • Environment - noisy places, bright sunlight, darkness.
  • Situation - driving a car, both hands-full.
  • "Visibility" - a wheel chair is apparent, dyslexia isn't.

Assistive Technology

Hardware and software designed to suit the needs of varied users, to make computers easier to use.

Assistive Technology: Software

Assistive Technology: Hardware

Ergonmic Input Devices

The computer doesn't care what shape they are!
These examples all appear to the computer as normal keyboards and mice.

Who's responsible?

  • Designers - colours, page layout
  • Front-end developers - custom component behaviour,
    e.g. date-pickers, notifications, MegaDropSearchBox
  • Authors & content managers - document outline, image ALT text, table captions
  • Information Architects - navigation, page outline, data models
  • Back-end developers - your web service provide images, but does it also provide text alternatives?
  • UX designers - can everyone take the same "journey"?

Who else is responsible?

Not just "web" professionals...

  • Product-owners - commissioning a web-site.
  • Customer service professionals - the website is just one part of the overall commerce process.
  • PR - outreach, tell people your website is easy to use.
  • Others...?

Accessibility Principles

W3C Web Acessibility Initiative (WAI)

Web Content Accessibility Guidelines 2.0 (WCAG)

  • Perceivable
  • Operable
  • Understandable
  • Robust

"POUR"

WCAG Success Criteria

WCAG is organized as a set of success criteria, each describing an accessibility practice in terms of:

  • Intent & Benefits
  • Priority level (A, AA, AAA)
  • Examples
  • Sufficient techniques
  • Common failures

Example: SC 1.3.1 Info and Relationships describes the use of headings and labels to indicate the structure of a page.

Colour Contrast

Grey text, on a grey background, is hard to read.

Who benefits? Users who...

  • have low vision, e.g. cateracts
  • have an astigmatism (sight focussing disorder, often mild)
  • are over the age of, say, 40
  • have low-quality screens (LCD with poor viewing angle)
  • are using their devices outdoors
  • are indoors, but near a window (or, on a train)
  • ... pretty much everyone

Colour contrast tools

Many to choose from.

Colour contrast inspiration

Contrast Rebellion

Colour Blindness

  • Reduced ability to perceive one or more pigments.
  • Affects ~8% of men (~4% of whole population)
  • Don't rely on colour alone for important information.
  • WCAG SC 1.4.1 - Use of Color
"Steve is going for the pink ball - and for those of you who are watching in black and white, the pink is next to the green."
Ted Lowe (1920-2011)

Demo: protanopia simulation

A person with protanopia has difficulty perceiving the red component of colours.

Let's look at some text where the links are styled red...

screenshot of article with red links in paragraphs, not underlined.
Simulation of protanopia. Red links in paragraphs are not easy to distinguish.

Solution? Underline the links!

This allows links to stand out, without relying on colour alone.

Screenshot of article where red links are also underlined.
Protanopia simulation of previous screenshot. Underlined links are easily to see.

Accessible pass/fail Colour Coding

The Keyboard-only Experience

Just a few simple controls.

Not necessarily using assistive-technology
Might be a plain-old QWERTY keyboard.

Basic keyboard controls

  • TAB to move between interactive elements.
    (SHIFT + TAB moves backwards among them.)
  • ENTER and/or SPACE to operate interactive elements.
  • Arrow keys help in some places (radios, select, slider)
  • ESCAPE cancels things (e.g. dialogs).
  • Navigate viewport with SPACE, PgUp, PgDn, Home, End
  • Browser Menu Bar + Context menus
  • Caret browsing, spatial navigation - some browsers only.

Keyboard-only Demo

Focus styles

Sighted keyboard users really need to be sure what element has focus, before they press enter.

Subtle focus styles don't work - they need to be clear. Beware of re-using mouse hover styles.

This doesn't limit your creativity - take inspiration from games consoles and Smart TV.

a { outline: none; }

DON'T DO IT!

(Unless you replace it with something even clearer)

Example: Virgin Media TV menus.
Focus indicated by colour, border, width, and arrow.

Screenshot of Virgin Media TV interface, showing a very clear focus style

Source: Virgin Media TiVo teases new design ahead of rollout

Bypass Blocks - part 1
"skip to main content" links

Allows quick access to interact with the page's main content, without traversing lots of sidebar links, or a header menu.

Who benefits? Primarily sighted keyboard users. (Screen-readers offer other ways to get around a page.)

WCAG Success Criterion 2.4.1 - Bypass Blocks

The Screen-reader Experience

Whoah. Learning curve.

Some Useful Tools

  1. Headphones! Be kind to your colleagues :-)
  2. A cheat-sheet is worth printing.
  3. The stop-talking key command. Usually Control key.

Slice & Dice

Many ways to navigate or inspect a page...

  • Document outline: sensible heading levels!
  • ARIA Landmark Roles: header, footer, nav-bar, search box.
  • Focus via TAB key, like a sighted keyboard user.
  • Forms mode (some screenreaders offer extra tools for forms).
  • Browse a list of links.

Screenreader User habits

See the WebAIM Screenreader user survey

  • What technology do you use?
  • Preferred navigation methods?
  • Dealing with images, frames, PDF, multimedia, ...

Bypass Blocks - Part 2
ARIA Landmark Roles

<div role=navigation>

main, banner, contentinfo, navigation,
complementary, search, ...

New HTML5 elements - main, header, footer, nav, aside.

Caution: Internet Explorer still needs roles, i.e. <nav role="navigation">

Screenreader Demo

Semantic HTML

HTML is a great language for marking up hypertext.

  • Document outline: headings,
  • Forms: fieldsets, labels, etc.
  • Regions: navigation, article, footer, ...
  • Tables, figures
  • embedded content: images, video, ...

HTML Elements

HTML is not a general-purpose user-interface language, so developers often customize behaviour with javascript. Be careful what elements you use.

  • <div> means nothing
  • <span> means nothing
  • <button> - pressing it makes something happen.
  • <a href> - hyperlinks direct you somewhere else.

Button vs. Link. We'll run into that a lot.

Human-readable semantics

Some attributes often contain rich semantics, but are really only useful to a human audience: developers!

  • class attribute
  • data-* attributes
  • ng-* attributes
  • Others?

None are understood by screen-readers.

<div class="button"> is not a button.
Use <button> instead.

Semantics for screen-readers

We want machine-readable semantics

  • HTML Elements: headings, tables, forms, ...
  • HTML attributes: disabled, required, checked, ...
  • aria-* attributes
  • SVG, MathML.

Reading List

  • TL;DR... a11yproject.com
    A community-reviewed set of tutorials, recipes, and tips, aimed at those learning web accessibility.
  • WebAIM.org
    Great set of articles, screenreader tutorials, and the Screen Reader User Survey.

In fact, you might do better perusing their resource lists ;-)

Using Personas

Dive Into Accessibility

A short open-source book which gives a great introduction to thinking about accessibility, along with techiniques.

Particularly useful for introducing personas when considering accessibility. For every technique, it has a discussion of who benefits, and how.

It's starting to look a little dated (19-inch is a large monitor!), and a few techniques have changed, but few books match this one as an introduction to the topic.

Blogs

Misc. Reading List

Any Questions?

The End

Image credits