Accessibility Overview and Workshop: Fluid Summit Meeting

1. Accessibility Overview and Workshop:Fluid Summit Meeting Mike Elledge Usability & Accessibility Center Michigan State University

2. Topics • Disability Facts and Definitions • The Internet and Disabilities • Use of Adaptive Technology and Implications for Design • Disability Exercises • Evaluation Tools • Evaluation Protocol and Demo • Evaluation Exercise • Fluid Tools and Accessibility

3. Basic Facts About Disabilities • About 20 percent of the population has a disability • One in ten Americans have a severe disability • One in two Americans over 65 have reduced capabilities • Disabilities include a wide range of conditions • Persons with disabilities rely on the Internet

4. Persons with Disabilities 20% of 296.5 Million = 59 Million People Texas + California (54.7 M) This equates to 500+ million worldwide!

5. Types of Disabilities • Hearing—Conductive, sensorineural • Visual—Color blindness, low vision, blindness • Physiological Impairments—Temporary, permanent • Cognitive Impairments—ADD, TBI, Dyslexia

6. Share of Disabilities

7. Online Use by PWD • Adults with disabilities spend, on average, twice as much time online as adults without disabilities- 20 hours per week compared to 10 hours per week. • Adults with disabilities are much more likely than adults without disabilities to report that the Internet has significantly improved the quality of their lives (48% vs. 27%) “How the Internet is Improving the Lives of Americans with Disabilities,” Humphrey Taylor, Harris Poll #30, June 7, 2000

8. Why PWD Use the Internet • For people with limited mobility • An opportunity to shop, meet, conduct business, and find information without hassle of getting there • For people with limited sight and hearing • An opportunity to learn without intermediaries (interpreters, Braille or readers), and communicate more easily • For people with cognitive issues • An opportunity to take as much time as needed to understand • For everyone with a disability: greater independence and self-confidence; level playing field

9. How PWD Use the Internet • Persons with disabilities use websites differently • Blind persons must listen to site content • Low vision persons enlarge site content • Color blind persons look for non-color cues • Deaf persons read audio content • Physically impaired persons use adaptive tools to explore sites • Persons with cognitive issues look for familiar content and conventional representation • Persons with multiple disabilities may approach a website from several of these contexts Overview of services and adaptive technology: http://www.indiana.edu/~iuadapts/resources/videos/atc3.ram

10. Visual Impairments and Implications • Visual • Blind: Navigate with keyboard, “see” by listening • Need: Web page to describe its content, structure • Headings, meaningful labels and link phrases, skips, consistent structure, html accessibility elements • Low Vision: Enlarge page, see limited area • Need: Content that is understandable at high magnification • “Clumped” content, proximity; non-pixel graphics • Color Blind: Unable to distinguish red from green • Need: Content that is differentiated by more than color • Asterisks, emphasis

11. Other Disabilities and Implications • Hearing • Read video content • Need: Captioning for videos, visual cues when something changes on computer • Physical Impairments • Operate computer with ergonomic devices (keyboards, switches) to improve dexterity, extend capabilities • Need: Clear, easy navigation to minimize clicking; large clickable areas • Cognitive Impairments • May have difficulty with focus, comprehension, interpretation • Need: Clear, accurate language; varied presentation; minimal distractions

12. Blindness—Adaptive Technology • JAWS, Window-Eyes, SATOGO • Web content is read by screen readers • Screen readers announce page content: • Headings (“heading level 1”) • Links (“external link” and “this page”) • Lists (“one of five items”) • Image descriptions (“image of…”) • Form fields (“first name edit, form mode on,” “press alt button then use arrow keys to scroll through menu”) • Table content (“table with three columns and four rows,” “table summary…”) • Work with browsers, documents, applications

13. Blindness—User Behavior • Use keyboard to “read” through content • All • Tab (listening to links and form fields) • Press arrows to go from sentence to sentence • Reread content, links • Read very fast • Some • Listen to link lists • Skip from paragraph to paragraph • Move from header to header • A few • Move vertically through tables • Listen to heading list

14. Blindness—Design Considerations • Screen reader users benefit from keyboard shortcuts, organized content, contextual clues • Take advantage of HTML accessibility components including: • Skip links • Headings • Form field titles • Form elements (label for/id, fieldset/legend) • Table elements (caption, summary, scope) • Lists for related items • Provide descriptions of how tools or features function if: • Unfamiliar • Unconventional • Start sentences with subjects

15. Blindness—User Video • Example: www.doit.wisc.edu/accessibility/video/intro/intro_scrn_rdrs.asx

16. Low Vision—Adaptive Technology • ZoomText, Magic Lens, etc. • Most often: Use screen enlarging software (like ZoomText) • Choose zoom level • Most helpful (least tiring) color combination • May set text highlighting and reader • Less often: Use browser settings or customized style sheets

17. Low Vision—User Behavior • Use enlargers to render text visible • Enlarge screen so only portion of page visible • Will peer at screen from inches away • Focus on individual words, surrounding content using mouse • Will sometimes combine magnification with text reader

18. Low Vision—Design Considerations • Benefit from sites that support text enlargement (CSS), window resizing (%) and image magnification (SVG) • CSS to prevent lossiness • Provide content headings and bulleted lists • Minimize line lengths and link phrases • Minimize use of tables, when necessary have short table headings and content • Group related content together, particularly nav links

19. Low Vision—User Video • Example: www.youtube.com/watch?v=WmcUsd-eZ0Q

20. Designing for Deafness • Do not use adaptive technology • Need text for all audio-based information • Benefit from sites that provide text of audio Example: www.webaim.org/media/video/curtis/curtis.asx

21. Designing for Impaired Mobility • Need varying assistance including special keyboards, brain switches, mouth sticks, joysticks and rollerballs (http://www.synapseadaptive.com/) • Benefit from large clickable areas and pre-loaded fields Example: www.webaim.org/media/video/gordon/gordon.asx

22. Adaptive Technologies Brain Switch Head Tracking Device Ergonomic Keyboard

23. Designing for Cognitive Issues • Need support for comprehension • Benefit from • Logical, uncluttered sites • Navigation cues • Alternative presentations of content • Simple terminology • Consistency Additional information: http://www.webaim.org/articles/cognitive/cognitive_too_little/

24. Experiencing Accessibility Issues • Navigating Without a Mouse • Reading a Site with JAWS • Simulating Low Vision • Experiencing Color Blindness • Simulating Cognitive Issues

25. Navigating Without a Mouse • The “bare-bones” test for accessibility • Go to this site: (http://usability.msu.edu) • See if you can move through it and operate functions using only the keyboard • Tab, shift + tab • Up and down arrows • Enter • Accesskeys (alt + underlined letter)

26. Reading with JAWS or SATOGO • Open Internet Explorer or Firefox, go to UAC Home Page (http://usability.msu.edu) • Take out JAWS instructions page… • Put on headphones, click on JAWS icon • Press “Ctrl + Home” to go to top of page. • Press “Insert + down arrow” to start JAWS reading the page. • Press “Ctrl” to stop. • Use “tab” to move through links. • Use “h” to move through headings. • Press “Insert + T” to hear page title • Press “Insert + F6” to see a list of headings. Press up and down arrows to read them. Press “Esc” to close box. • Press “Insert + F7” to see a list of links. Press up and down arrows to read them. Press “Esc” to close box. • Close JAWS

27. Simulating Low Vision • Low Vision Simulation Demo (http://www.webaim.org/simulations/lowvision-sim.htm) • Cataracts—Find “Index” image map • Glaucoma—Find “Faculty/Staff” image map • Macular Degeneration--Example

28. Low Vision Examples • Macular Degeneration • Glaucoma • Cataract Diabetic Retinopathy

29. Experiencing Color Blindness • Open UAC home page in IE (www.usability.msu.edu) • From the AIS Web Accessibility Toolbar, click the Colour tab and choose Greyscale • Illustrates importance of contrast • Refresh the page, then choose the Vischeck colour blindness simulator in the Colour tab

30. Color Acuity • To a person without color blindness… • …these circles look different.

31. Color Blindness • To a person with color blindness… • …these circles look quite similar.

32. Greyscale

33. Simulating Cognitive Issues • Dyslexia: http://www.ubaccess.com/artsimulator.html • Cognitive Overload: http://www.webaim.org/simulations/distractability-sim.html • Other Dyslexia Simulations: • National Bureau for Students with Disabilities (http://www.skill.org.uk/info/demos/dyslexia.asp)

34. Dyslexia Simulation • Illustrating lateral disorientation (words in wrong place and letters switched around) • and lateral inversion (b and d confused/switched around) "current micltae het in of diwennig praticularly pratcipiatino, in tohse stintiutions that not do bratitiollnay offer unit a 'leanirng-ruppost', it will vepro to invaluadle staff to medcrae new mehtosb to pruboce crouse matrelias and teaching and, or to gain an stannbigunder of the ffiberent pytes of bifficulties roganisational that dsylexic tsuednts have."

35. Dyslexia Simulation--Repaired • "In the current climate of widening participation, particularly in those institutions that do not traditionally offer a 'learning-support' unit, it will prove invaluable to staff to embrace new methods to produce course materials and/or teaching, and to gain an understanding of the different types of organisational difficulties that dyslexic students have."

36. Evaluation Tools—IE Web Accessibility Toolbar 2.0 (IE): http://www.paciellogroup.com/resources/wat-ie-about.html

37. WAT—Browser View

38. Install WAT Scroll down page and click on installation link Close IE Click Run button • Open Internet Explorer • 2. Go to website: http://www.paciellogroup.com/resources/wat-ie-about.html

39. Evaluation Tools—Firefox Firefox Accessibility Extension:http://firefox.cita.uiuc.edu/ Firefox Web Developer Extension: https://addons.mozilla.org/en-US/firefox/addon/60 Juicy Studio Readability Test: http://juicystudio.com/services/readability.php

40. Evaluation Tools—Both SATOGO (System Access to Go): http://www.satogo.com/

41. Install SATOGO Open Internet Explorer Go to site: http://www.satogo.com/ Press Begin button Save to desktop (do not press Run) Close Internet Explorer

42. Web Site Compliance Protocol 21 required items (patterned after WCAG 1.0 Priority One and Section 508) 38 recommended items (WCAG 1.0 Priority Two and part of Priority Three) Protocol and criteria for compliance Choose five representative pages from your website to review Assessing document compliance in separate workshop

43. Protocol Details

44. Sample Webpage Western Michigan University: http://www.wmich.edu/

45. Website Evaluation--Item #1 Req Images containing content are described by meaningful alt and longdesc attributes WAT: Images > Show Images Check that all images containing content have alt attributes with meaningful descriptions or alt="" if images are for decoration only.

46. Evaluation Results—Item #1 Req “Search WMU” button and mid-page pictures missing alt text Other images either have description or “” (non meaningful images)

47. Website Evaluation--Item #3 Req Page content is read in the correct order without style sheets WAT: CSS > Disable CSS, Tables > Linearize Check that content flows in a logical order from top to bottom of page.

48. Evaluation Results—Item #3 Req Most items in logical order, except: Search would be better on top line News items follow WMU News/Events/Weather links Fall Welcome, Course offerings near bottom of page after news items

49. Website Evaluation--Item #10 Req Clear and simple language is used throughout site WAT: Check > (JS) Readability Test Gunning Fog, Flesh-Kincaid General web pages <=12, technical or academic web pages <=20 Flesch Reading Ease General web pages 40+, technical web pages 30+ Manual: Review Web site for confusing, technical or incorrect terms Incomplete sentences; proper grammar

50. Evaluation Results—Item #10 Req Gunning Fog Index: 13.60 (<=12) Flesch Reading Ease: 40.23 (>=40) Flesh-Kincaid Grade: 8.35 (<=12)