Accessibility and Access Keys [0]
Whole bunch of navigation links: Link 1 | Link 2 | Link 3 | Link 4
Breadcrumbs: Bet < these < would < be annoying < to have < to tab < through < to get to < the content
To see this page in action, use your TAB key... example of link in the content.
To see this page without its clothes on, just remove styling.
Place the 'Accessibility' and 'Skip to Content' links at the beginning of the page, straight after the <BODY> element. (You may wish to put the page's title or logo in between the accessibility link and the Skip to Content link). Note the onfocus event – this overcomes an IE bug discussed previously.
<p class="skip"><a href="accessibility.html"
accesskey="0"
onfocus="if(scrollTo()){scrollTo(0,0);}else{scroll(0,0)}"
>Accessibility and Access Keys [0]</a></p>
<p class="skip"><a href="#cont"
accesskey="1" id="menu">Skip to Content [1]</a></p>
Place the 'Skip to Navigation' link at the beginning of your content
<p class="skip"><a href="#menu" accesskey="2" id="cont">Skip to Navigation [2]</a></p>
Each skip link is styled with the following:
.skip {position: absolute; top: -4em; display: none} /*Opera*/
* html .skip {display: block; position: absolute;
top: -4em; left: 0; z-index: 0} /*Seen by IE*/
html:not([dummy]) .skip {display: block; position: absolute;
top: -4em; left: 0; z-index: 0} /*Seen by Moz and Firefox*/
.skip a {padding: 0 0.5em; left: 0; width: 13.2em; z-index: 0}
.skip a:focus, .skip a:active {display: inline; z-index: 2;
border: solid black 1px; color: #cc0; text-decoration: none;
position: absolute; top: 6.5em; left: 0}
.skip a#cont {position: absolute; top: -9em; width: 13.2em}
.skip a#cont:focus, .skip a#cont:active {position: absolute;
top: 15em; left: 0em; z-index: 2}
.skip a:hover {cursor: default}
This hides them from Opera (which just doesn't need this sort of thing), and tweaks for Moz/IE differences in implementation. You may find that you need to change the position of the content link so that it sits in space between the navigation and the content area, for example by altering the value of top for .skip a#cont
Suspendisse erat. Vestibulum gravida neque a risus. Pellentesque porttitor neque vel tortor. Etiam orci turpis, scelerisque sed, ullamcorper convallis, volutpat ac, sem. Vivamus purus augue, commodo et, consequat id, fringilla nec, felis. Nam libero nisl, Another link in the content fringilla vitae, varius eu, malesuada nec, lacus. Nulla facilisi. Vivamus ornare leo. Pellentesque sed ante. Nullam mollis, ipsum eu condimentum cursus, purus elit auctor turpis, eu vehicula augue nibh sagittis purus. Vivamus luctus elit et ipsum. Maecenas eget nulla vitae magna rhoncus pulvinar.
W3C: XHTML - W3C: CSS - W3C: AAA - Privacy Statement - Accessibility - Communis 2003-2004