W3C home > Mailing lists > Public > w3c-wai-gl@w3.org > July to September 2013

Re: Aria-labelledby for form controls- examples

From: James Nurthen <james.nurthen@oracle.com>
Date: Thu, 12 Sep 2013 19:56:13 -0700
Cc: w3c-wai-gl@w3.org
Message-Id: <A229C34A-CBBC-48E6-B406-26448ADAA5F5@oracle.com>
To: Sailesh Panchang <spanchang02@yahoo.com>
Sailesh,

These are examples that developers will take out of context. If you think more information is required in order to make these examples valid then this should be in the example. If you want to make those changes I am happy to run this past a few users again. 

While you think the purpose of the checkbox is obvious, the page designer in this case felt the need to put a "Check to compare" label on each of the checkboxes. Not making this programatically associated with the checkbox for screen reader users would be a very dangerous precedent to set in a WCAG example and in my opinion would violate 1.3.1. I would not feel confident, personally (obviously I do not speak for the WCAG working group!), publishing as a WCAG technique.

Regards,
James




On Sep 12, 2013, at 7:44 PM, Sailesh Panchang <spanchang02@yahoo.com> wrote:

> James,
> If the entire form is coded the way you did it, I too would vote  for it!
> But it is hardly fair.
> Apparently you missed the point that almost all example forms on that page are not complete.
> They are partial forms that demonstrate a technique or a key point.
> This form (including the one you coded in the email below)  too has no submit button at all!
> In my last response, I Pointed to the text before the   form, and before that I said, there would be some instructions that  would clarify that one can compare  n products etc. placed at the start of the form.
> On that page with form examples there is another example where aria-labelledby has 2 references. That is not the point of example #9. 
> The point is: visually one can associate that checkbox 1 if for product 1 but a non-sighted user cannot make that association confidently.
> So use aria-labelledby to identify the product. Surely if the need is to associate  3 other pieces of text with that checkbox using aria-labelledby, one can do that. 
> Regards,
> Sailesh
> 
> --------------------------------------------
> On Thu, 9/12/13, james nurthen <james.nurthen@oracle.com> wrote:
> 
> Subject: Re: Aria-labelledby for form controls- examples
> To: "Sailesh Panchang" <spanchang02@yahoo.com>
> Cc: w3c-wai-gl@w3.org
> Date: Thursday, September 12, 2013, 5:49 PM
> 
> Sailesh,
> Replies inline.
> On 9/12/2013 9:16 AM, Sailesh Panchang wrote:
>> Hello James,
>> The third issue about the checkbox:
>> Before the example, there is a paragraph which
> explains  why the checkbox needs a specific
> identifier.
>> The 'check to compare' serves little or no purpose, I'd
> say even visually,  but it is part of the UI.
>> But I'll reiterate as a VI user  that  It is
> text that can be safely be ignored by AT to avoid cluttering
> verbosity. So I believe the aria-labelledby markup is good
> as is.
>> Agree?
> JN: No I do not agree. You are not all VI users. Others have
> different opinions than yours. Indeed I created 3 testcases
> - your example, one using aria-labelledby to combine both
> "labels" and one using aria-labelledby and aria-describedby
> and asked a colleague which she preferred. The answer was
> "I like the second link better because it's clear what the
> checkboxes are for. "
> 
> The second link was the following HTML
> 
> <form action="#" method="post" id="form9">
> 
> <h3 id="lap1">Gaming Laptop</h3>
> <p>Text of laptop features</p>
> <p><input type="checkbox" id="lbl1"
> aria-labelledby="lap1 id1"><label for="lbl1"
> id="id1">Check to compare</label></p>
> <h3 id="lap2">Mini Laptop</h3>
> <p>Text of laptop features </p>
> <p><input type="checkbox" id="lbl2"
> aria-labelledby="lap2 id2"><label for="lbl2"
> id="id2">Check to compare</label></p>
> <h3 id="lap3">Fully Featured Touchscreen
> Laptop</h3>
> <p>Text of laptop features </p>
> <p><input type="checkbox" id="lbl3"
> aria-labelledby="lap3 id3"><label for="lbl3"
> id="id3">Check to compare</label></p>
> </form>
> 
>> Ref: http://mars.dequecloud.com/demo/form-markup.htm#tech9
>> 
>> About role=group write-up:
>> What I have already submitted is a specific technique
> for grouping related form controls generally usable when one
> is constrained by design to use fieldset-legend technique.
> So please review  / discuss and consider for
> incorporating into techniques.
>> As I wrote it, it will be good if others can comment.
> JN: In order to make edits I need to get this into the wiki.
> It requires edits (particularly to the test procedure) in
> order to be acceptable as a technique. I don't have time to
> do this at the moment and would invite you to do so and
> perhaps refine the test procedure so we can progress the
> technique.
> 
> regards,
> James
> 
> 
>> Also review other changes / comments :
>> See
>> http://lists.w3.org/Archives/Public/public-wcag2-techs/2013May/
>> http://lists.w3.org/Archives/Public/public-wcag2-techs/2013Aug/0000.html
>> Thanks,
>> Sailesh
>> 
>> --------------------------------------------
>> On Wed, 9/11/13, james nurthen <james.nurthen@oracle.com>
> wrote:
>> 
>>    Subject: Re: Aria-labelledby for form
> controls- examples
>>    To: "Sailesh Panchang" <spanchang02@yahoo.com>
>>    Cc: w3c-wai-gl@w3.org
>>    Date: Wednesday, September 11, 2013,
> 1:17 PM
>>        On 9/11/2013 7:52 AM,
> Sailesh Panchang wrote:
>>    >       On
> 9/10/2013
>>    >   7:54 AM, Sailesh
> Panchang
>>    >     
>    wrote:
>>    > Please review:
>>    >   Aria-labelledby
> for form controls
>>    >   http://mars.dequecloud.com/demo/form-markup.htm#tech5
>>    >         
>    JN:
>>    I believe this is no different from http://www.w3.org/WAI/GL/wiki/Using_aria-labelledby_to_concatenate_a_label_from_several_text_nodes#Example_2:_A_simple_data_table_with_text_inputs
>>    >       Is
> there anything I am
>>    missing that the example in the
>>    >   current 
>     technique
>>    doesn't have?
>>    >   Sailesh 09/11:
>>    > The survey page for
> 'aria-labelledby for controls' had
>>    no techniques. It was marked 'TDB'.
>>    > That's why I sent these
> examples.
>>    > If there  were examples
> already available, they
>>    should have been on that survey page,
> no?
>>      JN 9/11:
>>    This title of this technique is
> misleading and needs fixing.
>>    This is an aria-labelledby technique
> intended at 1.1.1
>>    As such labels for form fields are not
> appropriate. We have
>>    other techniques for labeling form
> fields.
>>      >
>>    >   http://mars.dequecloud.com/demo/form-markup.htm#tech7
>>    >         
>    JN:
>>    We certainly need a role=group
> technique to cover
>>    >   this use case.
>>    >   
>    Would someone like to
>>    volunteer to write this?
>>    > Sailesh 09/11:
>>    > There's one already 
> submitted in May 2013.
>>    > I had submitted a few techniques
> including one for the
>>    role=group as an alternative for
> fieldset-legend
>>    > http://lists.w3.org/Archives/Public/public-wcag2-techs/2013May/
>>    > There's a problem with the
> technique submission form
>>    which I had conveyed to Andrew and
> code had not got
>>    submitted alright.
>>    > So a Word doc was sent to Andrew
> with my recent
>>    submissions / comments  a few
> weeks ago. See attached.
>>    > A few times, I requested that
> these be reviewed.
>>    JN 9/11: I haven't seen this and it
> certainly hasn't been
>>    passed to the task force for
> consideration. When I get time
>>    I will try to add this to the wiki so
> it can be worked a
>>    little more by the TF (or you can do
> this yourself if you
>>    want)
>>        >
>>       http://mars.dequecloud.com/demo/form-markup.htm#tech9
>>    >         
>    JN:
>>    I think this example needs
> modification and then
>>    >   could fit 
>     nicely
>>    into the Using     
>   aria-labelledby to
>>    concatencate multiple text nodes
>>    >   case.
>>    >   As it stands
> there is no indication to
>>    AT that checking
>>    >   the
> checkbox      does
>>    a compare operation so the labelledby
> needs to
>>    >   point to the
> header and the checkbox
>>    label and not just the header.
>>    > Sailesh 09/11:
>>    > Well the aria-labelledby works
> fine for the checkbox
>>    and conveys its purpose clearly.
>>    JN 9/11: The label on its own could be
> to buy the item or
>>    indeed any other usage. The label
> needs to include this. I
>>    do not think the functionality of the
> checkbox is clear
>>    without this.
>>    > There is also an explicit label
> 'check to compare'
>>    which is read when one arrows down
> (out of forms mode).
>>    JN 9/11: I'm not sure we can rely on
> this - of we could our
>>    lives would be much easier. How about
> a compromise where the
>>    check to compare is the
> aria-descibedby reference?
>>    > Certainly instruction that you
> can compare 2 or 4 items
>>    will be conveyed somewhere at the
> start / end of the form.
>>    JN 9/11: If this is the case then this
> should be in the
>>    example.
>>    > That does not  have to be
> conveyed by every
>>    checkbox.
>>    > Based on your argument, every
> form control's label
>>    needs to convey which form it belongs
> to and what will be
>>    accomplished by submitting the form.
>>    JN 9/11: this is not an equivalent
> argument. The visually
>>    associated label for the checkbox is
> "Check to compare". Not
>>    providing this to AT is a clear
> violation of 1.3.1.
>>    > i.e. on a login form the label
> for username will need
>>    to convey that it will be submitted as
> part of the login
>>    process.
>>    > If every checkbox were to convey
> that once checked it
>>    will be used for comparison, 
> that will be a lot of
>>    verbosity and a lot of problem.
>>    > When you have a list of emails
> displayed  on a Web
>>    page, one can check them and delete or
> move or mark as spam
>>    etc. The checkbox's label does not
> convey this.
>>    JN 9/11: Here there is not a visually
> associated label. If
>>    it is important for a sighted user to
> have the "check to
>>    compare" text then this should be
> provided for a screen
>>    reader user too. If this is not
> important then the text need
>>    not be provided to anyone.
>>      Regards,
>>    James
>>        > Thanks and
> regards,
>>    > Sailesh
>>    >
>>       Regards,
>>    >     
>    James
>>    >
>>              
> Secondly in
>>    the matter of aria-labelledby for non
> text
>>    >   content:
>>    >   - The first
> example has no alt
>>    >   - The second
> one: seldom  is
>>    there text taht says '4 out
>>    >   of 5' for
> *rating it is only the
>>    image.
>>    >   But, yes,
> the  example is a good
>>    one if it is indeed marked
>>    >   up that way with
> multiple star images
>>    and text alongside.
>>    >     About use
> of role=headings:
>>    >   It appears it is
> more of a remediation
>>    technique to be used
>>    >   only when HTML
> h<n> cannot be
>>    used like for h7 as
>>    >   illustrated?
>>    >   Need to think of
> more used cases I
>>    guess.
>>    >     Thanks,
>>    >   Sailesh
>>        
> 
> 
> 
> 
Received on Friday, 13 September 2013 02:56:49 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 20:32:51 UTC