Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

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 Extern: "Barrierefreies Webdesign — Praxishandbuch für Webgestaltung und grafische Programmoberflächen" bei amazon.de

Dies ist ein Beispiel aus dem Buch Barrierefreies Webdesign (2004), 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