HTML-Code
Hier kommt der HTML-Code:
<body>
<h1>Barrierefreies Web-Formular</h1>
<form>
<div class="containerdetail">
<label for="vorname" accesskey="v" class="klasse_label">Vorname:</label>
<input type="text" id="vorname" name="vorname" required />
</div>
<div class="containerdetail">
<label for="nachname" accesskey="n" class="klasse_label"> Nachname:</label>
<input type="text" id="nachname" name="nachname" required />
</div>
<div class="containerdetail">
<label for="email" accesskey="a">E-M<span class="label_erster_buchstabe_unterstreichen">a</span>il-Adresse:</label>
<input type="email" id="email" name="email" required />
</div>
<div class="containerdetail">
<label for="betreff" accesskey="b" class="klasse_label">Betreff:</label>
<input type="text" id="betreff" name="betreff" required />
</div>
<div class="containerdetail">
<label for="nachricht" class="labelnachricht klasse_label" accesskey="m">Mitteilung:</label>
<textarea id="nachricht" name="nachricht" cols="30" rows="5">Guten Tag! </textarea>
</div>
<button>Senden</button>
</form>
</body>
Erklärung des HTML-Codes
Blinde Menschen nutzen eine Vorlese-Software, sie heißt Screenreader, um sich u. a. Webseiten vorlesen zu lassen. Damit der blinde Webseitenbesucher weiß, welches Label zu welchem Eingabefeld gehört müssen diese miteinander verknüpft sein. Der Label bekommt das Attribut for mit einem entsprechenden Namen und das Eingabefeld bekommt eine id mit dem gleichen Namen. Bei dem Eingabefeld „Vorname“ steht im Label for=“vorname“ und im Eingabefeld id=“vorname“. So weiß der Screenreader das Label gehört zum Eingabefeld.Für blinde Menschen und sehr viele Menschen mit einer Sehbehinderung ist es wichtig, dass Eingabefelder per Tastaturkürzel ansteuerbar sind. Deswegen ist es wichtig dem Label mit dem accesskey-Attribut ein Tastenkürzel zu zuweisen. Der Label Vorname hat das Attribut accesskey=“v“. Das bedeutet, mit dem Tastaturkürzel Alt + v ist der Label Vorname aktivierbar. Weil der Label wie oben erklärt mit dem Eingabefeld verknüpft ist, wird beim Drücken von Alt + v, dass Eingabefeld „Vorname“ aktiviert.
CSS-Code
Hier kommt der CSS-Code:
html{ font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;}
.containerdetail{
display: block;
}
label {display: block;
margin-right: 5px;
}
.klasse_label::first-letter{
text-decoration: underline;
}
.label_erster_buchstabe_unterstreichen{
text-decoration: underline;
}
input { width: 50%;
margin: 0 0 10px 0;
}
input, textarea{
border: 1px solid black;
border-radius: 10px;
box-shadow: 2px 2px 2px lightgray;
font-size: inherit;
}
textarea{resize: vertical;
min-height: 100px;
width: 50%;}
button{ margin-top: 5px;
min-height: 3.5rem;
background-color: blue;
color: white;
padding-left: 0.5em;
padding-right: 0.5em;
border: 1px solid white;
box-shadow: 2px 2px 2px lightgray;
font-size: inherit;
}
/* Barrierefreiheit */
input:focus, textarea:focus {
background-color: yellow;
}
button:focus{
color: black;
background-color: yellow;
}
Erklärung des CSS-Codes
Im HTML habe ich mit dem Attribut accesskey Tastaturkürzel festgelegt. Das Problem ist, dass der Anwender nicht sehen, kann welcher Buchstabe das Tastaturkürzel ist. Deswegen sorge ich mit den CSS-Klassen .klasse_label::first-letter und .label_erster_buchstabe_unterstreichen, dass die entsprechenden Buchstaben unterstrichen werden. Warum 2 CSS-Klassen? .klasse_label::first-letter ist eigentlich die richtige Methode. Sie unterstreicht den ersten Buchstaben in einem Label. Aber: Es kann vorkommen dass es 2 Labels gibt die mit dem gleichen Buchstaben beginnen. Dann gibt es ein Problem. Der zweite Tastaturkürzel funktioniert nicht. Deswegen zeige ich mit der Klasse .label_erster_buchstabe_unterstreichen eine Alternative-Methode. Um es kurz und knapp auf den Punkt zubringen: Mit CSS sorge ich dafür, dass der Anwender sieht, welche Buchstaben Tastenkürzel sind und in Kombination mit der Alt-Taste gedrückt werden können. Für Menschen mit einer Sehbehinderung ist es wichtig zu erkennen, welches Bedienelement das aktive ist bzw. in Fachchinesisch: Welches Bedienelement den Fokus hat. Meine Lieblingsmethode ist, dass ich dafür sorge, dass das aktive Bedienelement eine Gelbe Hintergrundfarbe bekommt. Das realisiere ich wie folgt:
input:focus,
textarea:focus {
background-color: yellow;
}
button:focus {
color: black;
background-color: yellow;
}
Wenn Sie diese Kriterien umsetzen, dann ist Ihr Web Formular barrierefrei.
Barrierefreies Web Formular – Erklärung in einem Youtube-Video
Für alle die sich lieber ein Youtube-Video anschauen, hier das Video zum Blogthema:Schlussbemerkung
Web-Formulare barrierefrei programmieren ist sehr wichtig. Ich hoffe dass dieser Artikel dazu führt, dass mehr Web Formulare barrierefrei programmiert werden.Wenn Sie Fragen zu obige Themen haben, schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .