Beispiel:Blog-Barrierefreies Webdesign.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0;" />  
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
  <title>Formular nach BITV 2.0</title>
  <style>
  /* Mit nachstehender Zeile bekommen alle aktiven Eingabefelder und Schalter eine gelbe Hintergrundfarbe */
    :focus { background-color: yellow;}
	
    form {
      width: 25em;
    }

    input, label {
      float: left;
      width: 45%;
    }
    button {margin: 1em;}
	
    p { clear: both;}
  </style>
</head>
<body>

<h1>Formular nach BITV 2.0 </h1>

<main>
	<h2>Tastaturbedienbarkeit +<br>Fokus des aktiven Elements deutlich anzeigen</h2>
	
  <form>
    <label for="vorname">Vorname: ([Alt]+v)</label>
    <input name="Vorname" id="vorname" type="text" size="30" maxlength="30" accesskey="v">
    
    <label for="nachname">Nachname: ([Alt]+n)</label>
    <input name="nachname" id="nachname" type="text" size="30" maxlength="30" accesskey="n">
    <label for="Strasse">Straße: ([Alt]+s)</label>
    <input name="Strasse" id="Strasse" type="text" size="30" maxlength="30" accesskey="s">
	<label for="PLZ">PLZ: ([Alt]+p)</label>
	<input name="PLZ" id="PLZ" type="text" size="30" maxlength="30" accesskey="p">
	<label for="ort">Ort: ([Alt]+o)</label>
	<input name="ort" id="ort" type="text" size="30" maxlength="30" accesskey="o">
	
	
	<button type="submit">Absenden</button>
  </form>
  
  <p>Das Eingabefeld Vorname bekommt ein Label. Mit "for" im Label und "id" im Eingabefeld werden
	Eingabefeld und Label verknüpft. Das ist wichtig für Screenreader.</p>
    
  <p>Mit dem Attribut "accesskey" kann dem Eingabefeld ein Shortcut zugeordnet werden.
	Die Tasten alt+v aktivieren das Eingabefeld "Vorname", alt+n das Eingabefeld "Nachname".
	Für den Nutzer des Formulars muss es erkennbar sein, dass es die Möglichkeit von Shortcuts gibt.</p>
   
  <p>Zurück zum <a href="https://blog.selfhtml.org/2016/11/12/barrierefreies-webdesign/">Blog-Artikel</a></p>  
</main>	
	
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Blog-Barrierefreies_Webdesign.html&oldid=49060“