Beast-Blog.com
Enhancing Accessibility with Offsets, Cautiously

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

• To Visible Link List One
• To Visible Link List Two

Visible Link List One

• Listed Link One
• Listed Link Two
• Offset Menu Link

Visible Link List Two

• Listed Link One
• Listed Link Two
• Offset Menu Link

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>
  </ul>

 <h4 id="list1">Visible Link List One</h4>
  <ul>
   <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>
  </ul>

 <h4 id="list2">Visible Link List Two</h4>
  <ul>
   <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>
  </ul>

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?

Display:None

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.”

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? »

Hidden Focal Navigation »

HTML or XHTML+XML »