more to come »
skip to content
Amy asked for my assistance in creating a compliant “skip to content” bar for a project we are currently working on. So I decided to make it a bit more styled and pretty. eventually I may even make the skip to content fade in.
Here it goes:
the css
a#skipAhead {
display: inline; position:absolute; top:0; left:0;
width:10%; z-index:1000;
filter:alpha(opacity=0); -moz-opacity:0.0; opacity:0.0;
}
/* accesibility for skipper aka skipAhead from comments by
patrick h. lauke aka redux@splintered.co.uk */
a#skipAhead:focus,a#skipAhead:hover,a#skipAhead:active {
filter:alpha(opacity=0.85); -moz-opacity:0.85; opacity:0.85;
border-bottom:1px solid #023845; border-right:1px solid #023845; background:#0E4E70;
color:#fff; font-weight: bold; text-align: center; padding: 5px;
}
the html
[a href="#yourMom" title="Skip to the content" id="skipAhead"]skip to content[/a]
[a name="yourMom" title="yourMom"][/a]
some info
by placing the triggering anchor tag right after the body tag as this is a feature for accessibility we allow the user to skip flashy navigation and other page elements and get to the guts of the page.
updated
Many thanks to Patrick H. Lauke
Sunday, April 29th, 2007 at 1:26 pm and is filed under css, web accessiblity. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.