When running accessibility tests make sure to use more than one validator, since not all errors or issues will be found by all of them.
Usability and Accessibility should come before validation.
WebAIM article on how to implement skip navigation.
Reasons for skip nav:
<body>
<div class="hide"> <a href="#MAINcontent">Skip to Main Content</a> </div>
<ul>
<li>First Link</li>
…
</ul>
<a name="MAINcontent"></a>
<h2>Heading - H2</h2>
<p>This is the first paragraph</p>
.hide a, .hide a:hover, .hide a:visited {
position: absolute;
left:-10000px;
top:auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.hide a:active, .hide a:focus {
position: static;
width: auto;
height: auto;
}
The text and font size on a website can make it difficult for visual people. If the text is too small, in poor color contrast and all jammed together, it makes sites inaccessible.
The more vertical rhythm and letter spacing a page has the easier it is to read.
Items to think about:
Rich Rutter reviewed his logs and noticed that 95% of the people visiting his website had their font size set at the default of “MEDIUM”, which is 16px.
body { font-size: 75%;} - 12px
h1 { font-size: 3em;} - 36px
h2 { font-size: 2em;} - 24px
…
h6 { font-size: 1.125em;} - 14px
p, a, li, … { font-size: 1em;} - 12px
… { line-height: 1.5em; letter-spacing: .125em;} - line height - 18px
W3C Checkpoint 2.2 - Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.
Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.
The range for color brightness difference is 125. The range for color difference is 500.
Examples:
Where ever you have “hover” (a:hover) you should also have “focus” (a:focus).
#nav a {
background: #ACC7FF;
text-decoration: none;
}
#nav a:hover, #nav a:focus {
background: #BEFF9E;
text-decoration: underline;
}
Individuals using screen readers can look at a list of all the links on a page out of context. So if they keep hearing “click here” over and over again it makes no sense to them.
Another good reason is that your not getting added Google juice as they say by making the link text relevant to the link.
Click here to review the Acme TNT companies annual report.
Please review the Acme TNT companies annual report.
Use headers - H1, H2, H3, H4, H5, and H6.
This will allow people using screen readers to skip around to the important parts of the page using key combinations.
<table summary="List of Washington, DC, libraries fiscal record information.">
<caption>List of Libraries Fiscal Record Information</caption>
<tr>
<th id="library_name" width="300px">Library Name</th>
<th id="fiscal_year" width="100px">Fiscal Year</th>
<th id="quarter" width="75px">Quarter</th>
</tr>
<tr>
<td headers="library_name">Anacostia Interim Library</td>
<td headers="fiscal_year">2007</td>
<td headers="quarter">4</td>
</tr>
Here is the table example for the code above and another table example that is easier to read.
There are other ways to use “TH” in Roger Johansson's article about creating accessible tables.
FIELDSET - element used to group related fields
LEGEND - element used to provide a caption for a FIELDSET
Where should labels be? Top, Left justified, or Right justified.
Luke W. article about where labels should go and an Eye Scan article that shows data and examples of forms.
IE6 does not understand the implicit association of a label and a form field
“LABEL” associates content with a form control, either implicit association by wrapping the “LABEL” with form control and the text explicit association
LABELs “FOR” attribute is an “ID” reference to the form control
<input type="text" name="dob" id="dob" size="10" maxlength="10" value="02/24/1963" />
<input type="text" name="dob-city" id="dob-city" size="25" maxlength="50" value="Rochester, NY" />
Usually the MAXLENGTH field is a lot larger than the SIZE.
You could use CSS to replace the SIZE attribute.
<fieldset class="form_choices">
<legend>Hide my information.</legend>
<label for="visible_1" >Yes</label>
<input type="radio" id="visible_1 value="Yes" checked="checked" />
<label for="visible_2" >No</label>
<input type="radio" id="visible_2" value="No" />
</fieldset>
By applying a bit of CSS in my example form you can make this look like it's just a question and your choices.
Most people (myself included) place input field(s) in ‘P’ or “DIV’ - sensible choice (except in certain instances).
Use ‘OL’ or ‘UL’ since most forms are lists of questions or form controls anyway.
<ul>
<li> Address Line 1 <input type="text" /> </li>
<li> Address Line 2 <input type="text" /> </li>
<li> City <input type="text" /> </li>
<li> State <input type="text" /> </li>
<li> Postal Code <input type="text" /> </li>
</ul>
Need label on search box for screen readers to know what they are looking at.
Add an HREF anchor to the search results page and the form to skip all the navigation etc.
<div class="SEARCH">
<form name="Skills_Search" action="searchResults.html#MAINCONTENT">
<label for="search2">Search</label>
<input type="text" name="search2" id="search2" title="Enter search text." />
<input type="submit" value="Search" />
</form>
</div>
To hide the word “Search” just add to the CSS class used for the skip navigation.
Please review the search box and search results example.
All FORMs have at least one required field. You need to have your page look good and still be accessible to screen readers.
To do that we just have to add a few things to the label and a bit of CSS.
<li>
<label for="first_name"><em>Required</em>First Name</label>
<input type="text" name="first_name" id="first_name" aria-required="true" size="25" maxlength="25" /><span class="req"> *</span>
</li>
.hide_info a, .hide_info a:hover, .hide_info a:visited, .search label, label em {
position: absolute;
…
overflow: hidden;
}
Please review the required field example.
Free screen reader extension for Firefox that acts like a screen reader and was created by Charles L. Chen.
Presentation
Accessibility Resources