WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: form label question

for

From: Tim Harshbarger
Date: Aug 8, 2007 6:30AM

Kathleen,

Unfortunately, "display: none" hides labels from screen readers. If you
want to hide a label using CSS, there are other methods that do work
better. When I have to hide a label, the method I most frequently use
involves moving the label element off the page by setting the "left" CSS
property to a negative number.

Looking at something I recently did, here is a class I set up to hide
some elements--although they were not labels for form controls.

.accessible-header {
position: absolute;
left: -32767;
}

It is also possible to use the "title" attribute of a form control. I
don't use the "alt" attribute, but mainly because I believe it isn't a
valid attribute for most form controls and I run most of my HTML through
a validator.

My preference is to use the label element rather than the title
attribute. I have 3 reasons for my choice. First, visible labels are
clickable and will cause focus to move to the related form control. If
someone has to use the mouse, I like to make it as easy as possible for
them to select the control they want. Secondly, the label element just
seems more semantically correct to me. Lastly, Internet Explorer
displays tooltips for elements that have "title" attributes and some of
the project teams I work with seem to feel that negatively impacts the
user's experience with the interface.

Tim