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.

Vermeidung von Tastenkombinationen

Tastenkombinationen erfordern die Fähigkeit des Benutzers, mehrere Tasten gleichzeitig zu drücken. Um diese Notwendigkeit zu vermeiden, können Scripte eingesetzt werden, um die erforderlichen Zeichen einzusetzen. Zu Demonstrationszwecken wird im folgenden ersten Beispiel JavaScript verwendet, um das @-Zeichen zu erzeugen. Das Ergebnis wird in einer Pop-Up-Meldung ebenfalls per JavaScript dargestellt.

HTML

<form action="http://www.seitenadresse.de" method="get" onsubmit="alert(this.username.value+'@'+this.domain.value);">
  <p>
    …
    <input type="text" name="email" size="15" value="E-Mail-@dresse" onfocus="this.value='@';" />
  </p>
  …
</form>

Browseransicht

Um die Notwendigkeit eines Mehrfachtastendrucks durch den Benutzer zu vermeiden, kann im folgenden zweiten Beispiel eine serverseitige Lösung in Betracht gezogen werden:

HTML

<noscript>
  <p>Sie können das JavaScript-Beispiel nicht testen, weil Ihr Browser JavaScript nicht unterstützt oder Sie JavaScript derzeit ausgeschaltet haben.</p>
</noscript>
<form action="http://www.seitenadresse.de" method="get" onsubmit="alert(this.username.value+'@'+this.domain.value);">
  <p>
    …
    <input type="text" id="username" name="username" size="15" />
    @
    <input type="text" id="domain" name="domain" size="28" /><br />
    …
  </p>
</form>

Browseransicht

@