Accessibility Trick: The real yet fake yet real <label>

Wednesday, March 26, 2008

In my post last week I mentioned that we've been spending a lot of time working on Section 508 compliance on my primary contract and today's post is something of an extension of that. Today I'm going to show you a little trick that I created as a work-around for accessibility testing software that tosses off errors (false positives) for having a properly coded and accessible image as a <label> for a form control. Warning - if you're not a web designer and/or don't deal with Section 508 or WCAG, you might want to skip this post. It's a tad technical for the general public.

So, here's your situation: You have a website that has a search box, but because of the design of the site and the way things are setup (i.e. space is an issue), there really isn't a good place to put a <label> to associate to the search box. You literally have a box that the control is in, the form element, and a submit button. The box that the form element sits in has a graphical title (like "Search This Site") that has a proper alt tag and is declared in the correct fashion. To be 508 compliant, your <label> has to be associated with your form element. In this case it's an <input> tag with the attribute type="text", so it's a regular text box. Here's a visual example of this situation:

As you can see, this is a basic page element and can be moved around anywhere in the page. In the case of this example, we use it at the same place on every page - on the left side, at the very top of the content section, just after the site header and universal navigation. This search box appears on just about every page on the site, and it's actually a user control, so the code is exactly the same for it on every page it's used on. That means that if we change this one file, that change is applied in every instance of that user control on the website.

If we were to wrap our <label> element around the image, when you put it through a thorough 508 validator, such as AccVerify, it would come out as a "Priority 1" error and would not be 508 compliant. Unfortunately, because there's really no space to fit a proper text label, I had to come up with a creative work around. Here it is:

A <label for=""> element wrapped around a <span> element that contains appropriate label text but is hidden from the users view (but is fully viewable and accessible by folks using Braille and text readers).

Here's the example:

Basically, what we've done is we've wrapped the <label> element around appropriate text inside of a <span> (inline element). The <span> has a class of "hideForPrint". This css class looks like this:

What that class does is it hides whatever is contained in that class from being seen on screen. However, when you are using a Braille or screen reader - both of which ignore CSS and simply read the content on the page - it correctly displays and associates the form control with the appropriate label. Here's what it looks like with CSS disabled:

Thus, we have an amazing, invisible work-around for any form label 508 issues that occur that will fix any validation issues you have! Huzzah!

Technorati Tags: Section 508, Web Design, Accessibility, WCAG, Web Standards.

• Permanent Link
• Comments [2]