Seven Steps to a More Accessible Website

1. Seven Steps to a More Accessible Website Todd Weissenberger Web Accessibility Coordinator University of Iowa Version 1.0 • September 2012

2. Training Objectives • Gain a fundamental understanding of web accessibility and its role in site design at Iowa • Understand how to obtain and use a selection of tools to evaluate the accessibility of your site • Experience a variety of techniques intended to improve overall web accessibility

3. Getting Started • Download files from http://myweb.uiowa.edu/tmweiss/7/ • Scenario pages • Utilities • Bookmark this page for plug-in installation • Locate Adobe Dreamweaver CS5 • Web editor

4. Web Accessibility Overview

5. Web Accessibility Project Status Report • Policy pending ratification • WCAG 2.0, Level AA Compliance indicated by policy • Units should now: • Build new web content with accessibility in mind • Develop accessibility assessment and remediation strategy • Request initial evaluation from Web Accessibility Coordinator

6. WCAG 2.0, Level AA Accessibility Guidelines • Worldwide standard since December, 2008 • Adopted or under consideration by all CIC institutions, and numerous other entities • Twelve basic guidelines governing accessible HTML, scripting, media and other web content • http://www.w3.org/TR/WCAG20/

7. Perceivable • 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. • 1.2 Time-based Media: Provide alternatives for time-based media. • 1.3 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure. • 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

8. Operable • 2.1 Keyboard Accessible: Make all functionality available from a keyboard. • 2.2 Enough Time: Provide users enough time to read and use content. • 2.3 Seizures: Do not design content in a way that is known to cause seizures. • 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.

9. Understandable • 3.1 Readable: Make text content readable and understandable. • 3.2 Predictable: Make Web pages appear and operate in predictable ways. • 3.3 Input Assistance: Help users avoid and correct mistakes.

10. Robust • 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

11. Techniques • W3 specifies two categories of techniques • Sufficient Techniques • Advisory Techniques • http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/intro.html

12. Site Assessment

13. Site Assessments • Self-Assessment • Performed by site managers prior to initial Web Accessibility Evaluation • Addresses “low-hanging fruit” and common compliance flags • Likely to catch numerous occurrences of non-conforming code • Site assessment by ITS Web Accessibility Coordinator • Automated evaluation tool • Recommendations and best practices • Assistance with remediation/rebuilding

14. Common Compliance Issues* • Missing or inadequate text equivalents • Insufficient color contrast • Missing LANG attribute • Non-adaptive font size • Nested headings • <table> construction • <form> elements

15. Evaluation and Assessment Tools • WAVE [http://wave.webaim.org] (free)1 • Functional Accessibility Evaluator [fae.cita.uiuc.edu] (free)2 • A-Checker [achecker.ca] (free) • Juicy Studio [juicystudio.com] • Web Developer Toolbar • AIS Toolbar for IE [visionaustralia.org.au] (free) • Colour Contrast Analyser [visionaustralia.org.au] (free)3 WAVE also comes as a Firefox toolbar, and is compatible through Firefox version 10 The FAE also comes as a Firefox toolbar, and is compatible through Firefox version 10 Available as a stand-alone .exe

16. HiSoftware Compliance Sheriff • HiSoftware Compliance Sheriff • Adopted by the University of Iowa • Licensed to Web Accessibility Project to perform automated site testing • Analyzes multiple navigation levels • Customizable checkpoints • Yields a variety of results and reports • Maps occurrences to WCAG 2.0 checkpoints • Results can be updated manually

17. HiSoftware Compliance Sheriff

18. HiSoftware Compliance Sheriff

19. Guideline 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. Text Alternatives

20. General Guidelines

21. WCAG Techniques (Selected) GENERAL • G94: Providing short text alternative • G95: Providing short text alternatives that provide a brief description of the non-text content AND • G92: Providing long description for non-text content that serves the same purpose and presents the same information using a long text alternative technique listed below • G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description • G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content • G82: Providing a text alternative that identifies the purpose of the non-text content • G100: Providing the accepted name or a descriptive name of the non-text content using a short text alternative technique HTML • H67: Using null alt text and no title attribute on img elements for images that AT should ignore • H2: Combining adjacent image and text links for the same resource • H37: Using alt attributes on imgelements • H24: Providing text alternatives for the area elements of image maps • H30: Providing link text that describes the purpose of a link for anchor elements • H45: Using longdesc

22. Practices to Avoid: • Using a filename or path as ALT text • Redundant ALT text: when descriptive text exists adjacent to a non-text element, use an empty ALT attribute • Placing important information in background images

23. Non-compliant text alternatives • Placeholder text • alt=“spacer” • alt=“image1” • Text content that does not convey the meaning of the non-text content • alt=“Site Introduction” • Filenames • DSC1991.jpg • 20110411.png

24. Describing Non-Text Content • Short description (can provide the same information and function as non-text) • Long description is necessary to provide same information and function as non-text) • Adjacent to non-text content • Linkable from non-text content • Reference via LONGDESC (deprecated in HTML 5)

25. Display ALT text with the Web Developer Toolbar

26. Assess a page with the WAVE Toolbar

27. ALT Text: Short Description • ALT • May be sufficient by itself for static images • Should contain information that provides same information and function

28. G95: Short Text Description <imgsrc=“wheelchairBBall.png"alt="Detail of WheelchairBasketball Game" />

29. Text-Only Rendering with the WAVE Toolbar

30. G94: Short Description, Same Purpose and Information <imgsrc="braille.png" alt=“Diagram of Braille letter W, a single raised dot in the center left position and raised dots in the top, middle and bottom right positions." />

31. Long Description • Actually two descriptions • A short description that describes the image in brief • A long description that conveys the information contained in the image • Long description can include: • Descriptive content immediately adjacent to the image (G73) • A link or reference to descriptive content in another location (G74) • Use of the LONGDESC attribute to identify the URI of a long description of the non-text element

32. G74: Long and Short Descriptions <imgsrc="q1_chart.png“alt="Q1 Regional Sales Chart. Details follow the chart" /> <p>The preceding chart describes first quarter sales for...</p>

33. G73: Link Adjacent to Description <imgsrc="q1_chart.png" alt="First Quarter Sales Chart, 2010" /> <a href="q1_chart.html">View a complete description here</a>

34. H2: Adjacent Image and Text Links • When a graphical element acts as a link and is adjacent to a text link to the same resource, the two items should be combined • The repetition of the links may cause confusion or disorientation among some users

35. H2: Adjacent Image and Text Links

36. Adjacent Image and Text Links <a href="http://www.chicagoreader.com"><img src="common/images/chi.jpg“alt="LearnMore About Chicago" /></a> <a href="http://www.chicagoreader.com">Learn More About Chicago</a>

37. Adjacent Image and Text Links <a href="http://www.chicagoreader.com"><img src="common/images/chi.jpg" alt="" />Go to the Chicago page</a>

38. Use FANGS to Simulate a Screen Reader

39. Use FANGS to Check Links

40. Providing Information in a Background Image

41. Create content that can be presented in different ways (for example simpler layout) without losing information or structure. Guideline 1.3

42. 1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A) Use h1-h6 to identify headings

43. General Guidelines

44. Display Page Outline from the WAVE Toolbar

45. Logical Structure/Heading Order

46. Text-Only Viewing

47. Simulated Screen Reader Output

48. Screen Reader Output

49. Make it easier for users to see and hear content including separating foreground from background. Guideline 1.4

50. SC 1.4.3: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 Color Contrast