Workshop at Euro IA 2019 conference in Riga, Latvia - building empathy for users with access needs and learning how to do an accessibility heuristic review
5. @katyarnie @JBuller @HODigital
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
21. @katyarnie @JBuller @HODigital
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.
23. @katyarnie @JBuller @HODigital
Using colour alone - status
Which system has the best features?
System 1 System 2 System 3
Accessibility
Usability
Security
Features
Cost
25. @katyarnie @JBuller @HODigital
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 +
28. @katyarnie @JBuller @HODigital
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
38. @katyarnie @JBuller @HODigital
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
42. @katyarnie @JBuller @HODigital
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
43. @katyarnie @JBuller @HODigital
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
44. @katyarnie @JBuller @HODigital
Easily readable and understandable text
•Left aligned
•Non-justified – ragged right side
•Short line lengths
•Jargon/acronyms avoided/explained
•Concise wording
46. @katyarnie @JBuller @HODigital
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
48. @katyarnie @JBuller @HODigital
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/
49. @katyarnie @JBuller @HODigital
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
53. @katyarnie @JBuller @HODigital
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
54. @katyarnie @JBuller @HODigital
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
56. @katyarnie @JBuller @HODigital
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
58. @katyarnie @JBuller @HODigital
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
59. @katyarnie @JBuller @HODigital
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
61. @katyarnie @JBuller @HODigital
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
62. @katyarnie @JBuller @HODigital
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
70. @katyarnie @JBuller @HODigital
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
71. @katyarnie @JBuller @HODigital
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
80. @katyarnie @JBuller @HODigital
Permanent Temporary Situational 1
Permanent Temporary Situational
Touch One arm Arm injury New parent
See Blind cateract Distacted driver
Physical
/Touch
Hear
Speak
81. @katyarnie @JBuller @HODigital
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
82. @katyarnie @JBuller @HODigital
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.
83. @katyarnie @JBuller @HODigital
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