Beispiele aus dem Buch (Abschnitt 2.7: Strukturen und Validierung)

Cover: 'Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen' von Jan Eric Hellbusch
"Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.de

Dies ist ein Beispiel aus dem Buch [i;30-80-000-1], das Ende 2004 im dpunkt.Verlag erschienen ist.

Logische Bezeichnungen für Eingabefelder

Mit dem LABEL-Element wird eine Bezeichnung explizit mit einem Eingabefeld oder Auswahlmenü verknüpft. Dies erlaubt es vor allem auch Screenreader-Benutzern die Bezeichnung eines Eingabefeldes direkt vom Eingabefeld aus abzurufen.

Dies bietet auch eine größere Fläche für den Mausklick.

HTML

<form>
  <table>
    <tr>
      <td>
        <label for="vorname">Vorname:</label>
      </td>
      <td>
        <input type="text" id="vorname" />
      </td>
    </tr>
    <tr>
      <td>
        <label for="nachname">Nachname:</label>
      </td>
      <td>
        <input type="text" id="nachname" />
      </td>
    </tr>
  </table>
</form>

Browseransicht