You are here : Home - Web Development - HTML - Accessibility - Tags

---

Tags for accessible web forms

---

Making your forms more accessible is only a case of using upto 4 new tags. Let's not say new tags instead we'll call them rarely used tags :)

• <fieldset> </fieldset>
  
• <legend> </legend>
  
• <label for=""> </label>
• <optgroup label=""> </optgroup>

Yes, that's all there is to it, just 4 tags.

---

fieldset and legend

The <fieldset> </fieldset> tags are responsible for defining the group and placing the border around it. All the form fields for the group are enclosed beteween <fieldset> </fieldset>

example :

<fieldset>
  FORM FIELD
  FORM FIELD
  FORM FIELD
</fieldset>

The <legend> </legend> tags must be used in association with the fieldset tag. The legend tag it displays the group text.

example :

<fieldset>
<legend>text you want as the group title</legend>
  FORM FIELD
  FORM FIELD
  FORM FIELD
</fieldset>

Here's a form example with the fieldset and legend tags.

fieldset and legend contact example

I could be an element to get your name
I could be an element to get your email address
I could be an element to get your postal address

See the html source for this form example

---

<label for=""> </label>

The label tag defines a relationship between the text and form element. You must make sure the form element has an id="something" so we can attach the label to it.

id example :

Your Name <input type="text" name="your_name" id="your_name">

Now we can attach a label to the text that relates to this field

<label for="your_name">Your Name</label>

Put the 2 together and you have it :) Notice on this site, labels change the pointer to the hand icon so you can see it's clickable. This is done with style sheets and again it enhances overall usability

Your Name

Now what happens is, when you click on the word Your Name the relevant form field gets focus and redy for input.

To Further enhance this example we can add a keyboard shortcut using the input accesskey attribute.

Your Name

See the html source for this form example

---

<optgroup label=""> </optgroup>

This tag is only used to on long menu items and defines groups of related items. It creates a group header defined by the label attribute.

Example without optgroup :

Where do you live : Aberdeen Edinburgh Glasgow London Birmingham Manchester Londonderry Dublin Belfast Cardiff Swansea Newport

Same example with optgroup :

Where do you live : Aberdeen Edinburgh Glasgow London Birmingham Manchester Londonderry Dublin Belfast Cardiff Swansea Newport

See the html source for this form example

Once again we are creating an eviromnent which makes life easier for your visitor.

---

summary

As you can see its not really that difficult to repair forms. There are only a few tags. Adding them to any existing forms on your site will yield instant benefits to your site.

Just remember, you don't have to do everything at once. Every little bit you do now not only makes your site more accessible - it makes it more usable.

---

---

• Accessibility Home
  • Accessibility - a new way of thinking - More information that might be useful before you start.
  • Accessible anchors - Learn how to make your links more useful.
  • Accessible images - beyond the alt tag.
  • Accessible forms - web form accessibility also aids overall form usability.
    • General rules for web forms
    • Tags for accessible web forms
• Useful links and resources

---

---

Search
	[ Web] [ WebDevTips]

---

[back to top of page]   

[] []