Building Web Sites that Comply with Section 508
Key Points:
- Section 508 defines 16 accessibility requirements to
which Web sites must comply.
- Many Web Designers confuse Section 508 requirements
with the much broader and stricter W3C accessibility requirements.
- Section 508 is a simpler set of accessibility requirements
that do not require radical changes to the structure of your Web pages.
- Section 508 may require Web sites to significantly
change their use of Flash and Dynamic HTML.
Federal regulations require government
Web sites to be accessible to people with disabilities. However, defining
exactly what this means has been a point of confusion in the past.
Previous government regulations have directed
Web sites to be accessible, without specifying exactly what steps are
necessary to accomplish this. Section 508 represents the first time the
government has explicitly defined what it means to be accessible. As a
result, many experts believe that Section 508 will become the standard
for Web accessibility in both the government and commercial sectors.
However, Section 508 is not the only Web
accessibility standard in existence. In particular, many Web Designers
confuse Section 508 requirements with the World Wide Web Consortium's
(W3C) older Web Accessibility Initiative (WAI) guidelines.
While eleven of the sixteen Section 508
requirements are based on WAI guidelines, Section 508 represents a lighter,
simpler approach to Web Accessibility. Full implementation of the WAI
guidelines requires Web sites to undergo radical surgery. For example,
the WAI guidelines call for Web Designers to abandon the use of tables
to control layout, and to separate the structure and content of their
page through the extensive use of Cascading Style Sheets. Full compliance
with all Priority 1-3 WAI guidelines would require many Web sites to be
rebuilt from the ground up.
Note that many Web accessibility testing
tools are not focused specifically on Section 508. As a result they may
point users toward implementing WAI guidelines that aren't required for
Section 508 compliance.
Section 508 requirements allow accessibility
support to be added to a Web page without changing the underlying layout
of a Web page. However, Section 508 requires all technologies used on
a Web page to be fully accessible. This may cause problems for sites that
use Flash or Dynamic HTML (see paragraphs B, D and L below for details).
The following paragraphs list each Section 508 requirement
and explain what it means for Web Designers.
(a)Text Equivalents
A text equivalent for every non-text element shall be
provided. |
Many visually impaired people use screen
readers such as JAWS that speak the text found on your Web page. If critical
information on your page is presented inside graphics, multimedia objects,
applets, or plug-ins, screen readers may not be able to speak the information.
This requirement calls on Web Designers
to include text alternatives for each such object found on their page.
For example, all images are expected to have an ALT attribute that describes
the image, and scripts that create page content are expected to have NOSCRIPT
alternatives.
(b)Multimedia Alternatives
Equivalent alternatives for any multimedia presentation
shall be synchronized with the presentation. |
To support disabled users, Web Designers
should ideally use multimedia formats that support synchronized captioning.
Currently only QuickTime, SMIL, and SAMI support this. Flash is notable
in not supporting synchronized captions.
Under some interpretations of this requirement,
it is sufficient to provide disabled visitors with a text transcript or
other alternative that presents the same information found in the multimedia.
Thus some Flash designers export their presentation as HTML and point
disabled visitors to this.
(c)Color Blindness
Web pages shall be designed so that all information
conveyed with color is also available without color,
for example from context or markup. |
While Web Designers often balk at this
requirement, colorblind visitors represent the largest segment of the
disabled population, with over 7 million Americans being affected. Between
5-7% of Caucasian males are affected by some form of color blindness.
This requirement calls on Web Designers
to view their pages with color removed to make sure that critical information
is not lost. For example, a Web form that states "required fields are
shown in red" would not meet this requirement.
(d)Style Sheet Independence
Documents shall be organized so they are readable without
requiring an associated style sheet. |
Cascading Style Sheets can both help and
hurt accessibility. On the plus side, disabled users can define their
own custom Style Sheets that override the page styles defined by a Web
site. This allows a visually impaired user to set page fonts to be larger,
and change text and background colors to provide higher contrast.
On the negative side, Style Sheets are
sometimes used to affect the content displayed on a page. They can be
used to hide, show, or position page content. This is true with Dynamic
HTML scripts that create scrolling text or drop-down navigation menus.
This use of Style Sheets presents a problem
for the disabled, because many disabled visitors use older, special purpose
browsers that do not understand Style Sheets. If one of these users visits
a site using DHTML drop-down menus, they may not be able to navigate its
pages.
Of course, the disabled user could simply
upgrade to a newer browser. But special purpose browsers and assistive
technologies are expensive (JAWS costs $600), and many of the disabled
live on a limited income.
(e)Server-side Image Maps
Redundant text links shall be provided for each active
region of a server-side image map. |
This requirement is unlikely to affect
many Web Designers, since server-side image maps are rarely used today.
In addition, in nearly all cases a client-side image map can accomplish
the same task as a server-side map.
(f)Client-side Image Maps
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 image maps are preferred
over server-side maps, because each hot spot on the image map can have
its own ALT attribute. Thus screen reader will be able to explain each
spot.
(g)Data Table Headers
Row and column headers shall be identified for data tables. |
This requirement applies only to data
tables, not to tables used to control page layout. If a table is used
to show information, such as the average temperature in different cities,
then it must be properly labeled.
Proper labeling allows screen readers
to speak out the row and column labels associated with each table cell.
Lacking this information, screen readers can make a data table sound like
a confusing list of seemingly random numbers. Proper labeling involves
the use of tags including TH, COLGROUP, and CAPTION.
(h)Table Logical Levels
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. |
As with the previous paragraph, this requirement
applies only to data tables. In addition, it affects only data tables
that set ROWSPAN or COLSPAN attributes. Rows or columns that span multiple
cells can confuse screen readers if they are not properly labeled.
(i)Accessible Frames
Frames shall be titled with text that facilitates frame
identification and navigation. |
Pages that use frames must assign a title
to each frame. This allows a screen reader to announce the purpose of
each frame. For example, JAWS might announce one frame as the "navigation
frame" and another as the "content frame." This helps orient visually
impaired users.
(j)Screen Flicker
Pages shall be designed to avoid causing the screen to
flicker with a frequency greater than 2 Hz and lower than
55 Hz. |
This requirement poses a formidable challenge
for most Web Designers. Since flickering images can cause epileptic seizures,
this type of image should be avoided at all costs. However, most Web Designers
aren't able to determine if their GIFs cycle at a frequency within the
danger range. As a result, this requirement has moved some government
agencies to place a blanket ban on all animated graphics.
(k)Text-only Alternate Pages
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. This measure is a last resort
to be used only if a page cannot be made accessible in any other means.
Text-only pages increase the Webmaster's maintenance load, and may be
forgotten when the main Web pages are updated.
(l)Accessible Script Content
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. |
This two-part requirement affects both
visually impaired users and users with motor skill impairments. The first
part of the requirement calls for all scripts that display content to
have NOSCRIPT alternatives.
The second part requires that scripts
be device-independent. That is to say, a script must be operable with
either mouse or keyboard.
This requirement may affect Dynamic HTML scripts that
create scrolling text or drop-down menus.
(m)Accessible Applets
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 applets or plug-ins are used on a Web
page, they must be accessible. This means that users should be able to
operate the applet using either keyboard or mouse, the applet's content
must be readable by screen readers, and ideally the user should be able
to control the applet's colors and text size.
(n)Accessible Forms
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. |
Form accessibility is an especially challenging
area. While the latest versions of HTML provide tags such as LABEL, OPTGROUP,
and LEGEND that are designed to help assistive technologies interpret
forms, today's browsers and screen readers do not yet support these tags.
As a result, Web Designers need to take
special care when positioning text next to form fields. Badly positioned
text can lead to a form field being mislabeled by tools like JAWS.
(o)Navigation Shortcuts
A method shall be provided that permits users to skip
repetitive navigation links. |
Sighted users experience Web pages in
two dimensions, which allows their eyes to move directly to the page's
content. Assistive technologies such as JAWS present Web pages in one
dimension (that is to say, they linearize the page). If JAWS encounters
a navigation bar with 20 links, disabled users must read through every
one of these links before being able to access the next part of the page.
Even if they use the tab or arrow keys to move from link to link, this
is a tedious process.
As a result, this requirement encourages
Web Designers to give disabled visitors the option to skip parts of the
page that consist only of navigation. This is typically accomplished by
using bookmark anchors. Many accessible pages include a hidden GIF at
the page top that gives disabled visitors a bookmark link straight to
the page's content.
(p)Timed Response
When a timed response is required, the user shall be alerted
and given sufficient time to indicate more time is required. |
While assistive technologies allow people
with disabilities to read Web pages, the speed of the disabled user's
interaction with the page is often slower than that of people without
disabilities. If the page contains a form requiring a timed response,
this can create problems.
This requirement deals specifically with
JavaScript or other technology that may cause a page timeout. Some Webmasters
have also interpreted this requirement as barring meta-refresh tags.
Further Reading:
|