W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > January to March 2012

Re: Using aria-labelledby instead of <label> element

From: Steve Faulkner <faulkner.steve@gmail.com>
Date: Fri, 23 Mar 2012 16:54:54 +0000
Message-ID: <CA+ri+Vn2ihMRk_XfevVXsvVm=NXsne_R7kzB63bPSgqCTn_zKQ@mail.gmail.com>
To: Jonathan Avila <jon.avila@ssbbartgroup.com>
Cc: WAI Interest Group <w3c-wai-ig@w3.org>
Hi Jonathon,

> They appear when the user moves the mouse over the edit field.

this can be an annoyance so title attributes should be used judiciously and
only when needed.

 > When title attributes are used for good reason when labels also appear on
>screen it can cause users of screen readers to hear the visual label and
>title attributes when reviewing the page with the virtual cursor.  Thus,
>there is duplication of information.

Generally in browsers that support accessible name/description calculation,
when a form control has an accessible name provided using the label element
or aria-labelledby or aria-label, the title attribute content is then
exposed as the controls accessible description (unless. So in cases where a
control already has an accessible name applied, if the title attribute is
used it should contain information not included in the accessible name.

details of accessible name calculation:
http://www.w3.org/WAI/PF/aria-implementation/#mapping_additional

regards
stevef

regards
stevefd

On 23 March 2012 16:33, Jonathan Avila <jon.avila@ssbbartgroup.com> wrote:

> > 1. Know what the thing is about - that's just giving information, and a
> > title does as well as a label 2. Be able to activate something bigger
> than
> > a tiny button, like the label. If the label is hidden, there isn't much
> > value added here...
>
> While I agree title attributes are best here -- there are two common issues
> that can arise:
>
> 1. They appear when the user moves the mouse over the edit field.  When
> titles are long this can be annoying for some users.  I agree it's also
> beneficial.  I've seen some company like SAP go the extent of only applying
> title attributes to form fields when the keyboard is used.  This is a mess
> for screen readers as the title seems to appear on the field after it's
> focused and thus the screen reader can't pick up the title because it's too
> late.
> 2. When title attributes are used for good reason when labels also appear
> on
> screen it can cause users of screen readers to hear the visual label and
> title attributes when reviewing the page with the virtual cursor.  Thus,
> there is duplication of information.
>
> Jonathan
>
> -----Original Message-----
> From: Charles McCathieNevile [mailto:chaals@opera.com]
> Sent: Friday, March 23, 2012 11:32 AM
> To: 'Michael Gower'; 'Steve Faulkner'; Roger Hudson
> Cc: 'Ramón Corominas'; 'WAI Interest Group'; 'Diane V Margaretos'; 'David
> Best'
> Subject: Re: Using aria-labelledby instead of <label> element
>
> On Thu, 22 Mar 2012 20:59:16 +0100, Roger Hudson <rhudson@usability.com.au
> >
> wrote:
>
> > For form inputs inside a data table (e.g. for indicating number of
> > items to be ordered), I have used the input title attribute rather
> > than a hidden explicitly associated label to indicate the purpose of the
> > input.
>
> Makes sense. The point of a label is
> 1. Know what the thing is about - that's just giving information, and a
> title does as well as a label 2. Be able to activate something bigger than
> a
> tiny button, like the label. If the label is hidden, there isn't much value
> added here...
>
> > This seems to work fine with an accessibly marked up data table...
>
> Cheers
>
> > Roger
> >
> >
> > From: Michael Gower [mailto:michael.gower@ca.ibm.com]
> > Sent: Friday, 23 March 2012 4:10 AM
> > To: Steve Faulkner
> > Cc: Ramón Corominas; WAI Interest Group; Diane V Margaretos; David
> > Best
> > Subject: Re: Using aria-labelledby instead of <label> element
> >
> >
> > We have recently used both techniques to give remediation advice to a
> > client with something very similar where radio buttons were located in
> > each cell.
> > Both aria-labelledby and the use of title appear to function fine with
> > keyboard and screen reader. We recommended using the aria technique
> > unless backward compatibility was an issue. One point of consideration
> > is whether your "data table" is really a data table in this context,
> > or if it is actually a presentation table that is using the col and
> > row headers as labels. That may seem like a fine distinction, but
> > housing inputs in a data table can potentially affect the behaviour of
> > some assistive technologies.
> >
> > Michael Gower
> > i b m  i n t e r a c t i v e
> > 1803 Douglas Street
> > Victoria, BC  V8T 5C3
> > --
> > Michael.Gower@ca.ibm.com
> > voice: (250) 220-1146
> > cel:     (250) 661-0098
> > sms:    2506610098@txt.bellmobility.ca
> > fax:     (250) 220-8034
> >
> >
> >
> > From:        Steve Faulkner <faulkner.steve@gmail.com>
> > To:        Ramón Corominas <listas@ramoncorominas.com>
> > Cc:        WAI Interest Group <w3c-wai-ig@w3.org>
> > Date:        03/22/2012 09:47 AM
> > Subject:        Re: Using aria-labelledby instead of <label> element
> >
> >   _____
> >
> >
> >
> >
> > Another possibility is to use the title attribute on the inputs to
> > provide the label.
> >
> > for example:
> > http://www.paciellogroup.com/presentations/CSUN08/webapps/#slide24
> >
> > regards
> > Stevef
> >
> > On 22 March 2012 11:22, Ramón Corominas <listas@ramoncorominas.com>
> > wrote:
> > Hi all,
> >
> > We are developing a tool to manage different fields related to many
> > records in a dataset. The information is presented as a data table to
> > show and edit the values of each record, so the column headers act as
> > labels for each field, and row headers identify each record. For
> > example, imagine that you have a chess shop:
> >
> > Columns: Piece, color, material, unit price
> > Rows: King, Queen, Rook, Knight, Bishop, Pawn
> >
> > Thus, we need to construct the "label" for each field combining both
> > row and column headers "Queen color", "Knight unit price", etc. We
> > have tested aria-labelledby to do this, and it seems to work fine with
> > all the screen readers and platforms that we have tested (JAWS & NVDA
> > w/ IE & FF, VoiceOver w/ Safari). We have also seen that this
> > technique has been submitted to the WCAG WG [1]. However, I cannot
> > find it in the Techniques document, so I don't know if there is a
> > reason to avoiding it.
> >
> > What do you think? Would it be acceptable to use aria-labelledby as
> > the only way to label a form control?
> >
> > Thanks in advance,
> > Ramón.
> >
> > [1] Associating multiple labels with a form control using
> > ARIA-LABELLEDBY
> > http://lists.w3.org/Archives/Public/public-wcag2-techs/2010Aug/0000.ht
> > ml
> >
> >
> >
> >
> >
>
>
> --
> Charles 'chaals' McCathieNevile  Opera Software, Standards Group
>     je parle français -- hablo español -- jeg kan litt norsk
> http://my.opera.com/chaals       Try Opera: http://www.opera.com
>
>


-- 
with regards

Steve Faulkner
Technical Director - TPG

www.paciellogroup.com | www.HTML5accessibility.com |
www.twitter.com/stevefaulkner
HTML5: Techniques for providing useful text alternatives -
dev.w3.org/html5/alt-techniques/
Web Accessibility Toolbar - www.paciellogroup.com/resources/wat-ie-about.html
Received on Friday, 23 March 2012 16:55:50 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Friday, 23 March 2012 16:55:50 GMT