Section 508 and your Website

I was asked a question today about section 508, and after a little research I came up with some information, I hope it gives you a better idea of what needs to happen to a website to make it Section 508 complaint

Section 508 or accessability it is not just about the copy on a site  it is about the entire content of the site such as navigation, Images, links etc… the entire site must be accessible by a blind user with a screen reader, or easily navigated by a person with disabilities. I have included some 508 points that I think are pertinent to standard projects….

• Every image, Java applet, Flash file, video file, audio file, plug-in, etc. has an alt description.
• Complex graphics (graphs, charts, etc.) are accompanied by detailed text descriptions.
• Alt descriptions for images used as links are descriptive of the link destination.
• Decorative graphics with no other function have empty alt descriptions (alt= “”), but they never have missing alt descriptions.
• If color is used to convey important information, an alternative indicator is used, such as an asterisk (*) or other symbol.
• Style sheets may be used for color, indentation and other presentation effects, but the document is still understandable (even if less visually appealing) when the style sheet is turned off.
• All form controls have text labels adjacent to them.
• Form elements have labels associated with them in the markup (i.e. the id and for, HTML elements).
• A link is provided to skip over lists of navigational menus or other lengthy lists of links.

Testing

The only true way to test your site is have the National federation of the Blind http://www.nfb.org/nfb/Default.asp test and certify your site, which costs a few thousand dollars.

Tools

For 508 testing tools, go to http://www.cynthiasays.com/Default.asp (or download http://getfirebug.com/ if you use Firefox) or this http://www.section508.info/

Title Attribute for use on an image

Many people use the alt attribute as a popup description of an image, however this is not its original purpose and only works if the visitor is using Internet Explorer (or has extensions). The popup should be done as a title attribute instead, an example of this is:

<img src=” images/CompanyNameLogo.gif ” alt=”image” title=” Company Name Logo”>.

In this case when a user leaves their cursor on top of an image they will see a popup stating “Company Name Logo.”

Title attribute for a link

Some links just need more information, or the site has disabled visitors, and we need a better way for them to read the anchor text (color blind users so they can invert the colors). In either case, we should use the title attribute. Here is an example:

<a href=”http://www.oneillcreative.com” title=” Helping Companies Define Their Web Presence “>.

NB: I am not an expert in this area, and I am sure I have missed some important stuff. So maybe the best idea would be to run any accessibility or section 508 queries past someone on within your company that is knowledage in this area.