By joancatala on

Hi all,
We are developing several spanish eGovernment web sites, and the main point we want to obtain is a good accesibility acording to W3C, we are using TAW (Web Accessibility Test) http://www.tawdis.net/. We have experienced two accesibility problems on the search form. This is the result of our TAW-analysis:

Associate labels explicitly with their controls.

  • This form control is not explicitly associated with a label. (1)
  • Line 40:
    <input type="text" maxlength="128"
name="search_theme_form_keys" id="edit-search-theme-form-keys" size="15"
value="" title="Insert the words you want to search"
class="form-text" />

    • First error: the search form do not contains a text item on the 'value'
    of the form, this must be corrected, the solution would be adding
    "Search..." on the edit box.

    Second error: The form doesn't have the tag LABEL with the name of the
    search form ID. The solution is adding: 

<LABEL
for="edit-search-theme-form-keys"></LABEL>

before the tag "...

<input
type="text"..."

So, the solution we propose is:

<div id="search" class="container-inline"><div class="form-item">
<b>CHANGE 1 (ADDING A LABEL)</b> <LABEL for="edit-search-theme-form-keys"></LABEL>
<b>CHANGE 2 (ADDING A VALUE)</b> <input type="text" maxlength="128" name="search_theme_form_keys" id="edit-search-theme-form-keys" size="15" value="Search..." title="Insert the words you want to search" class="form-text" />

Is it posible to add in the core of Drupal?
For a manual change, where is the generator file of this search form?

thanks in advance!

joan

⋅ Categories: Drupal 5.x

Comments

Bevan’s picture

Bevan commented

Please test this in drupal 6 and if the issue persists search for an issue node, and create one if there is no issue node. Creating a patch for it will likely bring more attention to your issue.

Bevan/

Bevan/

bowersox’s picture

bowersox commented

In Drupal 6 the built-in search form does have a label tag as suggested. This meets current best practices as well as important accessibility standards: U.S. Section 508 § 1194.22 (n); W3C WCAG 12.4.

The code looks like this in drupal 6.1:

<label for="edit-search-block-form-1">Search this site: </label>
<input type="text" maxlength="128" name="search_block_form" id="edit-search-block-form-1" size="15" value="" title="Enter the terms you wish to search for." class="form-text" />

Brandon Bowersox - OJC Technologies - www.ojctech.com - Check out our latest Drupal website at http://ihrp.uic.edu

Brandon Bowersox-Johnson, Pixo
brandon@pixotech.com
www.pixotech.com, 217-344-0444

mgifford’s picture

mgifford
he/him
Primary language English
commented

I'm getting a "WARNING: Orphaned Form Label" error from the default search page - /search in two places.

The first one I believe is just because the label is separated from the input type in Drupal 6.8. It is presently:

 <label>Enter your keywords: </label>
 <div class="container-inline"><div class="form-item" id="edit-keys-wrapper">
 <input type="text" maxlength="255" name="keys" id="edit-keys" size="40" value="" class="form-text" />

And probably just needs to be changed to:

 <div class="container-inline"><div class="form-item" id="edit-keys-wrapper">
 <label>Enter your keywords: </label>
 <input type="text" maxlength="255" name="keys" id="edit-keys" size="40" value="" class="form-text" />

Bigger issue here is with the radio buttons, where the label isn't really all that useful. It needs to be tied to the checkboxes specifically and not generally:

 <label>Only of the type(s): </label>
 <div class="form-checkboxes"><div class="form-item" id="edit-type-blog-wrapper">
 <label class="option"><input type="checkbox" name="type[blog]" id="edit-type-blog" value="blog"   class="form-checkbox" /> Blog entry</label>
</div>
<div class="form-item" id="edit-type-forum-wrapper">
 <label class="option"><input type="checkbox" name="type[forum]" id="edit-type-forum" value="forum"   class="form-checkbox" /> Forum topic</label>

I've suggested here - http://drupal.org/node/152098 - which would make the output something like:

 <div class="form-checkboxes"><div class="form-item" id="edit-type-blog-wrapper">
 <label class="option" for="edit-type-blog"><input type="checkbox" name="type[blog]" id="edit-type-blog" value="blog"   class="form-checkbox" /> Blog entry</label>
</div>
<div class="form-item" id="edit-type-forum-wrapper">
 <label class="option" for="edit-type-forum"><input type="checkbox" name="type[forum]" id="edit-type-forum" value="forum"   class="form-checkbox" /> Forum topic</label>

Search block seems to be just fine. It's just the normal and advanced search options that http://wave.webaim.org/ identified some issues with:
http://wave.webaim.org/report?url=http%3A%2F%2Fdrupal.org%2Fsearch

I'll post an issue.

Mike
--
OpenConcept | SEO | Tech | Screencasts

mgifford’s picture

mgifford
he/him
Primary language English
commented

Just an update here. This got into D7 core:
http://drupal.org/node/152098

I submitted this patch to deal with the orphaned labels. I don't see any reason to spit out tags if there are no additional attributes defined by them:
http://drupal.org/node/368759

And I also put in a patch here to deal with tying the label to the input form with the proper 'for' attribute (first post was a bit clueless):
http://drupal.org/node/356359

Thoughts on these would be appreciated.

Mike
--
OpenConcept | SEO | Tech | Screencasts