Inhalte richtig gliedern

Ein entscheidender Teil der digitalen Barrierefreiheit ist, dass die Elemente auf Webseiten semantisch korrekt ausgezeichnet sind. So sollen Überschriften nicht etwa nur optisch größer oder fetter als der normale Text sein, sondern eine Überschrift muss in HTML als solche mittels eines <h>-Tags, Hervorhebungen mit <strong> oder <em> und Absätze mit <p>-Tags gekennzeichnet sein.
Diese Tags müssen in HTML immer geöffnet und geschlossen werden. Ansonsten werden Fehler erzeugt.

Außerdem gilt es bei der richtigen Gliederung von Inhalten darauf zu achten, dass Textinhalte nicht mittels CSS über Pseudo-Elemente :after bzw. :before und der "content"-Eigenschaft eingebunden werden.

Falsch gegliederte Inhalte mittels Bookmarklet finden

Da es sehr mühselig ist, den HTML-Code der Webseite nach den korrekten semantischen Tags zu durchsuchen, kommt nun das Bookmarklet "Inhalte gegliedert" ins Spiel. Will man auf einer Webseite die korrektere semantische Gliederung der Inhalte prüfen, werden verschiedene Attribute, wie  <p>-Tags für Text-Absätze durch das Bookmarklet optisch hervorgehoben.
So kann man übersichtlich und einfach überprüfen, ob die richtigen Auszeichnungen verwendet wurden und ob beispielsweise auch vergessen wurde, einen <p>-Tag wieder zu schließen. Diese Fehler im HTML Code können vor allem für Screenreader-Nutzende zum Problem werden, da dieser Absätze nicht mehr als solche erkennen würde.

Wie aktiviert man Bookmarklets?

Ein "Firefox Bookmarklet" bezieht sich normalerweise auf ein Lesezeichen (Bookmark) in deinem Mozilla Firefox-Browser, das speziell für eine bestimmte Aufgabe oder Funktion erstellt wurde. Es handelt sich im Allgemeinen um JavaScript-basierte Lesezeichen, die Aktionen auf der aktuellen Webseite ausführen oder Informationen extrahieren.

Die Vorbereitung

Zunächst muss man sicherstellen, dass wir unsere gewünschten Bookmarklets über den Browser erreichen können. Dazu wählen wir in Mozilla Firefox im Menü (oben rechts) den Menüpunkt AddOns und Themes aus. In der Suche suchen wir das Wort "Bookmarklets".

Als einer der ersten Suchtreffer erscheint das AddOn "Bookmarklets Context Menu", das wir anklicken und "zu Firefox hinzufügen". Ist die Installation erfolgt, taucht oben rechts in Firefox neben der Adressleiste das AddOn "Bookmarklets Context Menu" als Stern-Symbol auf. Dieses Untermenü ist allerdings bislang noch leer.

Nutzung des Bookmarklets „Inhalte gegliedert“

Um die Bookmarklets bei der Testung nutzen zu können, sollte man sie nun als Lesezeichen hinzufügen. Der einfachheitshalber bedienen wir uns der Werkzeugliste des BIK Prüfverbundes, die die wichtigsten Bookmarklets gesammelt haben.

Als Beispiel nehmen wir das erste Bookmarklet aus der Liste. Wir klicken mit einem Rechtsklick auf das verlinkte Wort "Inhalte gegliedert" und wählen "Lesezeichen verlinken zufügen". Nun taucht das Bookmarklet in unserem Bookmarklet-Kontextmenü als erster Auswahlpunkt auf.

Klickt man nun auf "Inhalte gegliedert" werden im Text Absätze, Überschriften oder Hervorhebungen einfach und übersichtlich dargestellt. Man kann so schnell überprüfen, ob die Tags korrekt gesetzt wurden. Außerdem kann so ausgeschlossen werden, dass Text-Inhalt mittels CSS eingebunden wird.

Eine detailliertere Beschreibung dieser Überprüfung finden Sie im entsprechenden Prüfschritt des BIK BITV-Tests.

Weitere nützliche Bookmarklets

Auf der Webseite vom BIK Prüferbund gibt es eine Liste mit Bookmarklets, die für verschiedene Überprüfungen nützlich sind. Die dort aufgeführten Bookmarklets werden in verschiedenen Testschritten des BIK BITV-Tests verwendet.