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

Hi Ramon,

Gmail sent an awesome blank email, seems it's an
issue<http://groups.google.com/a/googleproductforums.com/forum/#!category-topic/gmail/composing-and-sending-messages/VYpXeK5EkGE>;
and of course I didn't copy the message before sending. So, here it is
again in a much shorter form unfortunately.

I don't believe ARIA to be enough and I wouldn't rely on ARIA alone to save
the day. In true progressive enhancement the stack looks like this:
HTML-CSS-JavaScript-ARIA. Your solution seems to start with the end of the
stack - ARIA. There are browser / assistive technology (AT) combinations,
take IE7 & JAWS 9, where an ARIA-only solution fails miserably.

I was in your shoes recently so here's what I did:

   - if it's a data table it should marked-up with a <table> (semantics)
   - not ARIA-dependent but used it to enhance the experience

Now, unless I misunderstood something, your data is in one of 2 states: *
show* and *edit* - this is an important point and again I can relate to
this as I was in a similar situation (with financial data)!

   1. Start with marking-up the data as a <table> with proper <th> for
   columns and / or rows and use the *scope=* attribute. This will be
   sufficient for the *show* state as screen reader (SR) users can get
   around the static data with regular table-specific keystrokes. Also it's a
   minimal fallback (but fallback nonetheless) for the *edit* state.
   2. For the *edit *state use both <label> and *aria-labelledby= *with the
   same value (which you can construct dynamically). For browser / AT
   combinations that support ARIA *aria-labelledby=* will overwrite the
   <label> and for combinations that do not support ARIA you have the <label>
   fallback; plus the semantic table as another fallback

Hope this helps (and it's not an empty email). If you have any further
questions, please ask away.


Thank you,
George

On Thu, Mar 22, 2012 at 7:22 AM, 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.html<http://lists.w3.org/Archives/Public/public-wcag2-techs/2010Aug/0000.html>
>
>
>