SRJC Web Accessibility Design Principles

Details on Section 508 Rules for HTML Sites

Following is a list of accessibility design principles that align closely with Section 508 of the Rehabilitation Act of 1973. Section 508 is being refreshed and the Access Board now recommend that we follow WCAG 2.0 standards at Level AA. The WCAG 2.0 standards and Section 508 rules are summarized on the Web Accessibility Checklist page in a handy checklist format.

While instructors are encouraged to put these principles into practice, the learning management systems that SRJC has provided for instructors to create course materials will take care of most of the rules. The full list of Section 508 rules listed on this page will be most helpful to those who are creating their own HTML sites.

For making accessible content housed in the learning management system Canvas, see the Canvas Accessibility page.


1. Alternative Text (508 a)

For non-text elements such as images, applets or image maps, 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 description of the image can be read by a screen reader.

HTML Example Code:

<img alt="Santa Rosa Junior College"
src="http://online.santarosa.edu/homepage/dept43/html/srjc_logo.gif">

 

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 harmful. In that case, use an empty alt tag. Empty alt tags should also be used for images used for spacing only (spacer gifs).
HTML Example Code of empty alt tag:

<img src="http://online.santarosa.edu/homepage/dept43/html/spacer.gif" 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 diagrams, 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="http://online.santarosa.edu/homepage/dept43/html/pie_chart.jpg" alt="pie chart 
(click for data)" "longdesc="pie_chart_description.html">

 

For applets, the <APPLET> tag can accept an alt attribute, but will work only on browsers that support Java. A better method to provide text descriptions is to include the alternative text between opening and closing <APPLET> or <OBJECT> tags.
HTML Example Code:
<APPLET CODE="my_applet.class" WIDTH="200", HEIGHT="100">
This applet displays current stock prices for many popular stocks.
</APPLET>

 

2. Multi-media presentations (508 b)

Provide equivalent alternatives for multi-media presentations.

  1. Multi-media files with audio need synchronized captioning of the audio portion.
     
  2. Audio only files need not have synchronized captioning but must have a text equivalent such as a transcript.
     
  3. A silent web slide show presentation does not need to have an audio description accompanying it, but does require text alternatives to be associated with the graphics.
     

Verbal descriptions of moving visuals

 

For multi-media presentations that have moving visual information, provide verbal descriptions in both auditory and text form.
 

  1. For short animations such as animated "gifs" images, provide alt-text and a long description if needed. For movies, provide auditory descriptions that are synchronized with the original audio.
     
  2. Provide a text version of the auditory description (of the movements) and collate it with the text transcript (captions) of the primary audio track.

 

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

 

  1. Don’t use color to convey information unless the information is also clear from the markup and/or text. Never use color only to indicate an action (e.g. click on the green button).
     
  2. 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 pages have to be displayed in black and white, only that the contrast between text, elements and background color is significant enough that it will read well in black and white as well as color.

 

4. Style sheets (508 d)

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.

Example of HTML code placed in the head:

<link href="http://online.santarosa.edu/homepage/dept43/html/my_styles.css" rel="stylesheet" type="text/css" />

 

5. Image maps (508 e and f)

 

  1. 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. HTML Example of server-side image map:
    <a href="http://online.santarosa.edu/homepage/dept43/html/navigation.map">
    <img src="http://online.santarosa.edu/homepage/dept43/html/navbar.gif" border="0" ismap="ismap" alt="Site Navigation Bar">
    </a>
    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 maps 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. HTML Example of client-side image map:
    <map name="navigation" id="navigation">
      <area shape="rect" coords="1,1,44,132" href="http://online.santarosa.edu/homepage/dept43/html/index.html" alt="Home" />
      <area shape="rect" coords="49,-3,156,128" href="http://online.santarosa.edu/homepage/dept43/html/instructor.html" alt="Instructor" />
      <area shape="rect" coords="160,4,289,128" href="http://online.santarosa.edu/homepage/dept43/html/lectures.html" alt="Lectures" />
    </map>
  2. 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)

This rule does not apply to tables used for layout only.

 

  1. 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.
     
  2. 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)

 

  1. Provide sufficient information to determine the purpose of the frames and how they relate to each other. Place text at the beginning of the contents of each frame. For example, a frame with navigational links can be identified by placing the text "Navigational Links" at the beginning of the content. Another way is to use the title attribute within the frame tags.
    HTML Example Code: 
    <frameset cols="30%, 60%">
    <frame src="http://online.santarosa.edu/homepage/dept43/html/navlinks.html" name="navlinks" title="Navigational Links Frame">
    <frame src="http://online.santarosa.edu/homepage/dept43/html/geninfo.html" name="contents_page" title="Contents Frame">
    </frame>
  2. Ensure that the source of each frame is an HTML file.

 

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.

 

  1. 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.
     
  2. 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).
     
  3. 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 rage of 2 to 55 cycles per second.

 

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 a 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)

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. [§1194.21(a)-(l)]

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)

When electronic forms are designed to be completed online, 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.

  1. 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.
       
  2. 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.
     
  3. 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)

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)

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.