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.

Verwendung von FIELDSET zur Unterteilung von Informationsblöcken

Das (X)HTML-Element FIELDSET kann in Formularen eingesetzt werden. Zusammen mit dem LEGEND-Element können damit Informationsblöcke strukturell und optisch unterteilt werden, und für den Nutzer handhabbarer gemacht werden.

HTML

<form>
  <fieldset>
    <legend>Anschrift</legend>
    <table>
      <tr>
        <td>
          <label for="strasse">Straße</label>
        </td>
        <td>
          <input type="text" name="strasse" value="Straße eingeben" id="strasse" />
        </td>
        <td>
          <label for="nummer">Nr.</label>
        </td>
        <td>
          <input type="text" name="nummer" value="Nr." id="nummer" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="plz">PLZ</label>
        </td>
        <td>
          <input type="text" name="plz" value="PLZ" id="plz" />
        </td>
        <td>
          <label for="ort">Ort</label>
        </td>
        <td>
          <input type="text" name="ort" value="Wohnort" id="ort" />
        </td>
      </tr>
    </table>
  </fieldset>
  <fieldset>
    <legend>Persönliche Angaben</legend>
    <table>
      <tr>
        <td>
          <label for="alter">Alter</label>
        </td>
        <td>
          <input type="text" name="alter" value="Alter eingeben" id="alter" />
        </td>
        <td>
          <label for="geschlecht">Geschlecht</label>
        </td>
        <td>
          <input type="text" name="geschlecht" value="Geschlecht" id="geschlecht" />
        </td>
      </tr>
      <tr>
        <td>
          <label for="ausbildung">Ausbildung</label>
        </td>
        <td>
          <input type="text" name="ausbildung" value="Ausbildung" id="ausbildung" />
        </td>
        <td>
          <label for="religion">Religion</label>
        </td>
        <td>
          <input type="text" name="religion" value="Religion" id="religion" />
        </td>
      </tr>
    </table>
  </fieldset>
</form>

Browseransicht

Anschrift
Persönliche Angaben