Layout Guidelines for Web Text                  and a Web Service         to Improve Accessibility for Dyslexics        Lu...
Outline                                         Outline        — Motivation        — Related Work & Dyslexia        — Expe...
Why?                                         Outline                      Dyslexia            universal neuro-cognitive ba...
Related Work                                        Outline                                                   General     ...
Related Work                                      Outline                      Most visited Web pages currently offer no ac...
Two Outline                                       Contributions                                        Novel Approach     ...
Dyslexia                                         Outline    Dyslexia is a specific learning/reading disability which is neu...
Difficulties of Dyslexia                                      Outline     Dyslexic reading problems                         ...
Experimental Methodology                                  Outline          Participants with Dyslexia                     ...
Experimental Methodology                                 Outline     Procedure                                            ...
Experimental Methodology                                 Outline     Design                                               ...
Experimental Methodology                                  Outline     Features and Values        1 — Font grey scale: brig...
Experimental Methodology                                 Outline     Equipment      — Tobii T50 (17-inch TFT monitor)     ...
Results                                        Outline     What are we looking for?                                       ...
Results                                         Outline     Two Groups                            dyslexic                ...
Results                                          Outline     Font and Background                          — Black text on ...
Results                                          Outline     Colors     Key problems         — Poor color selections [26] ...
Results                                          Outline     Font Size     Key problems         — Text too small [26]     ...
Results                                        Outline     Character, Line and Paragraph Spacing                          ...
Results                                         Outline     Column Width                          — Not too long lines –60...
Dyslexic-friendly Guidelines for Web Text                             Outline     Criteria             fixation length     ...
Web Service                                   Outline     AccessibleNews DysWebxia                                 Extensi...
AccessibleNews DysWebxia                                   Outline    Demo (Beta Version)            http://www.accessible...
AccessibleNews DysWebxia                                   Outline    Customizable    ParametersRello, Kanvinde, & Baeza-Y...
Conclusions                                   Outline        • Dyslexia not only varies between languages but also between...
Future and Ongoing Work                                   Outline    Research        • More layout experiments: size, inte...
Thank you :-)!                                   Outline         Any Questions?         Demo: http://www.accessiblenews.co...
Acknowledgments                                    Outline         We thank Mari-Carmen Marcos for her assistance with the...
References                                 OutlineRello, Kanvinde, & Baeza-Yates   W4A 2011, Lyon   Guidelines & Web Servi...
References                                 OutlineRello, Kanvinde, & Baeza-Yates   W4A 2011, Lyon   Guidelines & Web Servi...
References                                 OutlineRello, Kanvinde, & Baeza-Yates   W4A 2011, Lyon   Guidelines & Web Servi...
Upcoming SlideShare
Loading in …5
×

Luz Rello, Gaurang Kanvinde & Ricardo Baeza Yates-Layout Guidelines for Web Text and a Web Service to Improve Accessibility for Dyslexics-W4a2012

2,608 views

Published on

In this paper, we offer set of guidelines and a web service that presents Web texts in a more more accessible way to people with dyslexia. The layout guidelines for developing this service are based on a user study with a group of twenty two dyslexic users. The data collected from our study combines qualitative data from interviews and questionnaires and quantitative data from tests carried out using eye tracking. We analyze and compare both kinds of data and present a set of layout guidelines for making the text Web more readable for dyslexic users. To the best of our knowledge, our methodology for defining dyslexic-friendly guidelines and our web service are novel.

Published in: Technology, Education
  • Be the first to comment

Luz Rello, Gaurang Kanvinde & Ricardo Baeza Yates-Layout Guidelines for Web Text and a Web Service to Improve Accessibility for Dyslexics-W4a2012

  1. 1. Layout Guidelines for Web Text and a Web Service to Improve Accessibility for Dyslexics Luz Rello Gaurang Kanvinde Ricardo Baeza-YatesNLP & 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
  2. 2. Outline Outline — Motivation — Related Work & Dyslexia — Experimental Methodology — Results & Guidelines — Application & Demo — Conclusions & Future WorkBaeza-Yates, R. and Rello, L. Web Quality 2011, Lyon On Measuring the Lexical Quality of the Web
  3. 3. 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
  4. 4. 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 testsDyslexia & 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 environmentRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  5. 5. 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 — DiTres6Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  6. 6. 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 customizableRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. Experimental Methodology Outline Procedure Demographic Questionnaire information Semi structured Difficulties interview Strategies 1 to 1,5 Quantitative Data hours Reading test Eye tracking Readability PompeuQualitative Data FabraUsers 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
  11. 11. 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
  12. 12. 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 lineRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  13. 13. 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 ReadabilityRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  14. 14. 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 usersRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  15. 15. 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
  16. 16. 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 usersRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  17. 17. 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 usersRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  18. 18. 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 usersRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  19. 19. 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 usersRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  20. 20. 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 usersRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  21. 21. 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 preferencesRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  22. 22. 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 parametersRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  23. 23. AccessibleNews DysWebxia Outline Demo (Beta Version) http://www.accessiblenews.co.in/dyswebxia/Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  24. 24. AccessibleNews DysWebxia Outline Customizable ParametersRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  25. 25. 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 unsolvedRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. References OutlineRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  30. 30. References OutlineRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  31. 31. References OutlineRello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics

×