Presentation on theme: "Strategies For Creating Accessible University Webpages Scot Close and Neil Torrefiel Web Services Unit San Jose State University."— Presentation transcript:
Strategies For Creating Accessible University Webpages Scot Close and Neil Torrefiel Web Services Unit San Jose State University
Overview ✦ Background ✦ Challenges ✦ Solutions ✦ Accessibility in Practice ✦ Deployment ✦ Questions and Answers
✦ 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.
✦ 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
Site Problems ✦ Lack of heading structure ✦ Inaccessible navigation ✦ Table layout ✦ Invalid HTML
Page Problems ✦ Missing alt text ✦ Data tables without headings ✦ Non-meaningful link text ✦ Inappropriate use of color
Challenges ✦ Our final challenge was to retain as much of the "look and feel" of the current CMS site as possible.
✦ 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.
Heading Structure ✦ H1 San Jose State University : Site Name ✦ H1 Navigation ✦ H2 Global Navigation ✦ H2 Primary Navigation ✦ H2 Breadcrumb Navigation ✦ (H2 Secondary Navigation)
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
Navigation ✦ Although it did alter the site "look and feel", we decided to use static navigation menus.
Navigation ✦ Navigation features: ✦ Marked up as unordered lists ✦ Styled with CSS ✦ Dynamically created by CMS
Navigation ✦ Navigation features: ✦ Headings show groups of repetitive navigation links ✦ "Global" Site navigation ✦ Breadcrumb Navigation ✦ Secondary Navigation
Main Content ✦ We suggest to use headings in the Main Content areas, to define template columns and different bodies of text.
Templates ✦ We provide 14 fully-accessible templates which allow for content and media flexibility ✦ All content areas are marked up by headings
Contact Information ✦ Contact Information is always displayed on the landing page for the site
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.
Accessibility In Practice
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.
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
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.
XStandard ✦ Data tables created with XStandard must have a summary, and row and/or column headers are easy to create.
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.
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.
Workshops / Training ✦ We especially emphasize: ✦ Appropriate headings ✦ Appropriate link text ✦ Headers for data tables ✦ Appropriate descriptive text for uploaded images
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
Distribution ✦ University Web Template Kit vs. WebCMS 7 ✦ Both have the same underlying architecture
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
WebCMS 7 ✦ Paper-based application for new sites ✦ Workshop RSVP for migrating sites
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
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
Post Deployment ✦ webcheck.sjsu.edu ✦ Ongoing accessibility consultation ✦ Ongoing workshops ✦ We value our ATI Innovators! ✦ SJSU