SlideShare a Scribd company logo
1 of 31
Download to read offline
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

More Related Content

Viewers also liked

Mechanics of writing – mla (chapter 3
Mechanics of writing – mla (chapter 3Mechanics of writing – mla (chapter 3
Mechanics of writing – mla (chapter 3Aravind Nair
 
Mechanics Of Writing Chapter 3 (MLA)
Mechanics Of Writing Chapter 3 (MLA)Mechanics Of Writing Chapter 3 (MLA)
Mechanics Of Writing Chapter 3 (MLA)AISHA PERVEEN
 
The Mechanics of Writing a Research Report
The Mechanics of Writing a Research ReportThe Mechanics of Writing a Research Report
The Mechanics of Writing a Research Reportvimal nair
 

Viewers also liked (6)

Mechanics of writing – mla (chapter 3
Mechanics of writing – mla (chapter 3Mechanics of writing – mla (chapter 3
Mechanics of writing – mla (chapter 3
 
Dysgraphia
DysgraphiaDysgraphia
Dysgraphia
 
Mechanics Of Writing Chapter 3 (MLA)
Mechanics Of Writing Chapter 3 (MLA)Mechanics Of Writing Chapter 3 (MLA)
Mechanics Of Writing Chapter 3 (MLA)
 
The Mechanics of Writing a Research Report
The Mechanics of Writing a Research ReportThe Mechanics of Writing a Research Report
The Mechanics of Writing a Research Report
 
Technical Writing
Technical WritingTechnical Writing
Technical Writing
 
Effective reading ppt
Effective reading pptEffective reading ppt
Effective reading ppt
 

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

A Comprehensive Study On Natural Language Processing And Natural Language Int...
A Comprehensive Study On Natural Language Processing And Natural Language Int...A Comprehensive Study On Natural Language Processing And Natural Language Int...
A Comprehensive Study On Natural Language Processing And Natural Language Int...Scott Bou
 
Nemchinova cognitive disabilities
Nemchinova cognitive disabilitiesNemchinova cognitive disabilities
Nemchinova cognitive disabilitiesYulia Nemchinova
 
Towards Web Accessibility Guidelines of Interaction and Interface Design for ...
Towards Web Accessibility Guidelines of Interaction and Interface Design for ...Towards Web Accessibility Guidelines of Interaction and Interface Design for ...
Towards Web Accessibility Guidelines of Interaction and Interface Design for ...Talita Pagani
 
Designing OER with Diversity in Mind
Designing OER with Diversity in MindDesigning OER with Diversity in Mind
Designing OER with Diversity in MindUna Daly
 
Reflections on building a Multi-country AAC Implementation Guide.pptx
Reflections on building a Multi-country AAC Implementation Guide.pptxReflections on building a Multi-country AAC Implementation Guide.pptx
Reflections on building a Multi-country AAC Implementation Guide.pptxE.A. Draffan
 
Accessibility introduction
Accessibility introductionAccessibility introduction
Accessibility introductionAndres Baravalle
 
The Impact of Web 2.0 on Library Websites
The Impact of Web 2.0 on Library WebsitesThe Impact of Web 2.0 on Library Websites
The Impact of Web 2.0 on Library WebsitesRachel Vacek
 
E-Maginarium - NDCO assistive technologies and accessibility - Liz Reid
E-Maginarium - NDCO assistive technologies and accessibility - Liz ReidE-Maginarium - NDCO assistive technologies and accessibility - Liz Reid
E-Maginarium - NDCO assistive technologies and accessibility - Liz ReidService Industries TAC
 
LIP READING: VISUAL SPEECH RECOGNITION USING LIP READING
LIP READING: VISUAL SPEECH RECOGNITION USING LIP READINGLIP READING: VISUAL SPEECH RECOGNITION USING LIP READING
LIP READING: VISUAL SPEECH RECOGNITION USING LIP READINGIRJET Journal
 
Language Technologies for Lifelong Learning
Language Technologies for Lifelong LearningLanguage Technologies for Lifelong Learning
Language Technologies for Lifelong Learningtelss09
 
Designing for People with Cognitive Disabilities in Language and Literacy
Designing for People with Cognitive Disabilities in Language and LiteracyDesigning for People with Cognitive Disabilities in Language and Literacy
Designing for People with Cognitive Disabilities in Language and LiteracyUXPA International
 
Forging a new path in Montreal: Universal Design in higher education
Forging a new path in Montreal: Universal Design in higher educationForging a new path in Montreal: Universal Design in higher education
Forging a new path in Montreal: Universal Design in higher educationAndrea Miller-Nesbitt
 
Accessibility: introduction
Accessibility: introduction  Accessibility: introduction
Accessibility: introduction Andres Baravalle
 
The problems with visualizations and the need for visualization literacy rese...
The problems with visualizations and the need for visualization literacy rese...The problems with visualizations and the need for visualization literacy rese...
The problems with visualizations and the need for visualization literacy rese...Wolfgang Reinhardt
 
Making the Web Accessible
Making the Web AccessibleMaking the Web Accessible
Making the Web AccessibleInfosys
 
IOL Conference 2012
IOL Conference 2012IOL Conference 2012
IOL Conference 2012Jody Bailey
 
Linq 2013 session_red_1_martin_sanchez_garcia_marianos
Linq 2013 session_red_1_martin_sanchez_garcia_marianosLinq 2013 session_red_1_martin_sanchez_garcia_marianos
Linq 2013 session_red_1_martin_sanchez_garcia_marianosLINQ_Conference
 
W4A 2012 - Vagner Santana
W4A 2012 - Vagner SantanaW4A 2012 - Vagner Santana
W4A 2012 - Vagner SantanaVagner Santana
 

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

A Comprehensive Study On Natural Language Processing And Natural Language Int...
A Comprehensive Study On Natural Language Processing And Natural Language Int...A Comprehensive Study On Natural Language Processing And Natural Language Int...
A Comprehensive Study On Natural Language Processing And Natural Language Int...
 
Nemchinova cognitive disabilities
Nemchinova cognitive disabilitiesNemchinova cognitive disabilities
Nemchinova cognitive disabilities
 
Towards Web Accessibility Guidelines of Interaction and Interface Design for ...
Towards Web Accessibility Guidelines of Interaction and Interface Design for ...Towards Web Accessibility Guidelines of Interaction and Interface Design for ...
Towards Web Accessibility Guidelines of Interaction and Interface Design for ...
 
Designing OER with Diversity in Mind
Designing OER with Diversity in MindDesigning OER with Diversity in Mind
Designing OER with Diversity in Mind
 
Reflections on building a Multi-country AAC Implementation Guide.pptx
Reflections on building a Multi-country AAC Implementation Guide.pptxReflections on building a Multi-country AAC Implementation Guide.pptx
Reflections on building a Multi-country AAC Implementation Guide.pptx
 
Accessibility introduction
Accessibility introductionAccessibility introduction
Accessibility introduction
 
The Impact of Web 2.0 on Library Websites
The Impact of Web 2.0 on Library WebsitesThe Impact of Web 2.0 on Library Websites
The Impact of Web 2.0 on Library Websites
 
E-Maginarium - NDCO assistive technologies and accessibility - Liz Reid
E-Maginarium - NDCO assistive technologies and accessibility - Liz ReidE-Maginarium - NDCO assistive technologies and accessibility - Liz Reid
E-Maginarium - NDCO assistive technologies and accessibility - Liz Reid
 
LIP READING: VISUAL SPEECH RECOGNITION USING LIP READING
LIP READING: VISUAL SPEECH RECOGNITION USING LIP READINGLIP READING: VISUAL SPEECH RECOGNITION USING LIP READING
LIP READING: VISUAL SPEECH RECOGNITION USING LIP READING
 
Language Technologies for Lifelong Learning
Language Technologies for Lifelong LearningLanguage Technologies for Lifelong Learning
Language Technologies for Lifelong Learning
 
Designing for People with Cognitive Disabilities in Language and Literacy
Designing for People with Cognitive Disabilities in Language and LiteracyDesigning for People with Cognitive Disabilities in Language and Literacy
Designing for People with Cognitive Disabilities in Language and Literacy
 
Forging a new path in Montreal: Universal Design in higher education
Forging a new path in Montreal: Universal Design in higher educationForging a new path in Montreal: Universal Design in higher education
Forging a new path in Montreal: Universal Design in higher education
 
Accessibility: introduction
Accessibility: introduction  Accessibility: introduction
Accessibility: introduction
 
Mobile-Enabled Language Learning Eco-System
Mobile-Enabled Language Learning Eco-SystemMobile-Enabled Language Learning Eco-System
Mobile-Enabled Language Learning Eco-System
 
The problems with visualizations and the need for visualization literacy rese...
The problems with visualizations and the need for visualization literacy rese...The problems with visualizations and the need for visualization literacy rese...
The problems with visualizations and the need for visualization literacy rese...
 
Making the Web Accessible
Making the Web AccessibleMaking the Web Accessible
Making the Web Accessible
 
Workshop
WorkshopWorkshop
Workshop
 
IOL Conference 2012
IOL Conference 2012IOL Conference 2012
IOL Conference 2012
 
Linq 2013 session_red_1_martin_sanchez_garcia_marianos
Linq 2013 session_red_1_martin_sanchez_garcia_marianosLinq 2013 session_red_1_martin_sanchez_garcia_marianos
Linq 2013 session_red_1_martin_sanchez_garcia_marianos
 
W4A 2012 - Vagner Santana
W4A 2012 - Vagner SantanaW4A 2012 - Vagner Santana
W4A 2012 - Vagner Santana
 

Recently uploaded

React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...Karmanjay Verma
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfROWELL MARQUINA
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationBuild Intuit
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Memoori
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Mark Goldstein
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxatharvdev2010
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxKunal Gupta
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?Rustici Software
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxmprakaash5
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...amber724300
 
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2DianaGray10
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureAntonio de Llamas
 
Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Antonio de Llamas
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessWSO2
 
Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationDianaGray10
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023Joshua Flannery
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionDEEPRAJ PATHAK
 

Recently uploaded (20)

React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...React JS; all concepts. Contains React Features, JSX, functional & Class comp...
React JS; all concepts. Contains React Features, JSX, functional & Class comp...
 
QMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdfQMMS Lesson 2 - Using MS Excel Formula.pdf
QMMS Lesson 2 - Using MS Excel Formula.pdf
 
Dynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientationDynamical Context introduction word sensibility orientation
Dynamical Context introduction word sensibility orientation
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!Laying the Data Foundations for Artificial Intelligence!
Laying the Data Foundations for Artificial Intelligence!
 
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
 
A PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptxA PowerPoint Presentation on Vikram Lander pptx
A PowerPoint Presentation on Vikram Lander pptx
 
Dublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptxDublin_mulesoft_meetup_API_specifications.pptx
Dublin_mulesoft_meetup_API_specifications.pptx
 
Which standard is best for your content?
Which standard is best for your content?Which standard is best for your content?
Which standard is best for your content?
 
Introduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptxIntroduction-to-Wazuh-and-its-integration.pptx
Introduction-to-Wazuh-and-its-integration.pptx
 
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
JET Technology Labs White Paper for Virtualized Security and Encryption Techn...
 
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
Efficiencies in RPA with UiPath and CyberArk Technologies - Session 2
 
Tecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for RotogravureTecnogravura, Cylinder Engraving for Rotogravure
Tecnogravura, Cylinder Engraving for Rotogravure
 
Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+Tetracrom printing process for packaging with CMYK+
Tetracrom printing process for packaging with CMYK+
 
Accelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with PlatformlessAccelerating Enterprise Software Engineering with Platformless
Accelerating Enterprise Software Engineering with Platformless
 
Women in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automationWomen in Automation 2024: Career session - explore career paths in automation
Women in Automation 2024: Career session - explore career paths in automation
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
BoSEU24 | Bill Thompson | Talk From Another Century
BoSEU24 | Bill Thompson | Talk From Another CenturyBoSEU24 | Bill Thompson | Talk From Another Century
BoSEU24 | Bill Thompson | Talk From Another Century
 
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
THE STATE OF STARTUP ECOSYSTEM - INDIA x JAPAN 2023
 
Why Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile EvolutionWhy Agile? - A handbook behind Agile Evolution
Why Agile? - A handbook behind Agile Evolution
 

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

  • 1. 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
  • 2. 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
  • 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. 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
  • 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 — DiTres6 Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 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 customizable Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 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. 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. 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. 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
  • 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. 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
  • 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 Readability Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 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 users Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 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. 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
  • 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 users Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 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 users Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 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 users Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 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 users Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 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 preferences Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 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 parameters Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 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. AccessibleNews DysWebxia Outline Customizable Parameters Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 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 unsolved Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 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. 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. 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. References Outline Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 30. References Outline Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics
  • 31. References Outline Rello, Kanvinde, & Baeza-Yates W4A 2011, Lyon Guidelines & Web Service for Dyslexics