Enhancing Web Accessibility: Design for Handicapped and International Users

1. Lecture 9:Handicapped andInternational Use Issues Brad Myers 20-790Human-Computer Interaction in eCommerce

2. Notes • New item from Via Bulatao in quotes&refs • Guest lectures on Friday • Turn in Homework 4 on Friday • Also send a copy to the group you evaluated • Start on final assignment: Homework 5 • Includes a user study • Presentation in class on Fri, Dec 13 • No late assignments! (Last class) • Only ten (10) minutes each group! • Please practice your talk!

3. Special Considerations for Design • Handicapped Use • Making site “Readable” by blind users • Other handicaps • Internationalization • All web sites are globally accessible • Providing multiple language versions • Making the English version more accessible

4. For Access by People With Disabilities • Lots of people • Over 30 million people have a problem using Web due to disability • 50% of people over 65 years old have some kind of “functional impairment” • Required that web sites be accessible • Americans with Disabilities Act and other laws • For Further information • Web accessibility initiative: http://www.w3.org/WAI • Trace center: http://trace.wisc.edu • Bobby will test your pages: http://www.cast.org/bobby/

5. Nielsen’s Alertbox #1 • “Beyond Accessibility: Treating Users with Disabilities as People” • http://www.useit.com/alertbox/20011111.html • Blind users had 1/3 usability of sighted users • Most problems would be cheap and easy to fix

6. Nielsen’s Alertbox #2 • “Usability for Senior Citizens” • http://www.useit.com/alertbox/20020428.html • Seniors are fastest growing demographics on the Web • United States alone has an estimated 4.2 million Internet users over the age of 65 • Usability for seniors ½ that of control group in terms of success, errors, etc. • Confusions between web URL box and site’s search box • Difficulties seeing the site: need fonts at least 12 pts, especially for links • Difficulty with pull-down menus and other UI elements due to accuracy problems • Lose track of where been (cognitive issues) – highlight links when visited

7. For People with Visual Difficulties • Allow fonts to be adjusted • Don’t put text into pictures • Use relative font sizes <big>xxx</big> • Not absolute sizes <font size="4">xxx</font> • Make sure design still works with big fonts • Good color choice, design for high contrast • Use headers and dividers to mark text • <H1> instead of bold, etc.

8. Visual Difficulties, 2 • Be sure to provide “alt” tags for pictures • For users who cannot see the photo • Blind users using screen readers • Slow connections <img border="0" src="images/hcii_logo.gif" width="230" height="50" align="right“ alt=“HCII logo”> • Describe what item is about, and where link will go • Pure decorations, use alt=“” so not read out loud • But don’t omit alt tag • Alt string in correct language • Image maps at client side, and have ALT for each option

9. Analysis for Blind Users • MS thesis work of Sailesh Panchang of Pitt • With “Bobby” automated analysis: • Only 23% of commercial sites compliant at basic level • No sites were compliant at the “AAA” level • Sailesh’s usability tests with screen reader • Usability score of 77% for commercial sites, vs. 87% for sites aimed at people with disabilities

10. Example Screen Readers • JAWS for windows http://www.freedomscientific.com/ • Reads the contents of the screen • Special Keyboard commands for navigating • Reads keystrokes as they are typed • IBM Home Page Reader • http://www-3.ibm.com/able/hpr.html

11. Pages to Demonstrate with JAWS – (From Sailesh Panchang’s thesis) • www.amazon.com hard to navigate • Reads a bunch of junk on loading • Image map links with long numbers • Social Security site much easier • “Skip to contents” link • All pictures have good alt-text • pdf files have alternate versions

12. Other disabilities • Auditory disabilities • Transcripts available for any important audio • “Closed captions” for videos • Motor difficulties • Make sure page is amenable to “tabbing” from field to field • Issue: Javascript, pop-ups, ActiveX controls, etc. • My page works • On HCII page, can tab to invisible links • Cognitive difficulties • Simpler writing, simpler URLs • Spelling correctors (e.g. Google)

13. Internationalization World Wide Web

14. Web Sites Accessed World-Wide • Less than 50% of WWW users in US • Internationalization • One design that can be used world-wide • Localization • Different designs customized to different languages • E.g., http://www.knto.or.kr/

15. Icon issues • No icons with fingers or feet or other gestures • Light switches on or off? • No visual puns • Table of numbers as: • (In Danish, use bord and tabel) • No baseball metaphors • No “trash can” icon • Symbolic icons are even harder • Red cross for help

16. Wording issues • Currency symbols: $1000 (US, Canada), vs. 1000 • Avoid abbreviations and slang • “MI” for middle initial • “N/A” for not available or not applicable • “Under the hood” for automobile parts • Ask for child’s age not school grade • Holidays can be different • Mother’s day, Thanksgiving, Independence Day can be at different times • People’s names: “First” name, “Last” name • Which is which • Also, sometimes, First+Last not very unique (12 “Kim”s, 2 “Min Kim”s) • Email address usually globally unique • Paper size issues for printing • A4 vs. 8.5”x11” vs. ???

17. Number issues • Billion: thousand million or million million? • Number formats: 4.567 vs. 4,567 • Ask if ambiguous (not “illegal number”) • Time formats: 2:30 pm vs. 14:30; time zones: EDT • Date formats: 03/04/05? use March 4, 2005 instead • Telephone number formats • +45 47 17 17 17 vs. (412) 268-5150 vs. 1-412-268-5150 • Allow +, (), -, . etc. • Don’t use letters only: 1-800-ASK-TOWER

18. Localization • Not just translating the site • Different content • e.g. German yahoo has soccer on front page • Different sizes of language may require redesign • But automatic layout and high-level tags help • Make sure translation of terms is consistent with industry standards • Indicate content that is not translated • Language choice • Don’t use flags to indicate language • US vs. Canada vs. England • Use language’s own name for itself (ENGLISH, ESPAÑOL, ) • Good place for pictures of text • In case fonts aren’t loaded • First page in default language first so many won’t need extra click • Make links for other languages easy to find (example of not)

19. E-commerce issues • Make sure that it is clear what areas are served • E.g., cars not available in US, different formats, electrical (110v 220v) • E.g., Service available? • E.g, justflowers.com international section easy to find • Disney not (hidden on shipping pop-up page) • Put on home page, shipping page, “about” page, and help • Use keywords: “Shipping” and/or “International” • Paying in international currency • Weights and sizes and clothing sizes in metric and U.S. units

20. Shipping Issues • Shipping charges and options for overseas • Sales taxes? • Accept entry of non-US characters in fields • May be an issue for sorting, etc. • Consider have separate US and overseas shipping pages • Otherwise: • Use “zip / postal code” as prompt • Different organization of postal address (postal code after city or after state?) • In “state/province” field, • Full-length state names • Option for “other countries” in state field

21. URL issues • Use www.company.com for English language version • Use www.company.co.XX (.uk, .de, .kr) for foreign site • Use local (country specific) URL also for sites of only local interest

22. International User testing • Localized interface can have new and different usability problems • Not sufficient to test one version and then translate • Should perform heuristic analysis by usability specialists familiar with target culture and language • Should test with native speakers in different countries • Use international or national usability consultants • Use “remote testing” with instrumented web sites