Field Labeling

There are a few key tags and attributes that - when applied correctly - greatly improve the accessibility of form fields.

The Problem

It can be hard to associate a form field with a name or label when using assistive technology.

The Solution

Add semantic meaning using <fieldset>, <label>, and alt=""

Live Examples

Before illustrates the problem, After illustrates the solution. Click the header to see it larger in a modal.

Code Comparison

Code diff between the before and after examples above to show the changes necessary. To copy the final source click on the 'after' path link before the diff.

source

Comparing /examples/semantics/field-labeling/before/index.html to /examples/semantics/field-labeling/after/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Accessibility Solutions - Semantics - Field Labeling</title>
    <link rel="stylesheet" href="../../../presentation.css" />
  </head>
  <body>
    <h1>Field Labeling examples</h1>

    <h2>Labeled using <code>for=""</code></h2>
    <label for="textfield">Lorem ipsum dolor</label><br />
    <input type="text" name="textfield" id="textfield" />

    <h2>Labeled by wrapping <code>&lt;label&gt;</code></h2>
    <label>
      <input type="checkbox" name="checkbox-label" />
    <label>Dolores sed consequatur
    </label>

    <h2>Grouped controls using <code>&lt;fieldset&gt;</code></h2>
    <labelfieldset>
      <legend>Choose a lipsum:</label><br />
egend>
      <input type="radio" name="shipping" id="Quod-fugit" value="Quod-fugit" />
      <label for="Quod-fugit">Quod fugit nulla</label><br />
      <input
        type="radio"
        name="shipping"
        id="Cum-adipisci"
        value="Cum-adipisci"
      />
      <label for="Cum-adipisci">Cum adipisci</label><br />
      <input
        type="radio"
        name="shipping"
        id="Ipsam-nam-doloremque"
        value="Ipsam-nam-doloremque"
      />
      <label for="Ipsam-nam-doloremque">Ipsam nam doloremque</label>
    </fieldset>
  </body>
</html>