RE: checkbox labels

The key A11Y requirements were to have a clearer connection and the have
a required child element.

The HTML4 label/@for isn't required, is cumbersome because of the unique
ID requirement, and isn't easy to enforce or even test for.
The child element is easily specified, easily tested, and easily
written.

There are cases where it's easily displayed, cases where it could be but
isn't yet (the :caption-side idea from Mikko, which supplanted a request
we were about to make to the CSS WG), and cases where it's hard or
impossible (the case Aaron cites about the label being far away in
cousin-element land but close in screen geography).  

For those last hard cases, my opinion is the following.
1. Use xf:*/xf:label.a11y and put the required text there.  It's not
much harder than doing img/@alt.
2. Use decorative text elsewhere on the page as you wish, with a
different CSS class.
3. On desktop media, style a11y not to show and style eyecando to show.
4. On a11y media, do the opposite.

Here's CSS pseudo-code:

@media desktop;
xf|label.a11y { display: none };
.eyecandy { display: inline; }

@media screenreader;
xf|label.a11y {display: inline; }
.eyecandy { display: none; }


I think this meets the A11Y requirements of having the text there, being
verifiable and easy to author, and having the required connection.  It
also frees desktop authors with the big screens from having to gyrate in
order to get something to display far away.  The cost is some duplicated
text in the markup, which is pretty much what img/@alt is.

Comments?

Leigh.
 

-----Original Message-----
From: www-forms-request@w3.org [mailto:www-forms-request@w3.org] On
Behalf Of Aaron Reed
Sent: Thursday, February 01, 2007 3:28 PM
To: www-forms@w3.org
Subject: Re: checkbox labels


I'd say default placement should be host-language based.  But the user 
should still be able to specify in some manner the position of the label

relative to its control.

But in xhtml the label is much more loosely coupled and can appear on 
any side of the control.  There really isn't a default unless you fall 
back to the html4- convention of not specifying a html:label.

So all of this is going to be a good question for the xhtml2 guys, 
too...how are they going to address this problem?  Right now the users 
have practically carte blanche where the label is in respect to the 
control.  The label and the control don't even have to have the same 
parent or grandparent.  How are they going to allow a similar type of 
freedom once they adopt the XForms way of doing things (embedding the 
label in the element the label corresponds to)?

--Aaron

Mark Birbeck wrote:
> 
> Shouldn't the position be dependent on the language, too?
> 
> On 01/02/07, Aaron Reed <aaronr@us.ibm.com> wrote:
>>
>> Good catch Leigh, thanks.  I did use the wrong pseudo-element.
Changing
>> to ::value didn't help, though.  Maybe XSmiles does have a bug.  I'm
>> still interested if any of the other processors allow for something 
>> similar.
>>
>> As an aside, reading the XForms 1.0 spec it says about ::value ->
>> "...This pseudo-element is a child of the form control element, and
>> appears immediately after the required label element".  Due to the
goal
>> I'm trying to achieve, I vote that this be removed from the spec
unless
>> xf:label is changed to say that it must appear before the form
control
>> that represents the xforms control element.  I don't mind that the
>> default behavior be that the label appears first.  But I also think
>> allowing for alternatives shouldn't be prohibited.
>>
>> --Aaron
>>
>> Klotz, Leigh wrote:
>> > The examples from Mikko's site show
>> >  output.total::value
{font-size:12pt;color:red;width:100pt;margin-left:
>> > 10px;caption-side: left;}
>> >
>> > It's possible it's broken in X-Smiles, but the bug notes say it
worked.
>> >
>> > Also, you have xforms|input::xf-value which is a combination of
CSS3 
>> and
>> > Mozilla workaround.
>> > Maybe you tried xforms|input::value and this is just a typo.
>> >
>> > Leigh.
>> >
>> > -----Original Message-----
>> > From: www-forms-request@w3.org [mailto:www-forms-request@w3.org] On
>> > Behalf Of Aaron Reed
>> > Sent: Wednesday, January 31, 2007 3:40 PM
>> > To: www-forms@w3.org
>> > Subject: Re: checkbox labels
>> >
>> >
>> > Hi Leigh,
>> >
>> > I tried that, but had no luck.  Here is the testcase I used.  No
>> > combination of the three style selectors (or any of them alone)
worked
>> > for me using XSmiles alpha version.
>> >
>> > <?xml version="1.0" encoding="UTF-8"?>
>> > <!-- basic FO page definition stuff -->
>> > <html xmlns="http://www.w3.org/1999/xhtml"
>> > xmlns:xforms="http://www.w3.org/2002/xforms"
>> > xmlns:ev="http://www.w3.org/2001/xml-events"
>> > xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
>> > xmlns:xsd="http://www.w3.org/2001/XMLSchema" >
>> >    <head>
>> >      <title>Checkbox testcase</title>
>> >      <style>
>> >        @namespace xforms url("http://www.w3.org/2002/xforms");
>> >
>> >        xforms|input {
>> >          caption-side: right;
>> >        }
>> > /*
>> >        xforms|input xforms|label {
>> >          caption-side: right;
>> >        }
>> >        xforms|input::xf-value {
>> >          caption-side: right;
>> >        }
>> > */
>> >      </style>
>> >      <xforms:model id="mymodel">
>> >        <xforms:instance id="myinstance" xmlns="">
>> >          <values>
>> >            <select>0</select>
>> >          </values>
>> >        </xforms:instance>
>> >        <xforms:bind id="booleanbind" nodeset="/values/select"
>> >                     type="xsd:boolean" />
>> >      </xforms:model>
>> >    </head>
>> >    <body>
>> >      <h2>This testcase should show a checkbox with its label to its
>> > right
>> >      </h2>
>> >
>> >      <xforms:input bind="booleanbind">
>> >        <xforms:label>This should be a checkbox: </xforms:label>
>> >      </xforms:input>
>> >    </body>
>> > </html>
>> >
>> > --Aaron
>> >
>> > Klotz, Leigh wrote:
>> >> I believe X-Smiles does this with caption-side CSS property.
>> >>
>> >> -----Original Message-----
>> >> From: www-forms-request@w3.org [mailto:www-forms-request@w3.org]
On
>> >> Behalf Of Aaron Reed
>> >> Sent: Wednesday, January 31, 2007 1:50 PM
>> >> To: www-forms@w3.org
>> >> Subject: checkbox labels
>> >>
>> >>
>> >> Hi,
>> >>
>> >> I noticed that every xforms processor that I tried put the labels
for
>> >> boolean inputs (usually rendered as checkboxes) to the left of the
>> >> checkbox even though the overwhelming preference for html forms is
to
>> >> have the label on the right of a checkbox.  Do any xforms
processors
>> >> allow their authors to position a boolean input's label to the
right
>> > of
>> >> the control?  Perhaps using a CSS style?
>> >>
>> >> I guess the better question might be, does any processor allow the
>> > form
>> >> author to determine the label position (either left or right of
the
>> >> underlying control) of any xforms control?  And if so, how?
>> >>
>> >> Thanks,
>> >> --Aaron
>> >>
>> >>
>> >>
>> >>
>> >>
>> >
>> >
>> >
>> >
>> >
>>
>>
>>
>>
>>
> 
>

Received on Friday, 2 February 2007 18:14:24 UTC