Presentation to CIty Interaction Lab HCID2019

1. Designing Accessible
(Written) Content
Abi James, Senior Accessibility Consultant
@abijames

2. How would you feel if your users said….
“I’m lost”
“It’s giving me a headache”
“There’s no option for that”
“I’m exhausted”
“Where’s the checkout button?”

3. Accessibility and usability overlap
• Usability concerns
become accessibility
issues when they cause
barriers and difficulties
for people with particular
characteristics
• Many usability issues
affect people with
cognitive and learning
disabilities

4. Working memory & cognitive
disabilities
Can become:
• consumed by
facilitating basic tasks
• overwhelmed by
distractors
• confused by unfamiliar
content
People with cognitive & learning difficulties
characterised by reduced working memory
capacity

5. What factors affect the usability
and accessibility of this content?
READABILITY IS THE EASE WITH
WHICH A WRITTEN TEXT CAN BE
UNDERSTOOD BY A READER.
THE READABILITY OF A
PARTICULAR TEXT DEPENDS
BOTH ON ITS CONTENT (FOR
EXAMPLE, THE COMPLEXITY OF
ITS VOCABULARY AND SYNTAX)
AND ON ITS TYPOGRAPHY.
Readability is the
ease with which a
written text can be
understood by a
reader.
The readability of
a particular text
depends both on its
content (for
example, the
complexity of its
vocabulary and
syntax) and on its
typography.
Readability is the ease with which a
written text can be understood by a
reader. The readability of a particular
text depends both on its content (for
example, the complexity of its
vocabulary and syntax) and on its
typography.
Readability is the ease with which a
written text can be understood by a
reader. The readability of a particular
particular text depends both on its
content (for example, the complexity of
of its vocabulary and syntax) and on its
its typography .

6. Content accessibility
How does layout, design and format affect legibility
and readability?
• Fonts
• Layout – spacing, alignment & columns
• Styling and emphasis
• Structure
• Colour
• Language
British Dyslexia Association
Style guide to dyslexia-
friendly text
http://bit.ly/bda-style-2018

7. 1. Fonts:
Use Sans Serif fonts not Serif
Good examples:
Arial, Calibri, Verdana, Open Sans

8. What about specific dyslexia
fonts?
• No evidence that beneficial for all dyslexic readers and can
be more difficult for non-dyslexia readers.
• Research shows familiar Sans Serif fonts such as Arial
are preferred by general reading population
• Word, character and line spacing shows larger impact
on dyslexic readers.

9. Font size and letter spacing
• Increase letter & word spacing helps
• For standard text, use 12-14pt font size.
• But remember not all font sizes are the same……

10. 2. Line spacing and line length
Aid word discrimination & visual
processing by:
• Left justify text
• Shorter lines
• 1.5 line spacing

11. 3. Styling and emphasis
To aid letter and word recognition:
• Use sentence case. Avoid ALL CAPITALS
• Use bold, avoid underline or italics
Graphical cues can help
• Familiar icons processed quicker than text
• Colour borders / boxes can help - principle of
common regions

12. What factors affect the usability
and accessibility of this content?
READABILITY IS THE EASE WITH
WHICH A WRITTEN TEXT CAN BE
UNDERSTOOD BY A READER.
THE READABILITY OF A
PARTICULAR TEXT DEPENDS
BOTH ON ITS CONTENT (FOR
EXAMPLE, THE COMPLEXITY OF
ITS VOCABULARY AND SYNTAX)
AND ON ITS TYPOGRAPHY.
Readability is the
ease with which a
written text can be
understood by a
reader.
The readability of
a particular text
depends both on
its content (for
example, the
complexity of its
vocabulary and
syntax) and on its
typography.
Readability is the ease with
which a written text can be
understood by a reader.
The readability of a particular
text depends both on its content
(for example, the complexity of its
vocabulary and syntax) and on its
typography.
Readability is the ease with which
a written text can be understood
by a reader. The readability of a
particular text depends both on its
content (for example, the
complexity of its vocabulary and
syntax) and on its typography.

13. 4. Structure –
Break-up text with headings
• Make it easier to skim
and navigate
• Provide visual cues to
aid reading
• Aids consistency
• Allow users to create
outline
• Helps with navigation

14. 5. Colour
• Provide sufficient contrast between fore/background
colours but avoid red/green
• Do not use only colour to convey meaning
• If possible avoid Black on White.
Popular background colours
Cream with black font found to be readable & popular
CreamPale blue Rose Pale green

15. 6. Language & readability
• UK average reading age ~11
But “reading age” is not a good
measure
• Context & language specific
Write for your audience & then
revise to make it clearer

19. Is this part of accessibility
standards?
Legibility, readability and design is more difficult to test
• Context specific
• Culturally specific
• Rarely pass/fail scenarios – but often picked up in
user test
WCAG 2.1 added success criteria for COGA:
1.3.5 Identify Input Purpose (AA)
1.4.10 Reflow (AA)
1.4.12 Text Spacing (AA)
Also European Standard on mobile apps & cognitive

20. Final thoughts
• Think about your audience & minimise
cognitive load
• Consider legibility & readability as early as
possible in the design process
• Visual design can impact readability as
much as the language and terminology

21. AbilityNet
A digital world, accessible to all
Digital Accessibility Services
HE, DSA & Workplace Services
Workplace Services
IT Support at Home
Advice and Information
Accessibility Events
IAAP Certification
https//abilitynet.org.uk/ @AbilityNet