DEV 7.3 Enhance forms with special HTML mark up

HTML contains features to enhance the accessibility of forms - use them wherever possible.

  • Labels (see DEV 7.2 ):
    • Always use the <label> tag to explicitly associate each label with its input element;
    • Use the title attribute liberally to add extra useful information.
  • Grouping:
    • Use <fieldset> and <legend> to explicitly group form elements;
    • Use <optgroup> in option boxes to logically group the choices where appropriate groupings exist.
  • Tabbing order:
    • Use the tabindex attribute to set tabbing order when necessary - but ideally make the flow of the form natural without having to use tabindex (see DEV 3.5.)
  • Buttons:
    • Use the standard submit button - its accessible in itself (no other attributes needed) - style with CSS;
    • If it is necessary to use an image button, ensure it has alt text.

Radio buttons and check boxes: these are the most difficult elements to make accessible because one question/statement refers to multiple options, each with its own label.

<fieldset> is important here - style the fieldset using CSS (see a full example on a separate page).

Nb: it can be challenging to style nested fieldsets appropriately - on these, prioritise the use of fieldset for the radio and checkpoint elements. Group other elements using headings/different pages, etc.

Example form coding showing use of <fieldset> & <legend>, <label>, tabindex:

<fieldset tabindex="1">
<legend>Contact information</legend>
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name">

</div>
<br>
<div>
<label for="mail">E-mail address:</label>
<input type="text" name="mail" id="mail">

</div>
<br>
</fieldset>

This produces:

Appearance of form using fielset which is styled with CSS - the leged clearly groups the input elements

NB: Layout and style for this form was produced with CSS - the <div> and <br> tags are necessary for this example.

Example form coding showing use of <optgroup>:

<select ... >
  <optgroup label="Swedish Cars">
  <option value ="volvo">Volvo</option>

  <option value ="saab">Saab</option>
</optgroup>
  <optgroup label="German Cars">
  <option value      ="mercedes">Mercedes</option>

  <option value ="audi">Audi</option>
</optgroup>
</select>

This produces:

Appearance of select menu with grouping of options by optgroup

Example of good radio button coding using <fieldset> & <legend>, <label> :

<fieldset>
<legend>Preferred wine</legend>
  <input type="radio" name="wine" value="red"      id="red">

  <label for="red">Red wine</label>
  
  <input type="radio" name="wine"      value="white" id="white">

  <label for="white">White wine</label>
  
   <input type="radio" name="wine"       value="rose"  id="rose">

   <label for="rose">Rose wine</label>
</fieldset>

This produces:

Appearance of radio buttons grouped with fielset and legend