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 {
display: block;
position: absolute;
left:-10000px;
top:auto;
width: 100%;
height: 3em;
font-weight: bold;
text-align: center;
}
.hide a:active, .hide a:focus {
background: #BEFF9E;
position: static;
width: auto;
height: auto;
padding: 1em;
margin: auto;
}
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), along with “active” for older IE browsers.
#nav a {
background: #ACC7FF;
text-decoration: none;
}
#nav a:hover, #nav a:focus, #nav a:active {
background: #BEFF9E;
text-decoration: underline;
}
An example of a:“hover”, a:“focus”, and a:“active” in action.
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 the following heading levels - 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
<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.
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 aria-hidden="true">Required</em>First Name</label>
<input 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.
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 name="search2" id="search2" />
<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.
Type of Landmark Roles
I am the main content.
<div id="nav">
<ul role="navigation">
<li>Products</li>
</ul>
</div>
<div role="main">
<p>I am the main content.</p>
</div>
<form role="search">
<label for="search">Search</label>
<input id="search" />
<input type="button" value="Search" />
</form>
Free reader extension for Firefox that acts like screen reader - created by Charles L. Chen.
Presentation
Accessibility Resources