508 compliance recommendations
508 a-p must be in compliance with, for federal and CA state law. 508 checklist from WebAim. The World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) - Priority 1 (Level A) must, Priority 2 (Level AA) should, Priority 3 (Level AAA) may be in compliance with W3C WCAG. 1.0 checklist , 2.0 guidelines , (508 refresh report)
Priority 2 Use a public text identifier in a DOCTYPE statement Public text ids
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Priority 3 Identify the language of the text with 3 & 2 character language codes or 3 character language codes
<html lang="en"> or <html lang="eng">
Priority 1 Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions).
<span lang="en"> , <caption lang="en">
508 a & Priority 1 Image tags should always have a descriptive alt="" attribute. If the attribute is left empty (alt="") jaws will read it as "blank". If image is only a spacer, shim or bullet use alt="spacer" or whatever. Keep alt attribute brief but descriptive. Use longdesc="" if more than 150 characters.
Priority 2 Background and foreground colors (images & text) must have sufficent contrast, when viewed on a black and white screen or by someone with color-blindness. Color Contrast Analyser: Juicy Studio
508 g, h & Priority 1 Tables with data should identify header cells <th id="somename" scope=""> for rows and columns, and data cells <td headers="somename">. Tables with two or more rows or columns that serve as headers should have scope="", id="", axis="" attributes. 508, w3c
Priority 3 Tables with data should have summary="" attribute that briefly describes the table structure and purpose, as well as a caption. Captions provide a table title, they are displayed and assist in understanding the table. <table summary="This data table displays the ..."> <caption>Title description of table</caption>
Priority 3 Tables for layout only should not have a summary="".
508 n & Priority 1 Form control input fields should have <label for=""> </label>. Test The for="" corresponds with the input tag's id="" for non-visual users. (Jaws screen reader) Place <label> for form elements consistently before (preferred) or after <input/> through out a page. A group of radio buttons, or checkboxes should be within a <fieldset> with <legend> for Jaws.
Priority 3 Form control input fields that are not in a prefered or logical order should include the tabindex="" attribute. People using access devices often navigate with the tab key instead of the mouse. Specifying a tab order (different than the HTML order) allows them to access these items in an logical order. ***Works in Explorer only, not Netscape 4. <input tabindex="2" type="text" name="field1"> <input tabindex="3" type="text" name="field2"> <input tabindex="4" type="submit" name="submit"> <a href="#top" tabindex="1">Return to top of page</a>
Priority 3 Acronym or Abbreviation element tags can surround a group of letters and make them more meaningful to screen readers or other access devices. <acroynm title="World Wide Web">www</acroynm> <abbr title="California">CA</abbr>
Priority 2 Map element tag will group a set of links such as a navigation bar at the top or side of every page. w3c grouping links <map title="Navigation Bar"> [<a href="#how">Bypass navigation bar</a>] [<a href="cats.php">Cats</a>] [<a href="dogs.php">Dogs</a>] [<a href="fish.php">Fish</a>] </map> <a name="how">How to use our site</a>
508 o & Priority 3 A method should be provided to permit client/user to skip repetitive navigation links. To do this you could just add an anchor tag to where you want the skip to go to and at the top or beginning of the repetitive navigation just add a link to the anchor... <a href="#skipnav"></a> will skip to <a name="skipnav"> I like to have an image shim/spacer between <a href></a> tags, so I can test it. Then I can also add an alt="Skip navigation" to the image. <img src="images/shim.gif" alt="Skip navigation">
Priority 2 Use lists properly. For nested lists compound numbers are more informative than simple numbers and letters: 1, 1.1, 1.2, 1.2.1, 1.3, 2, 2.1 (use css below)
ul,ol{counter-reset:item;} li{display:block;} li:before{content:counter(item,"."); counter-increment:item;}
Priority 3 Some screen readers will incorrectly read adjacent links as a single link. Separate adjacent links with more than whitespace, use | , || , ][ Cats | Dogs | Fish , Cats || Dogs || Fish , [Cats] [Dogs] [Fish] or <ul><li > <ol ><li > :
<ul>
| <ol >
|
508 m & Priority 3 When a web page has for example a PDF page, which requires a plug-in (Adobe Acrobat Reader) or (Flash Player) or other application be present on the client system to interpret page content, the page must provide a link to that plug-in or application...
Priority 2 Avoid deprecated features of w3c technologies, see w3c list of HTML tags
Other links to ADA information : w3c validator , w3c checklist , Color Blind filter page , Juicy Studio , Fog Index - tester , SMOG Index - tester , ,
