web Accessibility

508 at a Glance

This 508 at a Glance provides a quick overview of the CSU best practices for accessibility requirments and issues. For more detailed information, consult the 508 In Depth Section.

Meeting these best practices will aid assistive technologies in the presentation of Web site content for disabled users.

To ensure that your web site meets these accessibility requirements, you must always perform a manual review using the CSU Cal Poly Section 508 Manual Website Evaluation Guide found in the Tools section of the Accessibility Compliance Guide.

Syntax validation

Contemporary, maintainable, accessible web design is based on complete separation of content (HTML/XHTML) from presentation (CSS) with both conforming to W3C standards; valid code contributes to accurate presentation by both standard browsers and assistive technologies.

Page titles must be unique for every page because they are the first item read by a screen reader. They are also useful for bookmarking and used by search engines to identify results, helping users easily get to the appropriate web page.

Semantic validation

Page elements that function as links (including text, images, and buttons) should be recognizable and usable by sighted viewers and assistive technology. Broken links and empty links that don’t go anywhere are confusing to all users.  All visitors are helped by logically-organized page content that uses section headings and sub-headings in their proper order; visitors using assistive technology can use the headings for easy navigation between sections of the page.

Opening a new browser window can be confusing to users because it will “break” the browser back button. Best practice is to not open new windows. If opening a new window is absolutely necessary, then Include link text that notifies the user that a new window is being opened.

Alternate Text - Checkpoint (a)

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

Screen readers cannot interpret non-text elements, which are most often images, so you must provide text alternatives by using the alt attribute.

Internet Explorer for Windows displays alt text as a tool tip that appears when you hover over the element, even when the element itself is also displayed. However, don't rely on this feature, as most other browsers don't display a tool tip for alt text. If you need a tool tip (or equivalent) to appear, use the title attribute in addition to the alt text (see 508 Indepth for more information on using the alt text and title attributes).

Purely decorative images (images that add no material value to those using assistive technology) should be coded as alt="" (alt equals double-quote double-quote with no spaces).

Multimedia elements should have text alternatives synchronized with its content, as specified in the More Information part on Captioning.

Multimedia Equivalents - Checkpoint (b)

"Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation."

Captioning allows deaf people to comprehend multimedia with text. You must synchronize captions for media such as video, audio, or animations. Click here for more information on captioning programs.

Color - Checkpoint (c)

"Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or mark-up."

Section 508 guidelines do not discourage color, just the use of color to convey information. The image shown below is a bad example of the use of color.

A bad example of a form using color to convey information.

Styles (CSS Style Sheets) and Headings - Checkpoint (d)

"Documents shall be organized so they are readable without requiring an associated style sheet."

Section 508 guidelines implicitly support the use of CSS style sheets, so you should use them to help make your web site accessible. You are required, however, to make your web site usable if the style sheet is turned off. This is because some disabled users use their own style sheets to make text larger or to make the web site display high contrast colors. Section 508 also recommends using CSS's absolute positioning instead of tables, but using tables for layout is fine as long as your content makes sense when a screen reader reads it. A web site that uses tables for layout can still be 100% accessible.

Server-Side Image Maps - Checkpoint (e)

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

You should rarely encounter server-side image maps since most image maps are now client-side image maps. When you click on a hot area of a server-side image map, the server decides where to take you. This poses problems for screen readers, since screen readers do not know where the link goes, which means your users won't know as well. Section 508 guidelines recommend you use client-side image maps wherever possible. If you must use server-side image maps, include redundant links for each active region and locate the links next to or below the image map. The alt text is used to alert the user that alternate links are available for the server-side image maps.

Client-Side Image Maps - Checkpoint (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 rather than server-side image maps should be used unless there are limitations in creating hot spots in client-side image maps tools/software."

Client-side image maps have clickable hot spots that act as links. Clicking on a different area of the image takes you to a different place. You should label each of your hot spots with alt text to tell the screen reader where each hot spot takes the user.

Simple Tables - Checkpoint (g)

"Row and column headers shall be identified for data tables."

If you still choose to use data tables, you should always have the tables' headings defined. This lets the screen reader know what it is reading in each table. Tables used only for layout should NEVER have row and column headers.

Complex Tables - Checkpoint (h)

"Mark-up 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."

Complicated data tables sometimes have more than one column or row header associated with each column or row. In this case, you must tell the screen reader which headers correspond to which column or row.

Frames - Checkpoint (i)

"Frames shall be titled with text that facilitates frame identification and navigation."

Cal Poly recommends that the use of frames be avoided. If used, every frame page must be titled correctly, and the title should reflect the frames' contents. For example, the navigation frame should be called "navigation," the content frame should be called "main content," and so on.

Screen Flickering - Checkpoint (j)

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

People who have photosensitive epilepsy are susceptible to seizures if your web site contains flashing elements. Flickering is usually annoying to all users, and you should try to stay away from it all together. If you must have flickering elements, make sure they meet the guidelines.

Provide Text Only Pages as a Last Resort - Checkpoint (k)

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

You should NEVER resort to a text only web site before attempting to make your web site accessible. However, there are some situations where it is not possible to follow all these guidelines, and you must use a text only page.

Scripts - Checkpoint (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."

The most predominant scripting language for the web is JavaScript. You should generally stay away from using scripts (most notably JavaScript) to generate content (especially navigation such as fly-out menus). If you decide to do so, the content generated by the scripting should be accessible with or without Javascript turned on, unless the content is purely decorative. The content must be available to both mouse and keyboard users, as well.

Provide Links to Necessary Plug-Ins - Checkpoint (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 everything from Alternative Text to Scripts covered in this tutorial."

If you need your users to download a plug-in before viewing your content, you must provide a link to the plug-in, and the link itself must comply with Section 508 guidelines. The web site that the plug-in resides in must follow Section 508 guidelines as well.

In addition to linking to the applet or pluggin, any media and e-documents (pdf, word, excel, etc.) must be made accessible. For more information on creating accessible materials see the e-documents section on the Accessibility Web site.

Forms - Checkpoint (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 must be created with accessibility and usability in mind. There are a number of factors that contribute to the accessibility and usability of forms, including layout, labeling and grouping. Refer to building accessible electronic forms - checkpoint (n).

Skip Repetitive Navigation Links - Checkpoint (o)

"A method shall be provided that permits users to skip repetitive navigation links."

If your navigation links are the first things that appear in your code, you will have to provide a skip navigation link. Sighted users can skip links by scanning past them on every web page. A person using a screen reader or keyboard only navigation, however, would have to go through each link manually to get to your main content.

Timed Responses - Checkpoint (p)

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

You should tell your users when their session is about to time out if you employ this method. Disabled users may take longer to go through a web site, so they should have an option to request more time.