Layout Guidelines for Web Text
and a Web Service
to Improve Accessibility for Dyslexics
Luz Rello Gaurang Kanvinde Ricardo Baeza-Yates
NLP & Web Research Groups Director of Accessible Systems Yahoo! Research Barcelona &
Universitat Pompeu Fabra Mumbai, India Web Research Group
Barcelona, Spain Universitat Pompeu Fabra
W4A 2012, Lyon

Outline
Outline
— Motivation
— Related Work & Dyslexia
— Experimental Methodology
— Results & Guidelines
— Application & Demo
— Conclusions & Future Work
Baeza-Yates, R. and Rello, L. Web Quality 2011, Lyon On Measuring the Lexical Quality of the Web

Why?
Outline
Dyslexia universal neuro-cognitive basis for dyslexia [30]
Frequent and
universal 3.5% for Italian [6]
variable 10-17.5% U.S.A population [20]
manifestations 0.28% of web pages in English [2]
38 million in Europe
Social “Good for dyslexics,
Dyslexic-accessible practices
Relevance useful for all”
universality, essential property of the Web [42]
Web
democratization
access to information basic human right [40]
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Related Work
Outline
General cognitive disabilities [7, 24]
Recommendations
Specific scarce [26]
— semi structured interviews (10 dyslexic users) [1]
— assignments after reading texts (27 users) [25]
Usability
— interviews, questionnaires, log sheets
tests
Dyslexia & and focus groups (9 users)[11]
Web — performing tasks in a website (6 users)
Accessibility
Dyslexic accessible
benefits non–dyslexics [25; 13; 26]
practices [4, 34, 43]
e.g. low-literacy [28]
overlap with guidelines
or low vision [16]
No universal profile of
a dyslexic user [28, 19] customizable environment
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Related Work
Outline
Most visited Web pages currently offer no accessibility options for
their dyslexic users
— SeeWord [18]
Tools for Layout — Claro ScreenRuler Suite
Dyslexics — Colour Explorer
— Penfriend XL
related applications Language
— Spell-checker [31]
— Claro Read Standard
Text-to-
— ReadingPenTS Oxford
speech
— DiTres6
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Two Outline
Contributions
Novel Approach
A set of guidelines based on an extensive — eye tracking
user study which — interviews
combines data of — questionnaires
for dyslexic-friendly
text in the Web
Novel Application
alternative for reading texts using a standard browser
A web service
user customizable
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Dyslexia
Outline
Dyslexia is a specific learning/reading disability which is neurological in
origin. It is characterized by difficulties with accurate and/or fluent word recognition
and by poor spelling and decoding abilities. These difficulties typically result from a
deficit in the phonological component of language that is often unexpected in
relation to other cognitive abilities. Secondary consequences may include problems in
reading comprehension and reduced reading experience that can impede
growth of vocabulary and background knowledge [21]
— phonological
Types — surface
— deep
— Consistency
— Orthography — Regularity
Manifestations are
variable and
— Transparency scale for European languages [36]
culture-specific [17]
— Hidden disability [41]
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Difficulties of Dyslexia
Outline
Dyslexic reading problems related to the visual changes [19]
• Surface dyslexia: (a) Phonology:
— Homophonic words or pseudo–homophonic words,
e.g. weather and whether [29]
• Phonological dyslexia: (b) Orthography:
— Orthographic similar words, e.g. addition and audition [15]
— Number and letter recognition/recollection [27]
(c) Lexicon & Syntax:
— Word additions and omissions [27]
— Word recognition and recollection [27]
— Functional words substitution, e.g. of by for [29]
— Confusions of small words, e.g. in by is [12]
• Both dyslexias: (d) Discourse:
— Fixation problems [27]
— Punctuation recognition [27]
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Experimental Methodology
Outline
Participants with Dyslexia Control group
— 22 participants (12 female, 10 male) — Same number
— Native Spanish speakers — Idem
— Confirmed diagnosis of dyslexia
— Ages ranging from 13 to 37, with a mean of 21.1 — 21.3
— Two participants with attention deficit disorder
— Frequent users of Internet and frequent readers — Idem
10 participants — < 4 hours/day
9 participants — 4-8 hours/day,
3 participants — > 8 hours/day
— Education — Similar
10 participants — were studying/finished university
10 participants — school or high school and
2 participants — no higher education.
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Experimental Methodology
Outline
Procedure
Demographic
Questionnaire
information
Semi structured
Difficulties
interview
Strategies
1 to 1,5
Quantitative Data hours
Reading test Eye tracking
Readability
Pompeu
Qualitative Data Fabra
Users preference Questionnaire Replay test
University
Opinions
Open interview
Assistive technologies
Interface improvements
Prototype Evaluation
(14 participants)
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Experimental Methodology
Outline
Design
(1) Difficulties that dyslexic people find
(2) Designing web pages for dyslexics [32, 5, 4]
(3) Previous user studies [1, 19, 18]
two stories
based on
36 parts:
verse
different Features and (random order,
Reading test
layout values no combinations
prose
among features)
comparable texts
recommended
— same genre presentation
— same topic
— number of words or syllables
— number of named entities — sans serif arial [1]
— same rhythm and pace — unjustified text [32]
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Experimental Methodology
Outline
Features and Values
1 — Font grey scale: brightness values (0%, 25%, 50% and 75%) (white background)
2 — Background grey scale: 100%, 75%, 50% and 25% (white fonts)
3 — Color pairs, eight color pairs (background/font):
white/black creme/black,
off-white/off-black light mucky green/dark brown,
yellow/black dark mucky green/brown
white/blue yellow/blue
4 — Font size: 14, 18, 22 and 26 points
5 — Character spacing: -7%, 0%, +7% and 14%
6 — Line spacing: 0.8, 1, 1.2 and 1.4 lines
7 — Paragraph spacing: 0.5, 1, 2 and 3 lines
8 — Column width: 22, 44, 66 and 88 characters per line
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Experimental Methodology
Outline
Equipment
— Tobii T50 (17-inch TFT monitor)
— Calibrated for each participant
— Same light focus
— Same position
— Constant distance (approximately 60 cm., fixed chair)
Data Analysis
— Eye tracking data was Tobii Studio 3.0
— R 2.14.1 statistical software
Quantitative Data
— One way ANOVA Users preference
Qualitative Data
— Pearson correlation coefficient Readability
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Results
Outline
What are we looking for?
longer fixations mean
— Shorter fixations are preferred to longer ones
greater processing loads [22]
— Majority agreement among users
1 — Differences between the dyslexics and the control group
2 — Detailed analysis of the different values among the dyslexic users
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Results
Outline
Two Groups
dyslexic non-dyslexic
mean of
0.23 0.20
fixation
(p < 0.038, 95% confidence) time
(seconds)
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Results
Outline
Font and Background
— Black text on a pure white background is not recommend [4]
Recommended
— No guidelines about gray scales
— Most of our participants said that grey actually did not help them
— Qualitative and quantitative data for the gray scales in background are
inversely correlated (-0.510)
Value Fixation Duration Preferences
seconds % %
16 users
14.5 users
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Results
Outline
Colors
Key problems — Poor color selections [26]
Recommended — Pair off-white/off-black [4]
— Mucky green/brown and yellow/blue pairs [18, 19]
— High contrast creates vibration, diminishes readability [33]
— The yellow/black paradox: most selected, the slowest
p < 0.109
— Creme/black: British Dyslexia Association for their Website
Value Fixation Duration Preferences
seconds % % lower than
the W3C
algorithm
8.3 users
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Results
Outline
Font Size
Key problems — Text too small [26]
Recommended — 12 or 14 points [1, 5, 4]
There should be a saturation point
— 26 points or “The bigger the better”
p < 0.001
— 14 points
— Same column width
Value Fixation Duration Preferences 14 users
seconds % %
8 users
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Results
Outline
Character, Line and Paragraph Spacing
— Larger distance between words & reduced letter-spacing [32]
Recommended
— Clear spacing between letter combinations [34]
character spacing (-0.589)
— “The narrower the longer” Correlations
line spacing (-0.592)
14 users
8.5 users
8.5 users
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Results
Outline
Column Width
— Not too long lines –60 to 70 characters– [5, 4]
Recommended
— Avoid narrow columns [5]
qualitative data
— Best correlations (-0.751)
quantitative data
Value Fixation Duration Preferences
seconds % %
7 users
2 users
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Dyslexic-friendly Guidelines for Web Text
Outline
Criteria
fixation length
at odds eye tracking data
user preferences
not a clear favorite average of the two best values +
no optimal value more weight to the user preferences
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Web Service
Outline
AccessibleNews DysWebxia
Extension of the AccessibleNews DAISY [23]
Accessible Systems, India (W4A11)
Web-based service Resides on a server and it is accessed
using a web browser
Detects useful text from a web page, (machine
and renders it in a simplified manner learning)
possible to create
the combination best
suited for persons
with dyslexia Customize the parameters
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

AccessibleNews DysWebxia
Outline
Demo (Beta Version) http://www.accessiblenews.co.in/dyswebxia/
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

AccessibleNews DysWebxia
Outline
Customizable
Parameters
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Conclusions
Outline
• Dyslexia not only varies between languages but also between subjects
• We provide a set of guidelines for the layout features that make more
readable texts for dyslexics users
• There are still problems found by dyslexic individuals which remain
unsolved
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Future and Ongoing Work
Outline
Research
• More layout experiments: size, interaction color/size/font
• Which strategies that modify the text are beneficial for dyslexic users?
• Language adaptation (NLP, linguistics, Web as corpus, etc.)?
• To which extent spelling errors and non–normative words affects the
readability and the understandability for dyslexic people?
• Which strategies benefit all people?
Development
• Adapt our guidelines to other environments, such as mobile devices
(IDEAL eBook Reader demo)
• Use our guidelines in games for dyslexic children to overcome dyslexia
(DysEggxia demo)
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Thank you :-)!
Outline
Any Questions?
Demo: http://www.accessiblenews.co.in/dyswebxia/
More information:
luzrello@acm.org (DysWebxia)
gaurang@accessiblenews.co.in (AccessibleNews)
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

Acknowledgments
Outline
We thank Mari-Carmen Marcos for her assistance with the eye tracker
hardware and Joaquim Llisterri for his invaluable help distributing our
experiments announcement among experts.
For their altruistic help in contacting dyslexic people we are indebted
to Anna Eva Jarabo, María Fuentes Fort, Beatriu Pasarin, Dúnia
Pèrdrix i Solàs, Toni Martí, Verónica Moreno, Emma Rodero, Olga
Soler, Berta Torres, María Vilaseca and Silvia Zaragoza.
Special thanks go to all the anonymous dyslexic participants and their
families. Some of them made a great effort to come to the lab to
undertake the reading test.
We also thank the anonymous reviewers.
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

References
Outline
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

References
Outline
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

References
Outline
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics