WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: labeling search box

for

From: Terence de Giere
Date: Jul 10, 2003 10:31PM

Wendy --

If you leave off the label element, then the page will not conform to
accessibility guidelines for either Section 508 or WCAG 1.0. If you use
the label, the text will show. That is the idea.

Usability specialists normally would not use a label to save space in a
graphical user interface, but we are creating other interfaces with
accessible design, for aural presentation, Braille, and perhaps an
embossed printout. The world SEARCH in the text input itself is not
required except for WCAG Triple-A compliance, as this is a requirement
for legacy screen readers which could otherwise not 'see' the text box.
This is a situation where the desires of the graphic design team and the
requirements of accessibility differ. We have to remember that graphic
design has been responsible for much of the loss of accessibility on the
web and if we want accessible pages, design needs to adapt to using HTML
the way it was originally intended.

----------------------
US Government Section 508 paragraph 1194.22 Web-based intranet and
internet information and applications.

(n) When electronic forms are designed to be completed on-line, the form
shall allow people using assistive technology to access the information,
field elements, and functionality required for completion and submission
of the form, including all directions and cues.

World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG)

Priority 2
10.2 Until user agents support explicit associations between labels and
form controls, for all form controls with implicitly associated labels,
ensure that the label is properly positioned.
12.4 Associate labels explicitly with their controls.

Priority 3
10.4 Until user agents handle empty controls correctly, include default,
place-holding characters in edit boxes and text areas.
-----------------------

While Section 508 does not explicitly say you need a label, the
government and the makers of accessibility testing software have
generally taken the interpretation this way because the rule places a
lot of emphasis on users being able to fill out forms online. Who else
uses forms more than governments. And who else will reject the form, if
one little thing is wrong. The only argument has been whether the W3C
Priority 3 item for default place holding text should be used, and the
interpretation for Section 508 has been not to require it. The Bobby
WorldWide accessibility checker included it initially but it has been
changed.

Now, the government's Section 508 web site has a seach form, and not
only uses a label 'Search' with explicit association, but also uses the
default place holder text 'Enter Search Terms' in the input box, plus a
submit button with the value 'Search' and a reset button with the value
'Clear'.

Your best choice is to put the label "Search', or "Search this site', on
the line prior to the text input. You would not be required to have
place holder text, unless you wanted to make sure everyone with really
old screen readers could access the form. The submit button ideally
should be a standard submit button with text like 'GO' or something,
rather than a graphical button, because a graphical button behaves like
an image map, sending coordinates to the server with some browsers, but
if it is a graphical button, then probably text on the button is better
because icons, even if they seem self explanatory, often confuse users
unless text is also present.

Some users might actually try pressing the arrow graphic submit button
to start the search because the default text says 'Search' - it might be
interpreted as an instruction to submit the form, but only a usability
test would show whether that would actually happen to any degree. The
button is also very small, persons with motor coordination problems, and
even some 'normal' users might have trouble with a mouse - a larger
target would be better. If a user turns off images in graphical browser,
for whatever reason, some of the browsers do not show the graphical
submit button at all (Opera 7.11 in author mode, Netscape 7.1), and
alternative text for many of the images does not show well. Internet
Explorer is OK.

The JavaScript that removes the default text when focus comes into the
text box might cause a problem with screen reader users because they
might tab or otherwise trek through the page to find out what links,
form elements, and headings are there, and that removes the text
'Search', and if they then come back to the search form, the identifying
text is now gone, and there is no label.

A lot of the text information on the page is in graphics, and users that
need to enlarge this text to read it will not be able to do so with
Internet Explorer or Netscape. I myself did not find it unreadable, but
I know others who would want it larger to read. Most users I have seen
(this is not a statistically valid sample) seem to have the screen
resolution set so text is larger than an accurate WYSIWYG (What You See
Is What You Get) setting would obtain. That works in the design's favor
for readability. Laptops usually scale correctly, so that doesn't work
in the design's favor. The page reads well in Operas small screen
rendering, now found in some personal digital assistants and cell
phones, although the darker graphics are hard to read. In this
rendering, for graphics used in links, the graphic is not rendered but
the alternate text is rendered as link text.

I realize the graphic designers want a nice clean look to the page,
which they have accomplished here, but it will be at the expense of
accessibility rules and guidelines if they get their way. So it is
choice between their way, and the Section 508 way (or the W3C way). If
you are complying with 508 rules, you also need a link to skip over all
the navigation to the content. As a compromise. you could try using the
label element and use an image with the same font the designers are
using for the 'Search' label text, with alternate text 'Search' for the
image in the label. That might be the best deal you could make with the
accessibility wreckers.

Terence de Giere
<EMAIL REMOVED>



----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/