Retrofitting Websites for Accessibility

1. Retrofitting Websites for Accessibility David Mulder, Academic Technology Services

2. First, a video • Introduction to the Screen Reader

3. Class overview • Review MSU Web Accessibility Policy • Set up a test website • Remediate the test website • One-on-one help (if you want it)

4. Intended audience • Staff • Slightly to moderately technical background • Directly responsible for maintaining or updating website

5. MSU Web Accessibility Policy • Diverse audience • Legal motivation • Continue being a leader

6. MSU Web Accessibility Policy • Announced in 2008 • All websites: WARF due May 15, 2009 • New: Must be compliant • Existing: Submit a plan for becoming compliant within a reasonable time • More info: webaccess.msu.edu

7. Required vs. Recommended • Required • Section 508 + WCAG 1.0 Priority 1 • Minimum level of accessibility to make Web pages usable • Recommended • WCAG 1.0 Priority 2 + best practices

8. Accessibility bleeds into usability • Many of the remediation steps we’ll take not only benefit users of adaptive technology, but will greatly enhance general site usability as well

9. The word “user” • We use it a lot in Web design & development • It may be better to think of “users” as visitors or even customers

10. Our test site

11. How to set up our site • Go to www.msu.edu/user/dlm/retrofit/ • Download the test site ZIP file to your desktop and follow along with me • Extract files • Open Dreamweaver • Set up a new site • Open up files in a browser

12. Remediation overview • Review your checklist • Triage and prioritize some items • Clean up code • Retrofit!

13. 1. Review your checklist • See your handout copy of the Web Accessibility Review Checklist • Alternatively, you can work from one of the evaluation protocol files available on webaccess.msu.edu • We’ll talk about a triage approach later

14. 2. Clean up your code • Validate code • In Dreamweaver • Using a web-based tool • (validator.w3.org) • Convert code (if necessary) • Dreamweaver makes this easy

15. Convert code

16. 3. Retrofit • Structure • Content • Presentation • Functionality

17. Don’t forget • We’re working from our test website and checklist, which covers common problems • We won’t be covering every problem on the checklist

18. Structure • Navigation • Tables • Forms

19. Structure > Navigation • REQ #6: Skip links are on each page • REC #21: Headers define content areas • REC #22: Related items and sub-navigation links are contained in lists • REC #25: Page-to-page consistency

20. Skip links are on each page Importance & Value Remediation Insert a hyperlink at the to of the page: <a href=“#skip_content”>Skip to Main Content</a> Insert anchor tag before content <a id=“skip_content” name=“skip_content”></a> • Required guideline #6 • You must do this • An easy way for screen reader users to skip over redundant content

21. Headers define content areas Importance & Value Remediation Locate logical breaks in content Add <hx> tags <h1>Welcome to the Department of Nonlinear Applications</h1> <h2>Events</h2> • Recommended guideline #21 • Creates an hierarchy of the page content • Greatly enhances accessibility; also improves general usability

22. Related items and sub-navigation links are contained in lists Importance & Value Remediation Identify opportunities for lists Where do you think we could add a list on our test site? Created unordered or ordered lists as appropriate • Recommended guideline #22 • Lists are easier for screen reader users to parse • They’re also easier to visually scan

23. Page-to-page consistency Importance & Value Remediation Where do you see global inconsistencies in our test site? • Recommended guideline #25 • Enhances both accessibility and usability • If content in global region changes, people might not see it

24. Structure > Tables • REQ #11: Row and column headers are identified in data table • REC #31: Data table contains summary and caption attributes

25. A brief history of tables • Began as something purely for data • Early developers found tables an easy way to control layout • Things snowballed from there • Ideally, you want to use CSS to control layout & presentation (more on this later) • When people say “data table”, they’re referring to an actual data table

26. Row and column headers are identified in data table Importance & Value Remediation Identify table headings Modify table code <thead><tr><th>Year</th><th>Department Head</th></tr></thead> • Required guideline #11 • You must do this • Clearly identifies row & column headings for screen reader users • Also provides much more powerful selectors for CSS

27. Data table contains summary and caption attributes Importance & Value Remediation Add a summary attribute <table summary=“ … ”> Add a caption element <table summary = “ … ”><caption>Past directors</caption> • Recommended guideline #31 • Summaries are seen only by screen readers, captions are visible to everyone • Provide information about what’s contained in a data table

28. Other things to pay attention to with tables • See if a table makes sense with stylesheets turned off • Don’t format data tables using structural markup

29. Structure > Forms • REQ #14: Forms work properly with assistive technology • REC #33: Labels are explicitly associated with form controls • REC #34: Important information is not contained between input fields

30. Forms work properly with assistive technology Importance & Value Remediation Add labels <label> <input … /></label> • Required guideline #14 • You must do this • Forms are an integral part of using the Web

31. Labels are explicitly associated with form controls Importance & Value Remediation Add labels with a ‘for’ attribute <label for=“email”> <input id=“email” … /></label> • Recommended guideline #33 • Makes it clear which input a label is referring to

32. Important information is not contained between input fields Importance & Value Remediation Do you see any examples of this problem on our test site? Move important information ahead of the form • Recommended guideline #34 • Screen reader users (and probably everyone) tend to navigate forms by tabbing from one field to the next • Important information can be missed

33. Other things to pay attention to with forms • Labels should precede input fields (like text fields) • Labels should follow checkboxes and radio buttons

34. Content • Alt descriptions • Link phrases & titles • Style (headings, sentences, paragraphs, readability) • Non-HTML documents • Multimedia

35. Content > Alt descriptions • REQ #1: Images containing content are described by meaningful alt and longdesc attributes • Not covered here, but important (and required): alt attributes for image maps

36. Alt & longdesc attributes Importance & Value Remediation Add alt attributes <img … alt=“Description of image” /> Make the description meaningful or relevant Use “” (blank quotes) to describe purely decorative images • Required guideline #1 • You must do this • Screen readers can’t interpret images yet, so they rely on alt text to describe them • Longdesc attributes are less-used, but another option

37. Content > Link phrases & titles • REC #13: Link text makes sense out of context • REC #14: Text is not repeated for different links • Not covered here, but important (and required): meaningful titles for frames

38. Link text makes sense out of context Importance & Value Remediation Use link phrases that make sense on their own Learn more about us by clicking <a href=“about.html”>here</a> Make link phrases distinct Title attribute can be used, if necessary • Recommended guideline #13 • Screen reader users will sometimes navigate a page via a list of links • Link labels that don’t really describe where they’re going are not helpful

39. Text is not repeated for links going to different pages Importance & Value Remediation Choose a meaningful and distinct label for each page and consistently apply it throughout the site • Recommended guideline #14 • More of a general usability & cognitive issue • Identical link labels leading to different pages can be confusing

40. Content > Style • REQ #10: Clear and simple language is used throughout the site • Not covered here, but important (and required): Changes in content language should be indicated by HTML code

41. Clear and simple language is used throughout the site Importance & Value Remediation Use language & style appropriate for an 8th-grade reading level This will also clean up REC #28 • Required guideline #10 • You must do this • Overly-difficult language is a burden to understanding content • Impacts everyone • This is a bit more subjective, and has been a point of contention • See policy clarification in FAQ

42. Non-HTML documents • Not covered here, but … • Provide links to download plug-ins if they are used (Java, Flash, etc) • Inform users when an action will pop-up a new page (use a pop-up icon)

43. Multimedia • Transcripts and synchronized captioning are burdensome, but required under the policy • More information about them is available on webaccess.msu.edu

44. Presentation • REQ #2: Content is understandable without the use of color • REC #19: CSS is used to format text • REC #20: Relative units are used for sizing & positioning • REC #28: CSS is used for page layout and presentation

45. Content is understandable without the use of color Importance & Value Remediation Modify the content to communicate the same message with alternate means Are there any areas on our test site where we might be failing this checkpoint? • Required guideline #2 • You have to do this • A color-blind person may struggle to interpret content that only uses color to convey meaning

46. CSS & relative units Importance & Value Remediation Varies • Recommended guidelines #19, #20, #28 • CSS is used to separate content and presentation • This separation makes content easier for screen readers to parse

47. Linearization • Convert a table-based layout to one presented with CSS • If you’re going to do this, it may be best to do an overall redesign rather than just as part of retrofitting your website

48. Functionality • JavaScript should be used in a way that degrades gracefully • Enhances presentation of content • Associated with unobtrusive JavaScript • This is an advanced topic

49. JavaScript libraries • Make functionality easier to implement • jQuery – Used on MSU homepage • MooTools, Scriptaculous, etc.

50. Accessibility triage • The two most important things you can do • Headings • Alt attributes