Online Communications Policy

Accessibility Guidelines

Web sites developed by LSU units should make every attempt to ensure that web pages are accessible to individuals using a variety of browsing methods. LSU web sites incorporating multimedia or interactive applications should make sure that the information included in these applications can be accessed by individuals who are visually impaired or hearing impaired.

All LSU units should make every reasonable attempt to ensure that University web sites are in compliance with Section 508 of Rehabilitation Act Amendments of 1998.

External Resources

The U.S. Access Board is responsible for developing accessibility standards which will be incorporated into regulations governing federal procurement practices. The U.S. Access Board along with the W3G have developed strategies and recommendations to assist web site developers in building 508 compliant web sites.

There are a variety of online services available to web developers building accessible sites.

The Government Computer News Web site is one of the most comprehensive online resources for government agencies needing information about the Rehabilitation Act of 1998. The GCN Section 508 Resource Center contains a variety of links for information on government policy, legal information, and software applications.

For web developers using Microsoft, Macromedia, and/or Adobe products, these companies have Web site's containing kits or information about how to use their products to develop accessible pages.

Microsoft Accessibility

Macromedia Accessibility

Access Adobe

Web developers may also find useful information on the IBM Accessibility Center and Apple's "People with Special Needs" pages.

The following validation tools are also available to assist web developers in building compliant web pages.

Bobby 3.2

Web Design Group HTML Validator

Guidelines

The following text describes the web specific guidelines Section 508 places on web sites, as per The U.S. Access Board's Web-based Intranet and Internet Information and Applications (1194.22). In some cases, further clarification will be added beneath the actual Guideline.

Please note, the tips provided below are not necessarily the only ways of providing compliance with Section 508.

Any additional questions that LSU Web site developers have can be directed to the Office of Communications & University Relations at urelat1@lsu.edu.

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

Text equivalents are words that represent the purpose of a non-text element. Non-text elements are images, graphics, audio clips, or other features that convey meaning through a picture or sound. Examples include, but are not limited to, buttons, check boxes, pictures, and embedded or streaming audio or video.

When an image is used to represent page content, the image must have a text description accompanying it that explains the meaning of the image.

<img src="/images/logo.gif" alt="LSU Logo" />

Images that indicate navigational actions must be accompanied by text that states the purpose of the image.

<a href="home.html">
<img src="/images/home.gif" alt="Return to Homepage" />
</a>

Non-text elements that do not provide information for either comprehension or navigation should not have text equivalents. However, the alt attribute must still be included and should be left empty, this enables screen readers to treat the image as if it did not exist.

<img src="/images/spacer.gif" alt="" />

It is important to note that audio is a non-text element, so a text equivalent of any audio presentation must be provided.

There are several ways of providing textual information so that it can be recognized by assistive technology devices. The most common way is to include the text in an alt attribute of the non-text element.

Not every element allows the inclusion of the alt attribute. For instance, the applet tag for Java applets will accept an alt attribute, but it only works for browsers that support Java. A better alternative for providing a textual description in this situation is to include the alternative text between the opening and closing applet or object tags.

<applet code="applet.class" width="93" height="93">
This applet displays current stock prices for many popular stocks.
</applet>

Another way of providing a textual description is to include it as text in the surrounding context of the element, directly on the page.

This is a photo of Mike the Tiger <br />
<img src="cat.jpg" />

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

When an audio portion of a multimedia production is captioned, as required in provision (a), the captioning must be synchronized with the audio. This allows the user who is hearing impaired to read the captions while watching the video, allowing him/her to associate any relevant body language or imagery with the text.

Because audio files themselves are not multimedia, a simple text equivalent, such as a transcript, is acceptable.

Slide show presentations require text alternatives to be associated with graphics.

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

When colors are used as the sole method for identifying screen elements or controls, persons who are color blind as well as those who are blind or have low vision may find the web page unusable.

This provision does not prohibit the use of color to enhance identification of important features. It does however, require that some other method of identification, such as text labels, be combined with the use of color. This provision addresses not only the problem of using color to indicate emphasized text, but also the use of color to indicate an action.

There are two relatively easy ways of testing a web page to determine if this requirement is being met:

View the page on a black and white monitor.
Print the page on a black and white printer.

Both methods will quickly reveal if the removal of color affects the usability of the page.

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

Style sheets can enable users to define specific viewing preferences to accommodate their disability. It is okay for designers to use style sheets, however when style sheets are used, they should not be set-up to override user-defined style sheets.

In general, the safest and most useful form of style sheets is the "external" style sheet, in which rules are set up in a separate file.

<link rel="stylesheet" type="text/css" href="basic.css" />

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

Image maps are ways of associating different clickable "hot spots" with graphics on a web page. There are two types of images maps:

Server-side image maps contain the information that defines the clickable regions on the server.
Client-side image maps contain the information that defines the clickable regions coded directly within the page.

When a web page uses a server-side image map to present the user with a selection of options, browsers cannot indicate to the user the URL that will be followed when a region of the map is activated. Because of this, redundant text links are necessary to provide access to the pages for anyone not able to see, or accurately click on the map.

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

Client-side images maps allow an author to assign text to each image map "hot spot." This means that someone using a screen reader can easily identify and activate regions of the map. An explanation of how these image maps are constructed will help clarify this issue.

Creating a client-side image map:

Assign a map for the image to use:
The usemap attribute is added to the <img> tag to bind a named map to the image.
The <map> tag defines a collection of clickable areas. The <map> tag is a container tag that includes various <area> tags that are used to identify a set of coordinates that define hot spots for your map.
Use <area> tags to identify map regions. The <area> tags will contain a set of coordinates that define hot spots for your map. A value of "rect" is assigned to the shape attribute when defining an area within four coordinates. A value of "poly" is assigned to the shape attribute when defining an area within more than four coordinates. The alt attribute will be used in the <area> tag to provide a text equivalent.
<img src="example.gif" use map="#example_map" />

<map name="example_map">
<area shape="rect" coords="0,2,64,19" href="about.htm" alt="About US" />
<area shape="poly" coords="64,2,166,20,15" href="jobs.htm" alt="Job Ops" />
</map>

(g) Row and column headers shall be identified for data tables

This provision requires that row and/or column headings in tables that display tabular data be defined as being headers. The provision is met using <th> tags for those cells.

<table>
    <tr>
        <th>Name</th>
        <th>Number</th>
        <th>Position</th>
    </tr>
    <tr>
        <td>Jim</td>
        <td>25</td>
        <td>Guard</td>
    </tr>
    <tr>
        <td>Tom</td>
        <td>15</td>
        <td>Forward</td>
    </tr>
</table>

Name Number Position

Jim 25 Guard

Tom 15 Forward

Name	Number	Position
Jim	25	Guard
Tom	15	Forward

(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

Large tables of data can be difficult to interpret if a person is using a non-visual means of accessing information. Users of screen readers can easily get "lost" inside a table because it may be impossible to associate a particular cell that a screen reader is reading with the corresponding column headings and row names.

Two ways of associating data cells with the appropriate headers are:

Assign scope attributes to define rows or columns
Assign id attributes to the <th> tags and associate the data cells with their headers by using the headers attribute.

Examples:

Using scope Attributes
Add the scope attribute to any relevant cell and set the value to col or row.

<table>
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Number</th>
        <th scope="col">Position</th>
    </tr>
    <tr>
        <td scope="row">Jim</td>
        <td scope="row">8</td>
        <td scope="row">Guard</td>
    </tr>
    <tr>
        <td scope="row">Bob</td>
        <td scope="row">15</td>
        <td scope="row">Forward</td>
    </tr>
</table>

Using id and header Attributes
This method may be necessary when formatting large tables with many logical levels of headings.

Two steps are involved:

Each heading in the table is assigned a unique id.

Each cell is associated with an id by applying the headers attribute and assigning it the id value of the proper heading.

Please note, when using style sheets, the id attribute may also be used to apply formatting to web pages. It is essential that the value of id attributes always be unique. For example, do not use id="name" as an id value in both a table and a style sheet being used by the same web document.

<table>
    <tr>
        <th id="name">Name</th>
        <th id="number">Number</th>
        <th id="position">Position</th>
    </tr>
    <tr>
        <td headers="name">Jim</td>
        <td headers="number">8</td>
        <td headers="position">Guard</td>
    </tr>
    <tr>
        <td headers="name">Bob</td>
        <td headers="number">15</td>
        <td headers="position">Forward</td>
    </tr>
</table>

Name Number Position

Jim 8 Guard

Bob 15 Forward

Name	Number	Position
Jim	8	Guard
Bob	15	Forward

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

Frames provide a means of visually dividing the computer screen into distinct areas that can be separately written. Frames can also present difficulties for users with disabilities when those frames are not easily identifiable to assistive technology.

The most obvious way to help identify each page within frames is to include text within the body of each page that clearly identifies the individual frame. An additional measure is to include meaningful text in the title attribute of the <frame> tag.

Understanding the use of the title attribute of the <frame> tag requires a basic understanding of how a frameset is constructed. When frames are used in a web page, the first page that is loaded must include a <frameset> tag that encloses the basic layout of the frames page. Within the <frameset> tag, <frame> tags specify the name, initial content, and appearance of each separate frame.

<frameset cols="30%,60%">
<frame src="navlinks.htm" name="navlinks" title="Navigational Links Frame">
<frame src="geninfo.htm" name="content" title="Content Frame">
</frameset>

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

Some individuals with photo-sensitive epilepsy can seizures triggered by displays that flicker, flash, or blink, particularly if the flash has a high intensity and is within certain frequency ranges. The 2Hz limit was chosen to be consistent with proposed revisions to the ADA Accessibility Guidelines which, in turn, are being harmonized with the International Code Council (ICC)/ANSI A117 Standard, "Accessible and Usable Buildings and Facilities," ICC/ANSI A117.1-1998 which references the 2Hz limit.

(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with 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.

If you are unable to make a page comply with the provisions of Section 508, you are required to create a separate, compliant page that provides the same information, in its entirety. This text-only page must be updated when it's non-compliant counterpart is modified.

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

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

If an applet or plug-in is required to access information on a page, a link must be provided to the required software's download page, so that user's my easily obtain the required software if needed. For example, if information on a web page is contained in a Flash file, then a link to Macromedia's Flash Player download service must be provided on the same web page the Flash file appears on. The link to the download page must also comply with the guidelines (a) through (l) of Section 508 Guidelines.

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

Forms include several types of components such as buttons, edit boxes, pop-up lists and radio buttons. Currently, some screen readers have difficulty entering and manipulating form components. Much of this functionality is being added to browsers, for example, you can now use the keyboard to tab between all objects on a screen in Microsoft Internet Explorer and Netscape's Communicator. However, there are still some screen reader and browser combinations that have problems.

For those browsers and/or screen readers that can not identify empty edit boxes, use place-holding characters such as a space, short description or a textual cue.

<input type=text name="keywords" value=" " size=40>

It is often a good idea to also provide a form which can be downloaded then mailed or e-mailed or a phone number someone can call for assistance.

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

Common navigation frequently used at the top or side (i.e., navigation that precedes the body of content on any given page) should be preceded with a "skip navigation" link. This gives visually impaired users browsing with the aid of a screen reader the opportunity to skip redundant navigation The "skip navigation" link is simply a page anchor that links the user to the beginning of content.

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

If a response is required from a user within a particular amount of time. The user must be told that they are required to respond within that amount of time. The user must also be given a method and a sufficient amount of time to indicate that more time is needed.

If you have questions or comments, please contact the Office of Communications & University Relations at urelat1@lsu.edu.