Poor Interface_ Blog. We’ve been so busy here in Web Com that we’ve neglected you. It’s been a long time since someone posted anything. I wouldn’t be surprised if everyone deleted us from their feed readers!
To make up for it I’m going to work on being a better blog author by offering up some quick CSS tricks I use on almost every site I build.
First up is styling “skip-to” anchor links. These handy links help people using assistive software or hardware, or mobile devices. They allow quick access to the navigation, main content or any other important element on the page without having to “tab” through all the page’s links. Try hitting the tab key (option+tab in Safari) and go through a page’s links to get to the main content. It takes a while doesn’t it? You can see an example of this working on or Parent Relations site.
These links should be the first thing in your mark-up so the users who need them can find them. This is great for accessibility, but they can sometimes get in the way of your page design. Luckily, there’s a way to hide them while still keeping them accessible.
The XHTML
Start by placing this code right after the open <body> tag.
<div class="offset">
<a href="#skip">Skip to main content</a>
<a href="#nav">Skip to navigation</a>
</div>
Be sure to include the #skip #content anchors somewhere on your page so the links have somewhere to go.
The CSS
.offset a {
position:absolute;
left:-1000em;
padding:5px;
font-weight:bold;
background-color:#fc3;
}
.offset a:focus, .offset a:active {
position:absolute;
top:2em;
left:2em;
}
What this does is take our “skip-to” links and indents them off the screen to the left. When the link is in focus or active, from “tabbing,” the indention is removed and the link becomes visible.
Why not just use display:none?
Screen readers will not read items with the display:none rule, so we need to use position:absolute and indent the links to hide them.
You try it
The best part about this little CSS trick is that it’s really easy to apply and it won’t affect your existing site design, so there’s no reason not to add this bit of functionality.
