WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using title attribute as form field label

for

From: GILLENWATER, ZOE M
Date: Nov 8, 2011 7:33AM

Hi John,

Yes, there are thankfully lots of ways nowadays to address these situations where the one label-one field setup won't work! I guess what I'm trying to get at is, is it OK to recommend the title attribute as the technique of "first resort"? So far I haven't heard anything against it *in general* (yes, won't work or isn't best in particular use cases) so I'm going to say yes, it's OK. :-)

One thing I have noticed with using the title attribute on form fields is that, while it is read exactly like a label in forms reading mode, it is sometimes read differently than a label in normal reading mode. I haven't tested this extensively, but in some screen reader and browser combos the field with the title attribute won't be announced at all when in the normal reading mode, or the field will be announced but not its title. In forms reading mode, I haven't had any problems getting both the field and its title announced. So I guess this is one of the disadvantages of using title: the user may never know a field is there when in normal reading mode, so they'll never know to go into forms mode, where they would hear the field.

Thanks,
Zoe

Zoe Gillenwater
Technical Architect, Design Standards Accessibility
Creative Experience Team
AT&T eCommerce

o:  919-241-4083
e:   <EMAIL REMOVED>

This e-mail, and any attachments, are intended only for use by the addressee(s) named herein and may contain legally privileged and/or confidential information. It is the property of AT&T. If you are not the intended recipient of this email, you are hereby notified that any dissemination, distribution or copying of this email, any attachments thereto, and any use of the information contained is strictly prohibited. If you have received this email in error, please notify me at 919-241-4083 and permanently delete the original and any copy thereof.

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of John Foliot
Sent: Monday, November 07, 2011 8:16 PM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] using title attribute as form field label

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