Navigation und Service

Einfach teilhaben (Link zur Startseite)


Kompatibilität

Begründung

Webinhalte müssen kompatibel zu Benutzeragenten und assistiven Technologien sein. Das bedeutet, dass der Quellcode so geschrieben sein muss, dass er von Benutzeragenten eindeutig interpretiert werden kann, damit keine technischen Probleme bei der Ausführung entstehen.

So führt zum Beispiel ein fehlendes schließendes </a>-Tag dazu, dass nicht eindeutig bestimmt ist, wo dass Link-Element endet. Das kann dazu führen, dass der Rest des Abschnitts als Link – also unterstrichen – dargestellt wird und die verschiedenen Links, die in diesem Abschnitt vorkommen visuell nicht mehr unterscheidbar sind. Eine Formularbeschriftung, die nicht als label-Element ausgezeichnet ist, kann vom Benutzeragenten nicht dem Formularfeld zugeordnet werden. Somit ist für einen blinden Nutzer nicht erkennbar, welche Angabe in dem Feld zu machen ist.

Für Webinhalte, die als HTML-Seiten umgesetzt werden, können Sie die Kompatibilität durch die syntaktisch und semantisch korrekte Verwendung von HTML und CSS sicherstellen.

Die Anforderung 4.1 gilt auch für Benutzerschnittstellen, die mit anderen Techniken realisiert werden. In diesem Fall, ist eine genaue Überprüfung der Barrierefreiheit nötig.

Ziel dieser BITV-Anforderung ist es, die Kompatibilität zwischen Webangebot und Benutzeragenten sicherzustellen. Damit Nutzerinnen und Nutzer von assistiven Technologien keine technischen Probleme bei der Bedienung des Webangebots haben.

Anleitung

Vollständige Start- und End-Tags verwenden

Achten Sie beim Schreiben von HTML-Code darauf, dass alle Tags vollständig sind. Die spitzen Klammern an Beginn und Ende müssen vorhanden sein.

falsch:
  <p Hier beginnt ein neuer Absatz.
richtig:
  <p> Hier beginnt ein neuer Absatz.

Außerdem müssen die Anführungszeichen für die Attributwerte korrekt gesetzt sein.

falsch:
  <img src="bild1.png" alt=Leuchtturm"/>
richtig:
  <img src="bild1.png" alt="Leuchtturm"/>

Diese Anforderung wird bei der HTML-Validierung überprüft.

HTML-Elemente korrekt verschachteln

Die HTML-Spezifikation legt fest, an welchen Stellen innerhalb einer Webseite welche HTML-Elemente verwendet werden dürfen. Zum Beispiel dürfen Listenelemente li nur innerhalb von Listenumgebungen wie ul, ol, dir oder menu vorkommen. Achten Sie außerdem auf die richtige Reihenfolge der End-Tags. Das Element das zuletzt geöffnet wurde, muss als erstes wieder geschlossen werden.

falsch:
  <li><a href="sitemap.html">Inhalt</li></a>
richtig:
  <li><a href="sitemap.html">Inhalt</a></li>

Diese Anforderung wird bei der HTML-Validierung überprüft.

Attribute nicht doppelt verwenden

Jedes Attribut darf innerhalb eines Elements höchstens einmal verwendet werden, da es zu Widersprüchen kommen kann, wenn ein Attribut mehrfach definiert wird.

falsch: 
  <img src="bild1.png" src="bild2.png" alt="Leuchtturm"/>
richtig:
  <img src="bild1.png" alt="Leuchtturm"/>

Diese Anforderung wird bei der HTML-Validierung überprüft.

Eindeutige IDs verwenden

Mit IDs können eindeutige Zuordnungen zwischen den Elementen auf einer Webseite hergestellt werden. Bei Formularen werden die Beschriftungen den Formularfeldern zugeordnet. Jede ID darf innerhalb einer Webseite nur einmal verwendet werden, sonst funktioniert die Zuordnung nicht mehr. In Datentabellen können IDs verwendet werden, um einer Datenzelle die passenden Kopfzellen zuzuordnen. Diese Anforderung wird bei der HTML-Validierung überprüft.

HTML entsprechend der Spezifikation verwenden

Um die Benutzerschnittstelle richtig bedienen zu können, müssen die Nutzer wissen, welche Eigenschaften und Funktionen die einzelnen Komponenten haben. Dazu müssen Name, Rolle und Wert der Komponente so definiert sein, dass sie vom Benutzeragenten automatisch erkannt werden können.

Die Rolle Link wird in HTML mit einem a-Element ausgezeichnet. Der Name ist durch den Inhalt des Elements, sowie falls vorhanden durch das title-Attribute festgelegt. Der Wert ist in diesem Beispiel das Linkziel, das als href-Attribut angegeben ist.

<a href="DE/StdS/Home/stds_node.html" title="Zur Startseite">
  <img src="logo.jpg" alt="Einfach teilhaben (Link zur Startseite)"/>
</a>

Verwenden Sie für Links immer das a-Element. Achten Sie darauf, dass der Wert (href-Attribut) und der Name angegeben sind. Dies ist besonders wichtig, wenn ein Bild als Link benutzt wird. Dann muss der Name im alt-Attribute des img-Elements angegeben werden.

Für editierbaren Text stehen die HTML-Elemente textarea und input zur Verfügung. Der Wert ist der eigegebene Text. Der Name der Komponente wird durch das zugehörige label-Element oder das title-Attribut angegeben. Achten Sie darauf, Textfeldern und andere Formularelementen immen einen Namen zuzuordnen.

Verwenden Sie semantisch korrektes HTML auch für die anderen Inhalte des Webangebotes (siehe auch Abschnitt: Navigation und Orientierung innerhalb einer Internetseite).

Barrierefreiheit von Benutzerschnittstellen sicherstellen

Auch bei Benutzerschnittstellen, die nicht in HTML realisiert sind, müssen Name, Rolle und Wert der einzelnen Elemente für Benutzeragenten und assistive Technologien erkennbar sein. Verwenden Sie die vom Betriebssystem bereitgestellten API-Barrierefreiheitsfunktionen. Alle Benutzerschnittstellen, die andere Techniken oder Programmiersprachen verwenden, sollten mit einem entsprechenden Testwerkzeug für die API überprüft werden.

"Diese Bedingung richtet sich in erster Linie an Webautorinnen und Webautoren, die ihre eigenen Steuerungen für Benutzerschnittstellen entwickeln oder Scripts dafür erstellen. Die Standard-HTML-Steuerungen erfüllen dieses Kriterium bereits, wenn sie entsprechend der Spezifikation eingesetzt werden."

(aus der Begründung zu Bedingung 4.1.2 der Anlage 1)

Beispiele

HTML-Quellcode validieren

Es gibt eine Reihe von Validierungsprogrammen und Testwerkzeugen für Webangebote. Mit dem HTML-Validierungsservice des W3C kann die korrekte Verwendung von HTML geprüft werden. Der CSS-Validierungsdienst des W3C überprüft die Syntax der CSS.

Bei der erfolgreichen Überprüfung einer Webseite gibt der Validierungsservice die Meldung "Result: Passed".

Anzeige bei erfolgreicher Überprüfung einer Webseite mit dem HTML-Validierungsservice Anzeige bei erfolgreicher Überprüfung einer Webseite mit dem HTML-Validierungsservice

Falls Fehler gefunden wurden, erhält der Nutzer eine Beschreibung des Problems und Lösungsbeispiele.

Quellen und Hinweise:

BITV 1.0 zu BITV 2.0

Der Hauptunterschied zwischen BITV 1.0 und BITV 2.0 besteht darin, dass die BITV 2.0 technik-unabhängig formuliert ist und darum auch auf Webangebote anwendbar ist, die kein HTML verwenden. Die Barrierefreiheit der Benutzerschnittstellen, die andere Techniken oder Programmiersprachen verwenden, sollte deshalb immer überprüft werden.

Anforderung 3.2 aus der BITV 1.0 fordert eine Validierung gegen veröffentlichte formale Grammatiken. In der BITV 2.0 ist diese Anforderung abgeschwächt. Anforderung 4.1.1 beschränkt sich auf einige Punkte, die für die Kompatibilität besonders wichtig sind.

Eine Validierung des Webangebots wird nicht mehr gefordert, ist aber nach wie vor empfohlen (Technik G134: Validierung von Webseiten).

© Bundesministerium für Arbeit und Soziales