Introduction toWeb 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 impairmentslearning diferences, distractability, dyslexia, ...
• Hearing impairmentsdeafness, hard-of-hearing, tinnitus
• Motor impairmentslimited fine motor control, slow response time
• Visual impairmentsblindness, 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

• Screen reader (NVDA, JAWS, VoiceOver)
• Screen magnifier
• High-contrast visual modes
• Sticky keys, filter keys, slow keys, mouse keys.
• Virtual keyboard (on screen operated by mouse)
• Voice commands and dictation. (These are becoming mainstream, in phones, cars, etc..)

Assistive Technology: Hardware

• Switch access (sip-puff, foot switch, head switch, ...)
• Mouse alternatives (head motion tracker, eye tracker, joystick)
• Refreshable braille display
• Pointer sticks (mounted on head, held in mouth, ...)
• One-handed keyboards (Maltron, chorded keyboards, Frogpad)
• LOMAK - a head-mounted laser pointer!

Ergonmic Input Devices

• Ergonomic keyboards (Maltron, TECK, many others)
• Mouse alternatives (trackball, roller mouse, vertical mouse, foot mouse)
• Alternative mounting (chin-operated touchpad, foot-operated trackball)
• Many ad-hoc, do-it-yourself modifications exist(e.g. nose-operated touchpad)

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.

• Online tools, e.g.
  • Lea Verou's Contrast Ratio
  • NCSU Color Pallette Accessibility Evaluator
• Web browser add-ons
• Tools inside graphic suites
• Stand-alone applications

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

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...

Solution? Underline the links!

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

Accessible pass/fail Colour Coding

• Don't rely on green vs red
• Use shapes too - ticks and crosses
• Demo: Colour coding article at Penn State Uni.
• WebAIM article on Link colours

The Keyboard-only Experience

Just a few simple controls.

Not necessarily using assistive-technologyMight 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

• BBC Newsclear focus styles
• Channel 4 newspoor/absent focus styles.
• WebAIM: Intro to Web AccessibilityAnimated focus styles!

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.

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

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

• Paciello Group
• Léonie Watson
• SSB Bart Group
• Simply Accessible

Misc. Reading List

• Twitter hashtag - #a11y
• Testing accessibility with NVDA screen-reader and Firefox
• Twitter Bootstrap ComponentsWell documented, plenty detail about steps you need to take to make best use of Bootstrap's accessibility.

Any Questions?

The End

Image credits

• Screenshots from the Electronic Frontier Foundation
• Screenshots from Age Action Ireland
• Tango icons from Wikimedia Commons
• Snooker photo from Wikimedia Commons
• I made the silly space suit myself. Paul Woodhead added the planets and stuff.