Das i-Tüpfelchen der Barrierefreiheit veröffentlicht in 2010

HTML semantisch richtig anwenden

Auf der technischen Ebene ist ein valides Dokument ein Qualitätsmerkmal. Durch den Einsatz von HTML-Validatoren zur Überprüfung des technischen Unterbaus eines HTML-Dokuments können einige Fehler aufgedeckt werden, welche die technische Zugänglichkeit beeinflussen. Gleichzeitig lässt ein valides Dokument nur sehr eingeschränkte Aussagen über die Barrierefreiheit zu.

In der Definition von HTML wird über die Festlegung der richtigen Syntax hinaus die Semantik einzelner Elemente und die korrekte Verwendung von Attributen beschrieben. Erst die Berücksichtigung dieser Vorgaben stellt sicher, dass Zugangssoftware einschließlich Hilfsmittel die Inhalte in der Weise aufbereiten, wie es die Spezifikation vorsieht.

Wichtig ist zunächst, dass HTML-Elemente und -Attribute ihrem Zweck nach eingesetzt werden, denn es geht nicht nur um die Darstellung von Inhalten am Bildschirm, sondern auch um die Semantik im Quellcode. Ob das Document Object Model (DOM) oder die Schnittstellen für Hilfsmittel, es kommt immer darauf an, dass die Werte, Stati und Rollen der Inhalte technisch ermittelt werden können.

In den HTML-Spezifikationen wird die Bedeutung einzelner HTML-Elemente beschrieben. Für die visuelle Präsentation ist die beschriebene Semantik meist irrelevant, denn die "Semantik" einzelner Elemente wird durch zahlreiche andere Eigenschaften vermittelt, etwa Farbe, Schriftgröße oder Positionierung von Inhalten. Wichtig wird Semantik vor allem dann, wenn Software das HTML analysiert und auf der Datenbasis eine Benutzungsschnittstelle herstellt, etwa bei Screenreadern, Vergrößerungssystemen oder diversen Eingabegeräten:

• Obwohl es manchmal einfach erscheint, mit einem BLOCKQUOTE-Element einen Text einzurücken (die meisten Browser fügen bei diesem Element einen Einzug ein), so ist diese Einrückung nicht notwendigerweise ein Zitat. Es wird eine inkorrekte Datenstruktur übermittelt und in diesem Fall kündigen Screenreader ein Zitat an, was aber keines ist. Selbstverständlich gilt Ähnliches für die UL- und DD-Elemente, die ebenfalls nicht für Einrückungen verwendet werden sollten.
• Ein weiteres Beispiel ist die Emulierung von Links und Steuerelementen mit JavaScript. Mit einem onclick-Attribut kann ein beliebiger Inhalt anklickbar gemacht werden und der Inhalt wird auf dem Wege als Link oder Steuerelement genutzt. Solche Texte sind jedoch keine Links oder Formularelemente im Sinne der Spezifikation, weshalb die Rolle des Inhalts oft nicht richtig an eine weiterverabeitende Software übermittelt wird. Bei emulierten Links lässt sich beispielsweise oft feststellen, dass sie mit der Tastatur nicht bedient werden können. Die Rolle eines Links wird über das A-Element in Verbindung mit einem href-Attribut und nicht durch einen Event-Handler übertragen.

Die Verwendung standardisierter Schnittstellen ist für die Zugänglichkeit entscheidend. Wenn eine Checkbox mit einem INPUT-Element erzeugt wird, dann kann der Browser die Rolle (Kontrollkästchen) und den Status (aktiviert oder nicht aktiviert) des Elements identifizieren und an entsprechende Schnittstellen weiterreichen. Wenn hingegen die Checkbox als verlinkte Grafik eingebunden wird, dann wird die Rolle des Elements ein Link sein. Der (durch die Grafik vermittelte) Status eines solchen Elements muss dann beispielsweise durch Alternativtexte für die Grafik transportiert werden. Solche Maßnahmen können selbstverständlich vorgenommen werden, aber die Verwendung standardisierter Elemente erleichtert die Entwicklungsarbeit und fördert die Zugänglichkeit erheblich.

Auch weitere Informationen sowie deren Beziehungen zueinander müssen im HTML-Quelltext berücksichtigt werden, damit sie auch dann verstanden werden können, wenn sich die Präsentationsform ändert. Das kann das Lesen eines Inhalts ohne CSS (z.B. mit einem Screenreader) sein oder die Darstellung mit benutzerdefinierten Bildschirmeinstellungen, etwa eigener Farbschemata oder Schriftschnitte, die die vorgegebenen CSS-Eigenschaften überschreiben, oder das Kopieren des Inhalts in ein Textverarbeitungssystem. Hier geht es darum, dass, wenn eine Information oder eine Beziehung zwischen Informationen am Bildschirm dargestellt wird, dann diese Information bzw. Beziehung technisch stets durch Browser und anderer Software ermittelt werden können. Das "klassische" Beispiel ist die Verwendung von Überschriftenelementen zur Auszeichnung von Überschriften, aber Listen, Absätze, Links oder Formulare müssen ebenso mit den vorgesehenen HTML-Elementen ausgezeichnet werden. Richtige Verschachtelungen und logische Beziehungen dürfen nicht vernachlässigt werden. Diese Aspekte können meist nur durch praktische Tests und nicht mit einem Validator überprüft werden.