accessible web content & intellectual disabilities
TRANSCRIPT
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
2/28/2013 © 2013 Interactive Accessibility 3
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
2/28/2013 © 2013 Interactive Accessibility 4
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
2/28/2013 © 2013 Interactive Accessibility 5
Source: The Arc. (2009). Introduction to intellectual disabilities (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
2/28/2013 © 2013 Interactive Accessibility 6
Mild Severe
Joe: Bad Memory
Karen: Learning Disability
Mattias: ADD
Sue: Autism
Functional Groupings
2/28/2013 © 2013 Interactive Accessibility 7
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/)
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
2/28/2013 © 2013 Interactive Accessibility 8
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
2/28/2013 © 2013 Interactive Accessibility 9
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
2/28/2013 © 2013 Interactive Accessibility 10
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
2/28/2013 © 2013 Interactive Accessibility 11
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
2/28/2013 © 2013 Interactive Accessibility 12
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
2/28/2013 © 2013 Interactive Accessibility 13
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
2/28/2013 © 2013 Interactive Accessibility 14
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
2/28/2013 © 2013 Interactive Accessibility 15
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
2/28/2013 © 2013 Interactive Accessibility 16
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
2/28/2013 © 2013 Interactive Accessibility 18
DEMO OF TOOLS
Kurzweil 3000, Read & Write Gold and Natural Reader
2/28/2013 © 2013 Interactive Accessibility 19
Tips
• Improve the user experience for people with
intellectual disabilities using text-to-speech software
• There is no one-size-fits all rule
2/28/2013 © 2013 Interactive Accessibility 20
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
2/28/2013 © 2013 Interactive Accessibility 21
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)
2/28/2013 © 2013 Interactive Accessibility 22
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
2/28/2013 © 2013 Interactive Accessibility 23
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
2/28/2013 © 2013 Interactive Accessibility 24
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
2/28/2013 © 2013 Interactive Accessibility 25
Questions?
2/28/2013 © 2013 Interactive Accessibility 26
Are you accessible? Thank you!
2/28/2013 © 2013 Interactive Accessibility 27
Kathy Wahlbin Email: [email protected] Phone: 978-443-0798
Twitter: @wahlbin