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.

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.

It’s been a long week in technology for me this week. I spent about five or six hours on both last Saturday and Sunday working on the website for my accessibility talk for the Refresh DC meet up on Thursday night. This is the prototype for the DC Tech Skills website I’m building so the Washington, DC, technology community can post their skills and then find others that either have the same skills or might need help on projects for skill they need.

Monday was long day at work  with one meeting that ended up needing a few changes and a few other meetigs were canceled. The rest of Monday night was spent updating the “Accessibility” slides I had prepared for “BarCamp DC” talk back in mid August, 2007.

Tuesday was spent working on getting stuff ready for a move of code to PROD, which never happened. I took a few hours off in the begining of Tuesday night to go to the “Opportunities & Challenges of the One Laptop Per Child (OLPC) Project” meet up. It was really cool to be able to get to use some of the other features of the OLPC has besides the internet. We had a “Chat” going  and afterwards demonstrated the “Write” and “Memorize” activities to people. Then it was home for about three more hours of presentation work.

Wednesday was filled with meetings and luckily a few were canceled. I’ve had more meeting in the last few days than I normally have in a month. I got approval to move code to PROD for one project. I have like two others that just need user/client review and approval and I’m good to go to PROD.

I got home from work around 5:00 PM and started working on  the final dozen or so slides. Things were going well so I took an hour off to watch the Discovery Channel. I forget what the show was, but it must have been good that i took and hour off to watch it. Once that ended I started back on the presentation. The first thing after the TV show my laptop would not type. There was a problem with teh keyboard. I saved things and re-booted.

Around 12:15 AM my keyboard  stopped working a second time. I used the mouse to save everything before re-booting the PC.  The only problem was that it never re-booted. At that point I guess I must have said a few four letters words, since I had not uploaded a copy of my presentation to the server or made a backup in over a day.

After walking into the living room ad then the bedroom  to try and figure out what I might have to do next. I remembered my friend from Rochester, NY, saying that COMPAQ latops sometimes won’t re-boot if you have them plugged in all the time and don’t let the battery drain every so often.

So the first thing I did was take the battery out and just used the power cord and that did not work. Next was put the battery back in and unplug the PC and that worked. First thing after twittering about the problem now at like 1:45 AM I put a copy of everything on the server, and two different thumb drives. By 1:00 AM, I was back and finishing the presentation.

I ended up finishing it around 2:15 AM and spent the next bit of time re-copying the updated information to the server, thumb drives, and into another hold on my machine. It was then 2:30 AM and I tried to get to sleep but was to wound up. Finally went to sleep after 3:00 AM. The lasest night in five days. All the other nighs it had been between 1:00 and 2:00 AM.  I’m getting to old to stay up five night that late.

Thursday morning it started sinking in that close to 100 people were now going to show up to listen to me talk about accessibility. It was just a bit sureal, since when I was at SXSW 2007, I went to most of the accessbility talks and only 50 or 60 people where there to listen to the likes of Derek Featherstone, Ian Lloyd, Patrick Lauke, Glenda Simons (Glenda the Good Witch),  and many others.

These people are proven accessibility experts. I felt like just some guy from Washington, DC consulting for the Army that is really passionate about accessibility.

I had sent the link to two friends to look over early in the morning. I got some feedback from one that I should run the presentation through a spell checker. I said it’s hard when it is done using “S5”, which is HTML based. A guy from the office said paste it into word and run it through, while overriding the code parts. I did this over my lunch. My friend read whole thing over during his early lunch and like most of it.  He thought the topic might be to long to get done in the hour I had along with a few other suggestions to improve it some. While on my lunch I made most of  his changes along with using a bit of his wording, since it made more sense than what I had first written.

One of the people from work noticed that my accessibility talk was the most popular event on Upcoming for the DC area that day. Once I looked it up I got rid of the DC part and looked and it was the third most popular event  for that day anywhere in the world. The first place event was a  new Flickr feature meet up in San Francisco and then a “MacWorld” meet up in San Francisco. Our event was even about 25 people larger than the London “Pub Standards” meet up. This was just unthinkable to me. It put me in a bit of a panic most of the morning and early afternoon.

After the lunch of updating  my presentation I was much better and the panic slowly went away. The rest of the afternoon flew by because I had to finish some work and move other things to PROD.

I headed home around 4:30 PM to pickup my computers and get to the Refresh DC meet up early to make sure everything was ready and working correctly. By this time it seemed like everything was ok and I was relaxed on the Metro trip there.

I guess I finally realized I had been thinking about this presentation for the last few months and what I wanted to present. So when it finally came to doing the presentation all the stress, lack of sleep, and everything just went away.

I thought the presentation just flowed out of me. Part way through the presentaion I asked the audience if I was going to fast and if they were understanding it. They said no my pace was fine and that yes they ubderstood my talk. I thought I was talking like a million miles a minute.  At another point I asked how long it had been and they said like twenty minutes. I was not sure if that meant I had talked for that long or that was how much time I had left.

I got to questions around 8:14 PM (I looked at the computer clock). I guess I had kept the presentation to close to an hour, since we waited a little bit because of the poor weather (snow with rain at rush hour). During the question time I took two photos of the audience of about 50 or 60 people, while someone was answering an audiene members question that I had no experience or answer for.

After the talk and then at Cafe Asia everyone I talked to really like the presentation and had only good things to say to me about it and this was other people than my friends.

Now for the general overview of my talk, for those that might have missed it.

1. Explained a few personal stories of why I’m so passioniate about accessibility. One being seeing all the soldiers that come to Pentagon from Walter Reed Medical Center. Meeting Pat Pound at the Knowbility booth in Austin, TX at SXSW 2007. Also having Charles L. Chen show me his great free software, which are two Firefox extensions. One being a page reader called “CLiCk Speak” and the other being “Fire Vox”, which is a paired down screen reader.
2. The next section was on using “Skip Nav” and “Access Keys” and how useful they are to people that need them.    
3. After that I then talked a bit about the “Color and Contrast” of website and that Text plays an important part of usability for everyone that is sighted.
4. It was then on to how to build proper data tables by having a “Summary” element to explain what the table contain, along with a “Caption” of the table instead of having header in front of it. The final piece about tables wsa that you need table headers and then infomation on you cells to identify what pieces go together.
5. We got int othe longest section of the talk which was about “Forms”. I explained that you need “Fieldsets” and “Legends” to group simular content together and say what it was. The next idea was to put “Labels” and “Input Controls” in either “UL” or “OL”, so screen readers will tell you how many items are there and people will know how many fields they need to fill in. I also explained all the other “Input Controls” in a form and their attributes.
6. I explained how the “Search” box needs to have the word “SEARCH” in front of it so you can tell what it is, along with using the word “Reuired” on fields. This is done using the same technic that you used for “Skip Nav”.
7. The last thing I talked about before questions putting error mesages in the label, such as “User name can not contain spaces”.

A lot of the slides have examples of code or links to other articles or my examples of items in use.

The busy technology week did not end with my “Accessibility” talk,no I attended the “DC Adaptive Technology” talk at the MLK library Saturday afternoon. Bescause of the issues with Metro maintenance I was not able to stay for the whole talk. The part I did see was about using “Dragon Naturally Speaking” some scripting code to allow people with visual issues to use Microsoft Word and other products much easier. It was cool watching the guy giving the presentation talk into his microphone and then seeing the words on the screen.  By using certain commands he could start, stop, or edit the files that he was in. He could even get software to open and close.

This has been a long week in technology for me and it probably will not be the last one like it. I have also been woring on a few different accessibility blog posts to be posted in the nxt week or so.

Please tell me of similar weeks like this you have had or if you enjoyed my presentation.

Thanks, again for all of you coming out to here a talk on Accessibility.

Here are the “Is Your Website Accessible” slides from my presentation on 2008/01/17.

I had a great time this evening doing this. It was worth all the late nights getting ready for the Refresh DC meetup.

I just finished re-reading Roger Johansson’s wonderful article entitled “Use the label element to make your HTML forms accessible“.

I agree with everything he said, except I think by putting the label and the input elelements as part of an un-ordered list (UL) or an ordered list (OL) the screen reader will announce how many items are in the list. By doing so you can then place an UL or OL inside a FIELDSET, which will inform you of how many fields you need to be filled in. This number might be greater than the actual number of items if you have lines of text in the middle of the form field list.

I found this great piece of information about using UL or OL in forms from Justin Stockton when he was looking over a form I was building.  He either asked “Why I was using the <BR> tag?” or “Why I had form elements inside of a <P> tag”. I told him that was how I learned to create my forms from articles I had read. He suggested using the UL or the OL for form items. After that, by like only a day or so I was listening to either one of Derek Featherstone, Aaron Gustafson, or boths podcasts about accessibile forms and they mentioned the same thing.

Here is a short  code example for filling out personal information on  a form:

<fieldset>
<legend>Personal Information</legend>
<ul>
<li>
<label for=”first_name”>First Name</label>
<input type=”text” name=”first_name” id=”first_name” />
</li>
<li>
<label for=”last_name”>Last Name</label>
<input type=”text” name=”last_name” id=”last_name” />
</li>
<li>
<label for=”company”>Company</label>
<input type=”text” name=”company” id=”company” />
</li>
<li>
<label for=”title”>Title</label>
<input type=”text” name=”title” id=”title” />
</li>
</ul>
</fieldset>

Now here is what the code looks like as a form:

Personal Information

• First Name
  
• Last Name
  
• Company
  
• Title
  

Of course you will need to use a bit of CSS to make this look better. You can remove such things as the fieldset border and do a bunch of other things to it. Here is the same example with CSS added, nothing fancy. When you use UL or OL in the fieldset you will be improving the accessibility of the form in my opinion.Please give me your thoughts on this matter of using UL or OL inside a fieldset.