Section 508 requires that State and Federal agencies' electronic and information technology is accessible to people with disabilities.
ADA 508 News
Section 508 of the Rehabilitation Act:
Electronic and Information Technology Accessibility Standards.
This is the entire Section 508 of the ADA! Here at WebDev, we are mostly concerned with the Technical Standards (Subpart B), Web-based Intranet and Internet Information and Applications (1194.22)
The Access Board developed accessibility standards for the various technologies covered by the law. Section 508 of the Rehabilitation Act requires access to electronic and information technology procured by Federal and State agencies.
Summary of Section 508 Standards
A summery of the main section of 508 standards from www.Section508.com
Web-based Intranet and Internet Information and Applications (1194.22)
The criteria for web-based technology and information are based on access guidelines developed by the Web Accessibility Initiative of the World Wide Web Consortium. Many of these provisions ensure access for people with vision impairments who rely on various assistive products to access computer-based information, such as screen readers, which translate what's on a computer screen into automated audible output, and refreshable Braille displays. Certain conventions, such as verbal tags or identification of graphics and format devices, like frames, are necessary so that these devices can "read" them for the user in a sensible way. The standards do not prohibit the use of web site graphics or animation. Instead, the standards aim to ensure that such information is also available in an accessible format. Generally, this means use of text labels or descriptors for graphics and certain format elements. (HTML code already provides an "Alt Text" tag for graphics which can serve as a verbal descriptor for graphics). This section also addresses the usability of multimedia presentations, image maps, style sheets, scripting languages, applets and plug-ins, and electronic forms.
Access Board's Guidance
This is The Access Board's Guide to Web-based Intranet and Internet Information and Applications (1194.22). This a more useable, understandable version of the standards with explanations and examples.
WebAIM's Introduction to Web Accessibility
WebAIM (an acronym for Web Accessibility in Mind), exists to advocate and support efforts toward achieving Web Accessibility. Here you'll find good starting point and introduction to Accessibility.
Section508.Gov
Using this web site, users can access resources for understanding and implementing the requirements of Section 508.
Web Content Accessibility Guidelines 1.0
Official W3C Recommendations and Guidelines for website accessibility
A web site will be in compliance with the 508 standards if it meets paragraphs (a) through (p) of Section 1194.22. The tips and techniques for compliance that are discussed on this site are not necessarily the only ways of providing compliance with section 508. As technology evolves, more techniques may become available or even preferable.
What is a non-text element?
A non-text element is an image, graphic, audio clip, or other feature that conveys meaning through a picture or sound. Examples include buttons, check boxes, pictures and embedded or streaming audio or video, and images such as the clear.gif that are used as structural elements of the page.
What is a text equivalent?
This means adding words to represent the purpose of a non-text element. The majority of 508 violations are due to missing ALT tags. The text associated with the graphic (or other non-text element) should communicate the same information that's in the graphic. Basically what you're doing is giving a screen reader something to read, so that somebody that can't see the image can hear what message your are coveying in the image. If you have an image of an arrow saying "Next Page," you need to have an text equivalent (ALT="Next Page") so the screen reader can convey that message. Without the ALT tag, the screen reader just says "image, images_name.gif". For images used in structure, such as the clear.gif, the screen reader will say "image, clear.gif" over and over again for as many times as it's in the page. If you add the alt="" (empty ALT tags), the screen reader will ignore it.
HTML Example: <img src="images/logo.gif" alt="ADA 508 Logo">
TIP: Many search engines use the ALT tag in the ranking of your page in the search results. If you use these correct, you will increase the page rank. This increases overall usability for everone.
Place information about spacer images here!
Multimedia includes video, flash animations, webcast and more. You must add captions when you have both audio and video. This provision also requires when the audio is captioned, it must be synchronized with the video. Without this, it would be like watching tv when the sound is not in sync with the audio. Webcast qualify as multimedia and must ba captioned as well
As privided in provision (a). Stand alone audio, considered non-text, must have a text equivalent. This can be a web page, text file, or any other text based form of the audio.
Color's can't be the only way you identify elements or controls on your page. The page may be confusing for people who are color blind, blind, or have low vision.
What this means is that you can't say "Press the green arrow to start, the red arrow to stop." Color blind users can't possibly know which one is which. Also, highlighting text red (or any other color) to indicate emphasis on that word or phase should be avoided. Again, you are blocking access to many users who can't see it. You should alway use bold when emphasizing text.
You can always turn your screen to black and white, or print the page in black and white, to test the page. Also, you may already have pages using color to convey meaning. If so, fix them with the ALT tag, TITLE tag (for links) and bold (STRONG tag) text. If necessary, replace color conveyed messages with alternatives such as using an asterist or footnote.
Many users overide the default style sheet and tell the browser to use one they have created themselves. This allows them to increase the font, size, backgrounds and more. If you set up the page to override these user-defined style sheets, people with disabilities may not be able to use it.
The best way to ensure this is possible is by using an external style sheet:
Example of source code: <link rel=stylesheet type="text/css" href="style.css">
Most images maps are not created on the server, but if they are, you must provide a redundant list of links. This is often in the form of a list of the links that are in the map, placed next to or near the map. Another option is placing them in a separate page with a link to them near the map.
Client-side image maps allow you to assign a text alternative, or ALT tag, to each "hot spot" within that image map. This allows screen reader users to quickly find what they're looking for.
Example:
<img src="florida_county_map.gif" img border="0" alt="Map of Florida showing each county." usemap="#counties" width="520" height="497">
<map name="counties">
<area href="union.htm" shape="polygon" coords="347, 79, 341, 90, 348, 93, 369, 76, 353, 77" alt="Union">
<area href="alachua.htm" shape="polygon" coords="344, 94, 334, 105, 335, 121, 355, 127, 375, 127, 370, 108, 348, 92" alt="Alachua">
<area href="nassau.htm" shape="polygon" coords="370, 66, 377, 46, 373, 32, 407, 31, 408, 42" alt="Nassau">
<area href="duval.htm" shape="polygon" coords="394, 75, 374, 74, 373, 66, 407, 42, 414, 53, 421, 73, 400, 80" alt="Duval">
<area href="bradford.htm" shape="polygon" coords="372, 82, 374, 108, 352, 91, 370, 77" alt="Bradford">
...
</map>
(g) Row and column headers shall be identified for data tables.
(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.
Most users without disabilities can tell you that data tables can become difficult to interpret as you scroll down the page through the table. You may find yourself scrolling back up to the top to refresh your memory of a particular column's heading. Now imagine if you have a visual impairment, how would a screen reader, or other assistive technology device, read it? That's why we need to mark column headers and associate the data cells with the header cells. The following are two examples of how to do this:
Using Scope
The SCOPE attribute in tables is a simple and effective way to make your pages compliant.
Tags at the top of the columns, table headers <th>, should be give the attribute:
Now that you've done that, the heading text you entered is associated with every cell in that column. Now we do the same for each row in the table:
By simply adding these attributes, each data cell has a row and header to be associated with it.
Example
<table>
<tr>
<th> </th>
<th scope="col">Quarter 1</th>
<th scope="col">Quarter 2</th>
<th scope="col">Quarter 3</th>
<th scope="col">Quarter 4</th>
</tr>
<tr>
<td scope="row">Report 1</td>
<td>45%</td>
<td>55%</td>
<td>79%</td>
<td>88%</td>
</tr>
<tr>
<td scope="row">Report 2</td>
<td>45%</td>
<td>34%</td>
<td>88%</td>
<td>90%</td>
</tr>
<tr>
<td scope="row">Report 3</td>
<td>25%</td>
<td>45%</td>
<td>87%</td>
<td>95%</td>
</tr>
</table>
would be displayed as:
| Quarter 1 | Quarter 2 | Quarter 3 | Quarter 4 | |
|---|---|---|---|---|
| Report 1 | 45% | 55% | 79% | 88% |
| Report 2 | 45% | 34% | 88% | 90% |
| Report 3 | 25% | 45% | 87% | 95% |
This is an effective and efficient way to create 508 compliant tables on your website. There is another, more complicated method, using the ID parameter.
AccVerify, offered by ADAWG, has a tool to convert tables into compliant versions may be available to your agency free of charge!
(i) Frames shall be titled with text that facilitates frame identification and navigation.
We discourage using frames. If you absolutely must us frames, please visit the Access Board's Guidance on Frames.
In addition to my goverment website guidlines, it should be noted that older browsers may not display the site correctly. Also, search engines do not like frames and may index the site incorrectly, if at all.
(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
Why is the flicker rate of images important?
Individuals with photosensitive epilepsy can have a seizure triggered by displays that flash, flicker, or blink. This is even more true if if the flash is intense and within the 2Hz - 55Hz (flashes per second) frequency range.
How can I tell?
In general, don't allow anything to flicker more than once per/sencond.
(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the 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.
What should the text-only page contain
If you are using text-only pages for compliance you must include all of the content and functionality that is contained on the non-complianct pages. You must also update both pages.
Examples
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.
What accessibility problems can scripts cause?
To be compliant you must provide script information that can be read by assistive technology. When you're not placing functional text with a script, the screen reader will read the content of the script itself, reading a meaningless assortment of numbers and letters.
Examples for Script Compliance:
The <noscript> Tag
http://www.doit.wisc.edu/accessibility/online-course/standards/scripts.htm#noscripttableDevelopers working with JavaScript often use JavaScript URL's to to invoke JavaScript functions. This is typically used as part of anchor links. The following link, which doesn't cause accessibility problems, invokes a JavaScript function called myFunction:
When using images inside of JavaScript URL's you must provide meaningful information about the image or the effect of the anchor link. For example, the following link also invokes the JavaScript function myFunction, but it requires the user to click on an image instead of the text "Start myFunction":
You may also use the "title" attribute of the tag. The following example includes a meaningful description in the "title" attribute:
The browser's status line (at the bottom of the screen) displays the URL of any links that the mouse is hovering over. If clicking on an anchor link will send the user to http://www.ada508.com, that URL will be displayed in the status line. When using JavaScript URL's, the status line becomes filled with useless pieces of code. To prevent this, use special event handlers such as "onmouseover" and "onmouseout" to overwrite the contents of the status line with the correct message. The following link will replace the content in the status line with a custom message "More ADA Information."
JavaScript uses "event handlers" to trigger actions or functions. Developers may embed a JavaScript function in a page that auto checks a form for completeness. An event handler associated with a "Submit" button can be used to trigger the function before the form is actually submitted to the server for processing. This saves server resources doing the initial check. The advantage for the user gets feedback about errors before the information is sent over the Internet.
Due to the various screen readers providing different degrees of support for different event handlers, developers must exercise caution when choosing event handlers. Here are some recommendations for many popular event handlers:onClick
This event handler is triggered when the user clicks once on a particular item. It's commonly used on links, buttons, elements. When used in connection with these elements, it works well with screen readers. If clicking on the element associated with the onClick event handler triggers a function or performs some other action, developers should ensure that the context makes that fact clear to all users. Do not use the onClick event handlers for form elements that include several options (select lists, radio buttons, checkboxes, etc.) unless absolutely necessary.
onDblClick
This is set off when the user double clicks the element. It creates accessibility problems, it's confusing to users, and should be avoided.
onMouseDown and onMouseUp
These event handlers each handle the process of (a) clicking down on the mouse button and (b) then releasing the mouse button. Like onDblClick, this tag should not be used. Instead, use the the onClick event handler instead of onMouseDown.
onMouseOver and onMouseOut
These two event handlers are very popular on many web sites. For instance, so-called rollover gif's, which swap images on a web page when the mouse passes over an image, typically use both of these event handlers. These event handlers neither can be accessed by the mouse nor interfere with accessibility – a screen reader simply bypasses them entirely. Accordingly, web designers who use these event handlers should be careful to duplicate the information (if any) provided by these event handlers through other means.
onLoad and onUnload
Both of these event handlers are used frequently to perform certain functions when a web page has either completed loading or when it unloads. Because neither event handler is triggered by any user interaction with an element on the page, they do not present accessibility problems.
onChange
This event handler is very commonly used for triggering JavaScript functions based on a selection from within a <select> tag. Surprisingly, it presents tremendous accessibility problems for many commonly used screen readers and should be avoided. Instead, web developers should use the onClick event handler (associated with a link or button that is adjacent to a <select> tag) to accomplish the same functions.
onBlur and onFocus
Although they aren't known for accessibliity problems, their confusing behavior should be avoided.
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).
While basic HTML code is readable by screen readers and web browsers, most web sites post documents developed using proprietary file formats. The most common example of this on most government and private enterprise sites are Microsoft Office and Adobe PDF documents. Because these files are proprietary users must download and install add-on programs called "plug-ins" that allow the browser to display them.
This provision requires that when you are using these files you should also provide a link to the needed plug-in. It is the responsibility of the web author to know that a compliant application exist before requiring a plug-in.
The most common plug-ins and their respective download links are as follows:
PDF files can create problems for screen readers and search engines. When creating PDF files always use PDF writer, not distiller. Writer will interpret the text, distiller will simply convert it to image. It's also a good idea to place PDF's away from your home page (don't link to PDF's from the home page).
Be sure to review Adobe's How to Create Accessible Adobe PDF Files Booklet and Adbobe's Accessibility pages if you are publishing PDF files.
Also visit Microsoft's Accessibility Site for more infomation about their products and commitment to accessiblity.
Plug-ins are often detected by examining a page's HTML for the presence of an <OBJECT> tag. Some plug-in manufacturers may require the use of proprietary tags. Like plug-ins, applets can also be identified by the presence of an <OBJECT> tag in the HTML source of the page. Also, an <APPLET> tag may also signal the inclusion of an applet in a web page that may need a plug-in link.
* Flash Notes: http://www.webaim.org/techniques/flash/, http://www.macromedia.com/macromedia/accessibility/features/flash/,
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.
Tutorials
www.webdevtips.com's Accessibility Tutorial
A simple and well worded introduction to web accessibility. A great place to start!
Dive Into Accessibility
A great resource answering why and how you should make your site accessible.
Guidelines for Building an Accessible Website
A helpful page covering WC3, including a lot of examples and links.
Making Your Site Accessible
Includes simple ways to test your site, validation tools, makeovers and examples, and future issues
Universal Usability in Practice
A good site that includes topics such at cognitive disabilities, deaf and hearing impaired, color vision, users with slow connections, small screens, speech recognition and more.
Checklist
WebAIM Section 508 Checklist
A checklist for each Section 508 standard and helpful guidlines for complying with that section.
W3C Accessibility Checklist
A prioritized list of checkpoints for making websites accessible. This is an outline of the information provided in the Web Content Accessibility Guidelines.
Cascading Style Sheets (CSS)
CSS from the Web Design Group
An older, yet not obsolete, guide to CSS such as quick tutorials by the Web Design Group.
Adding a touch of style
A short beginners guide to styling your web pages using W3C's CSS and HTML.
CSS from the W3Schools
A comprehensive resource and referece to all things CSS.
CSS Frequently Asked Questions
Frequently Asked Questions (FAQ's) about Cascading Style Sheets (CSS).
CSS Validator
The slightest CSS syntax errors can have serious consequenses for accessibility and usabliity. This free online validator will ensure your pages are error-free, accessible and cross platform compatible.
Accessibility evaluation and repair tools help with diangosing and repairing problems, but they don't do it on their own. The process requires a well-informed web author to interpret and act uppon certain messages that require human judgment and informed decisions. The entire process cannot be 100% automated
ADA508.Com
ADA508.Com, offers ADA 508 website monitoring tools including a server-based site verification tool (AccVerify) and a desktop evaluate and fix tool. We also provide consulting, development, and training services.
ADA508.Com - AccVerify
An web based verification tool from HiSoft allowing you to scan multiple websites and view the web-based reports.
More Free and Useful Tools
Vischeck and Daltonize
Vischeck is a way of showing you what you pages or images look like for someone who's colorblind. Daltonize corrects images for colorblind users.
Lynx Viewer
This service simulates what a webpage will look like when viewed on the Lynx (text-only) browser.
Opera Browser
A free browser that allows you to toggle images, style sheets, scripting and tables on and off with a single mouse click. Also allows site maagers to check alt-text, see how tables linearize, and ensure that you pages will work with the style sheets turned off.
NIST WebMetrics Tool Suite
A set of tools used for testing the usability and accessibility of a site.
W3C HTML Validation Service and CSS Validator
The slightest HTML and CSS syntax errors can have serious consequenses for accessibility and usabliity. Use these free online validators to ensure your pages are error-free, accessible and cross platform compatible.
Adobe Accessibility
With the large amount of Adobe Acrobat documents and forms, it's essential to make them accessible. Here you'll find the infomation you need, as well as online tools for converting PDF to HTML or ASCII.
Accessibility Wizard
This useful tool breaks down the WAI Ckeckpoints into individual tasks for each job role in a development team.
CynthiaSays.Com
The Cynthisa Says portal educates users in the concepts behind website accessibility. It's simple, well-designed interface puts accessibility compliant comde within reach of all users, including those with little or no experience in web design.
Dr. Watson
A handy set of tools allowing you to check you pages for: HTML syntax, verify links, generate work counts, report download speeds, check search engine compatibility and the site popularity.
Page Valet and Site Valet
These tools combine formal validation with accessibility testing. They're based on W3C guidlines and generates XML and HTML reports.
WebXACT
This free online tool, provided by WatchFire, allows you to test single web pages for quality, accessibility and privacy issues.
Colorblind Web Page Filter
Includes filters to manipulate pages and images allowing you to see how they would appear for other users.
Screereaders / Printers
WebAIM Screen Reader Simulation
This will help you to understand what it's like for persons with visual impairments to access the Internet using software called "screen readers" that allow them to get the screen, or web pages, read to them.
JAWS for Windows
Currently one of the most popular screen reader, from Freedom Scientific, provides access to software applications and web pages. Information is read and presented through the speakers or a Braille display.
Hal Screen Reader
Automatic installation, Braille support and lifetime technical support by telephone and email.
Cipher Braille Translator
Create your own Braille documents. Simply translate your text document with a single key press, and print your Braille document using a Braille embosser.
IBM Home Page Reader
Currently a free download from IBM, Home Page Reader offers features such as: voice-prompted installation, web-based mail features, self-voiced internet access, handles HTML 4 and JavaScript, rapid speech retes and keyboard shortcuts, and more.
Developer Guidlines from IBM:
Screen Magnification
ZoomText
ZoomText, a leading low-vision solution, is available as a screen magnifier or integrated magnifier and reader.
Features include: web finder, desktop finder, line zoom window, fractional magnification, PDF support
Lunar Sreen Magnifier
Features include: size increase of 32 times, smooth and clear, 20 hig contrast color schemes, smooth scrolling, and more.
MAGic
Offers magnification features with true low vision screen reading allowing you to choose the information you want read from the screen as you navigate your applications.
Braille Displays and Printers
Freedom Scientific Braille Displays
Products including Focus, PAC Mate 20, PAC Mate 40, and PowerBraille Braille Displays.
ALVA Caltalog of Braille Displays
Product line includes the Satellite Series, Delphi Multimedia Series, ABT3 Series, accessories and more.
Cipher Braille Translator
For turning on-screen test into printed Breaille and creating Braille documents.
Braille Embossers from Enabling Technologies
Creating popular embossers such as Romeo Attaché and Romeo Attaché Pro.
Voice Recognition
Dragon Naturally Speaking
Not only for disabled users, Dragon is speech recognition software that's easy to use and accurate.
IBM ViaVoice
The IBM ViaVoice product family provides responsive, versatile, easy-to-use speech recognition product offerings with exceptional accuracy.
iListen for Mac
Speech recognition software for Mac.
Alternative Input Devices
List of Devices
A comprehensive list maintained by the United Cerebral Palsey of Dallas. Includes: one-handed keyboards, head/mouse point devices, touch screen and more.