Skip to Main Content

SECTION 508 EXPLAINED

AccessibleTech Logo

Emmanuel Coutoulakis

Sr. Accessibility Analyst

AccessibleTech, Inc.


Table of Contents

  1. Introduction
  2. The Provisions
    1. Text Alternatives
    2. Multimedia Presentations
    3. Use of Color
    4. Readability
    5. Server-Side Image Maps
    6. Client-Side Image Maps
    7. Data Table Headers
    8. Data Tables – Header Cell and Data Cell Association
    9. Frames
    10. Flicker
    11. Text-Only Alternative
    12. Scripts
    13. Applets and Plug Ins
    14. Electronic Forms
    15. Headings
    16. Navigation
    17. Time Delays

I. Introduction

The primary goal of Accessibility is to make certain that Information Systems can be used by people with disabilities.  A properly implemented system will provide access to information to people that use assistive technologies and it will increase usability for everybody. This is due to the fact that most accessible rules one way or another make the system friendlier for use by all.

Accessibility techniques ensure equal access to information for disable and non disable users.  Content and functionality can become fully accessible to people with one or more disabilities including visual, audio, kinetic, speech, and cognitive impairments. 

To address these needs the accessibility guidelines are organized around four principles:

  1. Content must be perceivable.
  2. Interface elements in the content must be operable.
  3. Content and controls must be understandable.
  4. Content must be robust enough to work with current and future technologies.

The principles above are purposely not specific to any guideline in order to include all needs. These constitute the general idea of what accessibility should cover. In general terms, accessibility is a subjective topic while compliance on the other hand is an objective one that abides with specific guidelines.  There are guidelines that provide specific directives on what an information system should contain to be compliant. 

The Rehabilitation Act, section 508 contains specific provisions that do address specific needs and has become law in the US.  Although section 508 does not cover all needs it is a functioning methodology that is considered a significant progress in accessibility and there are continuous improvement efforts.

back to top


II. The Provisions

The following topics are addressed on the provisions of the section 508

(1) Text Tags
Provide text equivalent means for non-text elements.
(2) Multimedia Presentations
Offer synchronized alternatives for multimedia presentations.
(3) Color
Refrain from information conveyed with color alone.
(4) Readability
Make documents readable without cascade style sheets.
(5) Serve-Side Image Maps 
Provide text links for every active area on a server-side image map (if the server side map is a must).
(6) Client-Side Image Maps
Use client side image maps instead of server side image maps.
(7) & (8) Data Table
Provide headers on data tables and associate headers and cells.        
(9) Frames
Give frame titles that make possible identification and navigation to assistive technology users.
(10) Flicker Rate   
Stay away from flicker with frequency above 2Hz.
(11) Text-Only Alternative
Provide text-only alternative - if everything fails.
(12) Scripts  
Write Accessible Scripts that the information they provide can be identified by assistive technologies.
(13) Applets and Plug-Ins
Specify Accessible Applets and Plug-ins; provide a link to make it available to the client system.
(14) Electronic Forms
Design Accessible Forms including directions and clues.
(15) Headings
Use Heading tags to facilitate page navigation for assistive technologies.
(16) Navigation Links
Offer Skip Navigation to avoid repetitive links.
(17) Time Delays
Alert the Users for timed responses and give the option to get extra time.

back to top


1. Text Alternatives

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

Non text elements are often used to communicate messages. The alt attribute provides textual information on images, graphical representations of text (including symbols) may communicate information for the displayed object.  Textual information may be used on maps, animations, applets and programmatic objects, ascii art, frames, scripts, images used as list bullets, spacers, graphical buttons etc.

The “longdesc” attribute is another textual presentation technique that is offered for more complex structures that need a longer explanation such as graphs.   

The alt attribute should not be misused for lengthy descriptions. It should be short and precise and communicate the information as intended by the author without over-explanations. 

The empty alt “” attribute is used when there are transparent spacers or other no information objects.

back to top


2. Multimedia Presentations

When picture and sound are used in any system equivalent alternatives are required. 

Multimedia presentations involve audio and video and require the audio portion to be closed captioned.  The closed captioned subtitles need to be synchronized with the video in real time.   Multimedia files when played need to include easy to use control buttons for keyboard manipulation, including a mute option.  The latest may be necessary for screen readers that read the captioning.  In this case the original audio may conflict with the narration of the close caption.

Equivalent alternatives on multimedia imply that closed captioning and audio description of visual information needed for the presentation to be considered compliant.

back to top


3. Use of Color

Information should not be conveyed with color alone.  Information that is conveyed with color should also be available without color.  This provision not only affects people that are blind and color blind but is also a poor usability practice. Poor color usage affects all visitors in several ways such as perception of the message that the color conveys, readability on the screen by people with color deficiencies, and on black and white printouts.

A directive that relies on color may not be perceived by all users.  For example, a form that instructs the user that labels on red font are mandatory will not be seen by people that are blind, color blind, or use special display methodologies that alter the font (CSS). In addition, it is a good usability practice to launch this directive with a feature that is perceived by all.  An asterisk may resolve this problem, since the screen readers will read it and people with all vision abilities will view it and make the association that the field is mandatory.

Color contrast between background and foreground affects the readability of the content.  An acceptable contrast between the font and the background it lays on is about 400 RGB difference.  This refers to colored font, colored background or both.  The furthest contrast is between black and white. The contrast may look adequate in bright colors but in reality this may not be the case; bright green or bright red for example, will not be readable in a black and white printout, and people with color blindness will not be able to read it.  Dark and light contrast shall be used on all occasions.

back to top


4. Readability

The readability of content relies on fonts and how they are used to present text.  Size, color, type, and spacing of the font affect the readability of a script. Style sheets are often used to adjust these properties.

Style sheets are often recommended for use in accessibility. Style Sheets are considered to have less accessibility barriers.  However, the provision about readability indicates to stay independent of style sheets. 

To clarify this discrepancy first we need to take into account the users.  Frequently, people with severe visual impairment use their own style sheets to adjust on their screen and become readable.  To do that they need to overwrite the existing style sheets but content that is heavily altered with style sheets may become unreadable.  Therefore, the readability provision of section 508 calls for a style sheet independent authoring to the degree that the content becomes unreadable.

A good way to test and understand this guideline is to disable the style sheets and see the result. 

back to top


5. Server-Side Image Maps

Server-side images maps are not friendly to assistive technologies and constitute a problem with accessibility.  On the other hand Client-side image maps can easily be accessible so they are preferred heavily.

The server-side image maps do not take text but instead use coordinates of the active region to send information to the server.  This makes it inaccessible since no meaningful information is read by the screen readers.

If a server side image map cannot be avoided there is a way to make it accessible.  This solution will require redundant links displayed with readable text.  This is not a desired solution because any redundant element will require redundant work to be updated and quite often in real life, redundant items are not updated at all.  

back to top


6. Client-Side Image Maps

Client-side image maps are accessible taken that they contain they corresponding alternative text (alt tag) that provides the link’s information.

Unlike server-side maps, client-side maps do take textual information thus they provide the opportunity to the assistive technologies to read the assigned information loud.  This is making the active region accessible since it becomes an understandable link, provided of course that meaningful text has been assigned to the link.

back to top


7. Data Table Headers

Data tables present a hurdle for people with visual disabilities. Assistive technologies read in linear mode thus there is not any direct association of the cell with the header.  People with full vision can quickly browse a table and associate the header horizontal or vertical with the cell of interest.

To make tables available to screen readers programmatically the headers and the cells have to be marked appropriately.  Table headers, horizontal and vertical, should be marked with the <th> tag and table cells with the <td> tag.  The <th> tag makes the font bold and it will put it on the center of the cell; this is the reason why we see it often where it does not belong, namely on data cells.  A <th> tag will make quick adjustments for visual presentation but it will not work with assistive technologies.  On the other hand because of its visual properties (bold, center) it may not be used at all by programmers.   

As a correct practice, the table headers should be used where they belong and not randomly for their visual properties.

back to top


8. Data Tables – Header Cell and Data Cell Association

When information is presented in a table format appropriate table tags shall be used.  Preformatted tags <pre> create accessibility barriers. Appropriate markup language includes the table header and table cell tags and these cells are to be associated. 

There are two ways to associate header and data cells.

  1. Implicit Association
  2. Explicit Association

The implicit solution uses the scope attribute to indicate row or column properties. On the top header column cell the   scope=“col” is used.

Similarly, on the first heading row cell of each table the scope=“row” attribute is added. 

The explicit solution requires more work but is considered more reliable for complex tables and works well with assistive technologies. Header cells are marked with the id attribute and data cells are marked with the header attribute. The header id attribute is assigned a code name (id=“code_name_here”) and the corresponding cells is marked with the same code name (header=“code_name_here”).  The next header cell will be marked in a similar manner but with another code name (id=“another_code_name_here”) that will associate it with their data cells (header=“another_code_name_here”) and the same technique will continue to mark the entire table. 

All header cells are assigned a code name that will associate them with the corresponding data cells so people that access the table with non-visual means will have full access to the data.    

back to top


9. Frames

Frames are distinct areas that divide the page to segments.  Although frames are not widely used when they are present they present an accessibility problem.  Users of assistive technologies may become lost if the frames are not identified.

The title attribute may serve the identification purpose and provide some clarification between the navigational and fixed portions of the screen.

back to top


10. Flicker

Flicker may cause seizure to people suffering from photosensitive epilepsy.  Flicker, flash, or blink especially in high frequencies may cause seizures. The International Code Council (ICC) has identified the frequency limit of 2Hz.  

Portions of the page that used to attract attention may be hazardous. Advertisements, fast moving objects, blinking of images are commonly seen items that fall into this category. Motion and blinking above 2Hz present a problem. 

Marquees and moving text are usually on borderline (about 1.5 Hz) however they fall out of favor among users and may present a problem with epileptic individuals.

back to top


11. Text-Only Alternative

If everything else fails to make a page accessible, then a text only alternative may be used as a last resort.   This is not really an option but rather a desperate way out.  It creates additional work and is very difficult to maintain the text only page.  Frequently when a page is update the text only page remains neglected.

The text only page should be equivalent in content and functionality as the main page.  In addition, the text only page should be defined and easily accessed from the main page.

back to top


12. Scripts

When scripting languages are used the display or function that the scripting provides should be read by assistive technologies and the function should also be activated with the keyboard.

A script with meaningful text on it will indicate the purpose of the script.  In addition, many scripts provide mouse only functionality. The same function should be enabled with the keyboard. 

A good example involves the dropdown menus with the “onchange” function.  Using the mouse you can make the selection easily by point and click but to activate the same function with the keyboard you need to use the up and down arrows. Let’s assume now you need to select the third line option on the dropdown menu. The mouse may jump directly to the third line option and select it but the keyboard using the arrows will start from the first, then second, and then the third.  The problem here is that the function is activated when a selection is made so when the keyboard is still on the first option the “onchange” function will be activated.  Although your intention is to activate the third option you can do that only using the mouse and not the keyboard.   Thus a different keyboard friendly script should be used that the function may be activated using the enter key.  

If JavaScript is used to write functions, a good way to check for accessibility is to disable JavaScript and test the page.  The functionality from the users’ perspective should not change by disabling the scripts.

back to top


13. Applets and Plug Ins 

Web pages have content, such as multimedia or specific displays like PDF, that a special technology is required to interpret it.  When a web author requires a specific applet this applet has to be accessible by assistive technologies. This includes both public and proprietary plug in technologies, and they need to satisfy the accessibility standards.

In addition to accessible applet and plug ins, a concise and explanatory link has to be provided so the user will be able to download it.  

Plug ins can be detected by the <applet> or <object> tags.

back to top


14. Electronic Forms

Web forms present a challenge to people with disabilities.  The forms can be filled accurately, speedy, and correctly if they are properly coded and the cues are provided.      

Electronic forms are consisted of two elements: a) the label and b) the input box.  The label indicates what information should be entered on the input box and the input box receives the entry; for example a label will indicate “Last Name” and then the user will type his last name on the corresponding input box.  A person with full visibility will have no problem locating these two related items but this is not necessarily the case with assistive technologies.  To resolve the issue the label needs to be “tied” with the input box.

To associate the two elements the label will take the “Label For” attribute and the input box the “id” attribute.  Specifically, in the code example below the label that indicates the Last Name will be:

<LABEL FOR=”lname”>Last Name:</LABEL>

and the input box will be:

<input type="text" id="lname" name="txtUserLastName"

size="50" maxlength="50">

In the image below, there are the examples of the first name, the last name, and the submit button.  The input boxes will take the Label For attribute to establish their relationship with the corresponding input box respectively.  The submit button will require above the “alt” attribute to make the entry accessible.

Web form example

The solution discussed above is the explicit label approach.  The implicit label approach has also been used on occasions however it was proven unreliable therefore it will not be presented in this discussion since its use is not recommended.

back to top


15. Headings

The navigation of a document relies heavily on the headings.  Many assistive technologies display the headings in order to help the user to reach a special section without having to go through the preceding content. 

Keyboard navigation is a linear process and the only way to speed up reading is to skip content that the user does not need at that time. Therefore, proper headings provide not only a proper way to display text but a navigating and orientation tool as well. 

The HTML headings are read by screen readers to separate heading from text and interpret the hierarchical structure of the document.  Appropriate markup will make a document readable in correct order by a screen reader.  The H tags <H1> through <H6> are universally used to make available this feature. However, the H tags in most cases are used out of order because of their visual properties.  It is commonly seen in web site to use the heading tags randomly and solely for visual presentation.  An H1 tag may not produce the desired font thus they are used out of order disturbing the hierarchical structure of the document.   A way to address this issue is to use Cascade Style Sheets (CSS) to produce the desired visual effects and still create a compliant document that will render properly with screen readers.

In addition, when a search engine is indexing a website the heading tags are given precedence and allow proper classification of the page, and in this matter the site, based on headings.  Headings are to be used as a page process tool and not a mere visual presentation shortcut.

back to top


16. Navigation

Proper headings will improve navigation and provide meaningful divisions in the page.  User friendly and accessible navigation however is not limited to headings.  The linear approach that many assistive devices use may be time consuming as well as frustrating. 

To avoid unnecessary navigation, section 508 of the Rehabilitation Act introduced the skip navigation feature.  Specifically, this provision is calling for a method that permits the user to skip repetitive navigation links.  Compliant pages utilize a link that will land the user to the content area.  This link is keyboard activated and it may or may not be visible. 

A visible link may contain informative text or the link may be invisible. An invisible link is still read by assistive technologies and is keyboard activated.  Additionally, the link may contain the same foreground and background color, or a small image that blends with the background.   The display preferences will not affect the announcement of the screen reader.

back to top


17. Time Delays

People with disabilities may require more time to interact with a screen than the average user.  Systems that require timed responses, such as filling a web form, should warn the user that time is about to expire and provide means to extend the allocated time.       

A form that is timed out will clear all entered data frustrating the user.  A pop up message with the option to extend the time is an easy and very efficient way to address the issue.

back to top

back to AccessibleTech Home