AnnArborCIL.org
Divye Bokdia
Introduction
AnnArborcil.org is an accessible website with AAA conformance. Team of four Michigan students (refer team section) and a staff member from AACIL (Ann Arbor Center for Independent Living) completed this project in four months (Jan’10 to Apr’10). The design of the website was revamped and the new website was developed using CMS (wordpress). The aim was to come up with an easy to maintain, accessible and robust website for the organization.
As mentioned in WCAG 2.0, “Note that even content that conforms at the highest level (AAA) will not be accessible to individuals with all types, degrees, or
combinations of disability, particularly in the cognitive language and learning areas.” This should always be kept in mind while assessing the success or failure of this project. Ideally, no single design could be considered as Universal Design, but the Universal Design is something that caters the requirements of majority.
Document Agenda
This document address all the accessibility related details of annarborcil.org. Document has been divided into following sections:
1. What is Web Accessibility?
2. What are W3C, WAI and WCAIG? 3. Various Compliances a. Valid XHTML b. Valid CSS c. AAA Conformance d. Section 502 Compliance
4. Features instating Accessibility
5. Online Validation Tools Used
6. Supplementary tools to support Accessibility
7. Project Team
Note: The information in this document has been authenticated and confirmed
from W3.org and Wikipedia.
What is Web Accessibility?
Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive,
understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.
Web accessibility encompasses all disabilities that affect access to the Web,
including visual, auditory, physical, speech, cognitive, and neurological disabilities. Web accessibility also benefits people without disabilities. For example, a key
principle of Web accessibility is designing Web sites and software that are flexible to meet different user needs, preferences, and situations. This flexibility also benefits people without disabilities in certain situations, such as people using a slow Internet connection, people with "temporary disabilities" such as a broken arm, and people with changing abilities due to aging.
What are W3C, WAI and WCAG?
The mission of W3C is "To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-‐term growth for the Web." Though W3C has its detractors, most agree that the W3C today enjoys the respect and support of a wide range of key industries, organizations and individuals. It provides specification and guidelines to make all the web resources accessible, consistent and of high quality. (More info at w3.org)
The "Web Accessibility Initiative" (WAI) at W3C was launched in 1997. It is an extremely active area in W3C, due to huge public interest in accessibility, bolstered by accessibility legislation in effect in many developed countries. Also, efforts made by other W3C Working Groups to build a Web that ensures equal access for
everyone frequently intersect with WAI priorities and objectives.
W3C released WCAG 1.0 in 1993 and it was continuously reviewed to foster the web experience for disables from time to time. In end of 2008, WCAG 2.0 were released and as still automatic validators for 2.0 are not so common in the market, websites follow 1.0.
Website complies with:
Generally, the websites might comply with any one of the criteria (CSS, Mark up Language, WCAG, or Section 508), but that doesn’t ascertain that the website is accessible. If we look at the big picture, then all these factors together make any web resource 100% accessible, user friendly and robust. Lacking in any one of them will hamper the efficiency of use for the website visitor.
A. Valid XHTML 1.0 Transitional
An XHTML document that conforms to an XHTML specification (given by W3C) is said to be valid. Validity assures consistency in document code, which in turn eases processing, but does not necessarily ensure consistent rendering by browsers. A document can be checked for validity with the W3C Markup Validation Service.
B. Valid CSS 3
CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design).
C. AAA Conformance
WCAG 2.0 (also 1.0) has categorized all the required guidelines into 3 priorities. The priority levels of WCAG are as follows:
• Priority 1: For all users to access the Web content and for Web developers to attain Conformance level “A”, these requirements must be satisfied.
• Priority 2: These requirements should be satisfied by the Web developers so that no group finds it difficult to access the Web content and so as to attain Conformance level “AA”.
• Priority 3: These requirements may be satisfied by the Web developers to
facilitate access to Web content for some special groups and attain Conformance level “AAA”.
Our website complies with Priority 1, 2 and 3 and thus has got ‘AAA’ conformance badge. This signifies that the website is totally accessible and error-‐free to use for the disable people.
D. Section 508 compliance
In 1998 the US Congress amended the Rehabilitation Act to require Federal agencies to make their electronic and information technology accessible to people with disabilities. Section 508 was enacted to eliminate barriers in information
technology, to make available new opportunities for people with disabilities, and to encourage development of technologies that will help achieve these goals. The law applies to all Federal agencies when they develop, procure, maintain, or use
electronic and information technology. Our website also complies with all the guidelines given under that section.
Features Instating Accessibility in the Website
Following features were implemented in the website that makes it different from other websites:
1. All the non-‐text content of the website has a text alternative in the website. Like images, which couldn’t be read by the text reader, have an alt text, which tell users that, what that image is all about. We made sure that all the images
have alternate text.
2. We made sure that no differentiation was made in the website on color alone. As that would mean nothing for the blind and color-‐blind people. So we used hierarchy in the website (using h1, h2 h3 etc) to show the difference in the priority.
3. Presently We don’t have any audio-‐video in the website, but if any of that is included in future, then text script for them should be included along with the main files.
4. The website allow users to resize the text of whole website and chose between three available sizes. Due to implementation of resizing feature in all the recent browsers, this functionality is not used so frequently.
5. The minimum contrast ratio of 4.5:1 is followed between the main content and the background. While for the headings and large text, contrast ration of 3:1 was followed.
6. Contrast adjuster was incorporated, which allows user to change the normal contrast of the website to high contrast color scheme.
7. All the features of the website could be accessed and used using Keyboard alone (for people with motor disability). They will be able to access any link directly by the use of ‘access keys’. Link to all the access keys is presented at
http://www.annarborcil.org/accessibility/access-‐keys/
8. For the moving and auto-‐updating image banner at the top of the page, we have provided feature to navigate across different images via toolbar. So the user can shift back to the image he wants to view.
9. The time of image flash (image change) is kept more than 3 sec, thus it doesn’t interfere with the people who finds it difficult to focus when things are changing too much on the website.
10. We have provided link to bypass the block, which is repetitive in all the pages, i.e. ‘skip to navigation’ link is provided at the top of the page. This will avoid repetition of the same block again and again, for the user using text reader.
11. All the links in the website are colored differently than the main content. So users can easily trace them. As different links are used for different buttons, so user can make sense out of them even without context.
12. The heading structure was strictly followed and heading were not used for the aesthetics part of the website.
13. It was recommended to the web administrators and the content writer that the language should be kept simple and direct. It shouldn’t be confusing and ambiguous. If there is any word whose pronunciation might be ambiguous then both textual and audio representation of such words is must.
14. As our website might be accessed by text reader and they differentiate languages by LANG tag. So we set it to English as default, because right now all the content in the website is in English only.
15. The website is totally accessible even without any style sheet and the flow of the content is matched corrected in both the navigations formats (visual navigation and the text reader navigation)
16. The website is tableless and no frames were used in the backed. As tables causes problems with the screen readers.
17. Style sheets were used to handle the design of the website. We relied upon CSS alone for the page structure.
18. Website was successfully checked for cross-‐browser compatibility with most common browsers including IE6, IE7, IE8, Mozilla, Chrome, Safari etc.
19. The website will work perfectly fine even if all the scripts are turned off and at slow Internet connection speed. The JavaScript are used for text resizing and contrast changer.
20. Information Architecture of the website goes with the navigation and interaction design. All the popular or more frequently accessed links were placed above.
Online Validation Tools Used
Following online validators were used to ensure the quality of the website:
XHTML http://validator.w3.org/ CSS http://jigsaw.w3.org/css-‐validator/ Section 508 http://section508.info/
WCAG 1.0 and 2.0
Wave (http://wave.webaim.org/) our primary tool Cynthia (http://www.contentquality.com/)
Truvex Online (http://checkwebsite.erigami.com/accessibility.html) FAE (http://fae.cita.uiuc.edu/)
Apart from the above mentioned online validators, the website was also manually checked with the WCAG 2.0 (available at http://www.w3.org/TR/WCAG20/) Though the website was tested with all the online tools (automated) but the real accessibility will be checked with real user. We are waiting for the feedbacks from the user, to see how successful we were in making this website accessible.
Supplementary tools to support Accessibility
Some of the major concerns about this website are:
• Presently, the website is web accessible, but it doesn’t have all the content and images. The website is tested and validated by flowing some sample text and images. So web administrators should make sure that the website
complies with the guidelines even after the actual data is posted.
• The website requires contribution from different people. So it should be observed and made sure that all the users understand the rules and norms of posting the content in an accessible format.
• The website might contain files in Word, Excel, PowerPoint, PDF or Flash animation. So before posting them, web administrators must check their accessibility.
• All the active users (who are going to post content on the website) should go through following modules before posting any content on the website. This will be really beneficial in keeping this website as a benchmark for other organizations.
• All the content posted on the website should be double-‐checked for the quality. Because if the content is not making any sense, then all efforts to make is accessible will go waste.
All the staff members are supposed to learn following modules before using the website:
• Making PowerPoint Slides Accessible • Making Video Accessible
• Making Word Documents Accessible • Making Excel Documents Accessible • Making PDF Documents Accessible • Making Webpages Accessible • Making Scripts and Java Accessible
All the above-‐mentioned modules could be accessed for free at
http://accesselearning.net. The modules have been developed under the project titled GRADE (Georgia Tech Research on Accessible Distance Education). Apart from these modules, another useful resources to learn the basics of making content accessible is http://www.hhs.gov/web/508/testdocuments.html. The U.S. Department of Health & Human Services issued these modules, and they focuses more on ‘Section 508’ guidelines rather than WCAG.
Project Team
Following members worked on the project
Name Background Specialization
Bryan Klausmeyer PhD Candidate Programming and Web Development Divye Bokdia Masters Student Web Accessibility Expert
Helen Ledgard AACIL Staff Content Writer and Organization Liaison Kevin Chang Masters Student Interface Design and Web Design
Nathan Yu Undergraduate Web development (Intern)
