WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using title attribute as form field label

for

From: John Foliot
Date: Nov 7, 2011 6:15PM

GILLENWATER, ZOE M wrote:
>
> I know and preach that it's best to use a label for every form field,
> but in those cases where it's really not possible or practical (such as
> one label describing more than one field), what's the best alternative
> technique? Title attribute? Always, or just in some situations?
>
> Using the title attribute on the form field has good support and is
> simple to implement. In fact, is there any reason to even consider
> other techniques, such as using CSS to hide a label or using aria-
> labelledby? In other words, are there any advantages of these CSS or
> ARIA techniques over simply using the title attribute that I should be
> aware of?

Hi Zoe,

Remember that there is both aria-labelledby (which points to onscreen
text, very similar to the <label> element) and aria-label (which takes
string text). So in other words, we *should* be able to do stuff like
this:

<span id="foo">Name</span> <input aria-labelledby="foo">

["Evil" version]
<tr>
<td id="foo">Name</td> <td><input aria-labelledby="foo"></td>
</tr>

... or even

<input aria-label="Search"> <input type="submit" value="Go">
(where the label is embedded into the input element)

************
(ASCII representation of how that might look on screen)

[_______________][Go]

************


Going a bit further, we might likely also do the following:

<span id="baz">Birthday</span>

<span aria-labelledby="baz">
<input aria-label="day">
<input aria-label="month">
<input aria-label="year">
</span>


..or, since labelledby can take multiple (space separated) values, perhaps
better:

<p>
<span id="bar">Birthday</span>
<input aria-labelledby="bar day"> /
<input aria-labelledby="bar month"> /
<input aria-labelledby="bar year">
</p>
<p>
<span id="day" aria-label="day as a 2 digit value">DD</span>
<span id="month" aria-label="month as a 2 digit value">MM</span>
<span id="year" aria-label="year as a 4 digit value">YYYY</span>
</p>

************
(ASCII representation of how this might look on screen)

Birthday: [__] / [__] / [__]
DD MM YYYY

************

<sacrilege>
To get that kind of layout easily, you *could* put the first and second
rows into a table (yes table layout), but then use
aria-role="presentation" on the <table> element, which removes the table
layout structure from the accessibility tree and "linearizes" the content
to AT - or so goes the theory. NOTE: I would want to test this one very
carefully first, but in I believe this would be sound markup...
</sacrilege>

I've not tested any of this (I'll try and do a sample page and test it
tonight; I've already written half the markup here) as I've been running
hard today, but in theory these examples should all deliver on the
user-experience(s) we are seeking - the down-side of this however is that
ARIA support is still not universal, so we would likely miss some users.

JF