[Introduction, woman's voice over music] Welcome to Web Axe, practical web accessibility tips. Web Axe dot blogspot dot com. Web Axe. Web site accessibility. Web standards. Web Axe dot blogspot dot com.
Announcer: Welcome to WebAxe, practical Web accessibility tips.
Dennis: Welcome to WebAxe, episode 22 hiding labels and subheaders. This is your host, Dennis, and thanks for joining me today. So what we're going to talk about is basically having code on your page, like labels for form elements and subheaders. And what we're going to do is hide them. This is, can also be called invisible content, hidden text, invisible labels, et cetera.
What I'm not going to talk about is the skip nav feature, which is related to that. It's, I actually did that in a pretty early episode of Web Axe, but there's more to it in the skip nav feature, or more options of hiding or showing that text, which is a hyperlink to skip over navigation. And I'm also not going to talk about header images -- hiding heading text that is replacing images, or that are used together. That's a whole other topic in itself too, and I should be doing in the somewhat near future, or hopefully the near future, doing an episode solely on that. So let's get into it.
For the W3C WCAG 2.0, the brand new 2.0 guidelines, web content accessibility guidelines, it is.5.5, creating invisible labels and form elements. I put that link and a couple other good ones, a web aim link about this subject, on the WebAxe blog, at webaxe.blogspot.com. And also some good basic code on this topic. But essentially let's do, let's talk about form labels first.
Examples where you would use this technique of hiding the actual form label content is, for instance, let's say like a phone number. When that's divided up like visually you know, you can see the area code and the first three digits and the next four digits I mean you know that there's three different field labels, you know, form elements for those sections. But if you can't see it, for one reason or another, say you're visually impaired, those really should be labeled. And then so the same goes for date fields. Like you know month, date, or year, or date, month, year. So actually, visually that might not even be clear, but that's a whole other story. And another example you would do this would be maybe for names. Like if you have a field for a first name, middle initial, and last name.
What you do is you go ahead and you know create the form element, and create the labels you know with good accessibility practice. And if you're not exactly sure what I'm talking about, again, I have code on this Podcast entry on the blog, and also I spoke specifically about form labels in a previous Podcast. So feel free to look that up. But once you've properly labeled your form elements, what you do is, in your label tag, you just you add a class. It can be called anything you want, but say it's just called "hidden."
And in your CSS, hopefully you're using a global CSS file and you can put in a hidden class there. And basically that's absolute positioning that element way off of the page. And I guess the standard of doing that is making it from the top you're doing a large negative pixel value in your top margin. Or not top margin, but just the top placement of that element. So it's actually on the page -- the code is on the page -- but speaking you know, the presentation of it, it can't be visually seen. And that's basically the whole idea behind that, and what you can do is you can apply that sub, the same technique to subheaders also.
If you go to my company's web site, checkengineusa.com, you can see that if you look at the code, if you have the web developer toolbar or another feature like that, you can look at the page without all the CSS. And you'll notice that the menu actually has a subheader, an H2 tag, called "menu, " but you can't visually see it. And when you turn off the style sheets, you can see that it's there. So you know if someone's using a screen reader or any other circumstance where the style sheets can't be rendered or what have you, then the menu will be appropriately labeled with a menu header.
Now other circumstances where you can apply this might be like the address or contact information on a lot of sites. I know I like to do this. I like to put on every page, you know, somewhere on the page, always have the address and phone number or whatever for that organization of the web site you know somewhere on that page. And it's not always you know appropriate to put a header there saying address or contact information, because it's pretty much applied or you know you have, again, the style of the web page or the visual aspect of the page just kind of separates it or just makes it obvious. But it's probably good to put a subheader you know there and labeling that contact information or address or something, address and phone number. Which is also a good practice for SEO -- search engine optimization -- and nice clean semantic code, also. And if you listen to my Podcast you'll know that that's what I like so, and that's what's good for your web site.
So that's it for today. Hopefully you've picked up a few good tips, and if you have any comments or anything of course you're welcome to go to the blog, and check out that code too, and leave me a comment, webaxe.blogspot.com. And you could always call the phone number, too, and leave me a message there, and I will play it on the next Podcast. And that number is (206) 202-3678. And that's country code one if you're dialing from outside the United States. So again, give me a ring, leave me a message on this episode of WebAxe or any other episode. Again that's (206) 202-3678. Thanks again for listening, I'll catch you next time.
Announcer: Visit WebAxe at webaxe.blogspot.com. That's webaxe.blogspot.com. Grab your RSS and atom feed here. You can also leave a comment or send Dennis an email. The email address is webaxe@odmag.com.
[END]