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.

Tuesday, August 14, 2012

DropDown Menu and section 508

I'm still working on future srtr.gov-site fixing all problems related to section-508 compliance. One of the problem is to implement tabbed-accessible (for non-mouse users) and JAWS-readable menu.  Researching the ideas how to do this, I found several sites with code which claim their menus are section 508-complaint. I tried all of them, and did not find them complaint. I found only one site, which led me to implementation of my menu.  Before starting  to do something I have read several articles on sites:
1. Accessible Dropdown Menus by Terrill Thompson
2. Accessible Drop-Down Menus by Martin Kliehm