1. Web Accessibility And
People With Dyslexia:
A Survey On Techniques
And Guidelines
W4A 2012, April 17th, 2012
Vagner F. de Santana (IC/UNICAMP)
Rosimeire de Oliveira (CMCC/UFABC),
Leonelo D. A. Almeida (IC/UNICAMP), and
Prof. M. Cecilia C. Baranauskas (IC/UNICAMP)
3. Motivation
• Web accessibility usually refers to visual
disabilities
• 15 to 20% of the people have dyslexia (IDA)
• Commonly found in men; 60-80% (APA)
• How to design user interface (UI) also for
people with dyslexia?
• How many studies have you heard/read/saw
about dyslexia?
3
4. Objective
• Bring to light some specificities of dyslexia
• Review literature on dyslexia and Web
accessibility
• Synthesize techniques and guidelines to
avoid/eliminate accessibility barriers
• Organize guidelines considering maintainers’
roles
o Developers
o Designers
o Content producers 4
5. Understanding dyslexia
• Dyslexia has a Greek origin
o "dis" means disorder
o "lexia" means language
• Dyslexia is a language disorder
• Neurology views dyslexia as a neurological
disorder of genetic origin
• Dyslexia is also viewed as having multiple
factors (biological and functional)
5
6. Understanding dyslexia
• People with dyslexia have difficulties to
understand written words and sentences
• People with dyslexia can benefit from using
o Screen readers
o Voice recorders
o Voice synthesizers
o Spell checkers
o Screen magnifiers
6
7. Understanding dyslexia
• However, dyslexia does not mean
o Low intellectual level
o Low intelligence
o Low educational attainment
o Disease
• It is a specific brain impairment related to
language processing.
7
8. Understanding dyslexia
→ Diagnosis
A) Reading achievement [...] is substantially
bellow that expected [...].
B) The disturbance in Criterion A significantly
interferes with academic achievements or
activities of daily living that require reading
skills.
C) If a sensory deficit is present, the reading
difficulties are in excess of those usually
associated with it. (DSM-IV)
8
9. Methodological
→ Stance
• Universal Design (UD):
o Design of something that is usable by everyone, in
the widest possible extension, without the need for
adaptation or specialized design
• Inclusive Design (ID)
o Considering the needs of all users in mainstreams
applications, not only in systems especially designed
for people with disabilities
• This work follows UD and considers ID in the
whole process
9
10. Methodology
→ Procedure
1. Collect outcomes involving dyslexia and
Web accessibility (from organizations,
papers, and guidelines)
2. Cluster extracts
3. Compile and write them in a guideline style
4. Organize guidelines according to UI
elements they refer
5. Set a priority level according to website
maintainers’ roles (i.e., developers,
designers, and content producers)
10
11. Results
→ Groups identified
1. Navigation
2. Text presentation
3. Writing
4. Layout
5. Images and charts
6. End user customization
7. Markup
8. Colors
9. Videos and audios 11
14. Results
→ Guidelines examples
1. Navigation
o Structure index pages considering logical order
involving task sequence or structure
o Provide self completion and orthographic correction
in internal search
www.google.com
14
15. Results
→ Guidelines examples
1. Colors
o Avoid pure white as the background, because white
can obfuscate the text for people with dyslexia;
a close alternative is the light gray (#FFFFE5)
15
16. Results
→ Guidelines examples
1. Text presentation
o Do not use justified alignment due to irregular
spacing between words
o Avoid fonts with serif
o How many 8s and Gs are presented bellow?
g
g 8
8 g g 8 g 8 g
8 8 8 g
8
16
17. Results
→ Guidelines examples
1. Writing
o Use short and common words
o Use active voice
o Instead of: The login is needed in order to use the
system
o Use: You need to login into the system
17
18. Results
→ Guidelines examples
1. Layout
o Provide white space among UI elements
o Avoid large columns of texts
“Horatio says 'tis but our fantasy, And will not let belief take hold of him Touching this dreaded sight, twice seen of
us: Therefore I have entreated him along With us to watch the minutes of this night; That if again this apparition
come, He may approve our eyes and speak to it.” (Shakespeare)
“Horatio says 'tis but our fantasy,
And will not let belief take hold of him
Touching this dreaded sight, twice seen of us:
Therefore I have entreated him along
With us to watch the minutes of this night;
That if again this apparition come,
He may approve our eyes and speak to it. ”
(Shakespeare)
18
19. Results
→ Guidelines examples
1. Images and charts
o Avoid moving or blinking images
o Use images, charts, and pictures to complement
textual information
19
20. Results
→ Guidelines examples
1. End user customization
o The website should be easily customizable
o Provide color scheme, font type, and text size
customization features
www.dyslexia-parent.com/
mag35.html
20
21. Results
→ Guidelines examples
1. Markup
o Code so that the website can be read by screen
readers
o Guarantee that markup is valid
validator.w3.org
21
22. Results
→ Guidelines examples
1. Videos and audios
o Do not play them automatically when the page loads
o Do not rely only on one media to provide content
www.uol.com.br 22
23. Discussion
• Guidelines show convergence,
but some conflicts have occurred
o White background x light gray background
o Fluid design x width length
• WCAG directly cites dyslexia in success
criteria (i.e., 3.1.5 Reading level)
• Lack of explicit consideration of dyslexia
might divide users needs from maintainers
• End user customization plays a central role
as a conflict solver 23
24. Conclusion
• Dyslexia is still not well understood
• Its specificities are not addressed by Web
Accessibility standards
• Guidelines help on the understanding of
o Limitations of people with dyslexia
o How to remove/avoid accessibility barriers
• Future works involve
o Integration of the surveyed guidelines into other sets
o Explore solutions (e.g., end user customization)
24
25. Thank you!
vsantana@ic.unicamp.br
Acknowledgements: FAPESP (grants #2009/10186-9 and
#2011/06399-7) and UFABC for supporting this research
25