W4A 2012 - Vagner Santana

Web Accessibility And People With Dyslexia:A Survey On Techniques And Guidelines

Vagner F. de Santana (IC/UNICAMP)Rosimeire de Oliveira (CMCC/UFABC),Leonelo D. A. Almeida (IC/UNICAMP), andProf. M. Cecilia C. Baranauskas (IC/UNICAMP)

W4A 2012, April 17th, 2012

Agenda

• Motivation and Objective

• Understanding dyslexia

• Methodology

• Results

• Discussion

• Conclusion

2

Motivation

• Web accessibility usually refers to visual disabilities

• 15 to 20% of the people have dyslexia (IDA)

• Commonly found in men; 60-80% (APA)

• How to design user interface (UI) also for people with dyslexia?

• How many studies have you heard/read/saw about dyslexia?

3

Objective

• Bring to light some specificities of dyslexia

• Review literature on dyslexia and Web accessibility

• Synthesize techniques and guidelines to avoid/eliminate accessibility barriers

• Organize guidelines considering maintainers’ roleso Developerso Designerso Content producers 4

Understanding dyslexia

• Dyslexia has a Greek origino "dis" means disordero "lexia" means language

• Dyslexia is a language disorder

• Neurology views dyslexia as a neurological disorder of genetic origin

• Dyslexia is also viewed as having multiple factors (biological and functional)

5


• People with dyslexia have difficulties to understand written words and sentences

• People with dyslexia can benefit from usingo Screen readerso Voice recorderso Voice synthesizerso Spell checkerso Screen magnifiers

6


• However, dyslexia does not meano Low intellectual levelo Low intelligenceo Low educational attainmento Disease

• It is a specific brain impairment related to language processing.

7

Understanding dyslexia→ Diagnosis

A) Reading achievement [...] is substantially bellow that expected [...].

B) The disturbance in Criterion A significantly interferes with academic achievements or activities of daily living that require reading skills.

C) If a sensory deficit is present, the reading difficulties are in excess of those usually associated with it. (DSM-IV)

8

Methodological→ Stance

• Universal Design (UD): o Design of something that is usable by everyone, in

the widest possible extension, without the need for adaptation or specialized design

• Inclusive Design (ID)o Considering the needs of all users in mainstreams

applications, not only in systems especially designed for people with disabilities

• This work follows UD and considers ID in the whole process

9

Methodology→ Procedure1. Collect outcomes involving dyslexia and

Web accessibility (from organizations, papers, and guidelines)

2. Cluster extracts3. Compile and write them in a guideline style4. Organize guidelines according to UI

elements they refer5. Set a priority level according to website

maintainers’ roles (i.e., developers, designers, and content producers)

10

Results→ Groups identified

1. Navigation

2. Text presentation

3. Writing

4. Layout

5. Images and charts

6. End user customization

7. Markup

8. Colors

9. Videos and audios 11

Results→ Guidelines per group

12

Results→ Relevance levels

13

Results→ Guidelines examples

1. Navigationo Structure index pages considering logical order

involving task sequence or structureo Provide self completion and orthographic correction

in internal search

14

www.google.com


2. Colorso Avoid pure white as the background, because white

can obfuscate the text for people with dyslexia;a close alternative is the light gray (#FFFFE5)

15


3. Text presentationo Do not use justified alignment due to irregular

spacing between wordso Avoid fonts with serif

o How many 8s and Gs are presented bellow?

16

g

gg g

g

g

g8

8

88

8

8

88


4. Writingo Use short and common wordso Use active voice

o Instead of: The login is needed in order to use the system

o Use: You need to login into the system

17


5. Layouto Provide white space among UI elementso Avoid large columns of texts

18

“Horatio says 'tis but our fantasy, And will not let belief take hold of him Touching this dreaded sight, twice seen ofus: Therefore I have entreated him along With us to watch the minutes of this night; That if again this apparitioncome, He may approve our eyes and speak to it.” (Shakespeare)

“Horatio says 'tis but our fantasy,And will not let belief take hold of himTouching this dreaded sight, twice seen of us:Therefore I have entreated him alongWith us to watch the minutes of this night;That if again this apparition come,He may approve our eyes and speak to it. ”(Shakespeare)


6. Images and chartso Avoid moving or blinking imageso Use images, charts, and pictures to complement

textual information

19


7. End user customizationo The website should be easily customizableo Provide color scheme, font type, and text size

customization features

20

www.dyslexia-parent.com/mag35.html


8. Markupo Code so that the website can be read by screen

readerso Guarantee that markup is valid

21validator.w3.org


9. Videos and audioso Do not play them automatically when the page loadso Do not rely only on one media to provide content

22www.uol.com.br

Discussion

• Guidelines show convergence, but some conflicts have occurredo White background x light gray backgroundo Fluid design x width length

• WCAG directly cites dyslexia in success criteria (i.e., 3.1.5 Reading level)

• Lack of explicit consideration of dyslexia might divide users needs from maintainers

• End user customization plays a central role as a conflict solver 23

Conclusion

• Dyslexia is still not well understood

• Its specificities are not addressed by Web Accessibility standards

• Guidelines help on the understanding ofo Limitations of people with dyslexiao How to remove/avoid accessibility barriers

• Future works involveo Integration of the surveyed guidelines into other setso Explore solutions (e.g., end user customization)

24

Thank you!

[email protected]

Acknowledgements: FAPESP (grants #2009/10186-9 and #2011/06399-7) and UFABC for supporting this research

25

Technology

W4A 2012 - Vagner Santana