Beast-Blog.com
Hidden Focal Navigation

Here on this web log and on any page on my website I employ hidden focal navigation, “skip links” or “jump links” and such. I do this for the benefit of people not enjoying a proper visual display because they are using screen readers or they’re keyboard users. The latter, the keyboard user, is a prime example of how this plays a role. You see, a person using their keyboard to get around a site jumps from anchor to anchor (link to link). Now imagine having to tab through a long list of links to get from point A to point B. What a drag that would be. Jump links allow users to bypass certain sections. So what’s the solution? One is to provide these jump links at the top of the page leading all the way to the first content heading or div. I did this very thing at GreenMethods.com, top of each page, check it out. It works on that site. It fits. It doesn’t here, though… it wouldn’t look right. So what do I do, just forget about it, right? Some people will just have to deal, right? Wrong. The Jump Links are there, look again.

If you’re now confused, let me show you what I’m talking about. Using your keyboard, Tab onto this page or any page on this site. Repeat the process. All in all you’ll find *four hidden, but top-level and important-to-web-accessibilities links: “Jump to Content,” “Jump to Navigation,” “Site Map,” and “Accessibility.” Some people will [some have] said “wow, how’d you do that?” And it’s for that reason I am writing this. And, in my eyes, facilitating focus on links — all links, not just jump links — is just as important as allowing your text to be resized, at least as it concerns web accessibility (and usability).
*The Beast-Blog theme provides two of the four, “Jump to Content” and “Jump to Navigation.”

It’s done entirely with my CSS, but not with the property display : none; as some might guess. If I did that, you’d get nothing tabbing. Moreover, people with screen readers would also bypass them and have to listen to whatever was between them and the content they were after. In fact, if they were hidden by that method they’d only be available if the style sheet was actually disabled or unsupported so that wouldn’t do at all. What’s needed is actually that which will be available when needed. Oh, and just imagine what a nice surprise it must be to someone who finds them because they need them.

I hide the links visually but yet I don’t really hide them. I just make sure they’re off the page is all. This is done with positioning using the CSS properly left (and top though it’s not really needed). I give these property a negative value. A huge negative value to account for large resolutions being that this is a fixed-width site. On this site I use -1000px. The XHTML part of is simply four divs.

Before I show you the actual coding used, I must say that this is still in an unrefined state. It needs improvement. It should be a unordered list, but unless I use four separate lists, I have not been able to get it to work exactly as I want. Paragraphs will work as well, but again they aren’t the best way to go. I plan to fuss with it some more so I can come up with a fully cross-browser compatible solution (or maybe, you, dear reader, will save me the trouble in a reply and respond with an answer to this). So, without further ado, here’s the mark up. First the CSS.

div.offset a {
   position : absolute;  /* Forces it off-page */
   top : -1000px; /* The direction and value (optional) */
   left : -1000px; /* The direction and value */
   padding : 5px; /* To style the link’s box (optional) */
   font-weight : bold; /* Link Styling (optional) */
   font-size : 110%; /* Link Styling (optional) */
}
div.offset a:focus, div.offset a:active {
   position : absolute; /* Forces it back on focus */
   top : 25px; /* The direction and value */
   left : 2%; /* The direction and value (I got better results with % here) */
   background : #99cc66; /* To style the link’s box (optional) */
   border : 1px solid #000; /* To style the link’s box (optional) */
   color : #fff; /* Link Styling (optional) */
   z-index : 5; /* I needed it to be on top of my image banner and over the “Get the Latest icon on my home page*/
}

Now here’s the actual XHTML

<!--begin offsets-->
  <div class="offset"><a href="#content">Jump to Content</a></div>
  <div class="offset"><a href="#sidebar">Jump to Navigation</a></div>
  <div class="offset"><a href="/siteinfo/#access" title="Learn about this website’s accessibility features">Accessibility</a></div>
  <div class="offset"><a href="/siteinfo/#sitemap">Site Map</a></div>
<!-- close offsets -->

This is all legit, valid XHTML, but because I used divs, and they don’t truly provide link separation — which is important so one link doesn’t run into the next visually or aurally — but then again, I found that tabbing through page was unaffected by this, which seems natural since it’s one link at a time coming into view, and I also found that things were clear enough with a screen reader too. All in all, my estimate is that even as it is right here and now, it’s better than the alternative of not doing it at all. Focus on links is very important, hidden off-screen or otherwise.

Filed under Access Counts, Do It CSS Style —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

An Offset Content Penalty? »

A CSS Starter File »

Offset Class Jump Links »