Accessible Web Content & Intellectual Disabilities

ACCESSIBLE WEB CONTENT & INTELLECTUAL DISABILITIES

© 2013 Interactive Accessibility

CSUN 2013

2/28/2013 © 2013 Interactive Accessibility 2

Kathy Wahlbin Email: [email protected] Phone: 978-443-0798

The Accessibility Experts TM

http://www.interactiveaccessibility.com

Topics

• What is an intellectual disability? • Statistics • Types of intellectual disabilities

– Web Challenges – Web Techniques

• Assistive technology – Comparison between the three leading text-to-speech software

applications – Demonstrate how these products are used online by users – Discuss how their use impacts web products – Summarize key points or considerations for web designers and

developers


What is an Intellectual Disability?

• Intellectual disability refers to limitations in mental functioning and skills such as: – Communicating – Personal care – Socializing

• Causes a child to learn and develop more slowly than a typical child


Source: NICHCY, National Dissemination Center for Children with Disabilities (http://nichcy.org/disability/specific/intellectual)

http://nichcy.org/disability/specific/intellectual

Intellectual Disabilities Statistics

• Most common developmental disability • ~6.5M in the U.S. have an intellectual disability • Affects about 1 in 10 U.S. families


Source: The Arc. (2009). Introduction to intellectual disabilities (http://www.thearc.org/page.aspx?pid=2448)

http://www.thearc.org/page.aspx?pid=2448

Types of Intellectual Disabilities

• Many different types – Asperger's Syndrome – Attention deficit disorder – Autism – Dementia – Down Syndrome – Dyscalculia – Dyslexia – Learning disabilities – Rett Syndrome – Stroke – Traumatic brain injury (TBI) – Williams Syndrome

• Severity varies greatly


Mild Severe

Joe: Bad Memory

Karen: Learning Disability

Mattias: ADD

Sue: Autism

Functional Groupings


Memory Problem-Solving Attention

Reading, Linguistic, and Verbal Comprehension Math Comprehension Visual Comprehension

Source: From Bohman & Anderson’s functional cognitive disabilities model, 2005 and WebAIM ( http://webaim.org/articles/cognitive/)

http://webaim.org/articles/cognitive/

Strategies

Steps: 1. Provide well-structured content and design for users

with intellectual disabilities 2. Make sure it works well with the text-to-speech tools


Memory

• Ability to recall what has been learned – Immediate, short-term and long-term memory

• Web Challenges – Limits their ability to remember how they got to content

• Web techniques – Ensure navigation is consistent throughout the site – Add reminders such as breadcrumbs, icons and other visual markers – Add progress bars for steps and label each step – Keep forms short; omit unnecessary information

• Each page should focus on one specific task • Add descriptive text to labels


Problem-Solving

• Ability to solve problems based on given information • Web Challenges

– Unable to figure out the site organization (clicks on wrong link) – Difficulty fixing issues with forms or other error messages – May get frustrated and be unable to complete forms or find information

• Web techniques – Ensure navigation is consistent throughout the site – Write easy to understand instructions and error messages

• Provide hints on use and how to fix issues • Correct issues for users (don’t require specific format)

– Provide warning messages – Limit choices


Attention

• Difficulty focusing on a specific task • Web Challenges

– Distractions such as scrolling text and blinking icons make reading difficult – Long pages with lots of information make it challenging to focus

• Web techniques – Shorten pages to specific concept or topic – Use responsive design – Avoid distracting background images – Allow users to stop animations


Reading, Linguistic & Verbal Comprehension

• Difficulties understanding text – Wide range from minor Web Challenges to the inability to read any text – 15-20% have some challenge comprehending language or text

• Web Challenges – Certain layouts and styles of content may be difficult to read – Complex text is difficult to understand

• Non-literal text (sarcasm, satire, parody, metaphors, slang, etc.) may be misunderstood • Non-existent text with implied meaning may not be understood

– High contrast text can be difficult to read for people with Scoptic Sensitivity Syndrome because the words seem to constantly move on the page


Reading, Linguistic & Verbal Comprehension

Web techniques – Use plain language and shorter sentences, each with a single idea – Avoid abbreviations and acronyms – expand at least once if used – Provide multiple ways to convey concepts (e.g. image, video, text) – Pair icons with text for contextual cues – Organize the document and add structure

• Provide visual organization and structure (e.g. headings, lists) • Balance content with white space

– Add line and paragraph spacing (1.5 to 2 with 1.5 times the line space between paragraphs)

– Limit line length (do not exceed 80 characters or glyphs)

– Choose fonts and styles wisely • Use a sans-serif font • Avoid italics if possible (harder for dyslexics to read) • Left-align text

– Lower color contrast improves readability for some users


Math Comprehension

• Difficulty understanding mathematical expressions • Web Challenges

– E-commerce sites with the price of the items purchased, tax, shipping and handling, and other charges

– Educational content with math problems

• Web techniques – Calculate automatically – Do not avoid math entirely; sometimes equations are the best way to

explain concepts and techniques – Some users require math to be explained conceptually to understand the

reasoning behind the math


Visual Comprehension

• Difficulty processing visual information – May not recognize objects for what they are – Visual communication methods include color, spatial relationships, styles,

design elements, photos, images, etc. • Web Challenges

– Inability to identify objects and understand the messages they convey – For example, icons, “universal” images

• Web techniques – Provide information in multiple formats


Does it mean close, cancel, wrong, or

bad example?

What do these mean?

Tools Can Help

• Text-to-speech software programs provide tools to aid in learning – Reading – Study Skills – Writing


Program Manufacturer Cost

Kurzweil 3000 Cambium Learning $ 1,395

Read & Write Gold TextHELP $ 645

Natural Reader NaturalSoft Limited Free / Paid

Feature Comparison for Web Content Feature Kurzweil 3000 Read & Write Gold Natural Reader

Platform PC & MAC PC & MAC PC

Compatibility with Browsers

YES Firefox on PC

YES IE on PC, Safari on MAC

YES IE & Firefox

Text-to-Speech YES YES YES

MathML Support YES MathML support with MathPlayer

YES MathML support with MathPlayer

NO

OCR YES YES plus screenshot reader

YES Only in ultimate version and platinum

education version

Read Highlight YES Line and word

YES Line and word

NO Not in webpage

Screen Masking NO YES NO

Dictionary YES text and picture

YES text and picture

NO

Translator YES Spanish, French, German or Italian

Also integrates with Google Translate

YES Spanish, French, German or Italian

NO

Create Audio Files YES MP3

YES WAV, MP3, WMA

YES MP3, WAV and OGG

Web Toolbar YES Firefox

NO Program toolbar only

YES IE & Firefox

Voice Choices YES YES YES *FREE: 2 voices; PAID: 4 - 8

What the Tools Read

HTML Element Kurzweil 3000 Read & Write Gold Natural Reader Alternate text No No FF Yes, IE No

Content hidden with CSS (display: none or visibility:hidden)

Yes Yes FF No, IE Yes

Abbreviations No FF Yes, IE No No

Acronyms Yes Yes FF No, IE Yes

iFrame content Yes FF No, IE Yes if you select the text

No

• Varies by browser – FF: Firefox – IE: Internet Explorer

• Varies based on how content is defined


DEMO OF TOOLS

Kurzweil 3000, Read & Write Gold and Natural Reader


Tips

• Improve the user experience for people with

intellectual disabilities using text-to-speech software

• There is no one-size-fits all rule


Provide Good Reading Experience

• Define a logical reading order – Content is read in the source code order – Navigation bars that are read from right to left may be confusing – Use JavaScript DOM coding to place dynamic content in logical

location within the code

• Avoid use of ASCII characters for information – Some ASCII characters will not be read, e.g. * for required fields

• Expand abbreviations and acronyms • Limit the use of frames


Tip #1

Tip #2 Avoid Using Confusing Hidden Text

• Ensure text that is read will not be confusing – Hidden text using CSS may be read – Off-screen text defined for screen readers will be read

• Hide text using JavaScript Document Object Model scripting instead of adjusting CSS styles (display:none, visibility: hidden)


Tip #3 Limit the Use of Images of Text

• Images of text may not be read – Alt-text only read by Natural Reader in Firefox


Tip #4 Provide Text Labels for Form Fields

• Use text labels for all form fields – Do not use the title attribute – If no on-screen label is available, position one off-screen


HTML:

<label for="q"><span class="hidden">Search terms</span></label>

<input name="q" id="q" type="text" size="40" />

CSS:

.hidden { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }

Tip #5 Avoid Inline JavaScript

• Inline JavaScript may be read by reading tools in some cases


Questions?


Are you accessible? Thank you!


Kathy Wahlbin Email: [email protected] Phone: 978-443-0798

Twitter: @wahlbin

Documents

Accessible Web Content & Intellectual Disabilities