F. A. Q. Resources Techniques Guidelines

Explanations and Techniques

A Web site will be in compliance with the CCSF Guidelines if it meets the requirements of items (a) through (r) listed below. Items (a) through (p) are based on the recently enacted federal Section 508 standards. Items (q) and (r) have been added to the CCSF Guidelines to further enhance accessibility.

Please note that the tips and techniques discussed below are not necessarily the only means of enhancing the accessibility of Web sites. Other methods are listed at the W3C WAI site. Compliance with the items below however will ensure, at the least, minimum accessibility.

 

 
(a) Alternate Text (b) Multimedia Presentations
(c) Color (d) Readability w/o style sheets 
(e) Server-Side Image Maps (f) Client-Side Image Maps
(g)&(h) Data Tables   (i) Frames
(j) Flicker Rate (k) Text-Only Page
(l) Scripts (m) Applets and Plug-Ins
(n) Electronic Forms (o) Navigation Links
(p) Time Delays  (q) Color Contrast
(r) Clear Link Titles

 

(a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).

Explanation

Computer users who are blind or have partial vision impairments typically use 'screen readers' which read aloud the text on a Web page. Screen reader programs are also sometimes used by people who have learning or cognitive disabilities. The visual elements on a Web page that are not in text format, for example, images, animations, movies, or Flash and Java applets will not be accessible to someone using a screen reader unless an equivalent is provided.
Similarly, computer users who are deaf will not have access to the audio elements of a Web page, such as sound files and the audio portions of movies. Text equivalents such as transcripts or captions must be provided.

Techniques

For images, perhaps the most common way of adding text equivalents is to add the 'alt' attribute of the image source tag. In most development programs such as Microsoft Frontpage, or Macromedia Dreamweaver, when an image is inserted, the program will display a dialogue box with space for the 'alt' attribute. If the image has already been inserted onto the page, then select the image and bring up its properties. Then, add the alt-text information.

In HTML the alt attribute looks like this:
HTML Source Code: <img src="logo.gif" alt="College Logo">

The alt-text information should convey the same information, to the extent possible, as the image. If the image is simply used as a spacer for layout purposes, then leave the alt-text blank with quotation marks:
HTML Source Code: <img src="transparent.gif" alt=" ">

If the image is very detailed, another approach is to put a complete description of the image on another page and put a link in the form of a letter 'D' next to the image. See this example:
http://fog.ccsf.cc.ca.us/~thetheri/examples/example04.html

The 'longdesc' attribute of the image tag was added as an accessibility feature. Currently, it is not well supported by assistive technologies such as screen readers and so its use is not recommended.

Another way of conveying the information of an image is in context. For example, place a visible text caption directly above or below the image: "This photograph of a cafe was taken during my summer vacation in Paris."

For visual elements such as some Java applets, one way of making these accessible is to provide a text equivalent on a separate page. Provide a link near the movie or applet to the page with the description.

For audio files provide a transcript. For movies with sound provide captioning ideally or at least a text description with the same information conveyed by the movie on a separate page.

While the person who is deaf or hard-of-hearing, blind or visually impaired, or otherwise disabled may not have a user experience identical to that of most people, at least the basic informational content is conveyed and the user is not left wondering what he or she missed.

For more detailed information on these and similar techniques see the following:

http://www.w3.org/TR/WCAG10-TECHS/#tech-text-equivalent
http://www.access-board.gov/sec508/guide/1194.22.htm#(a)

up arrow Back

(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

When captioning is used to make the audio portion of video accessible to persons who have hearing impairments, the captions should be synchronized with the video. When audio description of visual information is used to make video images accessible to persons who have vision impairments, the audio description should be synchronized with the video. In other multimedia presentations, such as slide shows with narration the same holds true--text equivalents should be synchronized with the slides.

This is a somewhat forward-looking requirement as not all forms of Web video and multimedia can be made to conform to this requirement in every case. Real Media, Windows Media and Apple Quicktime all offer closed captioning and audio description capabilities for streaming video. However, currently only Real Media allows developers to simultaneously include closed captions, and audio description on a second channel. The others allow one or the other. In some cases, it may be necessary to use open captions instead of closed captions.

In general, when it is possible to conform to this guideline using the accessibility features of the multimedia format, then CCSF developers should avail themselves of the features. Otherwise, a text equivalent in another form should be included as in provision (a) above.

Finally, in cases where audio but not video is on a Web page, a transcript is considered to be the equivalent for accessibility.

The following example shows a Quicktime movie with closed-captions. Click the CC icon to toggle the captions on and off.

http://newmedia.doit.wisc.edu/staff/wolf/intro_scrn_rdrs.mov

up arrow Back

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

Explanation

When colors are used as the sole method of conveying information, or identifying controls such as buttons, individuals who are colorblind, blind or have vision impairments may not be able to use the page as intended.

Examples would include: a page with a pie-chart showing different slices identified only by color; a page with green and red buttons and text stating, "Click the red button to go back, and the green button to go forward."

Techniques

In colored charts, diagrams and other illustrations, make use of text labels for persons who are sighted but colorblind, and alternate text equivalents for persons with vision impairments that require the use of screen readers. For buttons or other controls use alternate text and redundant text links.

Check the page by printing it on a black and white printer to see how the removal of color affects the usability of the page.

up arrow Back

(d) Documents shall be organized so they are readable without requiring an associated style sheet.

Explanation

Cascading Style Sheets (CSS) are a relatively new feature that allows Web developers greater control over the appearance of a Web page. However, assistive technologies such as screen readers may not be able to correctly determine the sequence of items on some Web pages where layout is controlled with CSS.

Furthermore, older browsers will not display CSS features correctly. This is more a universal access issue rather than a disabled access issue--anyone with an older browser may face these barriers.

Techniques

Developers who use CSS should check the site in a text-only browser such as Lynx and make sure that the page is still readable and that the text is in proper sequence. The site linked below has an online Lynx viewer and additional information on Lynx.

http://www.delorie.com/web/lynxview.html

up arrow Back

(e) Redundant text links shall be provided for each active region of a server-side image map.

Explanation

An image map is a picture on a Web page with areas that serve as links to other pages. When the user clicks on a particular part (a 'hotspot') of the image, a new page is sent. There are two types of image maps, client-side and server-side image maps. Client-side image maps can be made easily accessible. However server-side image maps, pose difficulties. Typically when the user clicks on a server-side image map, the coordinates of the mouse click are sent back to the server. A script on the server processes that information and sends the requested page. Since the script resides on the server, the browser cannot indicate to the user the URL that will be followed when a region of the map is clicked. Therefore, the redundant text link is necessary to provide access to the page for anyone not able to see or accurately click on the map.

Techniques

Place a set of equivalent text links near the image map. Typically the text links are placed directly below the image on the page.

up arrow Back

(f) 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.

Explanation

Client-side image maps are preferable to server-side image maps for several reasons. First they are typically keyboard accessible, meaning that it is not necessary for the user to use a mouse to access them. Second, assistive technologies such as screen readers can read the linked URLs to the user. Third, client-side image maps can be easily enhanced for further accessibility by the use of alternate text for 'hotspots'.

Techniques

To enhance client-side image maps, add alternative text to identify the linked URLs for each hotspot on the image.

See the HTML example at:
http://www.access-board.gov/sec508/guide/1194.22.htm#(f)

Also see the W3C example techniques at:
http://www.w3.org/TR/WCAG10-HTML-TECHS/#client-side-text-equivs

up arrow Back

(g) Row and column headers shall be identified for data tables.
(h) 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.

Explanation

A data table is a chart with rows and column showing tabular information. Screen readers typically read through the chart cell by cell, across each row. The person listening to the screen reader will hear the contents of each cell in the table. They may have difficulty connecting that information to the appropriate row and column header. For example, in the chart below the user hearing the contents of each cell read aloud might not be able to remember whether the number 234 refers to the course number or room number.

Course
Title
Course Number Room Time
English 1A 456 642 9:00
Math 1B 498 234 1:00
History 101 287 102 3:00

The table can be enhanced for accessibility so that row and column headings will be read off along with the contents of each cell.

Techniques

The easiest way to meet this standard for simple tables is to use the 'scope' method detailed at the W3C Techniques site (see link below). For more complicated tables with multiple header rows or columns, the 'ID' and 'Headers' method detailed at the W3C site should be utilized.

See the W3C example techniques at:
http://www.w3.org/TR/WCAG10-HTML-TECHS/#identifying-table-rows-columns

See also:
http://www.access-board.gov/sec508/guide/1194.22.htm#(g)

up arrow Back

(i) Frames shall be titled with text that facilitates frame identification and navigation.

Explanation

Some Web sites use frames to divide the browser window into regions. Typically this is done to allow for a navigation menu (a set of links) to remain visible in a frame in one part of the screen, while the other frame or frames display content that changes as links in the navigation frame is clicked. Often the frame containing the navigation menu is placed on the left side of the screen, with the frame containing content on the right side of the screen. See, for example, the image at:
http://www.access-board.gov/sec508/guide/1194.22.htm#(i)

A person using a screen reader may become confused if the frames are not clearly titled.

Techniques

One way to title the frames is to use the 'title' attribute within the frame tag in the HTML source code of the document. The HTML might look like this:

<frameset cols="30%, 70%">
<frame src="navlinks.html" name="navlinks" title="Navigational Links Frame">
<frame src="geninfo.html" name="contents_page" title="Contents Frame">
</frame>

The screen reader ideally would read aloud the titles of the frames, "Navigational Links Frame" and "Contents Frame" as the user browses the page. It should be noted however that not all screen readers currently implement this feature so additional steps can be taken. For example, the navigation menu can be titled with text in context. This could be accomplished by simply putting the word, 'Menu' at the top of a list of links. The 'no frames' attribute can also be used to give information about the contents of the frames:

<noframes>This page contains two frames. The frame on the left contains a list of navigation links. The frame on the right contains the main content.</noframes>

The first browsers, Netscape version 1, for example, did not support the frames function. So this feature was originally designed as a way of informing users with old browsers that the page contained frames. While any modern browser will now display frames, screen readers will read the 'noframes' information aloud.

See the W3C example techniques at:
http://www.w3.org/TR/WCAG10-HTML-TECHS/#frame-text-equivalent

up arrow Back

(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

Explanation

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 certain frequency ranges. Also Individuals with attention-deficit disorders may be distracted from the other content on the page.

Techniques

Rapidly blinking or flickering images are sometimes used on Web pages as attention getting devices, typically for advertisements. These effects can be created with GIF animation, Java or Flash applets. Animations and applets are not prohibited by these guidelines but ones with rapidly blinking or flashing images should always be avoided.

up arrow Back

(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of these standards, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

Explanation

Some Web sites make extensive use of Dynamic HTML, CSS, Flash animations, Java applets or other scripting methods to display content or for features such as mouse-over navigation schemes. In some cases it may not be possible to make such pages accessible to someone using a screen reader or keyboard only.

Techniques

Typically a link is placed at the top-left corner of the screen with the words, 'Text only'. The text only page should include content and functionality equivalent to the regular page. The page is typically designed with a simple linear, top to bottom layout without the use of multiple columns or other layout features. No images should be used. Accessible data tables (charts) and form elements such as search boxes and feedback forms should be included to give equivalent functionality. When the regular page is updated, the text only page should also be updated. In addition, developers should provide a phone number, fax number, e-mail, or postal address where information is available.

up arrow Back

(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

Explanation

Some Web pages may utilize scripting languages, especially JavaScript, which requires users to use a mouse to access certain features. However, Web pages should be functional with keyboards, pointing devices, trackballs or any other regularly used input device. Scripts are also sometimes used for displaying images in ways that are not accessible to users of screen readers (text-to-speech programs).

Techniques

Check the page to see if it is accessible with a keyboard. If it is not, consider using a simpler navigational interface or use the accessibility features of JavaScript. Some but not all JavaScript features can be made accessible. See the discussion of this topic at:
http://www.access-board.gov/sec508/guide/1194.22.htm#(l) and
http://www.w3.org/TR/WCAG10-TECHS/#tech-scripts

In general, pages will be accessible to a larger audience when 'bells and whistles' are avoided. Some JavaScripts, Java Applets and other scripting devices can also cause problems for users of older computers, users with slower connections to the Internet, and novice computer users. Use when necessary, but not to add frivolous features to a page.

up arrow Back

(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 page must provide a link to a plug-in or applet that complies with 1194.21(a) through (l).

Explanation

Companies have developed a number of applications that can be used with browsers. These are referred to as 'plug-ins' because they work with the browser (usually Microsoft Internet Explorer or Netscape). Such plug-ins include Macromedia Flash, Apple Quicktime or Real Player. Java applets will require Java functionality on the user's machine.

Techniques

If a Web page will require the use of plug-ins or other functions, then the developer should include a link to the page where these can be downloaded. Fortunately, all of the most frequently used plug-ins have added or are adding accessibility features to comply with federal Section 508 requirements. Accessibility features are also being added to the Java language.

In general, it is best to have the user download and install the plug-in, rather than embedding it into the Web page. This is because the downloaded versions have better accessibility features.

up arrow Back

(n) When electronic forms are designed to be completed on-line, the form 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.

Explanation

Forms are the fill-in text boxes, check boxes, radio buttons and pull-down selections that allow users to send information back to the Web server. For users with vision impairments, it may be difficult to associate form labels (the words that appear on the screen) with form elements (the text box, check box, etc.) Forms can be made accessible with a few simple techniques to users of screen readers and other assistive technologies.

Techniques

It is important when using a form to associate the label to the form element. The following example shows how a form with a space for the user to type his or her name can be made accessible:


<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname">

In this case a user with normal vision would see the words, 'First Name' on the screen next to an empty box for typing the name. The person using assistive technology could be informed that the label 'First Name' was associated with the empty text field by using the 'label for' attribute and the 'id' attribute with the same value, 'firstname'.

For more information see the techniques at:
http://www.w3.org/TR/WCAG10-HTML-TECHS/#forms-labels

For more detail on forms see:
http://www.w3.org/TR/REC-html40/interact/forms.html

See also the tutorial at:
http://www.webaim.org/howto/forms

up arrow Back

(o) A method shall be provided that permits users to skip repetitive navigation links.

Explanation

Many Web pages are designed so that the same set of links appear on each page. For example, in a column along the left side of the screen, or in one or more rows at the top or bottom of the screen. Users with normal vision will typically scan each new Web page, ignoring the repeated materials and jumping directly to the content of the page. Screen readers however may read the list of links for each page. By allowing the user to skip the repetitive material, he or she can go more directly to the main content of the page.

Techniques

A text link can be placed at the start of the list of links that links to an anchor at the end of the list. The link at the start can also be an image with the alt-text attribute.

See the following example:
http://www.usda.gov/oo/target.htm

up arrow Back

(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

Explanation

Sometimes Web pages are designed so that after a certain number of seconds the page will automatically refresh. Someone with a disability may need more time than most people to access the page. For example, someone with a vision impairment or learning disability may need more time to read the contents of the page or someone who has a mobility impairment may need additional time to select navigational controls.

Technique

The simplest way to accomplish this is to not use the timing feature. If the timing feature is used, then alert the user and script a way to give the user additional time. For test taking in online classes, if the instructor plans to give a timed test, then students with disabilities should be informed in advanced and encouraged to contact the Disabled Students Programs and Services for test taking accommodations.

up arrow Back

(q) Sufficient contrast shall be provided for foreground and background color combinations.

Explanation

The background color is usually specified in the HTML source or is from an image used as the background of the page. The foreground color is usually the color of the text on the page. When the foreground and background colors are similar, for example, both dark or both light, the text on the page may be difficult to read. For someone with a vision impairment or colorblindness it may be even more difficult.

Techniques

Use a simple color scheme such as dark text on a light background. Avoid the use of prominent multicolored background images. Test the page by printing it on a black and white printer.

up arrow Back

(r) Navigation links shall be clearly titled to identify their targets.

Explanation

Some screen readers (text-to-speech programs) have a function which allows users to read just the links on a page. This allows the user to scan the page to look for a particular link. When the link text is not descriptive, for example if the link text is 'click here', then the user will only hear 'click here'.

Techniques

The following two examples show links with similar text. The second link is more descriptive than the first to someone hearing only link text.

For the CCSF main page, click here.
Go to the CCSF main page.

up arrow Back

See also the CCSF Web Page Development Guide for general guidelines.