Henry Charge is an interaction designer with over 10 years of experience building websites. He discusses his journey to realizing the importance of accessibility and inclusive design. Some key lessons he learned include: accessibility is about universality, not just disability; many people without disabilities use accessibility features; and testing with real users is important. He provides tips on writing for plain language, describing visual content, keyboard-only use, and allowing for customization like adjusting contrast.

1. Henry Charge
It’s your job to make things
accessible

2. Henry Charge
More about me
• been building websites for over 10 years
• consultant at Valtech for 5 years
• live in London
• risk my life every day cycling to work
• interaction designer

3. Henry Charge
“An interaction designer works out the
best way to let users interact with services,
in terms of both overall flow and at the
level of individual design elements.”
- GOV.UK role description

4. Henry Charge
My journey to realisation

5. Henry Charge
Do you know anything about accessibility…?
“alt tags”
“tab index”
“contrast ratios”
“for disabled people”
“developer will take care of it”

6. Henry Charge
Accessibility
≠
Disability
Accessibility
=
Universality

7. Henry Charge

8. Henry Charge
“Responsive design”
“Rapid prototyping”
“JavaScript frameworks”
“Accessibility…”
“Yes!”
“Sure”
“Why not”
“Hmm, how much?”
2012

9. Henry Charge
“We don’t have any disabled users”

10. Henry Charge
This shouldn’t be hard or expensive.
If you leave it until the end, it will be.
Building inclusive services is part of your job.

11. Henry Charge
Where it hit me

12. Henry Charge

13. Henry Charge
Find an apprenticeship

14. Henry Charge
1. Understand user needs
2. Do ongoing user research
12. Make sure users succeed first time
14. Encourage everyone to use the digital service
4 points from the GDS Service Standard

15. Henry Charge
“The power of the Web is in its
universality. Access by everyone regardless
of disability is an essential aspect.”
- Tim Berners Lee, inventor of the World Wide Web

16. Henry Charge

17. Henry Charge
60% of people without disabilities use accessibility features.
Accessibility ≠ Disability.

18. Henry Charge
Arthritis
Deaf
Hearing impaired

19. Henry Charge
iOS QuickType
2014
KeyStrokes
Before 2010

20. Henry Charge
Technology transforming the lives of disabled people

21. Henry Charge
Aipoly Vision

22. Henry Charge
The future

23. Not all disabilities are permanent
https://www.microsoft.com/en-us/design/inclusive

24. Henry Charge
Be selfish, if you have to.
Anyone can have an accident, and everybody gets older.

25. Henry Charge
Back to GDS

26. Henry Charge
 XyL
dASe
i
XyL
dASe
i
XyL
dASe
i
accessibility
"#
Designing for

Digital, Data and Technology
This work is licensed under the Creative Commons Attribution-
NonCommercial-ShareAlike 4.0 International License. To view a copy of
this license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.
Designing for users with
dyslexia
XyL
dASe
i
XyL
dASe
i
XyL
dASe
i
Do… Don’t…
let users change
the contrast be-
tween background
and text
!
put too much
information in
one place
!
rely on accurate
spelling - use
autocorrect or
provide suggestions
"dyslexia
dsyle
keep content
short, clear
and simple
force users to remember
things from previous
pages - give reminders
and prompts
#
#consider producing
materials in other
formats (for example,
audio or video) $
align text to the
left and keep a
consistent
layout
underline words,
use italics or
write in capitals
DON’T
DO THIS
use large
blocks of
heavy text %%
use images
and diagrams
to support text
&
Digital, Data and Technology
For more information, contact:
access@digital.homeoffice.gov.uk
This work is licensed under the Creative Commons Attribution-
NonCommercial-ShareAlike 4.0 International License. To view a copy of
this license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.
!"Designing for users of
screen readers
Do… Don’t…
write descriptive
links and headings Contact us
write uninformative
links and headings Click here
build for keyboard
use only
# force mouse or
screen use
$
structure content
using HTML5
<h1>
<nav>
<label>
rely on text size
and placement
for structure Header
36pt, bold
follow a linear,
logical layout
! spread content
all over a page
!
describe images
and provide
transcripts
for video
<alt>
only show
information in an
image or video
Digital, Data and Technology
For more information, contact:
access@digital.homeoffice.gov.uk
This work is licensed under the Creative Commons Attribution-
NonCommercial-ShareAlike 4.0 International License. To view a copy of
this license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/.https://github.com/UKHomeOffice/posters/tree/master/accessibility

27. Henry Charge
Write in plain language
Do this.

28. Henry Charge
http://www.hemingwayapp.com
Your text has an average grade level of
about 7. It should be easily understood by
12 to 13 year olds.
https://www.webpagefx.com/tools/read-able/

29. Henry Charge
Your text has an average grade level of
about 15. It should be easily understood by
20 to 21 year olds.
https://www.webpagefx.com/tools/read-able/
Don’t use figures of
speech or idioms
http://www.hemingwayapp.com

30. Henry Charge
Describe visual content
<alt>

31. Henry Charge

32. Henry Charge
“I have some vision issues that do not normally affect my ability to
work effectively on computer screens. I recently completed an
eTray exercise for another government affiliated organisation
however that was extremely difficult to navigate due to erratic
behaviour when magnifying the page (Ctrl and mouse roll in
Windows).
Can I commend you on the accessibility of this test environment,
this was a far less stressful experience!
Thank you.”
- User with visual impairments

33. Henry Charge
Don’t only show
information in
images or videos

34. Henry Charge
Structure content using semantic HTML
<button>

35. Henry Charge

36. Henry Charge
A fieldset
used wrong

37. Henry Charge
Build for keyboard use only

38. Henry Charge

39. Henry Charge
Don’t rely on
mouse or
screen use

40. Henry Charge
Contact us
Write descriptive links and headings

41. Henry Charge

42. Henry Charge
Don’t be vague or
unpredictable

43. Henry Charge
Yes
Use large, clickable areas

44. Henry Charge
“You guys are like the 4th
emergency service for me…
This is the most accessible
website I have used in the last
15 years…
Don’t mess it up”
- Visually impaired user of TfGM

45. Henry Charge
Don’t demand
precision

46. Henry Charge
!Use good contrast and allow users to adjust
contrast if necessary

47. Henry Charge

48. Henry Charge

49. Henry Charge
Don’t use low contrast
and small font sizes

50. Henry Charge
“The biggest misconception about
accessibility is that by adding it you are
doing someone a favour. You’re not,
you’re doing your job.”
- James Williamson (@jameswillweb), developer at lynda.com

51. Henry Charge

52. Henry Charge
Test with real users

53. Henry Charge
Thanks
People and links:
Alastair Duggin (Government Digital Service) - Karwai Pun (Home
Office)
https://accessibility.blog.gov.uk/category/accessibility-and-me/
https://github.com/UKHomeOffice/posters/tree/master/accessibility
Microsoft Inclusive design - http://microsoft.com/en-us/design/
inclusive
Hemingway - http://hemingwayapp.com/
Royalty-free images - http://unsplash.com/
Adrian Roselli - http://adrianroselli.com/2017/03/selfish-
accessibility-slides-from-talk-at-government-digital-service.html
Valtech medium - https://medium.com/valtech-design
Slides - hen.gr/FrontEnders
Twitter
Molly Watt - @MollyWattTalks
James Williamson - @jameswillweb
Alastair Duggin - @dugboticus
Hugo Giraudel - @HugoGiraudel
Heydon Pickering - @heydonworks
Adrian Roselli - @aardrian
Paciello Group - @paciellogroup
Léonie Watson - @LeonieWatson
Leena Haque - @L1L_Hulk
Me - @henry_neves7