Printer friendly version
COM Web Accessibility Standards and Guidelines (PDF, 200 Kb)
COM Web Accessibility Checklist (PDF, 120 Kb)

Resources
How to Create an Accessible PDF (PDF, 3 Mb)

What is Web Accessibility?

In the various modes of delivery of web pages, web-based instruction, and other electronic media sources, accessibility refers to the ability of every person to access the information presented. Accessible web pages take into account the special needs of people with auditory, visual, mobility, and cognitive impairments and give those users an equivalent browsing, viewing, and communication experience to that of nondisabled individuals. Accessible web pages will work well with screen readers and other assistive technology.

Guidelines for Online Accessibility

Both state and federal law require community colleges to operate all programs and activities in a manner, which is accessible to students with disabilities. Access to persons with disabilities is guaranteed by Section 508 of the Rehabilitation Act of 1973, the Americans with Disabilities Act of 1990, and by Title 24, California Code of Regulations. Whenever possible, communications with persons with disabilities will be as effective as communications with persons without disabilities in terms of timeliness of delivery, accuracy of translation, and appropriateness to the message and the individual. The law applying to online materials is specific that all materials must be accessible and not fall back on “reasonable accommodation.”

Strongly recommended:
All files uploaded to the web by COM faculty and staff, including digital files, audio, and video files, must be accessible to individuals with disabilities to the fullest reasonable extent possible.

What Online Materials Need to be Made Accessible?

1. All Web-based HTML files, PDF files, PowerPoint presentations, Microsoft Word documents, Excel spreadsheets, video files, audio files, etc.
2. Content created within Adobe Contribute, by Contribute editors.
3. Files uploaded to COM server by instructors.
4. Material created or controlled by instructors, required as class material, but hosted on another server.
5. Web pages hosted elsewhere will be reviewed for compliance only if required for class material.

Creating and Improving Web Pages to be Accessible

Refer to the COM Web Accessibility Standards and Guidelines to be guided in the creation and modification of web materials to be accessible. The COM Web Accessibility Standards and Guidelines align closely with Section 508 of the Rehabilitation Act of 1973. COM faculty, staff, and Contribute users are encouraged to put these guidelines into practice at the earliest possible date in order to make their web pages accessible to persons with disabilities. See also the Web Accessibility Checklist (PDF, 120 Kb) that summarizes the 508 rules in a handy checklist format.

COM Web Accessibility Standards and Guidelines

1. Alternative Text (508a)

For non-text elements such as images, applets or image maps, alternative text information needs to be provided to communicate the same information as its associated element. What are ways of assigning text to elements?

"Alt tags" are attributes added to images so that a screen reader can read a description of the image.

HTML example code:
<img src="../images/Cover-fall2011.jpg" alt="Credit Class Schedule Fall 2011">
If the information for the image is elsewhere on the page, e.g. in a caption or in the body text, there is no need to use the alt tag. In fact, it can be confusing. In that case, use an empty alt tag.

HTML example code of empty alt tag:
<img src="../images/department-group-photo.jpg" alt="">

There is no limit to the length of alt tags, but the descriptions should be succinct without being too vague. For complicated images, such as charts, graphs or diagram, use the "long desc" attribute. This attribute links to another html page that includes the text. Also add an alt tag to the image.

HTML example code:
<img src="../images/PRIE/html/SLO-pie-chart.jpg" alt="SLO pie chart (click for data)" "longdesc="pie-chart-description.html">

2. Multimedia presentations (508 b)

Provide equivalent alternatives for multimedia presentations.
Multimedia files — a combination of text, audio, still images, animation, video, and interactivity content

Video:
Multimedia files with audio need synchronized captioning of the audio portion.

Audio:
Audio only files need not have synchronized captioning but must have a text equivalent such as a transcript.

Web slide shows:
A silent web slides show presentation does not need to have synchronized captioning or an audio description accompanying it for audio impaired viewers, but does require text alternatives to be associated with the graphics for sight impaired viewers.

Short animation graphic element:
For short animations such as animated "gifs" images, provide alt-text and a long description if needed.

3. Text and graphics are perceivable and understandable without color (508 c)

Don’t use color to convey information or indicate an action.

Example (Avoid):
Click on the green button.
Please refer to red bold text.
Please see third column under blue heading.

Use foreground and background color combinations that provide sufficient contrast when viewed by someone with color blindness or when viewed on a black and white screen. This does not mean that the web pages have to be displayed in black and white. The importance is contrast between text, elements and background color needs to be significant enough that it will read well in black and white as well as color.

4. Style sheets (508 d)

Note: This rule does not apply to Adobe Contribute users.
Ensure that the contents of each page are ordered and structured so that they read appropriately without an associated style sheet.
Some users with low vision may create their own style sheet to display fonts and colors that they can better see. If a web page is set up to override user-defined style sheets, people with disabilities may not be able to use the page.
The safest method of using css styles is with an "external" style sheet. This involves creating a .css document that contains the styles and linking to it in the head of the document.

5. Image maps (508 e and f)

Note: This rule does not apply to Adobe Contribute users.
Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

With a server-side image map, the browser sends the coordinates of where the user clicks directly to an associated file on the server. Server-side image maps are inaccessible because they require positioning the mouse on some part of a picture to indicate a desired action.

What distinguishes this map as a server-side map is that there is no usemap attribute. Instead, the image is enclosed in an anchor tag (<a>) and the image element has the boolean ismap attribute.

A client-side image map has the coordinates in the code and allows the author to assign text to each image map hot spot. This allows someone using a screen reader to easily identify and activate regions of the map.

If server-side image maps must be used, provide redundant text links for each hotspot in the image map. Server-side image maps do not allow browsers to indicate to the disabled user the URL that will be followed when activating a region of the map. By providing redundant text links, the person not able to see or accurately click on the map will have access.

6. Tables used for data (508 g and h)

Note: This rule does not apply to Adobe Contribute users.
This rule does not apply to tables used for layout only.

Row and column headers shall be identified for data tables. Each table cell is either a pure data cell (td) or a header cell (th). Also, the td and scope tags can be used in conjunction to specify header cells.

Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. (Use id and header tags).

7. Frames (508 i)

Note: This rule does not apply to Adobe Contribute users.
Provide sufficient information to determine the purpose of the frames and how they relate to each other.

8. Moving, blinking, scrolling and auto-updating (508 j)

Ensure that moving, blinking, scrolling, or auto-updating objects or pages may be paused or frozen.
Avoid any blinking or updating of the screen that causes flicker. Some individuals with photosensitive epilepsy can have a seizure triggered by displays that flicker, flash, or blink, particularly if the flash has a high intensity and is within the range of 2 to 55 cycles per second.

Movement should be avoided when possible, but if it must be used, provide a mechanism to allow users to freeze motion or updates in applets and scripts or use style sheets and scripting to create movement.

For auto-refreshing or timed response pages, provide a second copy of the page where refresh only happens after a link has been selected (until user agents provide this ability themselves).

9. Use text-only pages to achieve compliance (508 k)

When compliance cannot be accomplished in any other way, a text-only page, with equivalent information or functionality, shall be provided to make the web site accessibility compliant. Text-only pages must contain equivalent information or functionality as the primary pages. Also, the text-only page shall be updated whenever the primary page changes.

10. Scripts (508 l)

Note: This rule does not apply to Adobe Contribute users.
For scripts that present critical information or functions, ensure that the information provided by the script is readable by assistive technology or provide an alternative, equivalent presentation or mechanism.

11. Applets, plug-ins and other applications – PDFs, QuickTime Movies, etc. (508 m)

When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the web site must provide a link to a plug-in or applet that complies with the Section 508 standards for software.
This rule requires links for downloading the plug-in, etc. that is needed to play or display the content of the files.

For example, a page with a link to a PDF document will need to provide a link to download the Adobe Acrobat reader. A page displaying or linking to a QuickTime movie will need to provide a link to the QuickTime player download page.
Additionally, it is the responsibility of the web page author to know that any plug-in or applet required must be a compliant application.

12.Electronic forms (508 n)

Note: This rule does not apply to Adobe Contribute users.
Electronic online forms shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

All form elements except for buttons should use the <LABEL> tag and associated "FOR" attribute to indicate the type of form item it is.

An acceptable alternative to the <LABEL> tag is to use the "TITLE" attribute for a form element. Ensure that the title value adequately describes the functionality of the form element.

Wherever possible, place labels adjacent to input fields, not in separate cells of a table. To better tie the form element to its associated label, use the "ID" attribute in the associated form element. Set this attribute to the identifier used in the "FOR" attribute of the associated <LABEL> tag.

Dynamic HTML scripting of the form shall not interfere with assistive technologies and is keyboard accessible.

13. Allow user to skip repetitive navigation (508 o)

Note: This rule does not apply to Adobe Contribute users.
A method shall be provided that permits users to skip repetitive navigation links. Long sets of navigation that is repeated on every page will pose a problem for those using screen readers.

A good method for skipping the repetitive navigation is to provide a "jump link" – a hyperlink at the very beginning of the page with appropriate text (e.g. “Skip to main content”) that links to an anchor tag placed before the start of the content.

HTML Example Code to be placed at the top of the page:
<a href="#main_content">Skip to main content</a>

HTML Example Code to be placed at the beginning of main content:
<a name="main_content" id="main_content"></a>

14. Timed responses (508 p)

Note: This rule does not apply to Adobe Contribute users.
When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required or given a link to a second copy of the page that does not require a timed response.

back to top

COM Web Accessibility Web page
Content Responsible: Cathy Summa-Wolfe, Director of Communications and Community Relations, (415) 485-9528
Technical Contact: Shook Chung, Senior Creative Designer, (415) 485-9524