How to Hide “Required” from Visual Users, but Make it Available for All Others

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: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

As you can see the CSS positions the link absolutely with a position of “LEFT” minus 10,000 pixels and a “TOP” position of auto. 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.

Don’t 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.

“Say-Instead” Part of CSS3

Again while in Austin, Texas, I was talking with Charles L. Chen about his CLiCk Speak Firefox extension and he showed me that by using the new CSS3 property called “say-instead“, which is used to allow screen readers to pronounce words or phrases correctly. Listed below is a few examples of phrases you might use in your posts, which a screen reader would pronounce incorrectly.

The first part of the line is the way you typed it and the second is the way it should be spoken.

  • Dr. Kapp versus Dr. Cop
  • Homepage versus Home Page
  • Pope John Paul II versus Pope John Paul the Second
  • Rocky II versus Rocky 2
  • Godfather II versus The Godfather Part 2

If the say-instead property were officially part of CSS3 and available to use in browsers you would have to add to your CSS file the different classes for each set of words or sets of words you want to have said properly. A few examples of this would be as follows:

.sayinstead_drkapp { say-instead: “doctor cop”;}

.sayinstead_homepage { say-instead: “home page”;}

.sayinstead_popejp2 { say-instead: “Pope John Paul the Second”;}

.sayinstead_rocky2 { say-instead: “Rocky Two”;}

.sayinstead_godfather2 { say-instead: “The Godfather Part Two”;}

 

The way you need to get these to work is put a <SPAN> tag around each set of words that needs to have the “say-instead” text read out loud. Below is the example of the code:

  • Dr. Kapp versus <span class=”sayinstead_drkapp”>Dr. Kapp</span>
  • Homepage versus <span class=”sayinstead_homepage”>Homepage</span>
  • Pope John Paul II versus <span class=”sayinstead_popejp2″>Pope John Paul II</span>
  • Rocky II versus <span class=”sayinstead_rocky2″>Rocky II</span>
  • Godfather II versus <span class=”sayinstead_godfather2″>The Godfather II</span>

 

I’m spent a bunch of time trying to get this to work in this post and was having trouble, I think part of the problem is that I’m trying to do this inside of WordPress. I created an example on my website to use as the test example for the “say-instead” CSS3 property.

Here is the example created by Charles L. Chen on his website for the “say-instead” CSS3 property. Please give the example page a try by using a screen reader such as JAWS, Window-Eyes, or the Firefox extension Fire Vox created by Charles L. Chen. See my post for more details about Fire Vox.

I hope this information is helpful while building your websites and trying to make them as accessible as possible.

The “Fire Vox” Firefox extension is a FREE screen reader

Over a month ago I downloaded the Fire Vox Free screen reader extension for Firefox that acts like a screen reader and was created by Charles L. Chen.

I found that it was of great use and I assume it simulates most of the major functions that screen readers like JAWS or Window-Eyes can do, since I have never used either one of those.

Here is a little more information about the two screen readers I mentioned earlier and information about there cost.

  • JAWS – free trial (shuts off machine every 40 minutes) and $900 – $1100 to purchase a full version .
  • Window-Eyes – 60 day trail $39 or $900 to purchase a full version.

Fire Vox does not have all the bells and whistles that the other two have. I have not been able to find how to increase or decrease the speed of the speaking voice.

Some uses for the Fire Vox Firefox screen reader extension.

  • To see how your website will be to someone that uses a regular screen reader for someone with visual issues.
  • Now close your eyes and listen to your website to see if you can navigate and find information. You should be able to, since you created the website.

After awhile of using Fire Vox you might want to turn off the auto speaking function. All of the commands for Fire Vox on at least a PC are done with CTRL + SHIFT + some default key. To get to the list of functions you have to use CTRL +SHIFT + M to get the pop-up menu and un-click the “Speak Events” and “Echo Keys” checkboxes. This will then only allow the screen reader to be activated when you use the following key strokes CTRL +SHIFT + A or when a pop-up window occurs. This allows someone that needs these functions to still be able to get them to work.

For a full explanation please read the post on the Accessify Forum on how to turn off speaking all the time. To get Fire Vox to stop reading/speaking you can hit any key on the keyboard.

Here are some of the functions that Fire Vox does have are their default settings.

  • Auto Read – CTRL + SHIFT + A
  • Read Previous – CTRL + SHIFT + D
  • Read Next – CTRL + SHIFT + F
  • Repeat – CTRL + SHIFT + E
  • Say Selected Text – CTRL + SHIFT + O
  • Spell Out – CTRL + SHIFT + S
  • List of Headings – CTRL + SHIFT + H

There are a great bunch of Fire Vox tutorials on their website that will explain a lot more. There is no point of repeating all that information here.

Here is the links to the exercises from the Fire Vox tutorial page.

  1. Reading Text and Navigating Web Pages
  2. Getting Additional Information
  3. Working With Forms
  4. Working With Live Regions

So please download the Fire Vox free screen reader extension for Firefox and try it out. Tell me what you think.