Tuesday, August 28, 2012

Section 508 and Skip navigation

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">&nbsp;</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