After an eye-opening (no pun intended!) training session on Section 508 web site accessibility and the pitfalls of modern web design, a decision was made at my day job to place skip nav links (an anchor that is first in the tab order that jumps the user down to the main page content bypassing navigation elements) on all of our websites. Naturally, I Googled skip nav to try and find the best way to handle this and found two common schools of thought:
- Placing a visible link at the top of the page that says something like “Skip to Main Page Content”
- Placing an invisible link at the top of the page so sighted users couldn’t see it, but screenreading software could
I spent some time thinking about which alternative I would choose and probably like most web designers, didn’t want to “break” the layouts that our customers were accustomed to. As part of my position at the Idaho Commission for Libraries (ICFL), I help manage the e-Branch in a Box project. We currently have about 70 library sites using our system, powered by Drupal, and making a change on one theme would affect multiple sites. To avoid the inevitable, “How do I remove the Skip to Main Page Content link from my site?” type of questions, I was leaning more towards using the hidden element technique. However, for sighted keyboard users this causes a problem because if they hit tab, there isn’t anything visually happening to show where the focus is on the screen. This just wasn’t doable for a government site.
That brought me back to breaking my page design and being questioned as to why these things were in place. Luckily, I came across WebAim’s Skip Navarticle on how to place a hidden link on the page that becomes visible when the user tabs to it. The way this works is by using CSS absolute positioning to hide the link from sighted mouse users (a:link, a:visited, a:hover properties) and then brings the link into focus using the CSS a:active property. This is one trick that any web developer should have in their bag of tricks!
One caveat to using this technique: Internet Explorer and Firefox handle the tab focus a little bit differently from each other. In IE, the a:active property works to display the hidden link, but not in Firefox. To fix this, use a:focus alongside the a:active property.