Your SlideShare is downloading. ×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Accessible Web Content & Intellectual Disabilities


Published on

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 2. The Accessibility Experts TMKathy WahlbinEmail: KathyW@ia11y.comPhone: 978-443-0798 2/28/2013 © 2013 Interactive Accessibility 2
  • 3. 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 developers2/28/2013 © 2013 Interactive Accessibility 3
  • 4. 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 ( © 2013 Interactive Accessibility 4
  • 5. 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 ( © 2013 Interactive Accessibility 5
  • 6. Types of Intellectual Disabilities• Many different types Joe: Bad – Aspergers 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 Severe2/28/2013 © 2013 Interactive Accessibility 6
  • 7. 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 ( © 2013 Interactive Accessibility 7
  • 8. StrategiesSteps:1. Provide well-structured content and design for users with intellectual disabilities2. Make sure it works well with the text-to-speech tools2/28/2013 © 2013 Interactive Accessibility 8
  • 9. 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 labels2/28/2013 © 2013 Interactive Accessibility 9
  • 10. 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 choices2/28/2013 © 2013 Interactive Accessibility 10
  • 11. 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 animations2/28/2013 © 2013 Interactive Accessibility 11
  • 12. 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 page2/28/2013 © 2013 Interactive Accessibility 12
  • 13. Reading, Linguistic & Verbal ComprehensionWeb 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 users2/28/2013 © 2013 Interactive Accessibility 13
  • 14. 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 math2/28/2013 © 2013 Interactive Accessibility 14
  • 15. 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?2/28/2013 © 2013 Interactive Accessibility 15
  • 16. 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 – Writing2/28/2013 © 2013 Interactive Accessibility 16
  • 17. Feature Comparison for Web ContentFeature Kurzweil 3000 Read & Write Gold Natural ReaderPlatform PC & MAC PC & MAC PCCompatibility with YES YES YES Firefox on PC IE on PC, Safari on MAC IE & FirefoxBrowsersText-to-Speech YES YES YESMathML Support YES YES NO MathML support with MathPlayer MathML support with MathPlayerOCR YES YES YES plus screenshot reader Only in ultimate version and platinum education versionRead Highlight YES YES NO Line and word Line and word Not in webpageScreen Masking NO YES NODictionary YES YES NO text and picture text and pictureTranslator YES YES NO Spanish, French, German or Italian Spanish, French, German or Italian Also integrates with Google TranslateCreate Audio Files YES YES YES MP3 WAV, MP3, WMA MP3, WAV and OGGWeb Toolbar YES NO YES Firefox Program toolbar only IE & FirefoxVoice Choices YES YES YES *FREE: 2 voices; PAID: 4 - 8
  • 18. 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 text2/28/2013 © 2013 Interactive Accessibility 18
  • 19. Kurzweil 3000, Read & Write Gold and Natural Reader DEMO OF TOOLS2/28/2013 © 2013 Interactive Accessibility 19
  • 20. • Improve the user experience for people with intellectual disabilities using text-to-speech software • There is no one-size-fits all ruleTips 2/28/2013 © 2013 Interactive Accessibility 20
  • 21. 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 frames2/28/2013 © 2013 Interactive Accessibility 21
  • 22. 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)2/28/2013 © 2013 Interactive Accessibility 22
  • 23. Limit the Use of Images of Text Tip #3• Images of text may not be read – Alt-text only read by Natural Reader in Firefox2/28/2013 © 2013 Interactive Accessibility 23
  • 24. 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" />2/28/2013 © 2013 Interactive Accessibility 24
  • 25. Avoid Inline JavaScript Tip #5• Inline JavaScript may be read by reading tools in some cases2/28/2013 © 2013 Interactive Accessibility 25
  • 26. Questions?2/28/2013 © 2013 Interactive Accessibility 26
  • 27. Kathy Wahlbin Email: Phone: 978-443-0798 Twitter: @wahlbinAre you accessible?Thank you!2/28/2013 © 2013 Interactive Accessibility 27