Enhancing Accessibility with Offsets, Cautiously

Posted February 25th, 2007 by Mike Cherim

The “offset” class is a name I give to any element hidden off-screen using the Cascading Style Sheet, CSS, and every style sheet I make contains this class. You may call it “offscreen,” “offleft,” “offpage,” or whatever works for you, but regardless of what you call it, how it works and what it offers users remains the same: on-demand accessibility. But I discovered a downside recently.

This downside isn’t when using it for jump links (explanation below), but in another capacity. When I was modifying the WordPress theme I recently produced for use at Accessites.org I decided to add some features to offer assistance to users of Assistive Technologies, AT, like screen readers, text browsers, and the like. What I was hoping to accomplish was to offer a method of bypassing link lists (as is recommended, actually). Something like this.

Lists Example

Offset Sidebar Menu

Visible Link List One

Visible Link List Two

Here’s the markup:

 <!--this heading and list wouldn’t be visible-->
 <h4 class="offset" id="sbmenu">Offset Sidebar Menu</h4>
  <ul class="offset">
   <li><a href="#list1">To Visible Link List One</a></li>
   <li><a href="#list2">To Visible Link List Two</a></li>

 <h4 id="list1">Visible Link List One</h4>
   <li><a href="#">Listed Link One</a></li>
   <li><a href="#">Listed Link Two</a></li>
   <!--this link wouldn’t be visible-->
   <li class="offset"><a href="#sbmenu"><small>Offset Menu Link</small></a></li>

 <h4 id="list2">Visible Link List Two</h4>
   <li><a href="#">Listed Link One</a></li>
   <li><a href="#">Listed Link Two</a></li>
   <!--this link wouldn’t be visible-->
   <li class="offset"><a href="#sbmenu"><small>Offset Menu Link</small></a></li>

The actual lists are greater in number and much longer than what I show here — as is true of most web logs — so I felt offering a bypass method would be beneficial. It wasn’t, though. The process failed miserably during testing. The reason was the links weren’t brought into view so when tabbing through the site one would be suddenly whisked away some 9000 pixels off screen. Going through the sidebar lists ended up bouncing the user back and forth in a most unfriendly way. The idea was scrapped, but I didn’t stop thinking about it. How, I wondered, does one offer the convenience of these links without creating even more visible links on the sidebar and with sending the user all over the place?


One solution someone might come up with is using the CSS display property none. I didn’t even consider this myself, but it should be brought up in this article if only to point out why it shouldn’t be used. The answer is short and to the point. Elements given the display property “none” won’t be usable to screen reader users who have their screen readers attached to a visual browser that supports style sheets. It’d be fine for the text browser user, but as you can see it’s not a complete solution.

Not to say there isn’t a need for display:none. It’s a fine method of communicating something you want available to those without style sheets. Case in point, on my GreenMethods.com site, on the upper navigational links, if you have styles off, you’ll find a link that has display:none applied to it. The text on this link is “Missing Page Styles?” and it leads to a text file explaining styles, or the lack thereof. This isn’t information I want to communicate to anyone except those without styles. This is an ideal usage of this display property.

Hiding with Color

Taking into consideration all I know reveals two potential solutions. One idea is to bring the links into view when focused on, but this involves a lot of tricky styling to get it right on all platforms, with all visual browsers, using absolute positioning. The other feasible method is to hide the links with a chameleon technique: hiding them by coloring them to blend into the background. This can be done with minimal styling, like so (let’s say the background color is white or #fff):

 h4.blend {
   color : #fff;

 li.blend {
  list-style-type : none;

 li.blend a, li.blend a:hover, li.blend a:visited, li.blend a:visited:hover {
   color : #fff;

 li.blend a:focus, li.blend a:active, li.blend a:visited:focus, li.blend a:visited:active {
   color : #000;
   background-color : yellow;

In this example I add to those hidden links a class called “blend,” (via the list item element) to make them the same color as the background, then on focus (or active for Internet Explorer), I give them a visible link color with a noticeable contrasting background color.

Questions Upon Questions

The big drawback to this is the gaps created since the links are still there in position all the time. Otherwise it’s an ideal method. The links are removed visually to keep unnecessary clutter to a minimum, yet make them available to those who might need them. But this is still up in the air; I’m still entertaining other possible ideas. I don’t want the layout to change abruptly so using a technique such as forcing them to a height of one pixel with the overflow property hidden is undesirable.

I’m still considering what might be best. I haven’t implemented anything as of yet. I’m being cautious since the first attempt was such a failure. I know some developers will suggest I stop playing games and just make them visible, while others will say don’t worry about it. To the former group I beg you to consider design and clutter — sidebars with a lot of links can be congested enough without adding to it. To the latter group I ask that you tab through my sidebar’s, discover how tedious it can be, then imagine having to do that because you don’t have a mouse.

It’s a tough call but despite the gaps (which will look like whitespace), I’m leaning toward the blended approach thinking it might be the best of all worlds. What’s your take on the subject?

To learn more about the “offset” technique, since I don’t really explain it here, check out the articles “Hidden Focal Navigation” and “Offset Class Jump Links.”

5 Responses to: “Enhancing Accessibility with Offsets, Cautiously”

  1. John Faulds responds:
    Posted: February 25th, 2007 at 8:44 pm

    I think you might find you run into trouble with Google with your same colour as background method, Mike.

  2. Georg responds:
    Posted: February 25th, 2007 at 9:37 pm

    You can’t just position them back ‘on screen’ when they receive focus?

    Come to think of it; they won’t even have to be ‘off screen’ in the first place, as you can position a number of links in the same one-link space, and z-index them on top one by one as they receive focus.

  3. Joe Dolson responds:
    Posted: February 26th, 2007 at 12:22 pm

    I certainly see where you’re coming from… I loathe my own sidebar menu. Coming up with a workable way of navigating a sidebar which contains archives, current posts, a blogroll, and any other important information is quite a headache even for visual users!

    I’m sitting on the keep ‘em visual side of the fence this week, but it wouldn’t be a first for me to change my mind…

    I wish that keyboard navigation was a bit richer - just tabbing is quite tedious. Opera has a much more fluid system, but can’t really be counted on since it also has very low market penetration. If the screen reader ability to navigate from header to header would be introduced into visual browsers as a keyboard navigation method that would really help belay this problem!

  4. Georg responds:
    Posted: February 27th, 2007 at 6:25 am

    Maybe I’m overlooking something that really do make mowing in and out of view tricky in your case(s), but…

    Positioning relative to the ul instead of to the page, should make both methods work much like a drop-down, but one that is self-activated instead of relying on activation through its parent.
    The only difference is that there’s only one list-item/link visible at any one time, and that it ends up visible at the bottom of, or below, the ul - in a prepared space.

    Preparing a suitable - one list-item - space by padding the bottom of an ul or adding a margin-bottom to it, wouldn’t create much “empty” space.
    I’d prefer to go below the ul, because it’s much easier to position the “jumping” links visually stable by using ‘top: 100%’ instead of ‘bottom: 0;’ in cases where a list-item wraps into two or more lines.

    So, what am I missing here..?

Sorry. Comments are closed.

Note: This is the end of the usable page. The image(s) below are preloaded for performance only.