Elemente im Web und Barrierefreiheit

Überschriften

Überschriften werden durch den Befehl

<h2></h2>

eingebunden. Das sieht dann beispielsweise so aus:

<h2>Hier kommt der Text der Überschrift</h2>

Dabei steht h für Überschrift (engl. head) und die Ziffer für die Überschriftenebene. Also h1 für Ebene 1, h2 für Ebene 2 und h3 für Ebene 3...

Um zu untersuchen, ob eine Webseite überschriften verwendet, ist es am einfachsten, direkt im Quelltext nachzuschauen. Im Firefox wird der Quelltextinspektor über den Befehl F12 gestartet. Dann den Befehl STRG+UMSCHALT+C oder per Maus auf das Ikon Ikon zum Aufrufen des Webinspektors: Cursor-Pfeil auf einem Rechteck . Dann wählen Sie das zu untersuchenden Element auf der Webseite aus und können im Quelltextfenster den markierten Quelltext des Elements lesen.

Markiertes Element auf einer Webseite mit dem Webinspektor

Anzeige des Quelltextes des vorher markierten Elements im Webinspektor

Vergrößerung

Mit Befehlt STRG++ kann die Webseite vergrößert werden. Die Webseite sollte bei 200% Vergrößerung - also bei ca. 6x STRG++ weiterhin eine klare logische Struktur aufweisen. Außerdem sollte der Text auf Fensterbreite umgebrochen werden. Falls Text abgeschnitten wird, dann gilt dieser Test als nicht bestanden.

Formulare

Bei Formularen ist es wichtig, dass die Beschriftung (Label) und das eigentliche Formular eine Einheit sind. Um das zu testen, klicken Sie auf den Text, der zum Eingabefeld gehört. In unserem Beispiel auf Vorname. Der Cursor springt dann automatisch in das Eingabefeld.

Im Gegensatz dazu ein negatives Beispiel:

Alternativtexte für Grafiken

Grafiken werden in HTML eingebunden mit dem Befehl

<img src="">

Innerhalb der Anführungszeichen steht Namen bzw. der Ort der Grafikdatei inklusive Dateiendung. Das sieht dann in diesem Falls so aus:

<img src="rollstuhl-ikon.png">

Damit die Sprachausgabe zusätzlich die Information erhält, was sie vorlesen soll, wenn sie auf die Grafik trifft, muss der sogennante Alt-Tag 'alt="Bildbeschreibung" ' eingebunden werden.

In unserem Fall:

<img src="rollstuhl-ikon.png" alt="Zeichen für eine Person im Rollstuhl">

Ob der Alternative Text enthalten ist, kann entweder direkt mit dem Screenreader oder auch über den Webinspektor von Firefox überprüft werden.

Lesereihenfolge

Webseitenelemente können im Quelltext ganz individuell auf der Seite platziert werden. Dadurch werden optisch logische Zuordnungen der einzelnen Elemente zueinander realisiert. Der Screenreader ignoriert weitgehend diese Platzierungen und geht - verkürzt gesagt - liest die Elemente in der Reihenfolge aus, wie die Reihenfolge im Quelltext ist. Um diese zu testen, kann man in Firefox das Plugin "Web Developer" installieren (Menü Extras, Web Entwickler, Weitere Tools laden) installieren. In der Symbolleiste ist der Web Developer nach der Installation zu finden (Symbol eines Zahnrades) Zahnradsymbol als Ikon des Web-Devoloper Plugins für Firefox Dort den Eintrag "Disable all styles" auf der Registerkarte CSS setzen. Dann wird die Webseite ohne gestaltende Elemente angezeigt. Wenn der Inhalt der Seite dann weiterhin logisch erfassbar bleibt, ist der Test zur der Lesereihenfolge bestanden.

rechte Box

Linke Box