|Kongregate Registration for Free Flash Games and Chat with solprovider|
American with Disabilities Act Section 508 Compliance
American with Disabilities Act Section 508 requires new government applications that can be accessed remotely, which includes websites, to be usable by handicapped people. It also applies to existing applications used by the public. It assumes there is a set of guidelines for designing websites accessible to the disabled, specifically the blind, vision-impaired, and deaf.
The blind use text readers to navigate the Web. Text readers start reading at the beginning of a page, and allow jumping forward to the next paragraph or link. FRAMEs, Flash, and most navigation tricks severely damage accessibility. Images cannot be seen, so a spoken alternative is needed.
People with vision problems need to be able to increase the size of all text. They may not be able to distinguish between colors. Fast refreshing of the screen may cause seizures.
The deaf cannot hear audio indicators such as beeps when something happens. Audio and video media presenting information as sound is useless.
Why this is important?Anybody working on a government website MUST understand and follow the guidelines
Anybody working on any website SHOULD understand the guidelines to know when they are discarding part of their audience. ZDNet's decision to publish many interviews in video format means that many business people using computers without speakers cannot access the information. It also prevents the deaf from enjoying their website.
LenyaAny web software that allows access to the source HTML can create ADA section 508 compliant websites. The Kupu editor in Lenya allows access to the source HTML, so Lenya can create compliant websites.
Having a text-only version satisfies all ADA 508 compliance issues, as long as the text-only version is updated simultaneously with any other version. Lenya is perfect for this, because it is easy to have text-only versions of all formatted content. Add an XSLT to produce the text, convert IMG tags to their ALTs, and move the navigation to the end of the page, then play with the XMAP files so it is easy to stay in the text-only website. The only issue is audio and video media; my recommendation is always post a transcript with any non-text media.
Lenya 1.2.2 does not make it as easy as it should be. Images are "Assets". All Assets are required to have a Title. All images should have an ALT parameter. Lenya creates the ALT parameter, but does not fill it with the Title. I added a bugzilla for that; it is too simple and too obvious not to be done. (This may have been fixed since Lenya 1.2.2.)
Lenya does not use Framesets, so no issues there.
ADA compliance is more a mindset than software. Lenya was not designed for ADA compliance, but it can do the job. Lenya is actively developed, and could force ADA compliance with a few enhancements.
Solprovider's Accessibility RequirementsThis list was compiled from a variety of websites and my own experience.
First Link Skips to ContentI should have placed this under testing using only the keyboard, but it is the prime failure of most websites for accessibility compliance.
If you are providing a text-only version, the content should be first, and all navigation links presented at the end. Without a text-only version, ADA 508 requires a link allowing skipping directly to the content before any long lists of links such as navigation menus. This is also very useful for navigating without a mouse.
LinksThe text linked should describe the destination. The consumer must be able to decide if they want to use a link based on the contents of the link. Do not depend on text before or after the link. "Click here" is useless:
<A HREF="http://solprovider.com">Click here</A> for great insights.
By the time a text reader has given enough information to decide whether the link is worthwhile, the link is long past. This is much better:
<A HREF="http://solprovider.com">Click here for great insights.</A>
Other tagsUse the Header tags (H1 H2 H3 H4 H5 H6) for all titles. Other tags provide visual emphasis, but Header tags provide valuable information to text readers and alternative stylesheets.
Everything must have a text equivalent. ADA 508 specifies that IMG tags must have an ALT parameter, and requires the LONGDESC parameter if the image conveys information. Examples:
<IMG SRC="me.gif" ALT="Paul Ercolino"/> - No LONGDESC is required, because no information is being conveyed. No written description could possibly convey the beauty evident in the image.
<IMG SRC="directionmap.gif" ALT="Philadelphia map showing route from airport to Plymouth Meeting Mall" LONGDESC="Exit airport onto route 95 south. Bear right into route 476 north. Stay far right approaching Turnpike toll booths to exit onto Germantown Pike heading west . Right lane will enter mall parking lot."/>
There is a current trend by some idiots who want to change things for the sake of breaking everything to use a TITLE parameter for images. The TITLE parameter is not mentioned in ADA 508. In most cases, it will be a copy of the ALT tag.
ISMAP and USEMAP must have ALT parameters. APPLET, OBJECT, and EMBED tags must contain alternate text.
Test your website with a text-only web browser. Most Linux distributions have several.
Do not use "ASCII Art". An image with an ALT tag is preferable, because ASCII Art causes text readers to spout garbage. Any information depending on character placement should be avoided.
Everything must have a text equivalent. This includes audio, video, and anything else that makes reading text difficult, such as PDFs.
Every video must have a transcript available. This is useful even when it is not the human who is disabled. In the 1990s, many business computers did not include speakers or sound capabilities. My main work PC does not have speakers attached because I do not want a beep to ruin my concentration when I am programming. Transcripts allow your videos to be indexed by search engines; make certain the page with the transcript has a link to the full video.
ADA 508 does not require separate transcripts. It does require captioning of both audio and video. For audio, captioning is silly; the transcript is more usable. For video, the captioning must synchronize with the pictures. If a video is captioned, a transcript can easily be created by exporting the captions.
There is a current trend for publishing videos at sites like ZDNet. They do not publish transcripts. This information is unusable by the deaf, and any computer without speakers (whether by choice or corporate policy.)
My own bias is that audio and video are incredibly poor methods for transferring information. The transfer rate is very low. Spoken dialogue can easily be misunderstood. Editing requires complex software. A transcript can be reviewed and adjusted easily, so the information is more accurate, the transfer rate is high, and "going back" is handled by adjusting your eyes higher rather than pushing a rewind button. The current generation has been trained to expect the low transfer rate and inability to rewind by television. In 2005, video blogs have become popular. Hopefully this will be a short-lived fad.
Any format designed to damage reading text should be avoided. PDFs are the worst problematic file format for websites, with MSPowerPoint files as a distant second. This is painful for ADA 508, because it applies to the government, and government is a bureaucratic monster that lives on paper. The web was not designed to be printed. Adobe has profited greatly by providing the PDF file format to allow documents to be printed exactly as the author intended.
All PDFs and PowerPoint presentations providing information must be converted to HTML for the Web.
PDFs for printing a form should be converted to web applications so the information is entered and stored digitally. If a signature is required, the web form can create a printable summary with its identifying code and a place for a signature. That method has been used for the US Income Tax for several years.
I cannot think of a situation where a PDF is preferred over these methods, but for ADA 508 compliance, all information in a PDF must also be easily accessible as text.
Anything requiring fast refresh of the screen must be avoided. All animation must be able to be disabled. Animation includes scrolling text.
REASON: Fast refreshing can cause seizures in some people. Animation is annoying to normal people when they are trying to focus elsewhere; it is a major problem for people with attention disorders.
BAD EXAMPLE: Mozilla blinks its taskbar icon when it cannot load a webpage.
BAD EXAMPLE: Photoshop blinks its taskbar icon when it completes its launch procedures.
BAD EXAMPLE: ZDNet has animated advertisements that distract from reading the content.
Any information provided by color must also be provided by an alternate means. If someone can change the color scheme, there must be choices for several contrasts levels.
EXAMPLE: Required fields could be colored, but should also be specified with a symbol denoting they are required.
EXAMPLE: This website uses red text to separate warnings from instructions, but there is also a label describing why the text is important: "NOTE:", "WARNING:", "ERROR:", ...)
When allowing choice of color scheme, black-on-white is a good high-contrast. Also provide low-contrast schemes:
EXAMPLE: Pink on light green
EXAMPLE: Light blue on dark green
The easiest method to comply is to allow the consumer to choose from a variety of colors, and verify they do not pick the same color for both the foreground and background. Any standard color combinations must become black-on-white or white-on-black when viewed on a monochrome monitor.
Stylesheets must allow themselves to be overridden or disabled. This allows text to be enlarged for the visually-impaired, and colors to be changed for the color-blind.
Never specify font sizes in points. Most browsers have a command to increase or decrease the font size. This command currently has no effect if the font size was specified in points. Browsers should be able to solve this problem easily, but even Firefox 3 refuses to change the size of text when the stylesheet specifies the size in points. The best (and least used) CSS font sizes are: xx-small, x-small, small, medium, large, x-large, and xx-large. As of this writing, solprovider.com uses pixels; the planned overhaul will switch to the word sizes.
Disabling or changing stylesheets is handled by the web browser, but it is the developers' responsibility that the website is usable without the stylesheet. Test with the stylesheet disabled.
Any navigation presented by an image map must have a text equivalent. It also helps to be able to disable the image maps from appearing.
Every link in an image map must also be presented as normal text. When this is not possible, such as a mapping application where you can move the center by clicking, there must be text links allowing the same functionality, such as "Move center up|down|left|right) 10 pixels."
Must include Header Column and Header Row. Use TH tags so text readers can find them easily. This does not apply to TABLEs used to control layout.
The current trend is to use DIVs rather than TABLEs. This allows stylesheets more control to reformat for the disabled. All text readers are able to handle TABLEs, so this is not a big issue.
My recommendation is never use FRAMEs. Anything making navigation difficult for spoken content and commands is discouraged.
ADA 508 requires that FRAME names be descriptive. They are "navigation" and "content", not "left frame" and "right frame". The same content must be provided if FRAMEs are disabled, so use the NOFRAMES tag properly.
Programmable Objects (Scripts, Plug-ins, Applets, etc.)
Provide text alternatives for the functionality. Make certain there are easily found links to getting the plug-ins. Avoid "mouseover" events that provide information, such as making something appear somewhere else on the page. Never use "pop-up windows" or change the focus to another window unless actively commanded by the consumer.
If anything is being timed, there must be a mechanism for increasing the time allowed, or at least a button for "Please give me more time."
Must be able to be navigated and completed by text readers. See the next item about testing with only the keyboard. Drop-downs can be troublesome. The TAB key should navigate the Form in a sensible sequence.
Fully usable with only Keyboard
Test after detaching your mouse and any other input devices.
Two days of training to be a Microsoft Windows 95 support technician was done without a mouse. This was extremely useful when giving support over a phone. It is much easier to explain "Type ALT-F" than "Click File in the upper left corner below the title bar of the current window".
Easily Recognizable Focus
The current focus must be easily recognized. Most browsers put a dashed box around the current link, or a blinking cursor for entering/editing text. Website menus must distinguish the current page.
Consistent Use of Images
Each image used for functional control must have one and only one meaning. Each function may have one and only one image associated with it.
That means if a picture of "ABC" means spellcheck, you cannot use it to show the alphabet, and you cannot also use a checkmark image for spellchecking.
W3C's Web Accessibility Initiative