Web Accessibility
What it is and how to do it

Department of Internal Affairs
Jason Kiss
Principal Advisor Accessibility

A11y?

Accessibility = A + ccessibilit + y = A + 11 + y

Agenda

  • What is a11y and who is it for?
  • How do disabled people access the web?
  • What's required?
  • How to embed a11y in what you do
Image source

Web accessibility

What is it?

Image source

Inclusive design

A broad range of people use the web.

Woman with black paper crosses over her eyes. Image source
Two young hearing impaired girls in a dance studio. Image source
Close-up of an elderly woman's hand. Image source
Photo of woman facing the camera with book text projected across her face and shoulders. Image source

Percentage of people with disability, 2013

0–14 yrs 15–44 yrs 45–64 yrs 65+ yrs Total
11% 16% 28% 59% 24%
2013 Disability Survey, Statistics NZ

In 25 years, between 22–25% of New Zealanders will be 65+ years old or older.

National Population Projections: 2014(base)–2068
Statistics NZ

Assistive technologies

Keyboards

Close up of left hand on a Mac keyboard. Image source

Large print keyboards

Large print keyboard with yellow keys on black body. Image source

One-handed keyboards

Maltron one-handed keyboard for the right hand. Image source

Mice and trackballs

Large Kensington trackball. Image source
EZ Minicute vertical mouse. Image source

Headwands

Straight headwand strapped to a styrofoam head for display. Image source
Articulated headwand with head brace. Image source
Man with curved headwand typing at keyboard in front of monitor. Image source
Man with short headwand using onscreen keyboard on iPad. Image source

Mouthsticks

Mouthstick being used to type on iPad. Image source
Man using short mouthstick on special keyboard for mouthsticks. Image source
4 mouthsticks. Image source

Button switches

Red AMDI moon switch. Image source
Blue AMDI moon switch on articultated mounting brace. Image source

Sip and puff switches

Man using sip and puff switch with onscreen keyboard. Image source
Girl with sip and puff switch. Image source

Eye blink switch

Close up of fibre optic eye blink switch next to woman's eye. Image source

Proximity switch

Hand hovering over an Ablenet Candy Corn proximitiy switch. Image source

Switch scanning

Animated gif of scanning software selecting letter on SwithXS onscreen keyboard. Image source

Speech/voice recognition

Dragon Naturally Speaking. Image source
Cortana logo. Image source
VoiceOver logo. Image source
Alexa logo. Image source
Google Assistant logo. Image source

Screen readers

JAWS for Windows banner image. Image source
NVAccess logo. Image source
VoiceOver logo. Image source
Talkback logo. Image source
Orca logo. Image source

Screen magnifiers

Screen magnifier in Mac OS. Image source
Screen magnifier in Windows 8. Image source

Braille displays

Braille Memo BM46 40 cell Braille display. Image source
Humanware Braille Notetaker. Image source

Affordable Braille display

Neil Jarvis from the RNZFB holding the new, affordable Orbit Braille display. Image source

But how do we accommodate this broad range of users?

Standards!

Open Web Platform

World Wide Web Consortium

  • HTML
  • CSS
  • SVG
  • ARIA
  • WOFF
  • XML
  • RDFa
  • more…

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”

– Tim Berners-Lee

Web Content Accessibility Guidelines (WCAG) 2.1, W3C Recommendation 05 June 2018

  • Perceivable
  • Operable
  • Understandable
  • Robust

NZ Government
Web Accessibility Standard

WCAG 2.1 Level-AA compliance

Screenshot of NZ Government Web Accessibility Standard web page.

It's worth noting that...

The NZ Government Web Standards are:

  • Cabinet-mandated (since 2003!)
  • In 2013, agencies were given another 4 years to comply
  • A 5-year commitment of the 2018 Accessibility Charter

But still, we struggle...

Silhouette of stick figure pushing boulder up incline. Image source

Persistent A11y Issues

From past self-assessments...

  • Text alternatives for images
  • Full keyboard access
  • Proper heading structure

How do we ensure that...

A11y is considered from the outset and throughout a project?

In other words...

How can we embed a11y in an organisation's policies and procedures to ensure that it is addressed throughout the product's lifecycle?

ISO 30071-1 Code of Practice

Information technology — Development of user interface accessibility — Part 1: Code of practice for creating accessible ICT products and services

ISO/IEC 30071-1:2019

Steps to embedding a11y in your organisation

  • Motivation
  • Commitment and responsibility
  • Competence
  • Ongoing support
  • Policies
  • Governance

Motivation

Image source

Why is a11y important to your organisation?

Legal

Photo of gavel. Image source

Ethical

Image source
Image source

Business/ROI

Image source

Innovation

Horton typewriter, circa 1887. Image source
Black and white engraving of an old telephone. Image source
Oxo Good Grips swivel peeler with large, black rubber handle. Image source
Vinton Cerf, hearing impaired and inventor of the Internet. Image source

Commitment and responsibility

Image source

Who is responsible for a11y in your org?

Who are your a11y champions?

  • Executive level?
  • Operational level?

Do you have an a11y programme/action plan?

If so, how is it funded?

Competence

How are a11y responsibilities distributed?

What a11y skills do you have in-house?

Two hands playing with a Rubiks Cube. Image source
  • What are their roles?
  • Is their skill adequate?

How do staff increase their competence?

  • Training courses? programme?
  • Budgeted?

Ongoing support

What skills do you need to outsource?

Where's the support when you need more help?

Image source
  • External consultant?
  • Retainer? Ad hoc?

What's your a11y support maintenance plan?

Policies

High-level a11y policy

  • Lists your motivations for a11y
  • Links to a11y mentions in other policies
Image source

Baseline a11y policy

Default degree of a11y that all products will aim for

Policies (cont…)

Procurement policy

  • A11y requirements for tenders/RFP
  • A11y terms in your standard contracts

Marketing/brand policy

  • Style guide?
  • Marketing and branding guidelines?

Governance

Image source

Monitoring, assurance, action, accountability

  • Which products/services to monitor?
  • What metrics will you use, and how often?
  • Which products/services have priority for a11y fixes?
  • What level of a11y is needed to go live?
  • How will staff be held accountable for improving a11y?

A11y is difficult!

Integration is critical

You need:

  • Organisational direction and purpose
  • Management support and budget
  • A team with a11y skills and access to experts
  • Policies and processes that include a11y
  • Ways to monitor a11y and react accordingly

Questions?

Jason Kiss
Principal Advisor Accessibility
Dept. of Internal Affairs
web.standards@dia.govt.nz