WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: using title attribute as form field label

for

From: Kevin Chao
Date: Nov 8, 2011 10:03PM

Hi Vincent,

This is working great with Firefox 10 Nightly and NVDA 2012.1 Snapshot in that:
navigating through form fields with TAB, E, or F; NVDA is reading
"Birthday, (MM, DD, or YYYY), edit has auto complete"

However, from the top, using DOWN ARROW to navigate through the form:
Birthday
Edit has Autocomplete
MM

The label "MM" should come before "edit has autocomplete"

Kevin

On 11/8/11, Vincent Young < <EMAIL REMOVED> > wrote:
> John your implementation is pretty sexy. Lots of different ways to go
> about this. I had some fun with it and came up with my own implementation:
>
> http://webhipster.com/testing/accessibility/birthday/index.html
>
> <form role="form" action="">
> <div>
> <label id="birthday" for="month">Birthday</label>
> </div>
> <div>
> <input id="month" type="number" name="day" size="2"
> aria-labelledby="birthday mm" />
> <label id="mm" for="month"><abbr title="Two Digit
> Month">MM</abbr></label>
> </div>
> <div>&nbsp;/&nbsp;</div>
> <div>
> <input id="day" type="number" name="day" size="2"
> aria-labelledby="birthday dd" />
> <label id="dd" for="day"><abbr title="Two Digit
> Day">DD</abbr></label>
> </div>
> <div>&nbsp;/&nbsp;</div>
> <div>
> <input id="year" type="number" name="year" size="4"
> aria-labelledby="birthday yyyy" />
> <label id="yyyy" for="year"><abbr title="Four Digit
> Year">YYYY</abbr></label>
> </div>
> </form>
>
> If any interest, happy to discuss.
>
> On Tue, Nov 8, 2011 at 1:53 PM, Steve Faulkner
> < <EMAIL REMOVED> >wrote:
>
>> Hi Jared,
>>
>> you wrote:
>>
>> >There's nothing in HTML or accessibility specifications that tell AT
>> >to use the title attribute as a label replacement.
>>
>> Besides what James has pointed out (ARIA implementation guide), it should
>> be noted that there is no specification that tells user agents how many
>> HTML features should be mapped and/or interpreted by the accessibility
>> layer, thats what the HTML to Platform Accessibility APIs Implementation
>> Guide
>> http://dev.w3.org/html5/html-api-map/overview.html is starting to
>> document.
>> Note in the section titled accessible name and description calculation (
>> http://dev.w3.org/html5/html-api-map/overview.html#calc) the title
>> attribute is included in accessible name calculation. The main reason for
>> this is that every browser maps the title attribute to the accessible name
>> property in every accessibility API and have done so for many versions ( i
>> would suggest for as long as they have had accessibility support).
>>
>> For AT that use information exposed via an accessibility API, it is the
>> accessible name property they use regardless of whether the source of the
>> name is from the label element, aria attribute, element content or title
>> attribute.
>>
>> regards
>> Stevef
>>
>>
>>
>>
>>
>>
>> On 8 November 2011 15:56, Jared Smith < <EMAIL REMOVED> > wrote:
>>
>> > I have several concerns over the use of the title attribute value for
>> > labeling controls:
>> >
>> > - It shouldn't be used if a visible text label is present on the page.
>> > <label> should be used instead - it works in old browsers, and also
>> > provides enhanced mouse accessibility, primarily for users with motor
>> > disabilities.
>> >
>> > - As defined in the HTML spec, title attribute is for "advisory
>> > information". If a form field is inaccessible without the title
>> > attribute value, this sure sounds like more than "advisory
>> > information".
>> >
>> > - There's nothing in HTML or accessibility specifications that tell AT
>> > to use the title attribute as a label replacement. They just happen to
>> > do this on their own. This behavior is really no different than IE
>> > showing alt text in tooltips which everyone railed against as being a
>> > violation of the spec. It makes me uncomfortable relying on the
>> > non-standard quirks of screen readers for accessibility. As has been
>> > noted, different screen readers treat the presentation of title
>> > differently - and understandably so because a standard behavior is not
>> > documented anywhere because the attribute is not even intended to work
>> > this way.
>> >
>> >
>> > With all of this said, it works relatively well. It just makes me
>> > squirm a little bit. I tend to use off-screen <label> to ensure
>> > accessibility in these situations.
>> >
>> > Jared
>> >