Layout Guidelines for Web Text and a Web Service
to Improve Accessibility for Dyslexics
W4A 2012, Lyon
Luz RelloNLP & Web Research Groups
Universitat Pompeu Fabra Barcelona, Spain
Gaurang KanvindeDirector of Accessible Systems
Mumbai, India
Ricardo Baeza-YatesYahoo! Research Barcelona &
Web Research Group Universitat Pompeu Fabra
Outline
— Motivation
— Related Work & Dyslexia
— Experimental Methodology
— Results & Guidelines
— Application & Demo
— Conclusions & Future Work
Outline
Baeza-Yates, R. and Rello, L. Web Quality 2011, Lyon On Measuring the Lexical Quality of the Web
OutlineWhy?
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Social Relevance
Frequent and universal
universal neuro-cognitive basis for dyslexia [30]
variable manifestations
3.5% for Italian [6]10-17.5% U.S.A population [20]0.28% of web pages in English [2]38 million in Europe
“Good for dyslexics, useful for all”
Dyslexic-accessible practices
Dyslexia
Web democratization
universality, essential property of the Web [42]
access to information basic human right [40]
OutlineRelated Work
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Dyslexia & Web Accessibility
Usability tests
— semi structured interviews (10 dyslexic users) [1]— assignments after reading texts (27 users) [25] — interviews, questionnaires, log sheets and focus groups (9 users)[11] — performing tasks in a website (6 users)
General cognitive disabilities [7, 24]
scarce [26]SpecificRecommendations
Dyslexic accessible practices [4, 34, 43]
benefits non–dyslexics [25; 13; 26]
overlap with guidelinese.g. low-literacy [28] or low vision [16]
No universal profile of a dyslexic user [28, 19] customizable environment
OutlineRelated Work
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Tools for Dyslexics
related applications
Most visited Web pages currently offer no accessibility options for their dyslexic users
— Claro Read Standard— ReadingPenTS Oxford — DiTres6
— SeeWord [18]— Claro ScreenRuler Suite — Colour Explorer
— Penfriend XL— Spell-checker [31]
Layout
Language
Text-to-speech
OutlineTwo Contributions
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Novel Approach
A web service alternative for reading texts using a standard browser
user customizable
A set of guidelines
for dyslexic-friendly text in the Web
based on an extensive user study which combines data of
— eye tracking — interviews — questionnaires
Novel Application
OutlineDyslexia
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
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]
Manifestations are variable and culture-specific [17]
— Consistency — Regularity— Orthography
— Transparency scale for European languages [36]— Hidden disability [41]
— phonological — surface — deep
Types
OutlineDifficulties of Dyslexia
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
(a) Phonology: — Homophonic words or pseudo–homophonic words, e.g. weather and whether [29](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](d) Discourse: — Fixation problems [27] — Punctuation recognition [27]
related to the visual changes [19]
• Surface dyslexia:
• Phonological dyslexia:
• Both dyslexias:
Dyslexic reading problems
OutlineExperimental Methodology
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
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
— Education — Similar
10 participants — < 4 hours/day 9 participants — 4-8 hours/day, 3 participants — > 8 hours/day
10 participants — were studying/finished university 10 participants — school or high school and 2 participants — no higher education.
OutlineExperimental Methodology
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Procedure
Pompeu Fabra University
1 to 1,5 hours
QuestionnaireSemi structured
interview
Demographic informationDifficultiesStrategies
Eye trackingReading test
Questionnaire Replay test
Interface improvements(14 participants)Prototype Evaluation
Open interviewOpinions Assistive technologies
Quantitative DataReadability
Qualitative DataUsers preference
OutlineExperimental Methodology
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Design
Features and values
Reading test
(1) Difficulties that dyslexic people find(2) Designing web pages for dyslexics [32, 5, 4] (3) Previous user studies [1, 19, 18]
— sans serif arial [1] — unjustified text [32]
based on
recommendedpresentation
two stories
verse
prose
36 parts:different layout
(random order, no combinations among features)
— same genre— same topic — number of words or syllables— number of named entities — same rhythm and pace
comparable texts
OutlineExperimental Methodology
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
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):
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 lines7 — Paragraph spacing: 0.5, 1, 2 and 3 lines 8 — Column width: 22, 44, 66 and 88 characters per line
white/blackoff-white/off-blackyellow/blackwhite/blue
creme/black,light mucky green/dark brown, dark mucky green/brown yellow/blue
Features and Values
OutlineExperimental Methodology
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
— Tobii T50 (17-inch TFT monitor) — Calibrated for each participant — Same light focus — Same position — Constant distance (approximately 60 cm., fixed chair)
— Eye tracking data was Tobii Studio 3.0 — R 2.14.1 statistical software
— One way ANOVA
— Pearson correlation coefficient
Data Analysis
Equipment
Qualitative DataReadability
Quantitative DataUsers preference
OutlineResults
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
What are we looking for?
— Shorter fixations are preferred to longer ones
— Majority agreement among users
longer fixations mean greater processing loads [22]
1 — Differences between the dyslexics and the control group
2 — Detailed analysis of the different values among the dyslexic users
OutlineResults
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Two Groups
mean of fixation time (seconds)
dyslexic non-dyslexic
(p < 0.038, 95% confidence)
0.23 0.20
Outline
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Font and Background
— Black text on a pure white background is not recommend [4]— No guidelines about gray scalesRecommended
16 users
Value Fixation Duration Preferences seconds % %
— 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)
14.5 users
Results
Outline
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Colors
Value Fixation Duration Preferences seconds % %
— The yellow/black paradox: most selected, the slowest— Creme/black: British Dyslexia Association for their Website
8.3 users
— Poor color selections [26]— Pair off-white/off-black [4]— Mucky green/brown and yellow/blue pairs [18, 19]— High contrast creates vibration, diminishes readability [33]
Key problemsRecommended
p < 0.109
lower than the W3C algorithm
Results
Outline
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Font Size
— Text too small [26]— 12 or 14 points [1, 5, 4]
Key problemsRecommended
— 26 points or “The bigger the better” — 14 points— Same column width
p < 0.001
Value Fixation Duration Preferences seconds % %
14 users
8 users
Results
There should be a saturation point
Outline
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Character, Line and Paragraph Spacing
— Larger distance between words & reduced letter-spacing [32]— Clear spacing between letter combinations [34]Recommended
— “The narrower the longer” Correlations
14 users
8.5 users
8.5 users
character spacing (-0.589)
line spacing (-0.592)
Results
Outline
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Column Width
— Not too long lines –60 to 70 characters– [5, 4]— Avoid narrow columns [5]Recommended
— Best correlations (-0.751)quantitative data
qualitative data
7 users
2 users
Value Fixation Duration Preferences seconds % %
Results
OutlineDyslexic-friendly Guidelines for Web Text
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Criteria
fixation length user preferences at odds eye tracking data
not a clear favorite no optimal value
average of the two best values + more weight to the user preferences
OutlineWeb Service
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
AccessibleNews DysWebxia
Extension of the AccessibleNews DAISY [23] Accessible Systems, India (W4A11)
Resides on a server and it is accessed using a web browser
Detects useful text from a web page, and renders it in a simplified manner
(machine learning)
Customize the parameters
Web-based service
possible to createthe combination best suited for persons with dyslexia
OutlineAccessibleNews DysWebxia
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
http://www.accessiblenews.co.in/dyswebxia/Demo (Beta Version)
OutlineAccessibleNews DysWebxia
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Customizable Parameters
OutlineConclusions
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
• 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
OutlineFuture and Ongoing Work
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
• 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?
Research
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)
OutlineThank you :-)!
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Any Questions?
Demo: http://www.accessiblenews.co.in/dyswebxia/
More information: [email protected] (DysWebxia) [email protected] (AccessibleNews)
OutlineAcknowledgments
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
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.
OutlineReferences
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
OutlineReferences
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
OutlineReferences
Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
Top Related