Accessible Web Content & Intellectual Disabilities

CSUN 2013

ACCESSIBLE WEB CONTENT &
INTELLECTUAL DISABILITIES

© 2013 Interactive Accessibility

The Accessibility Experts TM

Kathy Wahlbin
Email: KathyW@ia11y.com
Phone: 978-443-0798

http://www.interactiveaccessibility.com

2/28/2013 © 2013 Interactive Accessibility 2

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)


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)


Types of Intellectual Disabilities

• Many different types
Joe: Bad
– Asperger's Syndrome Memory
– Attention deficit disorder
– Autism Karen:
– Dementia Learning
Disability
– Down Syndrome
– Dyscalculia Mattias:
Sue: Autism
ADD
– Dyslexia
– Learning disabilities
– Rett Syndrome
– Stroke
– Traumatic brain injury (TBI)
– Williams Syndrome
• Severity varies greatly
Mild Severe


Functional Groupings

Memory Problem-Solving Attention

Reading, Linguistic, and
Math Comprehension Visual Comprehension
Verbal Comprehension

Source: From Bohman & Anderson’s functional cognitive disabilities model, 2005 and WebAIM ( 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,
What do these
cancel, wrong, or
mean?
bad example?


Tools Can Help

Program Manufacturer Cost
Kurzweil 3000 Cambium Learning $ 1,395
Read & Write Gold TextHELP $ 645
Natural Reader NaturalSoft Limited Free / Paid

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


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

Compatibility with YES YES YES
Firefox on PC IE on PC, Safari on MAC IE & Firefox
Browsers
Text-to-Speech YES YES YES

MathML Support YES YES NO
MathML support with MathPlayer MathML support with MathPlayer

OCR YES YES YES
plus screenshot reader Only in ultimate version and platinum
education version

Read Highlight YES YES NO
Line and word Line and word Not in webpage

Screen Masking NO YES NO

Dictionary YES YES NO
text and picture text and picture

Translator YES YES NO
Spanish, French, German or Italian Spanish, French, German or Italian
Also integrates with Google Translate

Create Audio Files YES YES YES
MP3 WAV, MP3, WMA MP3, WAV and OGG

Web Toolbar YES NO YES
Firefox Program toolbar only IE & Firefox

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

What the Tools Read

• Varies by browser
– FF: Firefox
– IE: Internet Explorer
• Varies based on how content is defined
HTML Element Kurzweil 3000 Read & Write Gold Natural Reader
Alternate text No No FF Yes, IE No

Content hidden with CSS Yes Yes FF No, IE Yes
(display: none or visibility:hidden)
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 No
text


Kurzweil 3000, Read & Write Gold and Natural Reader

DEMO OF TOOLS


• Improve the user experience for people with
intellectual disabilities using text-to-speech
software

• There is no one-size-fits all rule
Tips


Provide Good Reading Experience Tip #1

• 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


Avoid Using Confusing Hidden Text Tip #2

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


Limit the Use of Images of Text Tip #3

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


Provide Text Labels for Form Fields Tip #4

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

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

HTML:
<label for="q"><span class="hidden">Search terms</span></label>
<input name="q" id="q" type="text" size="40" />


Avoid Inline JavaScript Tip #5

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


Questions?


Kathy Wahlbin
Email: KathyW@ia11y.com
Phone: 978-443-0798
Twitter: @wahlbin

Are you accessible?
Thank you!


Accessible Web Content & Intellectual Disabilities

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Accessible Web Content & Intellectual Disabilities (20)

More from Interactive Accessibility (9)

Accessible Web Content & Intellectual Disabilities