Luz Rello, Gaurang Kanvinde & Ricardo Baeza Yates-Layout Guidelines for Web Text and a Web Service...

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


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


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


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


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


(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


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.



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



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



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



— 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


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


Two Groups

mean of fixation time (seconds)

dyslexic non-dyslexic

(p < 0.038, 95% confidence)

0.23 0.20

Outline


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


Colors


— 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


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


14 users

8 users

Results

There should be a saturation point

Outline


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


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


Results

OutlineDyslexic-friendly Guidelines for Web Text


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


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


http://www.accessiblenews.co.in/dyswebxia/Demo (Beta Version)

http://www.accessiblenews.co.in/dyswebxia/


OutlineAccessibleNews DysWebxia


Customizable Parameters

OutlineConclusions


• 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


• 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 :-)!


Any Questions?

Demo: http://www.accessiblenews.co.in/dyswebxia/

More information: [email protected] (DysWebxia) [email protected] (AccessibleNews)



mailto:[email protected]




OutlineAcknowledgments


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


Luz Rello, Gaurang Kanvinde & Ricardo Baeza Yates-Layout Guidelines for Web Text and a Web Service...

Technology

Transcript of Luz Rello, Gaurang Kanvinde & Ricardo Baeza Yates-Layout Guidelines for Web Text and a Web Service...