Concise, and easy to implement – we had to give credit where credit was due. Not only is this a great CSS Image Replacement article, but a solid CSS mouseover tutorial as well. Thanks to the guys/girls over at GC
CSS Image Replacement in Navigations with Mouseovers
Ahh the power of CSS Positioning (Google stretching CSS Positioning to it’s limits).
We debated calling this the “Complete Idiot’s Guide to Section 508 Compliance” and to tell you the truth, we’re still leaning towards changing it. In any case, for anyone tasked with creating a Section 508 Compliant website, you may first want to take a look at the Section 508 official site. Much of our info here is shortened, and simplified from the Access Board‘s page.
Also, the rigidity of these standards seems fairly debatable, as the Section 508 website itself does not appear to be compliant: using images as labels for the “Site Layout Controls” without text equivalents??
*PLEASE NOTE: We do not assume any liability for the information presented here, and encourage you to do the research yourself. We are not affiliated with the U.S. Government.
For all images, flash, etc include descriptive ‘alt’ tags, or ‘longdesc’ tags – especially when images are used for direction.
Multimedia presentations must be accompanied with appropriate captioning.
Don’t use color to delineate direction, functions, navigation, etc. Imagine you are color blind and attempt to navigate your site.
A bit confusing, but basically allow the document to degrade gracefully if the css stylesheet is not present, and don’t require a particular stylesheet for navigation or viewing. Allow users to change font sizes, etc with the browsers if need be.
Not to be confused with client-side image maps, server-side image maps can not be read by screen readers. Image maps created in the webpage or “client-side” image maps are deemed as better alternatives as the links are freely accessible by screen readers.
If you must use server-side image maps, you must provide redundant text links in addition to the image map. See the next item…
The only case where client-side image maps couldn’t be used is when it is physically impossible – or the clickable regions cannot be defined using the available client-side geometric shapes.
To accomplish both of these requirements, you need to use the ‘scope’ attribute within the <th> tags and within the first <td> element of each row. For example:
<table>
<tr>
<th> </th>
<th scope="col" >Spring</th> <th scope="col" >Summer</th> <th scope="col" >Autumn</th> <th scope="col" >Winter</th> </tr>
<tr> <td scope="row" >Betty</td> <td>9-5</td> <td>10-6</td> <td>8-4</td><td>7-3</td>
</tr>
<tr> <td scope="row" >Wilma</td> <td>10-6</td> <td>10-6</td> <td>9-5</td> <td>9-5</td>
</tr>
<tr> <td scope="row" >Fred</td> <td>10-6</td> <td>10-6</td> <td>10-6</td> <td>10-6</td>
</tr>
</table>
Taken from the Access Board specs.
Or you could simply not use frames and save yourself a million headaches right out of the gate.
Specifically, the screen cannot flicker at a frequency greater than 2 and less than 55 Hz, so get out your flickerometer and then ask yourself where did I get this flickerometer and what store carries a flickerometer?
If you can’t adhere to everything here, you must create a text-only version of every page you are creating and it must be updated as your original is updated. This might be achieved through the use of stylesheets if need be.
Javascript especially should be used to augment functionality – it cannot be used to dynamically display core navigation, buttons, etc. All important links and text must be there on the page when it renders for the screen reader to traverse. This is also important for Search Engine Optimization.
Use of anything external must have appropriate download links. (E.g. Flash, Acrobat PDFs, etc)
Make sure all elements on your form have properly assigned label tags (the label’s “for” attribute must be equal to the input’s “id”):
<label for=”first”>First Name:</label> <input type=”text” name=”firstname” id=”first” />
To allow people with screen readers to jump past all repeated navigation links, you must add a link that jumps to the page body. See the link at the top of the USDA‘s site.
If for example, a page will expire for security reasons, it must display a prompt if that is the case.
Ideally, you will be using php.ini to display errors in php. However, sometimes you don’t have access to it, and you need some instant gratification now! Include this snippet in your page, and it will display the errors inline, as well as save them to a file in your current directory called “error_log.txt”.
ini_set('display_errors', 1);
ini_set('log_errors', 1);
ini_set('error_log', dirname(__FILE__) . '/error_log.txt');
error_reporting(E_ALL);
Now isn’t that just special?
The source: php display errors
With International Talk Like a Pirate Day just around the corner, that leaves little time to brush up!
“If a link with display: block and no explicit dimensions is inside a list item, any spaces or linebreaks that follow the list item in the code will cause extra whitespace to appear in the browser.”
Just another in the huge slew of IE browser bugs:
http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=1&postId=824
