DTP


 
Lively discussions on the graphic arts and publishing — in print or on the web


Go Back   Desktop Publishing Forum > General Discussions > Web Design

Reply
 
Thread Tools Display Modes
Old 04-28-2006, 02:35 PM   #1
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default <label> for forms

I've been using <label> for form inputs for a number of years now, but it's only been recently that I've fully understood that <label> is as important for forms as "alt" is for images when it comes to screen text readers.

This is probably obvious to many of you, but for the benefit of some others here's a brief explanation. Glad to go in to more detail if there's a need.

The <label> helps identify an input element for text readers. Easy example:

Give us your e-mail [ ]

The code would be <label for="email">Give us your e-mail</label><input yada yada id="email" />

The <label> ties the text to the id "email" in the form input.

Sometimes, an input doesn't have associated text. Recent example I coded at work; a Search box for my work site that is just a text box and a Search button. To label the box, I wrote a class in my css:

.hidetext {display: none;}

So before the input box, I included the following code:

<span class="hidetext"><label for="searchtext">Type search text here</label></span>

That's just the basics; if anyone needs more info (or can expand on the topic) let me know.

FYI, an easy way to test pages with forms is the Cynthia validator. I don't have the URL because there's a command on the Firefox Web Developer Tools (Tools > Validate Section 508) that runs a published page thru Cynthia. Not as handy as Validate Local for the W3C validator, but still useful.

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 04-28-2006, 04:27 PM   #2
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Nice intro, Dennis!

Quote:
Originally Posted by dacoyle
Sometimes, an input doesn't have associated text. Recent example I coded at work; a Search box for my work site that is just a text box and a Search button. To label the box, I wrote a class in my css:

.hidetext {display: none;}

So before the input box, I included the following code:

<span class="hidetext"><label for="searchtext">Type search text here</label></span>
Consensus on the WAI-IG mailing list is that for people using screen readers every input field should have its own label - even if blindless people can understand the form perfectly well without it. Basically, for screen reader users every field needs to be "announced" - and a "search" button after the input field doesn't do that. But a visible label would here clutter up the form visually.

The problem is that using display: none hides the text not only from a graphical rendering but from screen readers as well. The solution is to use absolute positioning to move the element off screen by giving it a large negative position in at least one direction. That way it's not there visually, but still "present" in the text flow for screen readers which will read it normally.

BTW, "Type search text here" is a bit too wordy - people do know that input fields are meant to type something in . "Search for:" clearly indicates what the field is for and is nice and short.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 04-28-2006, 06:17 PM   #3
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Marjolein,

If text readers don't read display:none,then I have a major problem to fix at work next week.

I'm not sure if a huge neg margin would work with my work design (over 10,000 files, can't easily change it.) Can you think of any other work around?

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 04-29-2006, 12:50 AM   #4
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dacoyle
If text readers don't read display:none,then I have a major problem to fix at work next week.
I'm afraid you do, Dennis!

Quote:
Originally Posted by dacoyle
I'm not sure if a huge neg margin would work with my work design (over 10,000 files, can't easily change it.) Can you think of any other work around?
I wasn't thinking of a negative margin but simply positioning the element - position: absolute with a horizontal or vertical postion that would put it off-screen. If you already have a "hook" for hiding with display:none can't you just replace the display:none with the alternative rules? But I can imagine it would be a major job anyway...
The positioning solution would look somewhat like this (using your class as a hook):
Code:
.hidetext {
	position:absolute;
	left:1000px;
	width:900px;
}
but be aware there are problems with that, too (mostly a matter of browser bugs though) but I reckon that's better than not making the text available at all which is what display:none does (any screen reader that does read it has a bug!)

I'd advise you to subscribe to the WAI-IG mailing list - it's public and medium-volume. (Do use a throw-away email address if you're ever going to post since the archives retain the addresses and can be spidered by spambots.) But the archives are searchable and browsable and an excellent resource.

Some references to end with:
Google for [display:none accessibility] and you'll easily turn up lots more (not all of it good, of course).

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 04-29-2006, 05:05 AM   #5
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Marjolein,

That's good information, but after thinking about it I realized it won't be a huge task to fix. I don't have to fix many files; just two CSS files.

Harder part will be telling my web master that he gave me bad advice...

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 04-29-2006, 07:25 AM   #6
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dacoyle
That's good information, but after thinking about it I realized it won't be a huge task to fix. I don't have to fix many files; just two CSS files.
That's worlds better than 10,000.

Quote:
Originally Posted by dacoyle
Harder part will be telling my web master that he gave me bad advice...
*chuckle*
I can't help you with that - except to suggest you point him to the references I gave you...

Aren't you glad now you decided to post a little article about using the <label> tag?

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 04-29-2006, 07:50 AM   #7
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Marjolein,

10,000 is the approximate number of my entire work site but the Search box is only on the top level pages, about 12 I think. We only identified 2 other forms that needed updates, but this does show the beauty of CSS. I don't have to update 14 files, just one class and one ID.

Yes, I am glad I posted this thread. Only just recently "getting it" myself, I figured there was more to learn. There's always more to learn...

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 04-29-2006, 08:19 AM   #8
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dacoyle
10,000 is the approximate number of my entire work site but the Search box is only on the top level pages, about 12 I think. We only identified 2 other forms that needed updates, but this does show the beauty of CSS. I don't have to update 14 files, just one class and one ID.
And quite a strong argument for linking to a stylesheet rather than embedding it or using inline styles!

My motto is to learn something new every day.

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Old 04-29-2006, 05:26 PM   #9
dacoyle
Member
 
dacoyle's Avatar
 
Join Date: Aug 2005
Location: Arlington, VA (across the river from Washington, DC)
Posts: 560
Default

Quote:
Originally Posted by iamback
And quite a strong argument for linking to a stylesheet rather than embedding it or using inline styles!

My motto is to learn something new every day.
I never, ever use inline styles. I have made rare exceptions and defined a one-shot style in the <header>, but the circumstances have to be rare indeed. I've done it so few times that I can't even think of a good example. Usually, related to extremely large data tables that need a smaller font to avoid horizontal scroll at 800x600.

I'd like to learn something every day, but some days there just isn't time. So my motto is just to always try to learn something new whenever given the chance. But what we do for a living, there's just too much to learn... or so it seems. At work, I work with a team of 8 other developers with the oversight of 2 web masters so we can cover just about anything. Anymore, that's just necessary for quality web design.

Hmmm... maybe a new thread on that? How many developers know HTML, CSS, are graphic artists, database developers, usability, W3C, and...what else? My team at work covers most bases, though our database driven sites are still ColdFusion; I keep mentioning PHP (especially since CF likes to frop our web site a few times a week), but no one is listening yet.

   
__________________
Dennis
dacoyle is offline   Reply With Quote
Old 04-29-2006, 10:51 PM   #10
iamback
Member
 
iamback's Avatar
 
Join Date: Oct 2005
Location: Amsterdam, NL
Posts: 4,894
Default

Quote:
Originally Posted by dacoyle
I never, ever use inline styles. I have made rare exceptions and defined a one-shot style in the <header>, but the circumstances have to be rare indeed. I've done it so few times that I can't even think of a good example. Usually, related to extremely large data tables that need a smaller font to avoid horizontal scroll at 800x600.
I don't either - when I can avoid them. But there are exceptions ... for instance the headings on my blog where I have a little flag depending on the country I'm in: that flag is a background image, and it's put there (dynamically, with PHP) by adding an inline style with a background image depending on the country. Of course it's possible to have a country class and hundreds of rules, one for each class (country) to display a flag. A single rule in a dynamic (PHP) stylesheet won't do since there can be multiple countries on a single page. so putting that bit of ad hoc style inline is actually the most efficient.

When starting a completely new (sub)site I start with a small template page with an embedded stylesheet - so I will have just one single file to edit; once it's reasonably stable, it gets linked.

Quote:
Originally Posted by dacoyle
Hmmm... maybe a new thread on that? How many developers know HTML, CSS, are graphic artists, database developers, usability, W3C, and...what else? My team at work covers most bases, though our database driven sites are still ColdFusion; I keep mentioning PHP (especially since CF likes to frop our web site a few times a week), but no one is listening yet.
Now don't get me started on CF ... or nt here. But go ahead, start a new thread and I'll jump in

("Frop"? That's a new word to me; I think I have a good idea what it means though - with my experience with CF, limited though it is )

   
__________________
Marjolein Katsma
Look through my eyes on Cultural Surfaces (soon!), My ArtFlakes shop and Flickr.
Occasionally I am also connecting online dots... and sometimes you can follow me on Marjolein's Travel Blog
iamback is offline   Reply With Quote
Reply

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
protecting online forms john_b Web Site Building & Maintenance 6 03-10-2007 05:45 AM
Freelancer boggled by IRS forms rbb Business Matters 1 08-28-2006 10:44 AM
Learning to do Forms dthomsen8 Web Site Building & Maintenance 4 04-13-2006 09:27 AM
Bitmap Label Maker Andrew B. Images 1 11-18-2005 06:51 AM
Acrobat 6 (and 7) use with forms DTP Guy Print Production & Automation 5 03-21-2005 12:26 AM


All times are GMT -8. The time now is 03:21 AM.


Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Contents copyright 2004–2014 Desktop Publishing Forum and its members.