Euro IA 2019 - Inclusive Design means better design for all

@katyarnie @JBuller @HODigital
Inclusive design means better
design for all

Katy Arnold
Deputy Director, Design and Research

James Buller
Head of Accessibility and Inclusion

What we’ll do today
Assumptions:
You’re here because you care and know why this is important
This is mostly in English
You have a laptop
Learning objectives:
Build empathy – what it’s like to have an access need
Learn skills – accessibility review as part of design

Please ask questions.
This is a safe place.

Disability

Types of disability
Visible/Hidden
• Sensory
• sight, hearing, touch...
• Physical
• limbs, dexterity, coordination, disfigurement, bodily functions, pain...
• Communication
• speech, aphasia...
• Cognitive
• learning, memory, psychological, mental, fatigue, autism, dyslexia...
• Disease
• HIV, cancer, multiple sclerosis

70m 17.6%
European adults have a disability
35.6% of people over 65
8% of employed people
Source: Eurostat

Reframing disability
Disability
is
mismatched
human
interaction
Disability
is not
personal
health
condition

Usability and Accessibility
Usability
makes it
easier
Accessibility
makes it
possible

Access Needs

All kinds of people
We are all temporarily
not disabled

Permanent Temporary Situational 1

Permanent Temporary Situational

Experiencing access needs

Lip reading

Dyslexia

Dyslexia simulation font
•Letters have 40% of their lines removed
to make it very hard to work out what
they are and so read words.

Colour vision deficiency

Using colour alone - status
Which system has the best features?
System 1 System 2 System 3
Accessibility
Usability
Security
Features
Cost

Colour deficiency simulations
Typical Red blind Green blind
Blue blind
Blue cone
monochromacy Monochromacy

But not all at once!
words, position, symbols, size, font,
Ways to differentiate as well as colour
System 1 System 2 System 3
Accessibility X Bad Good + Medium
Usability Medium Medium X Bad
Security Good + Good + Good +
Features Good + Medium X Bad
Cost Good+ Good + Good +

Limited vis

Visual impairment and
Physical impairment

Challenge
While wearing simulation glasses and
pads, use your phone/laptop to try:
•Send a message using your
organisation’s contact web page.
•Put a book about Latvia in your Amazon
basket

High Contrast

Large text cut off or obscured

Screenreader

Screenreader demo

wave.webaim.org
1. Go to wave.webaim.org
2. Download browser extension – (Chrome or Firefox)
3. Or use online version

W3C WAI WCAG

W3C WAI WCAG
•World Wide Web Consortium
•Web Accessibility Initiative
•Web Content Accessibility Guidelines
w3.org/TR/WCAG21/
•Authoring Technology Accessibility Guidelines - ATAG

WCAG Principles

WCAG Structure

Web Content Accessibility Guidelines 2.1
Levels
Principles
A
Critical
AA
Essential
AAA
Essential for some
1. Percivable
Guidelines
Success criteria
Sufficient and Advisory techniques
2. Operable
3. Understandable
4. Robust
• Cross platform, testable criteria
• Lots more good guidance exists but is not included
• A system can meet the guidelines yet not be accessible

WCAG Checklists
http://webaim.org/standards/w
cag/checklist
https://www.w3.org/WAI/test-
evaluate/preliminary/

Heuristic review

Find the accessibility issues with this website

Heuristic review criteria
1. Easily readable and understandable text
2. Useful alternatives to non-text elements
3. Consistent and correctly tagged elements
4. Complete and efficient keyboard only usage
5. Sufficient colour contrast & non-colour cues

Easily readable and understandable text
•Left aligned
•Non-justified – ragged right side
•Short line lengths
•Jargon/acronyms avoided/explained
•Concise wording

Avoid acronyms
and jargon

Decorative images

Alternative text
• If you were to describe it
over the phone
• Consider the impression
such as diversity
• Is the image necessary?
• w3.org/WAI/tutorials/image
s/decision-tree/

Graphs need tabular data too
0
1
2
3
4
5
6
Category 1 Category 2 Category 3 Category 4
Chart Title
Series 1 Series 2 Series 3

Text for labels for icon

Button labels
Send <button aria-label=”Go">Send</button>

Transcripts, captions, audio description

Consistent and correctly tagged elements
• Each page has:
• Title in browser tab
• Home link
• A single H1 heading
• Lists, forms, tables, headings etc. are correctly tagged
• Headings levels are sequential and not skipped
• Links and headings are distinctive, informative out of context
and meaning is front loaded

Page title (browser tab text)

Headings and table of contents
• H1:
• H2: “I thought it
was brilliant”
• H3:
• H4: By car
• H4: By train
• H1: EuroIA 2019
• H2: Agenda
• H2: Venue
• H3: How to get
there
• H4: By car
• H4: By train

Links without context

Complete and efficient keyboard only usage
When using system without a pointing
device:
•Each page has a ‘Skip to main content’ link
•All user journeys can be completed
•Current focus is clearly shown throughout
•Order is sensible and matches visual layout

Skip Links

Easily readable and understandable text
Useful alternatives to non-text elements
Consistent and correctly tagged elements
Complete and efficient keyboard only usage
Sufficient colour contrast & non-colour cues

Automated testing

WAVE demo - tab 1

WAVE demo - tab 2

WAVE demo – tab 4

Do your own heuristic review

Do your own heuristic review
Test: https://record-a-goose-sighting.herokuapp.com/
With wave.webaim.org – on every page check:
1. Check tab access and focus on every elements
2. Test for effects of colour changes
3. use the WAVE browser extension or web page to check:
1. errors and warnings
2. heading structure
3. colour contrast
4. otherWCAG 2.1 issues
Change colours
Windows 10 Alt+Left Shift+PrtScr
Mac: Ctrl+Alt+Cmd+8
Tabbing in Safari
Preferences > Advanced > Press
tab to highlight each item on a
page".
Answers:
https://github.com/ministryofjustice/record-a-
goose-sighting/blob/master/answers.md

Summary
Empathy to understand experience of
access needs
Accessibility as part of design
You are now better designers :)

Further resources

(Semi) automated accessibility checkers
http://snook.ca/technical/colour_contrast/colour.html
http://www.colorzilla.com
http://www.paciellogroup.com/resources/contrastanalyser/
http://www.bbc.co.uk/guidelines/futuremedia/accessibility/colour_
contrast.shtml

A Web For Everyone
A book by Sarah Horton
and Whitney Queensbery,
about designing accessible
user experiences

github.com/UKHomeOffice/posters

Design accessible services posters
github.com/UKHomeOffice/posters

Thank you

Work sheets

Permanent Temporary Situational 1
Permanent Temporary Situational
Touch One arm Arm injury New parent
See Blind cateract Distacted driver
Physical
/Touch
Hear
Speak

1. Start
2. Do you like geese
3. What type of goose did you see
4. When did you see the goose
5. Check your answers
6. End
Finding fouls answer sheet

Finding fouls instructions and tips
Test: https://record-a-goose-sighting.herokuapp.com/
With wave.webaim.org web page or browser extension
On every page:
1. Check tab access and focus on every elements
2. Test for effects of colour changes
3. UseWAVE to find
1. errors and warnings
2. heading structure
3. colour contrast
4. Look for other WCAG 2.1 issues
Change colours
Windows 10: Alt+Left
Shift+PrtScr
Mac: Ctrl+Alt+Cmd+8
Tabbing in Safari browser
Preferences > Advanced > Press
tab to highlight each item on a
page - tick this option
Answers:
https://github.com/ministryofjustice/record-
a-goose-sighting/blob/master/answers.md
Focus using the keyboard
Use Tab and Shift+Tab keys to move
the focus forwards and backwards.

Text
• Left aligned
• Non-justified – ragged right side
• Short line lengths
• Appropriate self-explanatory headings
• Jargon/acronyms avoided/explained
• Concise wording
• Links are distinctive, informative out of context
and meaning is front loaded
Non-text
• Information in graphics, videos or sound has text
alternative
HTML
• Each page has:
• Title in browser tab
• Home link
• A single H1 heading
• Lists, forms, tables, headings etc. are correctly
tagged
• Headings levels are sequential and not skipped
Non-mouse usage
• Each page has a ‘Skip to main content’ link
• Current focus is clearly shown throughout
• Order is sensible and matches visual layout
• All user journeys can be completed
Colours
• Colours meet contrast guidelines
• Colour is not solely relied on to signify:
• Links and navigation
• Status
• Data ranges
Heuristic review checks

Euro IA 2019 - Inclusive Design means better design for all

Recommended

Recommended

More Related Content

Similar to Euro IA 2019 - Inclusive Design means better design for all

Similar to Euro IA 2019 - Inclusive Design means better design for all (20)

More from Home Office Digital, Data abnd Technology

More from Home Office Digital, Data abnd Technology (8)

Recently uploaded

Recently uploaded (20)

Euro IA 2019 - Inclusive Design means better design for all