E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Hiding Legends

Number of posts in this thread: 47 (In chronological order)

From: Dean Hamack
Date: Wed, Oct 15 2008 2:50PM
Subject: Hiding Legends
No previous message | Next message →

Working on a form now and am having trouble hiding the legend. I have it set
up in the usual way:

legend {position:absolute;left:0px;top:-500px;height:1px;
font-size:1px;overflow:hidden}

It's 1 pixel tall, but it's staying right where it is and it's visible on
screen.

Are there known issues with legends?

From: Dean Hamack
Date: Wed, Oct 15 2008 3:10PM
Subject: Re: Hiding Legends
← Previous message | Next message →

I'm having the issue in Firefox. Works fine in Safari. Haven't looked at IE.

On 10/15/08 2:04 PM, "Tim Beadle" < = EMAIL ADDRESS REMOVED = > wrote:

> On Wed, Oct 15, 2008 at 9:48 PM, Dean Hamack < = EMAIL ADDRESS REMOVED = > wrote:
>> Working on a form now and am having trouble hiding the legend. I have it set
>> up in the usual way:
>>
>> legend {position:absolute;left:0px;top:-500px;height:1px;
>> font-size:1px;overflow:hidden}
>>
>> It's 1 pixel tall, but it's staying right where it is and it's visible on
>> screen.
>>
>> Are there known issues with legends?
>
> Which browser? IE in particular has trouble styling legends, from experience.
>
> Tim
>

From: Moore, Michael
Date: Wed, Oct 15 2008 3:20PM
Subject: Re: Hiding Legends
← Previous message | Next message →

I have found that the best way to overcome styling problems with legends
is to place the content for the legend inside of a span then do what you
want with the span.

<legend><span class="fixLegend">My content here</span></legend>

I have tested this method with FireFox, IE and Opera but not Safari, and
found that it helps resolve positioning and wrapping issues with
legends.

Mike Moore

From: Dean Hamack
Date: Wed, Oct 15 2008 3:30PM
Subject: Re: Hiding Legends
← Previous message | Next message →

Hi Jukka,

Responses inline.

On 10/15/08 2:07 PM, "Jukka K. Korpela" < = EMAIL ADDRESS REMOVED = > wrote:

> Why do you want to hide it, and how is this an accessibility issue? (Hiding
> the legend does not sound to _improve_ accessibility.)

Because legends generally aren't necessary for sighted people. They are
necessary for blind people when there are multiple fields with similar
labels.

Read this article:

http://www.sitepoint.com/article/fancy-form-design-css/

> I don't think there's nothing usual there.

Guess you're new around here. That's the way we hide elements for
accessibility:

http://webaim.org/techniques/css/invisiblecontent/

> But if you really want to hide legend elements, why don't you use just
> legend { display: none; }

Because that's not accessible. See the above article.

From: Jared Smith
Date: Wed, Oct 15 2008 3:40PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On Wed, Oct 15, 2008 at 2:48 PM, Dean Hamack wrote:
> Working on a form now and am having trouble hiding the legend.

Try using text-indent:-999px;padding:0; This seems to work in Firefox
and IE6. Form styling in browsers generally sucks.

Why are you hiding the legend anyway? If the legend is hidden and the
content is still visually accessible, then why would it not also make
sense without the legend for a screen reader user? I'm struggling to
think of a case where providing a legend to screen reader users, but
hiding it from sighted users would be useful.

Jared Smith
WebAIM

From: Dean Hamack
Date: Wed, Oct 15 2008 3:50PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On 10/15/08 2:22 PM, "Jared Smith" < = EMAIL ADDRESS REMOVED = > wrote:

> Why are you hiding the legend anyway? If the legend is hidden and the
> content is still visually accessible, then why would it not also make
> sense without the legend for a screen reader user? I'm struggling to
> think of a case where providing a legend to screen reader users, but
> hiding it from sighted users would be useful.

Getting legends to style properly is a nightmare. In the past I've spent
hours going back and forth trying to get them to look like comps on all
browsers and it never works. So I figure it's easier to just hide them, and
use something else (span, image, etc.) to create the desired visual effect.
That makes the designers happy, while still keeping the forms accessible.

Do we know it the negative text indent trick works with all screenreaders?
How about "visibility: hidden"?

From: Jared Smith
Date: Wed, Oct 15 2008 4:00PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On Wed, Oct 15, 2008 at 3:24 PM, Dean Hamack < = EMAIL ADDRESS REMOVED = > wrote:
>> Why do you want to hide it, and how is this an accessibility issue? (Hiding
>> the legend does not sound to _improve_ accessibility.)
>
> Because legends generally aren't necessary for sighted people. They are
> necessary for blind people when there are multiple fields with similar
> labels.

I'm going to try and sneak in a word here before Jukka goes to town on you. :-)

Could you describe the example you are working on. As I noted before,
if the grouped form elements make sense without a visual legend, then
why provide that legend to screen reader users? And on the flipside,
if the legend is necessary for accessibility, why are you not
displaying it? If you are merely trying to add a border to elements to
provide a visual grouping, use border, not fieldset/legend.

The legend is read for EVERY form element within that fieldset. This
means that they really should only be used when a clear grouping is
present AND when the grouping requires a distinct header to
differentiate that grouping of elements from others. They should
really be used with care.

> Read this article:
>
> http://www.sitepoint.com/article/fancy-form-design-css/

There's nothing in that article that indicates that legend is
unnecessary for visual users. In fact, it says just the opposite.

> Guess you're new around here. That's the way we hide elements for
> accessibility:
>
> http://webaim.org/techniques/css/invisiblecontent/

LOL. Jukka was around before most of us even heard about
accessibility. In fact, I think he was one of the first dozen or so
subscribers to this list - sometime in 2000 or early 2001.

>> But if you really want to hide legend elements, why don't you use just
>> legend { display: none; }
>
> Because that's not accessible. See the above article.

I think his point is the same one I am making - if it's unnecessary,
then why force it on screen reader users?

Jared Smith
WebAIM

From: Tim Beadle
Date: Wed, Oct 15 2008 4:10PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On Wed, Oct 15, 2008 at 10:57 PM, Dean Hamack < = EMAIL ADDRESS REMOVED = > wrote:
> As far as the other questions, I think I answered those already. If a
> designer gives you a comp that shows a header in a non-common font, you
> create a background image out of it, hide the text header for blind users,
> and use the background image for sighted users. Why would this be any
> different with legends?
>
> In the current form I'm working on, the fieldset and legend aren't even
> really necessary. So I'm figuring this out more for future use than anything
> else.

At some point you have to accept that different browsers have
different capabilities. IE6 isn't as capable as Firefox, Safari and
Opera (or other browsers using the same rendering engines) and web
sites don't have to look the same in every browser. Right?

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Tim

From: Dean Hamack
Date: Wed, Oct 15 2008 4:20PM
Subject: Re: Hiding Legends
← Previous message | Next message →

Actually, I'll restate that and say "legends aren't ALWAYS necessary for
sighted people"

Oh, and I'm new around here too, so that wasn't meant to be an insult :)

On 10/15/08 2:24 PM, "Dean Hamack" < = EMAIL ADDRESS REMOVED = > wrote:

> Because legends generally aren't necessary for sighted people. They are
> necessary for blind people when there are multiple fields with similar
> labels.

From: Keith Parks
Date: Wed, Oct 15 2008 4:30PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On Oct 15, 2008, at 1:48 PM, Dean Hamack wrote:

> Working on a form now and am having trouble hiding the legend. I
> have it set
> up in the usual way:
>
> legend {position:absolute;left:0px;top:-500px;height:1px;
> font-size:1px;overflow:hidden}
>
> It's 1 pixel tall, but it's staying right where it is and it's
> visible on
> screen.

(Assuming you don't get talked out of the whole idea by Yukka... ;^)

I think you're using more tricks than are necessary. And your
positioning spec's could be being influenced by its containing
elements, etc.

Typically I find negative margin to be reliable, so something like...

legend { position: absolute; width: 100px; overflow:hidden; margin-
left: -500px; }
fieldset { position: relative; }

The width and overflow settings are just back-ups, which would only
come into play if you have a lot of text in your legend.

My 2¢,

Keith

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: = EMAIL ADDRESS REMOVED =
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

World Peace through Cascading Style Sheets.

From: Dean Hamack
Date: Wed, Oct 15 2008 4:40PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On 10/15/08 3:05 PM, "Tim Beadle" < = EMAIL ADDRESS REMOVED = > wrote:

> At some point you have to accept that different browsers have
> different capabilities. IE6 isn't as capable as Firefox, Safari and
> Opera (or other browsers using the same rendering engines) and web
> sites don't have to look the same in every browser. Right?

Absolutely. But when you work with design teams and business people, you
have to do everything in your power to *try* to make things look the same on
all browsers.

Sadly, the reality is that most companies care very little about
accessibility and a whole lot about aesthetics. I've sat in board rooms and
heard things like, "why would blind people want to use the internet?"

From: Dean Hamack
Date: Wed, Oct 15 2008 4:50PM
Subject: Re: Hiding Legends
← Previous message | Next message →

Thanks, I'll give that a shot.

On 10/15/08 2:14 PM, "Moore, Michael" < = EMAIL ADDRESS REMOVED = >
wrote:

> I have found that the best way to overcome styling problems with legends
> is to place the content for the legend inside of a span then do what you
> want with the span.
>
> <legend><span class="fixLegend">My content here</span></legend>

From: Tim Beadle
Date: Wed, Oct 15 2008 5:00PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On Wed, Oct 15, 2008 at 9:48 PM, Dean Hamack < = EMAIL ADDRESS REMOVED = > wrote:
> Working on a form now and am having trouble hiding the legend. I have it set
> up in the usual way:
>
> legend {position:absolute;left:0px;top:-500px;height:1px;
> font-size:1px;overflow:hidden}
>
> It's 1 pixel tall, but it's staying right where it is and it's visible on
> screen.
>
> Are there known issues with legends?

Which browser? IE in particular has trouble styling legends, from experience.

Tim

From: Dean Hamack
Date: Wed, Oct 15 2008 5:10PM
Subject: Re: Hiding Legends
← Previous message | Next message →

> Dean, Jukka Korpela has been writing about and contributing to web
> accessibility forums and list-serves since back when Netscape 3 ruled the
> world. Far from being new, he is one of the pioneers in the field, and a
> long-time contributor to this and other lists. A quick check of the W3C
> WAI-IG list shows he first posted there in February 2002, and was already
> well acquainted with adaptive technology and web accessibility then while
> working as a senior advisor to the Finnish Information Society Development
> Centre:
> http://lists.w3.org/Archives/Public/w3c-wai-ig/2002JanMar/0999.html

Sorry, I just assumed since he clearly hadn't read the article on hiding
things accessibly on the WebAim site, he was new. My mistake.

As far as the other questions, I think I answered those already. If a
designer gives you a comp that shows a header in a non-common font, you
create a background image out of it, hide the text header for blind users,
and use the background image for sighted users. Why would this be any
different with legends?

In the current form I'm working on, the fieldset and legend aren't even
really necessary. So I'm figuring this out more for future use than anything
else.

From: Jukka K. Korpela
Date: Wed, Oct 15 2008 5:20PM
Subject: Re: Hiding Legends
← Previous message | Next message →

Dean Hamack wrote:

> Working on a form now and am having trouble hiding the legend.

Why do you want to hide it, and how is this an accessibility issue? (Hiding
the legend does not sound to _improve_ accessibility.)

> I have
> it set up in the usual way:
>
> legend {position:absolute;left:0px;top:-500px;height:1px;
> font-size:1px;overflow:hidden}

I don't think there's nothing usual there.

> It's 1 pixel tall,

Is it? What if the browser has a minimum font size set, for example? And why
would its size matter if you abs. position it somewhere outside the canvas?

> but it's staying right where it is and it's
> visible on screen.

That's to be expected often, according to the usual CSS Caveats, see
http://www.cs.tut.fi/~jkorpela/css-caveats.html

On the other hand, your code "works" on my browser right now. Maybe you have
something wrong on your page (even apart from trying to hide the legend...).

But if you really want to hide legend elements, why don't you use just
legend { display: none; }
?

> Are there known issues with legends?

Surely. Some people try to hide them, for example. :-) Another problem is
that people write too long legends, e.g. put a long question there, instead
of using the (somewhat misnamed) legend element in the sensible way: as a
heading for a fieldset.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: Tim Beadle
Date: Wed, Oct 15 2008 5:30PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On Wed, Oct 15, 2008 at 10:35 PM, Dean Hamack < = EMAIL ADDRESS REMOVED = > wrote:
> Oh, and I'm new around here too, so that wasn't meant to be an insult :)

Jukka is anything but new around here. You have to have a debate with
him. It's part of the WebAIM Initiation Ceremony :)

(No offence intended, Jukka!)

Tim

From: John Foliot
Date: Wed, Oct 15 2008 5:40PM
Subject: Re: Hiding Legends
← Previous message | Next message →

Dean Hamack wrote:
>
> Hi Jukka,
>
> Because legends generally aren't necessary for sighted people. They are
> necessary for blind people when there are multiple fields with similar
> labels.
>
> Read this article:
>
> http://www.sitepoint.com/article/fancy-form-design-css/

Hmm... far from definitive, and not universally agreed upon. I side with
Jared and Jukka here, if there is a reason to provide a legend, why must
you hide it from the sighted - would it not, for example, also be
beneficial to those with diminished cognitive capacity?

>
> > I don't think there's nothing usual there.
>
> Guess you're new around here. That's the way we hide elements for
> accessibility:

Dean, Jukka Korpela has been writing about and contributing to web
accessibility forums and list-serves since back when Netscape 3 ruled the
world. Far from being new, he is one of the pioneers in the field, and a
long-time contributor to this and other lists. A quick check of the W3C
WAI-IG list shows he first posted there in February 2002, and was already
well acquainted with adaptive technology and web accessibility then while
working as a senior advisor to the Finnish Information Society Development
Centre:
http://lists.w3.org/Archives/Public/w3c-wai-ig/2002JanMar/0999.html

JF

From: Karl Groves
Date: Wed, Oct 15 2008 6:00PM
Subject: Re: Hiding Legends
← Previous message | Next message →

> In the current form I'm working on, the fieldset and legend aren't even
> really necessary. So I'm figuring this out more for future use than
> anything
> else.
>

That depends on the elements which are being grouped. I'd definitely
consider a fieldset & legend required for groups of radio buttons.

Karl Groves
AIM/YIM: karlcore
Skype: eight.pistons

From: Dean Hamack
Date: Wed, Oct 15 2008 6:50PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On 10/15/08 4:51 PM, "Karl Groves" < = EMAIL ADDRESS REMOVED = > wrote:

> That depends on the elements which are being grouped. I'd definitely
> consider a fieldset & legend required for groups of radio buttons.

Interesting. I haven't seen that done. I thought simply using a label with
an id was sufficient. If that's the case, I can definitely see the need to
hide legends. Do you have an example of how you've used it with groups of
radio buttons?

From: Jared Smith
Date: Wed, Oct 15 2008 7:50PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On Wed, Oct 15, 2008 at 6:43 PM, Dean Hamack < = EMAIL ADDRESS REMOVED = > wrote:
> If that's the case, I can definitely see the need to
> hide legends. Do you have an example of how you've used it with groups of
> radio buttons?

Here's a basic example:

Is accessibility cool?

* Yes
* No

In this case, the form elements and labels do not make sense alone
without the accompanying legend ("Is accessibility cool?"). I think
you'll notice that this is the case for almost all radio buttons and
most groups of check boxes. As before, the legend should not be hidden
in this or nearly any other case.

There are several other instances of this, with accompanying code, at
http://webaim.org/techniques/forms/controls.php

There are a few cases where grouped radio buttons or check boxes
wouldn't need a fieldset/legend, but only when the individual elements
make very clear sense without them. Radio buttons for gender, for
example, would not necessarily require a legend.

Am I understanding correctly that you are simply doing an image
replacement for a graphical label? In other words, you have a graphic
from the design people that you're trying to put into the label? If
this is the case, why not just put the image in the legend and give it
appropriate alt text? This would certainly be easier, better, and more
semantically appropriate than doing complex image replacement.

Jared Smith
WebAIM

From: Dean Hamack
Date: Wed, Oct 15 2008 8:20PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On 10/15/08 6:46 PM, "Jared Smith" < = EMAIL ADDRESS REMOVED = > wrote:

> There are several other instances of this, with accompanying code, at
> http://webaim.org/techniques/forms/controls.php

Thanks, I'll check that out.

> Am I understanding correctly that you are simply doing an image
> replacement for a graphical label? In other words, you have a graphic
> from the design people that you're trying to put into the label? If
> this is the case, why not just put the image in the legend and give it
> appropriate alt text?

Argh, absolutely not!

Images should ONLY be hardcoded into the page when they are part of the
content, such as a profile photo, a photo in a person's gallery, etc. When
you hardcode images into the page you:

A) lose the ability to use image sprites and thereby increase the number of
images in your site and your load time

B) lose the ability to tailor your site for print media or mobile devices

C) dramatically increase the amount of time it takes to change the look and
feel of your site at a later date

These are not issues with most small sites. But when you work on massive
fortune 500 company sites as I often do, it's a big issue. I use as few
images as possible and CSS for almost everything.

From: Korpela Jukka
Date: Thu, Oct 16 2008 1:40AM
Subject: Re: Hiding Legends
← Previous message | Next message →

Dean Hamack wrote:

>> Why do you want to hide it, and how is this an accessibility issue?
>> (Hiding
>> the legend does not sound to _improve_ accessibility.)
>
> Because legends generally aren't necessary for sighted people.

That's an odd idea. If grouping fields in fieldsets with headings, or
"legends", is useful in the first place, why would those headings
magically become useless if you can see them?

> They are
> necessary for blind people when there are multiple fields with similar
> labels.

Another odd idea. Fieldsets, with legends, should be used for useful
grouping that helps everyone to understand the structure and meaning. They
should not be used as tricks.

> Read this article:
>
> http://www.sitepoint.com/article/fancy-form-design-css/

Looks like styling of forms in CSS. Nothing specifically
accessibility-related, and I didn't find anything about hiding legends. I
admit I did not read that carefully, since I think I know CSS pretty well
(and I would first consult my own book on CSS if I needed to recollect
things...).

>> I don't think there's nothing usual there.
>
> Guess you're new around here. That's the way we hide elements for
> accessibility:
>
> http://webaim.org/techniques/css/invisiblecontent/

That's nothing usual. It might be popular among some fraction of misguided
accessibility enthusiasts. Writing separate code with different tricks for
different assumed modes of browsing tends to lead to confusion, just like
writing separate code for different browsers does. We might sometimes be
forced to such things, but it should be the last resort and nothing to be
proud of - and surely nothing to be advocated as "usual".

>> But if you really want to hide legend elements, why don't you use just
>> legend { display: none; }
>
> Because that's not accessible.

Of course it's "not accessible", but that's because the very idea of
hiding legends isn't.

You probably mean that it hides legends too well, i.e. performs what you
asked for instead of what you meant.

But if you ask how to hide an element, don't look so surprised if someone
suggests a very simple, effective method for doing it.

Yucca

From: Tim Beadle
Date: Thu, Oct 16 2008 3:30AM
Subject: Re: Hiding Legends
← Previous message | Next message →

On Thu, Oct 16, 2008 at 3:12 AM, Dean Hamack < = EMAIL ADDRESS REMOVED = > wrote:
> Argh, absolutely not!
>
> Images should ONLY be hardcoded into the page when they are part of the
> content, such as a profile photo, a photo in a person's gallery, etc. When
> you hardcode images into the page you:
>
> A) lose the ability to use image sprites and thereby increase the number of
> images in your site and your load time
>
> B) lose the ability to tailor your site for print media or mobile devices
>
> C) dramatically increase the amount of time it takes to change the look and
> feel of your site at a later date
>
> These are not issues with most small sites. But when you work on massive
> fortune 500 company sites as I often do, it's a big issue. I use as few
> images as possible and CSS for almost everything.

While I agree with you on a theoretical level, this is one of those
battle plans that don't survive first contact with the enemy (in this
case, the browser). Sometimes it's more accessible, and simpler, just
to use an img element. (We had this discussion re. asterisks to
indicate "required field" only last week, and I posted a link to
Natalie Downe's presentation-plus-notes from BarCampLondon5:
http://webaim.org/discussion/mail_message.php?id=11951

It might seem offensive to purist sensibilities, but I've got to the
point where theory doesn't matter *as much as* what works for the
user. Sometimes you've got to be pragmatic.

Tim

From: Dean Hamack
Date: Thu, Oct 16 2008 10:50AM
Subject: Re: Hiding Legends
← Previous message | Next message →

On 10/16/08 2:24 AM, "Tim Beadle" < = EMAIL ADDRESS REMOVED = > wrote:

> (We had this discussion re. asterisks to
> indicate "required field" only last week, and I posted a link to
> Natalie Downe's presentation-plus-notes from BarCampLondon5:
> http://webaim.org/discussion/mail_message.php?id=11951

I remember the discussion and failed to see a compelling argument as to why
images needed to be used instead of some of the other methods that were
suggested. For example, even though I don't consider "*" to be an acronym or
an abbr, if the screenreader will speak "required field" for the title, I
think it's the lesser of two evils.

> It might seem offensive to purist sensibilities, but I've got to the
> point where theory doesn't matter *as much as* what works for the
> user.

The method I'm suggesting in this case would work fine for all users while
still following best practices. In the case of using an image for required
fields, it works great for completely blind users. But what happens when
someone with bad vision who has their their font size turned up can't see
your little ten pixel tall asterisk?

I've got to run off for a meeting, but since people are having a hard time
envisioning what I'm talking about here, I'll post a sample when I get back.
The negative margin idea suggested worked fine for hiding the legend. So as
long as the screenreader can still pick it up, I see no problem with it
whatsoever.

From: Dean Hamack
Date: Thu, Oct 16 2008 11:00AM
Subject: Re: Hiding Legends
← Previous message | Next message →

On 10/16/08 12:30 AM, "Korpela Jukka" < = EMAIL ADDRESS REMOVED = > wrote:

> Looks like styling of forms in CSS. Nothing specifically
> accessibility-related, and I didn't find anything about hiding legends. I
> admit I did not read that carefully, since I think I know CSS pretty well
> (and I would first consult my own book on CSS if I needed to recollect
> things...).

Obviously you didn't read it very carefully since the very first heading in
the article is: "Accessible Form Markup"

> That's nothing usual. It might be popular among some fraction of misguided
> accessibility enthusiasts.

A fraction of misguided enthusiasts? That article was written by the very
same people who host this list! And the reason that technique was suggested
instead of the other techniques is that it's the only one that works across
all screenreaders.

> Of course it's "not accessible", but that's because the very idea of
> hiding legends isn't.

Wow, you really don't bother to read anything before responding, do you?

I gave a perfectly valid example of why you would want to hide a legend from
a sighted person, but not a screenreader. Sorry, but you've lost all
credibility in this discussion.

> You probably mean that it hides legends too well, i.e. performs what you
> asked for instead of what you meant.

No, what I meant is that it hides the legends from screenreaders as well as
browsers.

From: Karl Groves
Date: Thu, Oct 16 2008 11:30AM
Subject: Re: Hiding Legends
← Previous message | Next message →

From: Jared Smith
Date: Thu, Oct 16 2008 12:00PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On Thu, Oct 16, 2008 at 10:58 AM, Dean Hamack < = EMAIL ADDRESS REMOVED = > wrote:
> On 10/16/08 12:30 AM, "Korpela Jukka" < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Looks like styling of forms in CSS. Nothing specifically
>> accessibility-related, and I didn't find anything about hiding legends. I
>> admit I did not read that carefully, since I think I know CSS pretty well
>> (and I would first consult my own book on CSS if I needed to recollect
>> things...).
>
> Obviously you didn't read it very carefully since the very first heading in
> the article is: "Accessible Form Markup"

First of all, let's tone down the rhetoric and personal attacks. They
have no place here and will not be tolerated.

Jukka and the rest of us are simply pointing out that this article
does not advocate or even suggest hiding legends. Yes, it's about
accessibility of forms, but you seem to be making a connection between
this article and your incessant desire to hide the legend. We just
don't see that connection and can't understand why you keep
referencing it in this context.

>> That's nothing usual. It might be popular among some fraction of misguided
>> accessibility enthusiasts.
>
> A fraction of misguided enthusiasts? That article was written by the very
> same people who host this list! And the reason that technique was suggested
> instead of the other techniques is that it's the only one that works across
> all screenreaders.
>
>> Of course it's "not accessible", but that's because the very idea of
>> hiding legends isn't.
>
> Wow, you really don't bother to read anything before responding, do you?

Please reread the WebAIM article. You'll see we point out that
implementing this approach of hiding content is not to be taken
lightly. There are a few instances where it might be used, but those
cases are few and far between. We're simply saying that in this case,
it is probably not a good use of hidden text.

> I gave a perfectly valid example of why you would want to hide a legend from
> a sighted person, but not a screenreader.

Have you? I've yet to see one. If you want to use image replacement
because you are a purist and adamant that all images except for
content conveying photos belong in CSS, that's fine. But don't claim
that hiding the legend from visual users is an accessibility
enhancement. An image with alt text would be better in this case.

I'm still waiting to see exactly what you are trying to accomplish.
Until then, we can only go off of what you've said - and that is 1)
That hiding legends from sighted users but forcing it upon screen
reader users is OK, and 2) that it is better to do image replacement
for an image legend rather than simply adding alt text to it. I
disagree with both of these points.

Jared Smith
WebAIM

From: Moore, Michael
Date: Thu, Oct 16 2008 12:50PM
Subject: Re: Hiding Legends
← Previous message | Next message →

If I understand Dean correctly, he is employing image replacement to
provide a text alternative for a legend that is provided to visual users
through an image that is delivered through CSS.

Here are the problems that I see with that and most other image
replacement techniques.

1. If for some reason, bandwidth, aggressive add blocking, or a missing
file, the CSS file but not the image is delivered to the user, the text
is lost.

2. If the user is using a screen magnifier, browser magnification, or
operating system magnification, it is very likely that the image of text
will be unreadable due to pixilation. This can be mitigated with SFIR
but at a cost of complex implementation and bandwidth.

3. If the user requires a larger font size, the content delivered
through the image will not be enlarged with the rest of the text.

4. Frequently, though perhaps not in this context, color and contrast
are an issue within text delivered as an image.

The picture that Dean may be missing is that accessibility is not
synonymous with screen reader compatibility. This is a very common
misconception, and understandable since many of us use a screen reader
as one of our testing or demonstration tools.

My opinion is that images should only be used to deliver text in limited
circumstances. Acceptable examples: Logo's, advertising slogans, and in
limited circumstances navigation bars and headings. In all cases the
images should be tested to ensure that they do not become seriously
pixilated under moderate magnification, I test at 5X, the font should be
at least 2X the size of the body text on the page, and the contrast
ratio should be at least 5:1 between the foreground and background of
the image. I realize that frequently the company logo will not meet this
requirement and is non-negotiable, I also feel that alt="" is usually
appropriate for the logo anyway.

When placing an image of text on a page as a background using CSS, the
first question that you need to ask yourself is "Self, would my client,
his customer, or I care if that image was missing?" If your answer is
no, what the heck, drop it in. Otherwise use real text (preferred) or an
image with an alt attribute that delivers the text.

Mike

From: Jukka K. Korpela
Date: Thu, Oct 16 2008 1:10PM
Subject: Re: Hiding Legends
← Previous message | Next message →

Dean Hamack wrote:

> Wow, you really don't bother to read anything before responding, do
> you?

I don't read your future postings when responding to a message of yours.

> I gave a perfectly valid example of why you would want to hide a
> legend from a sighted person, but not a screenreader.

You did? Sorry, I missed it, maybe because you didn't give it originally,
maybe because there has been so much noise in this discussion. I'm not
asking you to repeat it, though, and I won't look at the list archives just
to see whether you had some case.

And I still don't see why hiding some elements is an accessibility issue
when you were not giving any particular reason why it would improve
accessibility.

> Sorry, but
> you've lost all credibility in this discussion.

Fine. I'm happy to have lost credibility in your eyes.

>> You probably mean that it hides legends too well, i.e. performs what
>> you asked for instead of what you meant.
>
> No, what I meant is that it hides the legends from screenreaders as
> well as browsers.

You asked how to hide a legend. Now you're saying you only wanted to hide it
from some people, or some software, or whatever.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: Dean Hamack
Date: Thu, Oct 16 2008 3:20PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On 10/16/08 12:06 PM, "Jukka K. Korpela" < = EMAIL ADDRESS REMOVED = > wrote:

> You asked how to hide a legend. Now you're saying you only wanted to hide it
> from some people, or some software, or whatever.

If I wanted to hide it for everyone, why would I bother to include it in the
code at all? That makes absolutely no sense.

From: Jukka K. Korpela
Date: Thu, Oct 16 2008 3:32PM
Subject: Re: Hiding Legends
← Previous message | Next message →

Dean Hamack wrote:

> On 10/16/08 12:06 PM, "Jukka K. Korpela" < = EMAIL ADDRESS REMOVED = > wrote:
>
>> You asked how to hide a legend. Now you're saying you only wanted to
>> hide it from some people, or some software, or whatever.
>
> If I wanted to hide it for everyone, why would I bother to include it
> in the code at all? That makes absolutely no sense.

I agree with the sentiment that your question did not make sense.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: Jukka K. Korpela
Date: Thu, Oct 16 2008 3:40PM
Subject: Re: Hiding Legends
← Previous message | Next message →

From: Jukka K. Korpela
Date: Thu, Oct 16 2008 3:50PM
Subject: Re: Hiding Legends
← Previous message | Next message →

From: Jukka K. Korpela
Date: Thu, Oct 16 2008 4:00PM
Subject: Re: Hiding Legends
← Previous message | Next message →

From: Jukka K. Korpela
Date: Thu, Oct 16 2008 4:10PM
Subject: Re: Hiding Legends
← Previous message | Next message →

From: Jukka K. Korpela
Date: Thu, Oct 16 2008 4:20PM
Subject: Re: Hiding Legends
← Previous message | Next message →

From: Dean Hamack
Date: Thu, Oct 16 2008 6:10PM
Subject: Re: Hiding Legends
← Previous message | Next message →

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.

From: Dean Hamack
Date: Thu, Oct 16 2008 6:20PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On 10/16/08 5:08 PM, "James Nurthen" < = EMAIL ADDRESS REMOVED = > wrote:

> Did you test this in Windows High Contrast mode?

No. And I've never worked for a company that did either.

From: James Nurthen
Date: Thu, Oct 16 2008 6:30PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On Thu, Oct 16, 2008 at 17:01, Dean Hamack < = EMAIL ADDRESS REMOVED = > wrote:

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

Did you test this in Windows High Contrast mode?

From: James Nurthen
Date: Thu, Oct 16 2008 6:40PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On Thu, Oct 16, 2008 at 17:17, Dean Hamack < = EMAIL ADDRESS REMOVED = > wrote:

> On 10/16/08 5:08 PM, "James Nurthen" < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Did you test this in Windows High Contrast mode?
>
> No. And I've never worked for a company that did either.
>

Are you aware that background images disappear in this mode - making the
page unusable?

>
>
>

From: Dean Hamack
Date: Thu, Oct 16 2008 6:50PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On 10/16/08 5:30 PM, "James Nurthen" < = EMAIL ADDRESS REMOVED = > wrote:

> Are you aware that background images disappear in this mode - making the
> page unusable?

No I was not. Like I said, I've never worked for a company that tested in
that mode, nor cared about it. If I would have walked up to one of the
testers and asked, "did you test it in high contrast mode?" they would have
responded, "Huh? What's that?"

This is one of those battles I spoke of before that I don't think can be
won. That said, it still warrants further examination.

Does anyone have any actual statistics on how many people use this mode?

From: Jens Brueckmann
Date: Fri, Oct 17 2008 9:20AM
Subject: Re: Hiding Legends
← Previous message | Next message →

2008/10/17 Dean Hamack < = EMAIL ADDRESS REMOVED = >:
>
> "Are there known issues with (hiding) legends?"
>
> 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

Problems occur, when the page is styled but images are not displayed.
Reasons for images being not displayed include:

- People may choose to disable image display on purpose
- Software like spam filters or ad-blockers may block the images
- some occult network problem
- wrong or changed path to images

In all these cases, hard-coded images with alt texts would have been a
better alternative.

Cheers,

jens

--
Jens Brueckmann
http://www.yalf.de

From: Moore, Michael
Date: Fri, Oct 17 2008 9:28AM
Subject: Re: Hiding Legends
← Previous message | Next message →

Dean asked the following question regarding high contrast mode:

Does anyone have any actual statistics on how many people use this mode?

Mike's Reply,

Although I do not have any statistics, I have some anecdotal
information. We have approximately 150 people in our agency who use
assistive technologies for the visually impaired. On their computers
they either use a screen reading program, JAWS, or a screen
magnification program, ZoomText, or both. The overwhelming majority of
people who are "blind" are not totally blind and more people use screen
magnifiers or combinations of magnifiers and screen readers than use
screen readers alone.

Of those who use screen magnification software, most also use the
features of the program that allow the adjustment of color and contrast.
This is a personal observation. There are several different built in
color modes in ZoomText and a custom feature that allows almost an
infinite variety of choices.

I have found that many applications fail to function properly using
Windows built in high contrast mode, including some Microsoft
applications. I believe that most people who require the ability to
control colors and contrast on their system will need to
purchase/acquire assistive technology to accomplish that function
effectively. It would be like relying on Narrator for screen reading,
or the magnifier in Windows. These features are just not robust enough
to be viewed as effective assistive technologies.

When I tested Dean's page I observed the following.

1. Color and contrast meets WCAG AAA requirements at 8.6:1 for the
luminosity ratio.
2. Testing with JAWS 9.0, the legends were reported correctly.
3. Pixilation of the legends when using ZoomText at 5X was acceptable.
4. The default color schemes on ZoomText all worked as expected.
5. When images were turned off, the legends disappeared and the reason
for two name and address fields was lost. I am not sure that I would
call that graceful degradation, but as long as Dean provides the
information to his client so that they can make an informed decision he
has done his job.

Final comment, cursive and italic scripts are difficult for many low
vision people to read. Dean, you may want to convey that information to
your client as well.

The only sites that we have full control over are the ones that we build
for ourselves. Since most of us make our living building and/or
testing/consulting for others the best that we can expect to do is point
out the weaknesses, explain the implications, and allow the deciders to
do their jobs.

Mike

From: Jukka K. Korpela
Date: Fri, Oct 17 2008 9:25AM
Subject: Re: Hiding Legends
← Previous message | Next message →

Dean Hamack wrote:

> On 10/16/08 5:30 PM, "James Nurthen" < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Are you aware that background images disappear in this mode - making
>> the page unusable?
>
> No I was not. Like I said, I've never worked for a company that
> tested in that mode, nor cared about it.

Did you ever care about printability? Background images are almost always
omitted on printing.

(This makes things rather nasty when web sites use background images for
essential content because they offer a seemingly easy way to make sites
customizable.)

> Does anyone have any actual statistics on how many people use this
> mode?

It's funny how people revert to requesting for statistics when they realize
that their techniques are't accessible. The next step is typically accepting
any irrelevant data as "statistics" if the figures are small enough. :-)

--
Yucca, http://www.cs.tut.fi/~jkorpela/

From: Dean Hamack
Date: Fri, Oct 17 2008 3:10PM
Subject: Re: Hiding Legends
← Previous message | Next message →

Wow. Thank You Michael. This is excellent information, and very helpful.
Responses and additional questions inline.

>The overwhelming majority of
> people who are "blind" are not totally blind and more people use screen
> magnifiers or combinations of magnifiers and screen readers than use
> screen readers alone.

I came up with some similar stats during research last night. I'll write
about those in a separate post.

> I have found that many applications fail to function properly using
> Windows built in high contrast mode, including some Microsoft
> applications.

Ironic since they developed it.

> When I tested Dean's page I observed the following.
>
> 1. Color and contrast meets WCAG AAA requirements at 8.6:1 for the
> luminosity ratio.
> 2. Testing with JAWS 9.0, the legends were reported correctly.
> 3. Pixilation of the legends when using ZoomText at 5X was acceptable.
> 4. The default color schemes on ZoomText all worked as expected.
> 5. When images were turned off, the legends disappeared and the reason
> for two name and address fields was lost.

That stands to reason. I guess I question why any one would turn off images
and leave styles enabled. If you turned off styles, that wouldn't be an
issue.

> Final comment, cursive and italic scripts are difficult for many low
> vision people to read. Dean, you may want to convey that information to
> your client as well.

Agreed. This was not an actual comp I have been given, just an example for
demonstration purposes. I hope a client never gives me a pink page with
cursive script :)

> The only sites that we have full control over are the ones that we build
> for ourselves. Since most of us make our living building and/or
> testing/consulting for others the best that we can expect to do is point
> out the weaknesses, explain the implications, and allow the deciders to
> do their jobs.

Agreed. Most developers don't have the knowledge or tools to test their
sites for real-world accessibility. That's why lists like this are so
valuable.

Thanks again.

From: Dean Hamack
Date: Fri, Oct 17 2008 3:15PM
Subject: Re: Hiding Legends
← Previous message | Next message →

On 10/17/08 8:19 AM, "Jukka K. Korpela" < = EMAIL ADDRESS REMOVED = > wrote:

> Did you ever care about printability? Background images are almost always
> omitted on printing.

Once again, had you bothered to read my post (or look at the code), you
would have seen that the stylesheet used was only for the screen. Try
printing it and see how it looks - plain text, no colors, no backgrounds.

From: Moore, Michael
Date: Fri, Oct 17 2008 3:50PM
Subject: Re: Hiding Legends
← Previous message | No next message

>
> 1. Color and contrast meets WCAG AAA requirements at 8.6:1 for the
> luminosity ratio.
> 2. Testing with JAWS 9.0, the legends were reported correctly.
> 3. Pixilation of the legends when using ZoomText at 5X was acceptable.
> 4. The default color schemes on ZoomText all worked as expected.
> 5. When images were turned off, the legends disappeared and the reason
> for two name and address fields was lost.

Dean wrote:

That stands to reason. I guess I question why any one would turn off
images
and leave styles enabled. If you turned off styles, that wouldn't be an
issue.

Mike:

First there is the bandwidth issue - dial up users may have their
browsers configured to never down load images, I did this myself years
ago when images first started proliferating on the web.

Second there is the broken link/missing file issue. Mistakes happen.

Third, the configuration of antivirus/spam/privacy software may block
the images. The package that we are using here at the agency is
configured to block third party content but I have seen instances where
content has been blocked from our own sites.

If the image is present on the page instead of a background then the
alternative text will be rendered. I understand and agree with the
reasoning behind placing repetitive/decorative/aesthetic images that
usually show up on many pages in the style sheet. They get loaded once,
the pages render faster, and there is no risk of error on a null alt.
When you are talking about information that users need to see within a
form, like a legend, a missing background image may result in a broken
interface and a lost customer. I may be wrong, but I would not think
that the same form legends are present on too many pages. If that is the
case then the maintenance issues associated with placing the image in
the page would be negligible.

Have a great weekend,

Mike