1. Strategies For Creating Accessible University Webpages Scot Close and Neil Torrefiel Web Services Unit San Jose State University

2. Overview ✦ Background ✦ Challenges ✦ Solutions ✦ Accessibility in Practice ✦ Deployment ✦ Questions and Answers

3. Background

4. ✦ At SJSU, we have been using a Website Content Management System based on OpenCms. ✦ We wanted to continue to use the same system, but make some changes that would result in Web pages meeting accessibility requirements.

5. Challenges

6. ✦ In evaluating websites created with our CMS, we noticed that it was convenient to group accessibility problems into two basic types: ✦ Site problems ✦ Page problems

7. Site Problems ✦ Lack of heading structure ✦ Inaccessible navigation ✦ Table layout ✦ Invalid HTML

8. Page Problems ✦ Missing alt text ✦ Data tables without headings ✦ Non-meaningful link text ✦ Inappropriate use of color

9. Challenges ✦ Our final challenge was to retain as much of the "look and feel" of the current CMS site as possible.

10. Solutions

11. ✦ The first step was to update the template used by the CMS to create Web pages. We kept the same basic visual page layout, with a few minor updates, but completely changed the underlying code.

12. Heading Structure ✦ H1 San Jose State University : Site Name ✦ H1 Navigation ✦ H2 Global Navigation ✦ H2 Primary Navigation ✦ H2 Breadcrumb Navigation ✦ (H2 Secondary Navigation)

13. Heading Structure ✦ H1 Main Content ✦ H2 Page Title / Department Name ✦ H2 Left Column Heading ✦ H2 Right Column Heading ✦ H1 Related Information ✦ H2 Quick Links ✦ H2 Contact Information

14. Navigation ✦ The existing site was using JavaScript-based dynamic drop-down menus. ✦ Not keyboard accessible ✦ Depended on JavaScript ✦ Did not work well with Firefox

15. Navigation ✦ We explored many dynamic menu options, some of which claimed to be accessible, but could not find any that met all of our requirements: ✦ Works without JavaScript ✦ Works without a mouse ✦ Works in all supported browsers

16. Navigation ✦ Although it did alter the site "look and feel", we decided to use static navigation menus.

17. Navigation ✦ Navigation features: ✦ Marked up as unordered lists ✦ Styled with CSS ✦ Dynamically created by CMS

18. Navigation ✦ Navigation features: ✦ Headings show groups of repetitive navigation links ✦ "Global" Site navigation ✦ Breadcrumb Navigation ✦ Secondary Navigation

19. Main Content ✦ We suggest to use headings in the Main Content areas, to define template columns and different bodies of text.

20. Templates ✦ We provide 14 fully-accessible templates which allow for content and media flexibility ✦ All content areas are marked up by headings

21. Contact Information ✦ Contact Information is always displayed on the landing page for the site

22. Standards Compliancy ✦ The original table-based page layout was replaced by 100% CSS layout. ✦ Page templates were modified to be valid XHTML 1.0 Transitional.

23. Accessibility In Practice

24. Page-level problems ✦ At SJSU, the Web Services Unit maintains a fraction of the Web pages inside sjsu.edu. Most are maintained by people whose primary job is something other than Web editing. ✦ Having accessible page templates does not guarantee accessible pages, since it is possible for site maintainers to inadvertently add inaccessible content, or make existing content inaccessible.

25. Maintaining Accessibility ✦ There are four main ways we help site maintainers keep their sites accessible: ✦ XStandard WYSIWYG editor ✦ OpenCms Galleries ✦ Workshops / Training ✦ One-on-one consultation

26. XStandard ✦ We chose to use XStandard as the default WYSIWYG editor for our CMS. XStandard is a commercial product that is designed to only produce (X)HTML compliant code. ✦ We are able to add styles from our CSS to its styles pull-down menu to give users more choices for formatting their content that are consistent with the university's style guidelines.

27. XStandard ✦ Data tables created with XStandard must have a summary, and row and/or column headers are easy to create.

28. Galleries ✦ OpenCms uses “galleries” to manage images, downloadable documents, and external links. ✦ When a user uploads a new image to the gallery for their site, they must enter a title for the image, which is used as the alt text for that image. ✦ This way, the alt text only needs to be entered one time for any image no matter how many Web pages it is used on.

29. Workshops / Training ✦ When we train users on how to use the new CMS, we emphasize how to use the system to create accessible content, and why it is important.

30. Workshops / Training ✦ We especially emphasize: ✦ Appropriate headings ✦ Appropriate link text ✦ Headers for data tables ✦ Appropriate descriptive text for uploaded images

31. One-on-One Consultation

32. Deployment

33. Distribution ✦ There are two ways webmasters and content editors can leverage and maintain an accessible SJSU.edu look and feel accessibly ✦ University Web Template Kit (standalone) ✦ WebCMS 7 ✦ Both have the same underlying architecture

34. Distribution ✦ University Web Template Kit vs. WebCMS 7 ✦ Both have the same underlying architecture

35. University Web Template Kit ✦ Distributed in HTML and DWT ✦ Typically hosted on department servers ✦ Online documentation on how to properly use the templates in an accessible way ✦ Provide accessibility consultation ✦ webcheck.sjsu.edu ✦ Client has the final control on going live

36. WebCMS 7 ✦ Paper-based application for new sites ✦ Workshop RSVP for migrating sites

37. WebCMS 7 ✦ Going Live ✦ Evaluation Process 1-4 weeks ✦ Look & Feel (look and feel) ✦ Accessibility ✦ Make recommendations ✦ We have final control on who goes live

38. Conversion Team ✦ Full-time faculty member devoting 50% of her time to converting / migration of sites into the new accessible templates: CMS ✦ Team of students

39. Post Deployment ✦ webcheck.sjsu.edu ✦ Ongoing accessibility consultation ✦ Ongoing workshops ✦ We value our ATI Innovators! ✦ Accessibility @ SJSU www.sjsu.edu/accessibility www.sjsu.edu/accessibility

40. Questions