label element is an incredibly useful little element – it lets you link the form field unquestionably with the descriptive label text that sits alongside or above it. This is a very useful feature for people using screen readers, but there are some problems with this element.
What happens if you have one piece of data that, for various reasons (validation, the way your data is collected/stored etc), needs to be collected using several form elements?
The classic example is date of birth – ideally, you’ll ask for the date of birth once but you may have three inputs, one each for day, month and year, that you also need to provide hints about the format required. The problem is that to be truly accessible you need to label each field. So you end up needing something to say “this is a date of birth”, “this is the day field”, “this is the month field” and “this is the day field”. Seems like overkill, doesn’t it? And it can uglify a form no end.
There are various ways that you can approach it (and I think I’ve seen them all). Some people omit the
label and rely on the
title attribute to help the user through; others put text in a
label but make the text 1 pixel high and merging in to the background so that screen readers can still get that information. The most common method, though, is simply to set the
label to not display at all using the CSS
display:none property/value pairing (a technique which, for the time being, seems to work on most screen readers). But perhaps we can do more with this?
The technique I am suggesting as another alternative is as follows (here comes the pseudo-code):
- Start with a totally valid and accessible form
- Ensure that each form input has a
labelthat is linked to its related form control
- Apply a
labelthat you don’t want to be visible (for example
- Find all the
labelelements that are marked as superfluous and hide them
- Find out what
inputelement each of these
labelelements is related to
- Then apply a hint about formatting required for input (gleaned from the original, now-hidden label text) – add it to the form input as default text
- Finally, add in a behaviour that clears or selects the default text (as you choose)
So, here’s the theory put into practice – a date of birth, grouped using a
But why not just use
display:none? As demonstrated at Juicy Studio,
display:none seems to work quite well for hiding
label elements. So why use a sledge hammer to crack a nut? In all honesty, this is something of an experiment, but consider the following:
- Using the DOM, you can add extra levels of help, potentially across a whole form – or even range of forms – without necessarily increasing your markup (it goes beyond simply hiding labels)
- Screen readers today may identify a
labelthat is set not to display, but they may not in the future – this might provide a way around
- By expanding this technique above, it might be possible to visually change the parent container that groups these items – in this case, a
legend, which are notoriously difficult to style consistently across different browsers – while still retaining the underlying semantic/logical structure
Well, it’s an idea to think about at least. How is it for you? How else might you use DOM scripting to improve the accessiblity or usability of your forms?