Generally Bad Form

Even in technically fully valid forms, there can be a lot messed up semantically, making it hardly accessible in many ways. Be it missing or improperly implemented elements – here we show the most common problems and explain them.

Most accessibility problems regarding form are caused due to bad semantics. So if you haven’t done this yet, go back and read Semantics and their importance for accessibility.

The following example shows a basic form that is technically perfectly valid HTML code.

Working Example

Gender
Male
Female
Submit

Explanation

But it lacks a lot of standard features needed for setting elements in relationship with each other properly and triggering browser standard functionality.

Although this visually clearly is a form, the controls aren’t surrounded by a <form> tag. This results in a form not submittable by hitting the Enter key (while focusing a control). Not really an accessibility problem, but still very annoying to power users (if you haven’t done this yet, go back and read Controlling a computer with a keyboard only).

Especially when doing fancy stuff with JavaScript, <form> tags often are forgotten, as developers are messing around with onclick events or similar. But please: whenever form controls need to be submittable, they should be placed in a <form> tag.

Code

<div class="control">
  <label>Full name</label><input type="text" />
</div>
<div class="control">
  <label>Biography</label><textarea></textarea>
</div>
<div class="fieldset">
  <div class="legend">
    Gender
  </div>
  <div class="control">
    <input name="gender" type="radio" value="male" />
    <div class="label">
      Male
    </div>
  </div>
  <div class="control">
    <input name="gender" type="radio" value="female" />
    <div class="label">
      Female
    </div>
  </div>
</div>
<a id="button" onclick="alert(&#39;Submitting using fancy JavaScript...&#39;)">Submit</a>
.control, .fieldset {
  margin: 6px 0;
}

label, .label {
  display: inline-block;
  width: 120px;
  vertical-align: top;
}

.fieldset {
  position: relative;
  border: 2px groove threedface;
  padding: 10px;
}

.legend {
  background-color: #fff;
  position: absolute;
  left: 10px;
  top: -12px;
  padding: 2px;
}

#button {
  padding: 2px 6px;
  border-width: 2px;
  border-style: outset;
  border-color: threedface;
}
#button:hover {
  cursor: default;
}
NIL