RE: [WSG] Minimal forms or marking up a search field
Hi Paul,
An interesting question.
I'd go with b.
The label is almost, but not quite, redundant when presented with in a simple
search form.
I'd advise against method a.
A confusion of goals takes place.
The label is explicitly associated via the for attribute to the search field,
but implicitly associated by position to the submit button.
That breaks the original WCAG guidelines priority 2 parts 10.2 and 12.4
Regards
Mike Foskett
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Paul Novitski
Sent: 17 February 2010 19:25
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Minimal forms or marking up a search field
A practical distraction for the standardistas and accessibility gurus�
Hoping tap your brain for an alternative perspective on the simple and
common HTML scenario of a site search form.
...
To revisit this topic, I'm considering the
following and would appreciate feedback:
_
a) Submit button as label:
form ...
div
input type=text id=search name=search /
label for=search
input type=submit value=Search /
/label
/div
/form
_
b) Label hidden from view:
form ...
div
label for=search id=search-labelSearch:/label
input type=text id=search name=search /
input type=submit value=Search /
/div
/form
label#search-label
{
position: absolute;
left: -1000em;
}
_
The rationale for both of these is that the
Search submit button serves as a clear and
unambiguous label for the input field. In listing
a) the button is literally the label; in b) there
is a separate literal label present in the markup
but hidden from cosmetic view.
Both validate for W3C HTML Cynthia 528 Accessibilty.
Can you see any problems with them?
I favor a) but it feels edgy.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
This is a confidential email. Tesco may monitor and record all emails. The
views expressed in this email are those of the sender and not Tesco.
Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL
VAT Registration Number: GB 220 4302 31
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Minimal forms or marking up a search field
A practical distraction for the standardistas and accessibility gurus�
Hoping tap your brain for an alternative perspective on the simple and
common HTML scenario of a site search form.
...
To revisit this topic, I'm considering the
following and would appreciate feedback:
_
a) Submit button as label:
form ...
div
input type=text id=search name=search /
label for=search
input type=submit value=Search /
/label
/div
/form
_
b) Label hidden from view:
form ...
div
label for=search id=search-labelSearch:/label
input type=text id=search name=search /
input type=submit value=Search /
/div
/form
label#search-label
{
position: absolute;
left: -1000em;
}
_
The rationale for both of these is that the
Search submit button serves as a clear and
unambiguous label for the input field. In listing
a) the button is literally the label; in b) there
is a separate literal label present in the markup
but hidden from cosmetic view.
Both validate for W3C HTML Cynthia 528 Accessibilty.
Can you see any problems with them?
I favor a) but it feels edgy.
Regards,
Paul
__
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Minimal forms or marking up a search field
On 17 Feb 2010, at 19:24, Paul Novitski wrote: To revisit this topic, I'm considering the following and would appreciate feedback: a) Submit button as label: b) Label hidden from view: Neither The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset buttons), the alt attribute (for image buttons), or element content itself (button). — http://www.w3.org/WAI/GL/WCAG20/WD-WCAG20-TECHS/H44.html -- David Dorward http://dorward.me.uk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Minimal forms or marking up a search field
If you are looking for a simple search form (i.e. the input box into which user enters a search term followed by 'Search' submit button) you should be using something like this. label for=sSearch/label input type=text name=s id=s / input type=submit value=Search class=primary / You do not need fieldset nor a legend as they are intended for grouping form fields on more complex forms. I agree. I'd just use a DIV to wrap these form controls. -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Minimal forms or marking up a search field
On 31 January 2010 13:45, Thierry Koblentz thierry.koble...@gmail.com wrote: You do not need fieldset nor a legend as they are intended for grouping form fields on more complex forms. I agree. I'd just use a DIV to wrap these form controls. Thanks guys, I’m glad I asked this question. I was carrying around the idea that the required element around any inputs inside a form element was a fieldset. Seems I was wrong, any block element will satisfy the spec. So presuming we do away with the legend: div id=searchform label for=searchKeyword/s/label input type=text id=search name=search / input type=submit value=Search / /div …and assuming there are no other 'search' fields in the page we need to distinguish from. I’d like to test some further assumptions: - Some people don’t know how to submit the query without a 'Search' (or 'Go') button? div id=searchform label for=searchKeyword/s/label input type=text id=search name=search / /div Apple seems to believe the the submit input is unnecessary http://www.apple.com - Now that the legend is gone I should use the label to describe the purpose of the text field rather than what one should enter in it? Everyone knows you put keywords in a search field, right? div id=searchform label for=searchSearch/label input type=text id=search name=search / /div - Is including the keywords hint in the title attribute useful to anyone? div id=searchform label for=searchSearch/label input type=text id=search name=search title=Keyword/s / /div - Does everyone agree this is taking simplicity too far? div id=searchform input type=text id=search name=search title=Search / /div Thanks for indulging my hairsplitting. Ollie -- @ollicle *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Minimal forms or marking up a search field
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Oliver Boermans Sent: Saturday, January 30, 2010 8:21 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Minimal forms or marking up a search field On 31 January 2010 13:45, Thierry Koblentz thierry.koble...@gmail.com wrote: You do not need fieldset nor a legend as they are intended for grouping form fields on more complex forms. I agree. I'd just use a DIV to wrap these form controls. Thanks guys, I'm glad I asked this question. I was carrying around the idea that the required element around any inputs inside a form element was a fieldset. Seems I was wrong, any block element will satisfy the spec. So presuming we do away with the legend: div id=searchform label for=searchKeyword/s/label input type=text id=search name=search / input type=submit value=Search / /div .and assuming there are no other 'search' fields in the page we need to distinguish from. I'd like to test some further assumptions: - Some people don't know how to submit the query without a 'Search' (or 'Go') button? div id=searchform label for=searchKeyword/s/label input type=text id=search name=search / /div Apple seems to believe the the submit input is unnecessary http://www.apple.com - Now that the legend is gone I should use the label to describe the purpose of the text field rather than what one should enter in it? Everyone knows you put keywords in a search field, right? div id=searchform label for=searchSearch/label input type=text id=search name=search / /div - Is including the keywords hint in the title attribute useful to anyone? div id=searchform label for=searchSearch/label input type=text id=search name=search title=Keyword/s / /div - Does everyone agree this is taking simplicity too far? div id=searchform input type=text id=search name=search title=Search / /div I'd go with: div role=search label for=search_querySearch for:/label input type=search placeholder=Keyword(s) id=search_query name=search_query size=20 input type=submit value=Submit /div It won't validate though. You could also throw autofocus in there in case you plan to focus on the field when the page loads. -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
