Invisible/hidden form Labels
Two questions...
Are hidden form lables WCAG 2.0 friendly (I'm sure i could figure it out if I had a few hours spare - but if someone knows....)?
What is the 'most accessible' form of hiding?
(My guess is no and positioning off screen, but would like to hear thoughts)
chrs
Phil
Share: 
It's my understanding that hidden objects are not rendered on the screen, but are not hidden from a screen reader.
I'm not a big fan of work arounds (patches or whatever you want to call them) on principle, however there are realities in life.
Is it just one label you want to hide or all of them?
Share:
I favour positioning...
Share:
I tend to favour the 'off-screen' hiding of form element labels.
Typically, entering a credit card number, as in
can then rended by an AT reader as:
which is a lot easier if you want to know where you are in the sequence, or when you want to review the entries.
.
Share:
Without meaning to detract from your point, Jake: in that particular example, I would argue that it's not really necessary to split up the fields, since you can easily cope with however they format their credit card number on the server. 
Point well taken for, say, a date-of-birth though.
Share:
| CSS 2.1 wrote: |
| none
This value causes an element to generate no boxes in the formatting structure (i.e., the element has no effect on layout). (Source: The 'display' property.) |
| CSS 2.1 wrote: |
| For instance, if an element in the document tree has a value of 'none' for the 'display' property, that element will generate nothing in the formatting structure.
(Source: The CSS 2.1 processing model.) |
| WCAG 2.0 wrote: |
| This technique is sufficient for Success Criteria 1.1.1, 1.3.1 and 4.1.2 whether or not the label element is visible. That is, it may be hidden using CSS. However, for Success Criterion 3.3.2, the label element must be visible since it provides assistance to all users who need help understanding the purpose of the field.
(Using label elements to associate text labels with form controls.) |
Took about 15 minutes to research and write this message.
Share:
Many thanks Ben, that last bit was just what I was after, I think.
Not the answer I wanted though. Basically, I want to use IMGs (both of text and illustrative images/icons), rather than the label text itself, for visual cue. So I hope that makes it ok? In practice I think it does.
Again thanks, it would have taken me a LOT longer
Share:
Glad to be of use. 
Use <img src alt> inside <label for>? That's a visible label, with the labelling text in the alt attribute.
Share:
interesting. Not sure AT would know what to do with that though. [Not sure if any would (haven't checked)...]
Last edited by Phil Teare on 14 Jan 2009 02:53 pm; edited 1 time in total
Share:
I expect all ATs to support alt text!!
Share:
As they do. However, if the AT has found a form element, then gone looking for its label, it might assume the most pertinent value to read would be its innerText / textContent. Not the alt text of an image in the label...
Share:
What about using visibility:hidden on a label for the purposes of spacing? I think this probably isn't compliant, but does anyone have any evidence they can link me to? Ta 
Share:
See the survey results from 2003. In short, most screenreaders will not announce content that is hidden with visibility: hidden;.
Share: