Universal Design

1. Universal Design Ensuring access to the Internet for all users

2. "The world is harder when it is not conceived foryou." http://www.ad-awards.com/inc/video.swf?id=104

3. Universal Design The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.

4. The Issues • Individuals with disabilities • Universal user access • Legal mandates • Business productivity

5. Individuals with disabilities • Adults, youth and children in every social sector and ethnic group • Largest minority in the U.S. – and growing • Currently 55 million people in U.S. • 18.7% of population, not including LD • 75 million people worldwide • Responsible for over $1 trillion in aggregate income

6. AARP Web Access Guidelines • Use conventional interaction elements • Make it obvious what is clickable and what is not • Make clickable items easy to target and hit • Minimize vertical scrolling; eliminate horizontal scrolling • Ensure the Back button behaves predictably.

7. Let the user stay in control • Is there clear feedback on actions? • Provide feedback in other modes than visual • Make the structure of the website as visible as possible (Yahoo, hhs.gov) • Clearly label content categories; assist recognition and retrieval rather than recall • Implement the shallowest possible information hierarchy

8. Include a site map and link to it from every page • Make pages easy to skim and scan • Make elements on the page easy to read • Visually group related topics • Make sure text and background colors contrast • Use adequate white space • Make it easy to find things on the page quickly

9. Focus the writing on audience and purpose • Use the users’ language; minimize jargon and technical terms

10. User Access Issues • Browser • Platform • Language • Connection speed • Bandwidth • Hardware • Software • Input • Output

11. Legal Issues • Americans with Disabilities Act of 1990 • Public accommodations must be accessible • Rehabilitation Act, Section 508 • Federal agencies required to be accessible • World Wide Web Consortium • Web Accessibility Initiative (WAI) Accessibility guidelines • Company/Institution policy

12. Business Productivity Issues • Increase your share of the market • Qualify for government contracts • Distinguish yourself from the competition • Improve general usability • Bragging rights – IBM, Southwest Airlines, others

13. Usability Issues • Visual • Auditory • Manual • Cognitive

14. Usability Issues • Blind – speaking browsers, screen readers • Low vision – magnifiers, high contrast • Deaf/hard of hearing – visual alternatives for audio content • Mobility impairments – alternative browsing, navigation devices, voice input • Cognitive/learning disabilities – combination of solutions

15. Strategies for Accessibility • Present information in multiple formats • Visual/auditory, graphic/text • Duplicate functions in two methodologies • Form/e-mail, table/no table, color/no color • Test site for accessibility

16. Visual Disorders • Blind • Visually impaired • Color blind/color sensitive • Seizure disorder

17. Users Who Are Blind • Screen reader programs (text to speech) • JAWS (http://www.freedomscientific.com/fs_products/software_jaws.asp) • IBM Home Page Reader (http://www-3.ibm.com/able/hpr.html) • ReadPlease 2000 • (http://www.readplease.com/) • Connect OutLoud (web access) • (http://www.freedomscientific.com/fs_products/software_connect.asp)

18. Users Who Are Blind • Braille output programs • PowerBraille (http://www.freedomscientific.com/fs_products/displays_40.asp) • ALVA Braille Display (http://www.alvabraille.com/BrailleDisplays/)

19. Users Who Are Blind Potential problems: • Graphics (photos, clip art, diagrams, etc.) • Links • Navigation • Image maps • Tables • Frames • Forms • Abbreviations, acronyms, other languages

20. Users Who Are Blind • Suggested solutions • Graphics • Include an “ALT” tag in the <IMG SRC> code. The ALT tag should tell the user what the graphic is in a few words. • EX: <IMG SRC=“mydog.jpg” ALT=“Photo of my dog Spot”> • Non-active images that do not convey information should have ALT=“”.

21. For longer descriptions, use the “LONGDESC” tag in the <IMG SRC> code, which links to another .html page with a longer text description. EX: <IMG SRC=“mydog.jpg” ALT=“Photo of my dog Spot” LONGDESC=“mydog.html”> • Insert a “D-link” immediately after the image. EX: <IMG SRC=“mydog.jpg” ALT-”Photo of my dog Spot”><A HREF=“./mydog.html”>D</A>

23. Graphics • Use appropriate markup language or text instead of graphics where available. • EX: Mathematical equations • Identify the meaning of variables, provide the formula in text as well as graphics, use MathML or TeX markup language.

24. Find the square root of 36, then divide that by 2, then multiply the answer by 3. • Divide 36 by 2, find the square root of the answer, then multiply that by 3. • Multiply 2 times 3, divide the answer into 36, then find the square root of that number. • Divide the square root of 36 by the product of 2 times 3.

25. Users Who Are Blind • Links • Clearly label graphics used as links with descriptive “alt” tag • Include alternate text links on page • Separate text links with spaces • EX: • <A HREF=“courses.html” ALT=“Link tolist of courses”> Courses</A>|<A HREF= “faculty.html” ALT=“Link tolist of faculty teaching courses”>Faculty</A> |<A HREF=“registr.html” ALT=“Registration form”>Registration</A>

27. Users Who Are Blind • Navigation • Keep links together • If navigation links precede page content, provide a method to skip to main content • Ex: <html><body><A HREF=“#main” ALT=“Skip to main content”>&nbsp;</A>

28. Users Who Are Blind • Image maps • Use “client side” maps, not server maps • Include an “ALT” tag for each area of the map. • Include a “LONGDESC” to a file with a more complete site map if the image map is extensive. EXAMPLE: <MAP NAME="map1"> <area shape="rect" COORDS="92,55,257,85“ HREF="./preview.html" ALT=“Link to Program Preview"> • Include separate descriptive text links on the page.

29. Users Who Are Blind • Tables • Include the <TH> tag and use the table header to give a description of the contents of the table column. • Use the <TITLE> tag to give the table a title that helps the user understand what is in the table. • Also include the information in the table in text somewhere in the document. • Avoid using multiple columns of text. • Avoid using the <TABLE> code for page layout.

30. Users Who Are Blind • Frames • Clearly NAME and TITLE frames and indicate how they relate to each other EX: <FRAMESET ROWS="100,*">  <FRAME NAME="titlebar" SRC="titlebar.html" TITLE="Title Bar">   <FRAMESET COLS="25%,*">    <FRAME NAME="navbar" SRC="navbar.html" TITLE="Navigation Bar">     <FRAME NAME="main" SRC="main.html" TITLE="Main Content Frame">   </FRAMESET> </FRAMESET>

31. Provide alternative format for non-frame browsers. • Separate HTML page with link from the main page • “NOFRAME” markup in main page

32. Users Who Are Blind • Forms • Include an e-mail address or e-mail link as an alternative method of sending the required information. • Ensure that labels for all form controls are properly positioned. • EX:<LABEL for="firstname">First name: <INPUT type="text" id="firstname" tabindex="1"> </LABEL>

33. Users Who Are Blind • Downloadable/Printable Documents • Include downloads in multiple formats that are accessible to screen readers, enlargers, etc. • Newest version of Adobe Acrobat can be made readable with screen reader in Windows 2000. • EX: On-line registration form • Registration form in .pdf format • Registration form in HTML format

34. Users Who Are Blind • Lists • Number the text manually rather than through the <OL> tag if the numbers are important. • Numbered items 1.1, 1.2, 1.3, 2.1, etc. is more meaningful than embedded lists. • Do not use lists for page formatting

35. Users Who Are Blind • Use structural markup for its designated purpose • Ex: Use H1, H2, etc. for true headings • Use “font size=“__” to change font size • Use <BLOCKQUOTE> for quotations, not for indentation

36. Users Who AreVisually Impaired • Screen display enlargement programs • Zoomtext(display enlargement + voice output) (http://www.aisquared.com/) • MAGic (http://www.freedomscientific.com/fs_products/software_magic.asp)

37. Users Who Are Visually Impaired • Potential Problem • Poor quality graphics or graphics too small • Potential solutions • Create graphics with accessibility in mind • Add <alt> tags to graphics

38. Users Who Are Visually Impaired • Potential Problem • Difficult navigation (e.g. links are not underlined, dotted box is difficult to see) • Suggested solutions • Make links appear underlined, even if they are graphical • Use correct stylesheet elements to highlight text links

39. Dotted box around “Resources” is difficult to see. Put this code in a file called"highlight.css" a:active, a:focus, a:hover { background: #FFFF66; color: #000000;border: solid #990000; font-weight: bold; padding: 3px; } and you will get - Internet Explorer text link

40. To highlight input boxes – Use the <span> or <div> element around each form element and you will get

41. Users Who Are Visually Impaired Other Potential problems • Poor contrast on the screen • Embedded style cannot be changed

42. Users Who Are Visually Impaired • Suggested solutions • Use the ALT tag for graphics • Include text links as well as graphic links • Use style sheets to set page display so that users can change the appearance using the “preferences” feature • Be sure that documents can be read without the associated style sheets

43. Users Who Are Visually Impaired • Use relative units rather than defined units • Ex: Table width=“100%”, FONT SIZE=“+1” • Do not set pages to automatically refresh or redirect • Use navigation mechanisms in a consistent manner – links to the same page should have the same text every time they occur

44. Users Who Are Color-Blind or Color-Sensitive Potential problems • Red/green deficiency • Sensitivity to certain colors or bright lights www.visibone.com/colorblind/ http://more.btexact.com/people/rigdence/colours/

45. Users Who Are Color-Blind or Color-Sensitive • Suggested solutions • Do not depend on color to convey information • Ex: Tell us who you are (required fields in red) Company Salutation First name Last name Job title

46. Users Who Have Seizure Disorders Potential Problems • Flashing lights, moving graphics Seizures can be triggered by flashing lights in the range of 2Hz to 55Hz in people with photosensitive epilepsy (animated gifs, Flash screens, etc.) WARNING! Flash example of flicker http://ncam.wgbh.org/richmedia/flicker_demo.html

47. Users Who AreDeaf/Hard of Hearing Potential problems • Sound effects • sound cues • Audio descriptions • Background music

48. Users Who AreDeaf/Hard of Hearing • Suggested solutions • Provide alternate descriptive text of the audio. • Provide alternate visual cues. • Include a short acknowledgement of the title/composer of background music. • MAGpie software adds captioning to audio/video content • (http://www.webaim.org/techniques/captions/magpie/)

49. Users With Manual Impairment Potential problems • Limited range of motion • Limited manual dexterity • Alternate input devices • Voice recognition technology • Switches, buttons, touch screens, light beams, on-screen keyboard, TAB key

50. Users With Manual Impairment • Potential Problem • Resizing frames • Suggested Solutions • Avoid frames altogether • Make sure text fits within frame size, even if the user enlarges the font • Make the border thicker or add a “handle” to make it easier to grab