John F Croston III

How do most people usually designate that a field is “Required” in a web FORM? I would think that it is with an asterisk (*) after the actual INPUT field and it is sometimes made “bold” and “RED”. There are other ways to do this that are simple, use web standards, good design principles, and are 508 compliant.

When creating a FORM you should not make all fields required. By doing that nothing stands out to the person filling in your very important FORM. If most fields are required you should state at the top of the FORM or in the directions the fields that are NOT required.

Instead of just placing an asterisks after either the LABEL or the INPUT field in a FORM for a required field as most people do. You can actually place the word “Required” within the LABEL. Of course your using LABELs for your FORMS, along with FIELDSETs and LEGENDs.

Here is how to accomplish this for a web FORM and it can be easily accomplished by using a little CSS to hide the text that a field is “Required” to be filled in. The way to do this, that I use is to make it part your input fields LABEL. Here is an example of a few lines of code on how the code might look.

<label for=“username”><em>Required<em>User Name</label>

To hide the word “Required“ you will be able to use the same CSS used for hiding “SKIP NAVIGATION” by adding a new class or stating that LABELs with an “EM“ in them will be displayed.hidden off the page.

Reminder please do not use “DISPLAY: NONE” in your CSS, since screen readers will not see it. Below is the CSS to visually hide the word “Required” from browsers.

.skip a, .skip a:hover, .skip a:visited, label em {
position: absolute;
left: 0px;
top: -500px;
width: 1px;
height: 1px;
overflow: hidden;
}

As you can see the CSS positions the link absolutely with a position of “LEFT” zero pixels and a “TOP” position of negative 500 pixels. This will allow screen readers, Blackberries, Treos, etc. to see it but not browsers. That is as long as their CSS in turned on.

You can also place extra notes or instructions for a field inside the INPUT field with lighter text that is that will not go away once you start typing in the field. This can be done by using more CSS. Below is the XHTML code to accomplish this.

<label for=“username”><em>Required<em>User Name<strong>must not contain spaces<strong></label>

<input type=“text” name=“username” id=“username” size=“25” maxlength=“50” value=”” />

The CSS to do this is fairly simple and follows below.

label strong {
color: #aaa;
font-size: .85em;
font-style: normal;
position: absolute;
top: 0;
right: -275px;}

Here is what the CSS is doing for the extra notes and instructions. It is first taking any STRONG elements within the LABEL and making it light gray color, the FONT-SIZE smaller and normal weight. After that it is absolutely positioned at the top left of the INPUT FORM field, as long as the LABEL is left or right justified to it and finally placing the information negative 275 pixels from the right of the beginning of the INPUT field.

dont’ forget to listen to your FORMs by using the Firefox extension Fire Vox. Here is an example how placing extra notes or instructions would look in a FORM, along with some “Required” field examples.

I hope this post is useful and further explains how to hide visual the word “Required” from my Accessibility presentation “Is your Website Accessible?”, please look for the most current presentation closer to the top of the list.

Skip navigation is a great thing to have on your website for a lot of reasons. Here is a list of just a few of them the greatest ones being the first two, that they make websites more accessible to all.

• People using screen readers are forced to listen to a long lists of navigation links, sub-lists of links, and other elements before arriving at the main content.
• Keyboard users are forced to tab through all of the top links in order to reach the main content.
• Main content is not usually the first thing on the page or in the source order.
• People using Blackberries, Treos, etc. have to scroll through a huge list of links.

Now that I have listed some of the reasons for skip navigation here is the code that I use in my websites.

<body>
<div class=”hide”> <a href=”#MAINcontent”>Skip to Main Content</a> </div>

… navigation and other stuff goes here …

<a name=”maincontent”></a>
<p>This is the first paragraph</p>

Please notice that the HREF anchor has “MAINcontent” in the link part, by using “MAIN” in front of it you can still use “content” as an anchor somewhere else on the page for some odd reason. The other point to notice is that link text is “Skip to Main Content” because some screen readers or their voices might mis-pronounce the link text if it was “Skip to Content”. The screen readers have issues with the word content.

Below is the CSS that I use in my websites to not display the skip navigation link(s) accept for the first time you tab through it then after you use it it does not show up on the screen anymore. I changed the ID information from the ones used in the original article by WebAIM on how to implement skip navigation (thanks, Justin Thorp). The article uses the ID of “skip”, I figure you might want to use it hide other items or you might want to have more than one “skip” type link, so I changed it to be a “CLASS” instead of an “ID”. The reason I changed the “ID” to .HIDE from the article was so you could use the CLASSs for other things like visually hiding the word “Required” for web FORM LABELs.

Reminder please do not use “DISPLAY: NONE” in your CSS, since screen readers will not see it.

.hide a, .hide a:hover, .hide a:visited {
position: absolute;
left: 0px;
top: -500px;
width: 1px;
height: 1px;
overflow: hidden;
}

.hide a:active, .hide a:focus {
position: static;
width: auto;
height: auto;
}

As you can see the CSS positions the link absolutely with a position of “LEFT” zero pixels and a “TOP” negative 500 pixels. This will allow screen readers, Blackberries, Treos, etc. to see it but not browsers.

I hope this post is useful and further explains skip navigation from my Accessibility presentation “Is your Website Accessible?” at Refresh DC.

Over the next few weeks I will post in more detail different sections of my “Is Your Website Accessible” presentation.

Two of the topics I have already covered on my blog are:

1. Use of UL or OL in HTML Forms
2. CLiCk Speak Firefox Extension

The new ones I will be going over to an excessive degree (just kidding) are:

1. The “Fire Vox” Firefox extension is a FREE screen reader
2. Part of CSS3 “Say-Instead
3. Are You Using Skip Navigation?
4. How to Use Access Keys
5. You Need Color and Contrast
6. How to Create Web Standard Accessible Tables
7. How to Improve Your Search Function
8. How to Hide “Required” from Visual Users, but Make it Available for All Others
9. Advanced Forms Information

Please leave a comment if you would like me to explain other items covered in my talk at greater length or even something I did not cover that deals with accessibility.