WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: RE: labeling search box

for

Number of posts in this thread: 4 (In chronological order)

From: Terence de Giere
Date: Thu, Jul 10 2003 10:31PM
Subject: RE: labeling search box
No previous message | Next message →

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 ADDRESS REMOVED =



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

From: Dey Alexander
Date: Thu, Jul 10 2003 11:38PM
Subject: Re: labeling search box
← Previous message | Next message →

This is an issue I'm currently grappling with. There are a couple of
other options that could be tried, depending on the nearby elements on
the page.

1. Include a text label "search" and <label> element and use CSS to hide
these (by setting display:none on the screen style sheet). Downside of
this is that the text label will display on older (non-CSS compliant)
browsers.

2. Include a text label "search" and <label> element and set the text
colour to be the same as the background color so that it isn't visible
on the page.

Downside to both options are:

* space for the "invisible" text label may interfere with surrounding
page elements - though the font size could be set to be extremely small

* based on an earlier post from Paul Bohman, the screen reader will read
out the label and the submit button text. In our case, the submit
button is labelled "Search", so we'd end up with the screenreader user
hearing "search" twice.

Cheers,
Dey

Terence de Giere wrote:


> 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.


--
Dey Alexander
Usability Specialist, Web Resources and Development
IT Services Division, Monash University (Clayton)
Email: = EMAIL ADDRESS REMOVED =
Ph: +61 3 9905 4740 Fax: +61 3 9905 3024


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


From: Dey Alexander
Date: Fri, Jul 11 2003 12:02AM
Subject: Re: labeling search box
← Previous message | Next message →

Further to this, advice from the folks at Vision Australia was to try
using a single pixel image, with a suitable text alternative. In my
case, I've used "Enter search terms" as the submit button is labelled
"Search". This seems to work fine in HPR and JAWS, although The Wave
reports that I have an empty label element.

Cheers,
Dey

I previously wrote:

> This is an issue I'm currently grappling with. There are a couple of
> other options that could be tried, depending on the nearby elements on
> the page.
>
> 1. Include a text label "search" and <label> element and use CSS to hide
> these (by setting display:none on the screen style sheet). Downside of
> this is that the text label will display on older (non-CSS compliant)
> browsers.
>
> 2. Include a text label "search" and <label> element and set the text
> colour to be the same as the background color so that it isn't visible
> on the page.
>
> Downside to both options are:
>
> * space for the "invisible" text label may interfere with surrounding
> page elements - though the font size could be set to be extremely small
>
> * based on an earlier post from Paul Bohman, the screen reader will read
> out the label and the submit button text. In our case, the submit
> button is labelled "Search", so we'd end up with the screenreader user
> hearing "search" twice.
>
> Cheers,
> Dey
>
> Terence de Giere wrote:
>
>
>> 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.
>
>
>


--
Dey Alexander
Usability Specialist, Web Resources and Development
IT Services Division, Monash University (Clayton)
Email: = EMAIL ADDRESS REMOVED =
Ph: +61 3 9905 4740 Fax: +61 3 9905 3024


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


From: Michael Burks
Date: Fri, Jul 11 2003 6:26AM
Subject: NCD says Web Sites should be accessible
← Previous message | No next message

From the ICDRI Press Release at:

http://www.icdri.org/Press/NCD_ICDRI.htm

National Council on Disability (NCD) says that the Americans with
Disabilities Act applies to both commercial and other private web sites.
Today NCD released their report which is a careful and precise analysis
of the legal issues pointing out the arguments for both sides. But
based on all authorities, including those opposed to the view that the
ADA should apply to e-commerce, the report concludes that the intent of
the ADA was to cover entities under ADA Title III.

Among the authorities cited are the works of Cynthia Waddell, ICDRI's
Executive Director, as well as resources such as the Access Primer Page
by ICDRI; the book, Constructing Accessible Web Sites, co-authored by
three ICDRI Board Members; and the educational portal and web
accessibility validator, Cynthia SaysTM. The report is posted online at
http://www.ncd.gov/newsroom/publications/adainternet.html.

NCD is an independent federal agency making recommendations to the
President and Congress on disability policy. NCD First proposed and then
drafted the original Americans with Disabilities Act. Cynthia Waddell,
ICDRI's Executive Director, is the author of the first accessible web
design standard for government in the US and is a former Americans with
Disabilities Act compliance officer.

ICDRI Contact info :
Michael Burks, Public Information Officer
International Center for Disability Resources on the Internet
http://www.icdri.org
3700 Bastion Lane, Suite 101
Raleigh, NC 27604
Telephone: (919) 349-6661
Email: = EMAIL ADDRESS REMOVED =


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