WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: using title attribute as form field label

for

Number of posts in this thread: 6 (In chronological order)

From: GILLENWATER, ZOE M
Date: Mon, Nov 07 2011 2:51PM
Subject: using title attribute as form field label
No previous message | Next message →

Hi everyone,

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?

Thanks,
Zoe

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

o: 919-241-4083
e: = EMAIL ADDRESS 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.

From: Vincent Young
Date: Mon, Nov 07 2011 3:12PM
Subject: Re: using title attribute as form field label
← Previous message | Next message →

> 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?

Zoe, one situation I can think of is when you have interested parties that
do not want the title showing up on hover (for whatever reason). I've run
into this more on the private more than public sector. For me, the
particular form and situation dictated what was most appropriate. Often,
I'm not able to do what I really want to and have to get a bit creative.
For example labels inside input. Would like to use an actual label as the
visual value (
http://www.alistapart.com/articles/makingcompactformsmoreaccessible/), but
project constraints do not allow this or title, so I might do some CSS
hiding. I'm a traditionalist as you are when it comes to forms and try to
use labels and title where appropriate. Forms can get complicated so
aria-labelledby, aria-desscribedby, CSS, etc. have their place.


On Mon, Nov 7, 2011 at 1:50 PM, GILLENWATER, ZOE M < = EMAIL ADDRESS REMOVED = > wrote:

> Hi everyone,
>
> 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?
>
> Thanks,
> Zoe
>
> Zoe Gillenwater
> Technical Architect, Design Standards Accessibility
> Creative Experience Team
> AT&T eCommerce
>
> o: 919-241-4083
> e: = EMAIL ADDRESS 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-4083and permanently delete the original and any copy thereof.
>
>
>
>

From: Bryan Garaventa
Date: Mon, Nov 07 2011 3:30PM
Subject: Re: using title attribute as form field label
← Previous message | Next message →

One benefit of aria-labelledby is that it supports multiple labels.

E.G.

aria-labelledby="id1 id2 id3"



----- Original Message -----
From: "Vincent Young" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Monday, November 07, 2011 2:14 PM
Subject: Re: [WebAIM] using title attribute as form field label


>> 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?
>
> Zoe, one situation I can think of is when you have interested parties that
> do not want the title showing up on hover (for whatever reason). I've run
> into this more on the private more than public sector. For me, the
> particular form and situation dictated what was most appropriate. Often,
> I'm not able to do what I really want to and have to get a bit creative.
> For example labels inside input. Would like to use an actual label as the
> visual value (
> http://www.alistapart.com/articles/makingcompactformsmoreaccessible/), but
> project constraints do not allow this or title, so I might do some CSS
> hiding. I'm a traditionalist as you are when it comes to forms and try to
> use labels and title where appropriate. Forms can get complicated so
> aria-labelledby, aria-desscribedby, CSS, etc. have their place.
>
>
> On Mon, Nov 7, 2011 at 1:50 PM, GILLENWATER, ZOE M < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hi everyone,
>>
>> 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?
>>
>> Thanks,
>> Zoe
>>
>> Zoe Gillenwater
>> Technical Architect, Design Standards Accessibility
>> Creative Experience Team
>> AT&T eCommerce
>>
>> o: 919-241-4083
>> e: = EMAIL ADDRESS 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-4083and permanently delete the original and any copy thereof.
>>
>>
>>
>>

From: Lucy Greco
Date: Mon, Nov 07 2011 5:09PM
Subject: Re: using title attribute as form field label
← Previous message | Next message →

If you are labeling many fields why not use a field set

Lucy Greco
Assistive Technology Specialist
Disabled Student's Program UC Berkeley
(510) 643-7591
http://attlc.berkeley.edu
http://webaccess.berkeley.edu

-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of GILLENWATER, ZOE M
Sent: Monday, November 07, 2011 1:51 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] using title attribute as form field label

Hi everyone,

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?

Thanks,
Zoe

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

o: 919-241-4083
e: = EMAIL ADDRESS 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.

From: Vincent Young
Date: Mon, Nov 07 2011 5:27PM
Subject: Re: using title attribute as form field label
← Previous message | Next message →

Sometimes fieldsets are not possible if you are sticking to valid semantic
structured code. Often, other elements restrict the use of fieldsets, such
as a form in a table. Also, when using anything other than radio buttons
and checkboxes with fieldsets, the results in browser/AT combinations can
be dodgy, which is why I typically restrict fieldset use to these two items.

On Mon, Nov 7, 2011 at 4:08 PM, Lucy Greco < = EMAIL ADDRESS REMOVED = >wrote:

> If you are labeling many fields why not use a field set
>
> Lucy Greco
> Assistive Technology Specialist
> Disabled Student's Program UC Berkeley
> (510) 643-7591
> http://attlc.berkeley.edu
> http://webaccess.berkeley.edu
>
> -----Original Message-----
> From: = EMAIL ADDRESS REMOVED = [mailto:
> = EMAIL ADDRESS REMOVED = ] On Behalf Of GILLENWATER, ZOE M
> Sent: Monday, November 07, 2011 1:51 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] using title attribute as form field label
>
> Hi everyone,
>
> 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?
>
> Thanks,
> Zoe
>
> Zoe Gillenwater
> Technical Architect, Design Standards Accessibility Creative Experience
> Team AT&T eCommerce
>
> o: 919-241-4083
> e: = EMAIL ADDRESS 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-4083and permanently delete the original and any copy thereof.
>
>
>
>

From: John Foliot
Date: Mon, Nov 07 2011 6:15PM
Subject: Re: using title attribute as form field label
← Previous message | No next message

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