Download presentation
Presentation is loading. Please wait.
Published byAbraham Cristy Modified over 10 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.