WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hiding Legends

for

From: Dean Hamack
Date: Oct 16, 2008 6:10PM

OK, first and foremost, let's go back to my original question:

"Are there known issues with (hiding) legends?"

A few people were gracious enough to answer the question. But others ignored
the question and instead questioned my motives. I didn't ask if it was a
good idea, I asked how to do it.

Secondly, I hardly think "you've lost all credibility on this issue",
constitutes a personal attack. Jukka didn't bother to read the previous
posts and offered opinions on a topic he hadn't versed himself on
beforehand.

Obviously, the only way I'm going to be able to illustrate why you would
want to hide legends for sighted users is with a live example. So here you
go:

http://www.bushidodesigns.net/form1.htm

Yes, it looks atrocious. But I've been in this business for ten years, and
believe me, I've seen worse looking comps from designers.

I wholeheartedly agree that it's better to use text instead of images. But I
can tell you from personal experience I have fought that battle with
business people and designers before, and it's a battle you will never win.
It might work with Joe The Plumber, but it won't work with someone like
Amazon, Microsoft, or Facebook. Big companies care about two things -
aesthetics, and speed. Accessibility and best practices are secondary.

The above example is 100% valid XHTML, uses best practices (css image
sprites, semantic markup, etc.), looks exactly the same on
IE/Firefox/Safari, and degrades beautifully for print and mobile devices.
And according to Total Valuator, it rates "Level A" Conformance to Web
Content Accessibility Guidelines.

If I would have used hardcoded images for the headers and asterisks (as
others suggested), I would have violated best practices (don't use hardcoded
images for aesthetic items), would have tripled the number of images on the
page, and would have lost the ability to optimize the layout for print and
mobile devices.

Let me give you a second real-life example that just occurred to me today
where I had to hide a legend:

I was given a comp for a search results page. At the top of the results were
two pulldown menus that users' could use to sort the list of results. The
design specs were such that it was impossible to use a legend for the words
"sort by", because the words, labels, and pulldown menus were all inline. A
sighted user would have easily been able to figure out what the pulldown
menus were for based on the visual context of the layout. But a blind user
with a screenreader would not have.

In that case, I used "display:none" for the legend, because I was under the
mistaken impression at the time that screenreaders would still pick it up.
That was before I discovered this great site and forum, and now I know
better.

So if someone has the ability to test my form on a few different
screenreaders and give us a definitive answer as to whether or not the
negative text indent still gets read, we can put this issue to rest and move
on.