banner

Styling HTML Forms With Accessibility In Mind

Written by

Author: Paul Katsande
Styling HTML Forms With Accessibility In Mind
Styling Accessible HTML Forms

Still designing HTML forms using tables? You will be happy to know there is a better way to design forms. HTML has enough elements to enable you to design stylish forms without resorting to the often-used table element. Besides the usual input (input, select, textarea) elements, you also have the fieldset, label, and legend elements. By using these elements, you enhance the accessibility of your forms without any extra effort on your part. A word about these three often neglected elements.

< fieldset >

The fieldset element is a structural container for form elements. You can use it to group your form elements in a logical manner. For example, for a feedback form, you could group a user’s name and address in one fieldset, and the feedback questions in another fieldset.

Being a block level element, by default, the fieldset box extends the full width of its container. Like other elements, you can set its width property to a more suitable value.

Browsers typically draw a border around the element to enhance its visual appeal.

< legend >

It’s good practice to add a title to each fieldset group to explain what the group is all about. The standards-compliant way of doing this is to use the legend element. You place this immediately after the opening tag of the fieldset element. If the fieldset element has a border, the legend will be nicely placed on the top border.

< label >

The label element is a container for the label associated with an input element. You can assign a label to an input element in two ways:

1.) wrap the input element inside the label element

< label >First Name: < input type=”text” name=”fname”/ >< /label >

2.) use the id attribute to bind the label to the input element using the for=”inputElementId” attribute

< label for=”fNameId” >First Name:< /label >
< input type=”text” name=”fName” id=”fNameId” / >

You could use the for=”inputElementId” attribute even for the first method, but it’s not necessary. Also, normally you set the input element name to be the same as the element id (except for checkboxes and radio buttons ). I have made them different here just for illustration. It’s a good idea to always use the label element to help users determine the purpose of the form element.

On Styling The Form

The fieldset, label, and legend elements can be styled using CSS. That’s how you can make your form come alive. The mark-up for the form is simple, and might look like this:

< form action=”processForm.php” method=”post” >< fieldset >
< legend >About You< /legend >
< label >Your name
< input type=”text” name=”firstName” id=”firstName” / >
< /label >
< label >Email address

< input type=”text” name=”email” id=”email” / >
< /label >
< /fieldset >
< input type=”submit” value=”Send details” / >
< /form >

The form styles might be:

fieldset {
border: 1px solid green;
padding-left: 5px;
padding-right: 5px;
margin: 5px;
}
label {
display: block;
font-weight: bold;
}
legend {
color: green;
}

This makes each fieldset have a green border which is 1px wide, and a green fieldset heading (“About You”). The label (e.g. “Email” ) will be in bold font. The ‘display: block’ rule forces the label elements to display in individual rows.

For more detailed examples of form styling, see the resources box.

The accesskey Attribute

To enable easy navigation to elements using the keyboard, HTML also defines the accesskey attribute. This is used to define a single character which can be used to give focus to the element or to activate a link. The HTML 4 standard and most browsers support the attribute for some elements which include input and textarea.

The accesskey is a bit troublesome for a number of reasons – see Using Accesskeys – Is it worth it? and Accesskey Problems Remain In Xhtml 2 for some discussions on this topic. For Firefox users, you might find the thread Firefox 2 and Accesskeys interesting.

The problems with accesskey aside, to include it in your forms is very simple. Here is an example which defines the letter “n” as the keyboard shortcut for the fname input element.

< input type=”text” name=”fname” accesskey=”n” / >

To use the shortcut on Windows you generally need to press Alt+n to give the focus to this element.

About the Author:
For more styling examples: Styling Accessible HTML Forms, Accessible, stylish form layout.

Also see Accesskey standards.[divider]

Article Categories:
Web Design

Leave a Comment

Your email address will not be published. Required fields are marked *


*

captcha

Please enter the CAPTCHA text