Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations

Presentation on theme: "Strategies For Creating Accessible University Webpages Scot Close and Neil Torrefiel Web Services Unit San Jose State University."— Presentation transcript:

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 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 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 ✦ ✦ 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 ✦ ✦ Ongoing accessibility consultation ✦ Ongoing workshops ✦ We value our ATI Innovators! ✦ Accessibility @ SJSU

40 Questions

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

Similar presentations

Ads by Google