1. Accessibility and the web Lecturer: Judy Kay References: Readings - W3C - Checklist of Checkpoints for Web Content Accessibility Guidelines 1.0 http://www.w3.org/TR/WAI-WEBCONTENT/

2. Overview What is accessibility? Why you want to know about accessibility? W3C-WAI –Guidelines –Standards and conformance Automation Case studies

3. What is accessibility?

4. "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." Tim Berners-Lee, W3C Director and Inventor of the World Wide Web http://www.w3.org/WAI/wcag-curric/int2-0.htm

5. Usability is the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. – Definition from ISO 9241-11

6. What is accessibility? Enabling web access to people with disabilities… Web sites design so that people with disabilities can use them effectively Browsers and media players Mesh with assistive technologies Authoring tools to produce accessible content and for use by people with disabilities

7. URL: http://www.nathan.com/ Blooper Category: navigation, accessibility, legibility 2001 http://deyalexander.com/blooper/report.php?id=20 Note: text small - hard for all to read and, next slide is what visually Impaired users get

9. URL: http://www.melbfoodwinefest.com.au/ Blooper Category: accessibility, browser compatibility 2002 http://deyalexander.com/blooper/report.php?id=125 Looks ok? What is delivered to blind user?

10. Fix: remove vacuous tags on layout images

11. URL: http://www.buddyleeattractions.com/ Blooper Category: navigation, accessibility Date: 19 April 2002 http://deyalexander.com/blooper/report.php?id=149 Navigation links Move across screen! Vision impaired users? Physically impaired?

12. Nature of disabilities Vision, blindness … low vision –Problems with small visual elements –Assistive technology reads site Hearing loss –Problems with audio elements Physical limitations –Challenges in keyboard input, assistive technology Cognitive and neurological

13. Nature of disabilities 10% of people with some disability eg colour blindness… Context-dependent ‘ disability ’ –Noisy (audio) –Screen glare (visual)

14. Roles for the Web Digital libraries Entertainment News Government services Educational resources

15. The really good news? Good design helps everyone! Thinking about accessibility for those with handcaps… Makes for sites that are more accessible to others too Clarity over cuteness

16. Why you want to know about accessibility?

17. Important for millions of users with disabilities Generally results in better overall design Web is increasingly source of critical information and services Legal requirements Financial merits –For companies –For you

18. Marketplace issues Disability is widespread already Aging population Potential legal costs

19. Overall approaches Good design for all Text is king –For assistive technologies –For search technologies Alternative modalities –image plus text –Audio + text caption Use of style sheets

20. W3C-WAI Guidelines 1. Provide equivalent alternatives to auditory and visual content. 2. Don't rely on color alone. 3. Use markup and style sheets and do so properly. 4. Clarify natural language usage 5. Create tables that transform gracefully. 6. Ensure that pages featuring new technologies transform gracefully. 7. Ensure user control of time-sensitive content changes.

21. W3C-WAI Guidelines 8. Ensure direct accessibility of embedded user interfaces. 9. Design for device-independence. 10. Use interim solutions. 11. Use W3C technologies and guidelines. 12. Provide context and orientation information. 13. Provide clear navigation mechanisms. 14. Ensure that documents are clear and simple.

22. W3C-WAI Priorities –1 must –2 should –3 may

23. Priority 1 guidelines 1.1 text equivalent of all visual elements 2.1 support interpretation of colour with other cues 4.1 clearly indicate changes of natural language 6.1 readable without style sheets 6.2 update dynamic equivalent with content 7.1 avoid flicker 14.1 clear, simple language matching purpose

24. Non-text elements: 1.1a - images and graphical buttons. 1.1b - graphical representations of text 1.1c - image map regions. 1.1d - animations (e.g., animated GIFs). 1.1e - applets and programmatic objects. 1.1f - ASCII art. 1.1g - a text equivalent for frames. 1.1h - scripts 1.1k-m - sounds, audio files (& in video) 1.1n - a text equivalent for video.

25. W3C-WAI standards, conformance The principles (see readings) Apply them in your projects Use as one set of heuristics Examples From http://www.w3.org/WAI/wcag-curric/sam1-0.htm

26. 1.1 text equivalent of all visual elements

27. 1.1a - text equivalent for images and graphical buttons Where this is a decoration: http://www.w3.org/WAI/wcag-curric/sam2-0.htm

28. 1.1a - text equivalent for images and graphical buttons Where this is a link:

29. 1.1a - text equivalent for images and graphical buttons Need text form available by some means eg. Link to page with each element described ALT is not enough: http://www.w3.org/WAI/wcag-curric/sam3-0.htm

30. 1.1d - text for animations (e.g., animated GIFs) http://www.w3.org/WAI/wcag-curric/sam7-0.htm Explanation of animation:

31. 1.1a - text equivalent for images and graphical buttons Images with text within: http://www.w3.org/WAI/wcag-curric/sam11-0.htm

32. 4.1 clearly indicate changes of natural language

33. Mother, he's asking you to go. He's saying, "Allons, Madame plaisante!" Coded as: Mother, he's asking you to go. He's saying, "Allons, Madame plaisante!" http://www.w3.org/WAI/wcag-curric/sam40-0.htm

34. 7.1 avoid flicker

35. Flicker Can cause seizures for some people with epilepsy 4 - 59 Hz esp around 20 and esp changes between light and dard Beware in design of gifs and similar potential sources of flicker Movement is distracting for all - avoid it

36. Lower priority checkpoints Eg 2.2 Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

37. http://www.w3.org/WAI/wcag-curric/sam26-0.htm

38. Discussion Better for all Why only Priority 2? –User has control of background at browser

39. W3C-WAI standards, conformance 1.1 Text equivalent for every non-text element –Images –Graphical text –ASCII art –Images regions –Animations –Applets and other programmed elements…. Use tags, alt, longdesc

40. Automation Ref: http://www.w3.org/WAI/ER/existingtools.html Evaluation - a static analysis report/rating for accessibility. Repair tools - help author make problem pages more accessible. Filter and transform tools - assist Web users modify a page or supplement an assistive technology or browser.

41. The browser as a tool Change the font to a larger size View pages without images View pages with styles sheets and pages colours/fonts disabled View pages with an alternative, high contrast, colour scheme Use the keyboard not the mouse to navigate Disable scripts, applets and/or plugins Try different browsers & versions

42. Colour checking Colour Contrast http://www.lighthouse.org/color_contrast.htm Colour tester – colour blind http://www.vischeck.com/ Legible text http://www.lighthouse.org/print_leg.htm

43. Links Link checkers: non-existent URLs http://www.linkalarm.com/ http://www.tetranetsoftware.com/ solutions/linkbot/looking-for-linkbot.asp http://www.cyberspyder.com/cslnkts1.html http://validator.w3.org/checklink

44. validators HTML Validator –Eg W3C: http://validator.w3.org/ CSS Validator –W3C http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/ Commercial http://www.usablenet.com/ https://www.cryptzone.com/products/content- governance/compliance-sheriff/accessibility- compliance

45. Case study Australian University web sites Dey Alexander Usability Specialist IT Services Division Monash University dey.alexander@its.monash.edu.au

46. Challenges in accessibility Who creates web sites? What is their expertise in accessibility? The amateur factor Study of 4 main pages of 45 universities WCAG 1.0 - 14 broad guidelines and 65 checkpoints

47. Following pages from Dey ’ s online presentation http://deyalexander.com/presentations/accessibility-universities/

48. Methodology 1.Pages viewed in IE 6 Screen was captured Source was saved 2.Pages then viewed in IE 6 with stylesheet support turned off 3.Pages then viewed using Delorie’s Web Page Backward Compatibility Viewer Once with stylesheet support turned off (simulates older GUI browsers) Once with scripting support turned off

49. Methodology (cont.) 4.Pages were viewed in Lynx 2.8.4 5.Screen capture of pages was taken with Delorie’s Lynx Viewer 6.Pages were then checked with Webaim’s The Wave All pages were evaluated Jan 27 - Feb 15, 2003 So it is ok to share them now….

50. Research findings 98% (ie all but one) of Australian university sites failed to meet all priority 1 WCAG 1.0 checkpoints 153 of the 180 pages failed on at least 1 checkpoint Most failures were against checkpoint 1.1 – requirement to provide a text equivalent for non- text elements –138 page failures (across 98% of sites) –Most of these (133 pages, 95.5% of sites) related to text equivalents for images

51. Image-related checkpoint 1.1 failures Seven types of problems were found (5 of these were recorded as checkpoint failures) 1.Text alternatives were not equivalent 2.Text alternative included unnecessary data 3.No text alternative – blank “alt” attribute 4.No Text alternative – no “alt” attribute 5.Background images with content 6.Decorative/layout images with unnecessary data 7.Decorative/layout images with no “alt” attribute

52. 1.Text alternative not “equivalent” – no date given – no context (on or off campus) given 41 pages

53. 1. Text alternative not “equivalent” – no indication of restricted access was provided – no story details were given

54. 1. Text alternative not “equivalent” – as though the purpose of “alt” was for meta data (info about the image, rather than an equivalent) – again, an apparent usage of alt=meta data

55. 2. Text alternative includes unnecessary data Image sliced in three – to align with three navigation rows. Each slice has text alt of “University of Western Australia” Many images have text alt “Link to…” 21 pages

56. 3. No text alternative – blank “alt” attribute Link to enrolment information, but – no information provided Link to Orientation information, but – no information provided 11 pages

57. 4. No text alternative – no “alt” attribute All images on this site: – no “alt” attribute 65 pages

58. 5. Background image with content 1 page

59. 6. Layout image with unnecessary data 53 pages - not necessary and potentially confusing Adding text alternatives to spacer images can result in annoying repetition of useless information

60. 7. Layout image with no “alt” attribute Most common error of all 89 pages vs

61. Conclusions Results indicate that our sites are likely to present significant accessibility problems for some users University web authors—including specialist web teams—do not appear to have an acceptable understanding of accessible web design techniques QA processes are either –Not being adhered to –Don’t include accessibility components

62. Acknowledgements on tools: Online presentations and sites: OZWAI site –Jason White – Co-Chair, Web Content Accessibility Guidelines Working Group –Naomi Heagney – The Hiser Group –Andrew Arch – Vision Australia Foundation