Barrierefreie Artikel - Struktur und Formatierung | Verbraucherzentrale Baden-Württemberg

Blinde Menschen nutzen Screenreader oder eine Brailletastatur um Webseiten zu erfassen. Damit sie gut durch eine Webseite navigieren können, muss die Textstruktur im HTML Code hinterlegt sein. Hierfür müssen lediglich die vorhandenen Formatierungsmöglichkeiten in Drupal genutzt werden.

Formatvorlagen sind Überschriften, Listen, Tabellen, Links, Zitat, fremdsprachiger Text, Elemente, Blöcke etc. Damit es barrierefrei wird, müssen diese so genutzt werden, wie sie gedacht sind. Beispiel: Absätze sind kein Abstandshalter. Sie kennzeichnen Text.

Überschriften

Auch blinde Nutzer können eine Webseite anhand der Überschriften überfliegen. Hierfür springen Sie entweder von Überschrift zu Überschrift. Oder Sie schauen sich alle Überschriften der Ebene 1, oder der Ebene 2, etc. an. Für Überschriften stehen die Formate Überschrift 1 (H1) bis Überschrift 6 (H6) zur Verfügung. H steht für das englische Heading.

Überschrift 1 ist für die Hauptüberschrift gedacht. Die blinde Person kann durch Drücken der Funktionstaste 1 immer sofort zur Hauptüberschrift springen und dadurch erfahren, worum es auf der jeweiligen Webseite geht. Die Überschriften Ebenen 2-6 werden für die Zwischenüberschriften genutzt. Diese müssen logisch aufeinanderfolgen. Der Screenreader sagt auch immer dazu um welche Überschriftenebene es sich handelt.

Bei Wissensartikeln geben Sie die Überschrift 1 in den Titel ein. Zeichnen Sie Zwischenüberschriften mit den Absatzformatvorlagen aus. Diese finden Sie, wenn Sie auf die Schaltfläche Normal klicken.

Wenn Sie Zwischenüberschriften verwenden, können Sie durch diese auch ein Inhaltsverzeichnis für die Seite anzeigen lassen. Klicken Sie dafür im oberen Bereich auf Inhaltsverzeichnis anzeigen.

Achtung!

Kreieren Sie keine Überschriften, indem Sie Text einfach fetten, oder größer schreiben.
Nutzen Sie die Überschriftenvorlagen aber wiederum auch nur für Überschriften, und nicht dazu anderweitigen Text, zum Beispiel Zitate, hervorzuheben. Das führt sonst dazu, dass die Webseite für Blinde Nutzer nicht mehr logisch aufgebaut ist.
Landingpages sind in Drupal anders formatiert. Dadurch ergeben sich auf Landingpages besondere Herausforderungen bei den Überschriften. Besuchen Sie hierzu die Landingpage: Barrierefreiheit in der Web-Redaktion

Absätze

Für Absätze nutzen Sie wie üblich die Eingabe Taste. Absätze werden mit einem p für paragraph angezeigt.

Achtung!

Drücken Sie nicht mehrmals die Eingabetaste um durch Absätze Abstand zu erzeugen. Screenreader lesen auch leere Absätze vor, was für blinde Personen anstrengend werden kann.

Zitate

Zitate müssen mit dem HTML-Tag blockquote ausgezeichnet werden. Der blinde Nutzer kann dadurch erkennen, dass es sich um ein Zitat handelt und den Text besser verstehen.

So BIK für Alle.

In Drupal können Sie das durch die Zitatblockvorlage umsetzen (Die Anführungszeichen rechts von den Aufzählungszeichen). Um aus der Zitatblockvorlage wieder rauszukommen klicken Sie auf den roten Pfeil unten rechts, um einen Absatz einzufügen. Durch diese Vorgehensweise sagt der Screenreader, dass es sich um ein Zitat handelt.

Drupal hat aber keine Funktion ein Zitat innerhalb eines Satzes zu kennzeichnen. Wenn Sie innerhalb eines Satzes zitieren wollen, machen sie auch sprachlich deutlich, dass es sich um ein Zitat handelt, indem sie es mit "sagen" oder "so" einbauen. Wollen Sie das Zitat für visuelle Nutzer weiter hervorheben, können sie es fetten oder kursiv setzen. Nutzen Sie aber keine artfremde Formatvorlage, um das Zitat hervorzuheben, da das Screenreader-Nutzer verwirrt.

Listen

Nutzen Sie Listen immer für:

ungeordnete Aufzählungen
nummerierte Aufzählungen

Durch die Nutzung der Formatvorlage Listen werden Screenreader-Nutzern folgende Informationen mitgeteilt:

es folgt eine Liste
die Anzahl der Listeneinträge

Der Screenreader-Nutzer hat dann die Möglichkeit die Liste auch zu überspringen.

Achtung!

Nutzen Sie keine artfremde Formatvorlage, um das Zitat hervorzuheben, da das Screenreader-Nutzer verwirrt.
Erzeugen Sie Aufzählungen, also Listen nicht rein visuell, durch die manuelle Eingabe von Bindestrichen oder 1., 2., 3., da sonst die nötige HTML Auszeichnung fehlt.

Tabellen

Screenreader-Nutzer nehmen Tabellen nicht visuell wahr, sondern bewegen sich mit den Pfeiltasten (Strg+Alt+Pfeiltasten) durch die Tabelle. Wenn sie Spalte oder Zeile wechseln wird ihnen die neue Zeilen- oder Spaltenüberschrift mit angesagt. Dadurch können sie einen Bezug von Überschrift und Inhalt herstellen.
Damit Tabellen navigierbar sind, ist es wichtig:

einfache Tabellen zu erstellen
sowohl die Spaltenüberschriften als auch die Zeilenüberschriften im HTML auszuzeichnen
leere Zellen nicht als Abstandshalter zu benutzen, da ihr Vorhandensein dennoch genannt wird.

So können Sie eine barrierefreie Tabelle in Drupal erstellen

Wählen sie die Tabellenvorlage oben aus.
Tabelleneigenschaften eintragen
Wählen Sie bei "Kopfzeile" die Einstellung „Beide“ aus, bestimmen Sie Zeilen- und Spaltenanzahl, geben Sie eine Überschrift ein und bestimmen Sie die Ausrichtung der Tabelle.
Tabelle Ausfüllen
Arbeiten Sie beim Ausfüllen lieber mit Worten und Zahlen und seien Sie vorsichtig bei Sonderzeichen oder dem Nutzen von Interpunktion oder "+" und "-" . Ein „-„ als Minus wird vom Screenreader oft als Bindestrich interpretiert und in der Regel nicht vorgelesen. Dadurch wären solche Stellen stumm.

So sieht eine Tabelle aus, die auch für Screenreader-Nutzer navigierbar ist.

Angebote auf einen Blick
	Ambulanter Betreuungsdienst	Angebote zur Unterstützung im Alltag	Klassische Pflegedienste
Körperpflege (Grundpflege)	nein	nein	ja
Medizinische Behandlungspflege	nein	nein	ja
Hilfen im Haushalt	ja	ja	ja
Betreuung (Spielen, Spazieren)	ja	ja	ja
Pflegefachkräfte müssen unter den Mitarbeitenden sein	nein	nein	ja
Qualität wird regelmäßig durch den Medizinischen Dienst überprüft	nein	ja	nein

Achtung!

Verwenden Sie in Tabellen leere Zellen nicht als Abstandshalter, da diese sonst dennoch vorgelesen würden.
Nutzen Sie keine Farben um Inhalte zu vermitteln, da sowohl Screenreader-Nutzer als auch Menschen mit Seheinschränkungen, die das Farbspektrum betreffen, diese Informationen nicht wahrnehmen können.
Nutzen sie keine Interpunktion, um Informationen zu vermitteln, z.B. + und -, da das Minus vom Screenreader als Bindestrich wahrgenommen wird. Die meisten Menschen stellen ihren Screenreader so ein, dass Interpunktion nicht vorgelesen wird.