Re: Aria-labelledby for form controls- examples

Here is an updated section  with a complete form
http://mars.dequecloud.com/demo/form-markup.htm#tech9
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, 10:56 PM
 
 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 Tuesday, 17 September 2013 02:58:06 UTC