Today I dedicated my time to another "Section 508"-feature such Skip Navigation. It's quite important for Gov-sponsered sites. This feature could be us by Internet users, who are blond and don't use a mouse.
Here's a complete code for "skip navigation" feature.
HTML code after <body>-tag:
<div id="skipmenu">
<a href="#skip" class="skippy">Skip To Main Content</a>
<a name="top"></a>
</div>
HTML code after "main" content begins:
<div><a name="#skip" tabindex="-1" id="skip"> </a></div>
CSS code which goes with HTML:
div#skipmenu{
position:relative;
}
div#skipmenu a.skippy{
position:absolute;
top: -1000px;
left:-1000px;
height: 1px;
width: 1px;
overflow:hidden;
}
div#skipmenu a.skippy:active, div#skipmenu a.skippy:focus, div#skipmenu a.skippy:hover{
position: absolute;
top:auto;
left:auto;
width:100%;
height: 1em;
width: auto;
font-size:1em;
font-weight:bold;
width:100%;
padding-bottom:15px;
color: black;
z-index:100;
text-align:right;
margin-bottom:25px;
}
In addition, I found quite interesting site about SKIPPING. I think, it's going to be interesting for many of us.
No comments:
Post a Comment