10 Tipps, die Barrierefreiheit auf einem de.hypotheses-Blog zu verbessern

 „Barrierefreies Internet sind Web-.Angebote, die von allen Nutzern unabhängig von ihren Einschränkungen oder technischen Möglichkeiten uneingeschränkt (barrierfrei) genutzt werden können. […] Barrierefreiheit schließt sowohl Menschen mit und ohne Behinderungen als auch Benutzer mit technischen (Textbrwser oder PDA) oder altersbedingten Einschränkungen (Sehschwächen) sowie Webcrawler ein, mit denen Suchmaschinen den Inhalt einer Seite erfassen.“

Wikipedia: https://de.wikipedia.org/wiki/Barrierefreies_Internet

In diesem Artikel stellen wir 10 Tipps vor, um die Barrierefreiheit eines Blogs bei de.hypotheses zu verbessern. Die Blogs bei de.hypotheses laufen auf WordPress. Daher zielen die folgenden Hinweise darauf ab, bestehende Möglichkeiten und Funktionen von WordPress so zu nutzen, dass eine möglichst barrierefreie Umgebung erreicht wird. Sie beruhen unter anderem auf den Empfehlungen des WordPress-Accessability-Teams und des World Wide Web Consortium.­­

Textformatierung

1. Blocksatz vermeiden

Die Verwendung von Blocksatz bei Online-Artikeln gilt als keine gute Praxis und wiederspricht den Empfehlungen des World Wide Web Consortium (W3C).

Die Optimierung der Textausrichtung, wie man sie von Software wie Skribus oder Adobe InDesign und in geringerem Maße auch von Textverarbeitungsprogrammen wie LibreOffice und Microsoft Word kennt, existiert in html – der Standardprogrammiersprache für Webseiten – nicht. Die Verwendung von Blocksatz führt in html daher dazu, dass verschieden typographische Fehler entstehen, wie beispielsweise ein Gießbach (Wikipedia). Auch wird kein durchgängiger Abstand zwischen den Buchstaben eines Wortes eingehalten.

Leerzeichen zwischen Wörtern, wie sie beim Gießbach entstehen, verlangsamen den Lesefluss. Inkonsistente Leerzeichen zwischen den Buchstaben eines Wortes können es wiederum schwer machen zu erkennen, wo ein Wort aufhört und das nächste beginnt.

Insgesamt verursacht Text im Blocksatz im Netz eine visuelle Müdigkeit und eine kognitive Desorientierung, insbesondere bei Legastheniker*innen. Abgesehen davon ist linksbündiger Text grundsätzlich besser geeignet, um sich beim Lesen eine schnellere Orientierung zu verschaffen.

2. Überschriftenebenen verwenden

Um Überschriften zu kennzeichnen, sollten Überschriften-Blöcke (+ > Allgemeine Blöcke > H Überschrift) verwendet werden, statt den Inhalt eines Artikels mithilfe von Fettdruck, Farbe oder größeren Schriftarten zu strukturieren. So wird die Struktur eines Artikels allen Leser*innen zugänglich gemacht – seien es Menschen oder Roboter. Eine konsistente Strukturierung erleichtert die Navigation und ermöglicht einen besseren Überblick über die verschiedenen Ebenen des Inhalts. Das gilt insbesondere für Menschen, die Screenreader oder eine Tastaturnavigation verwenden. Eine gut strukturierte Webseite, die Überschriftenebenen nutzt, wird auch von Suchmaschinen besser indexiert.

Die Überschrift eines Artikels hat automatisch die Ebene 1. Im Fließtext des Artikels können Überschriften der Hierarchiebenen 2, 3, 4 etc. verwendet werden. Die Überschriften-Blöcke werden von Robotern und Screenreadern als solche erkannt und ermöglichen die Zusammenfassung des Inhalts. Es ist daher ratsam, nicht aus ästhetischen Gründen eine Überschriftenstufe zu überspringen (also z.B. von Ebene 2 auf Ebene 4), da dies die Lesbarkeit der Struktur des Beitrags beeinträchtigen würde.

Das Layout der verschiedenen Überschriftenebenen unterscheidet sich ja nach verwendetem Theme. Es empfiehlt sich daher, bei der Einrichtung des Blogs mit verschiedenen Themes zu experimentieren und in einem Testartikel die Überschriftenebenen auszuprobieren um zu sehen, ob sie den eigenen ästhetischen Vorstellungen entsprechen.

3. Linktitel beschreiben

Eine schöne Möglichkeit, die das Publizieren im Internet bietet ist, Verbindungen zwischen Inhalten herzustellen. Das geschieht insbesondere in Form von Hyperlinks. Ein Hyperlink besteht aus einer Internetadresse (URL), die mit einem Wort oder einem Satzteil des Fließtextes verbunden wird und so zum Titel des Hyperlinks wird. Es wird empfohlen, diesen Titel so zu wählen, dass er die inhaltliche Verbindung so anschaulich wie möglich beschreibt und auch unabhängig vom Kontext verständlich ist. Verwirrend sind Link-Titel wie „Hier klicken,“ „Mehr“ oder „Download“. Menschen, die einen Screenreader nutzen, haben die Möglichkeit, sich eine alphabetisch sortierte Liste von Links der geöffneten Seite vorlesen zu lassen. Wer dann einen bestimmten Link sucht, findet ihn schneller, wenn sich der Titel intuitiv erschließt (z.B. „Kontakt“ statt „Besuchen Sie uns hier“).

Aus demselben Grund empfiehlt es sich, den Namen einer Webseite statt die ganze URL zu nennen, beispielsweise de.hypotheses statt https://de.hypotheses.org. Wer einmal beide Wörter hintereinander laut vorliest, stellt schnell fest, warum.

Mehr über Linküberschriften findet sich im Artikel „Link Text and Appearance,“ Web Accessabilty in Mind (auf Englisch).

4. Das Ziel des Hyperlinks beschreiben

Es ist gute Praxis, neben dem Titel auch das Ziel von Hyperlinks zu beschreiben. Das gilt insbesondere für Artikel, die zum Download verlinkt werden. Für diese Art von Links ist es sinnvoll, das Format und die Größe der Datei anzugeben, die beim Öffnen des Links geladen wird. Auf diese Weise kann der oder die Leser*in sofort erkennen, ob das Herunterladen der Datei zu viele Daten ziehen würde und ob das Dateiformat auf dem verwendeten Endgerät gelesen werden kann.

Ähnliches gilt für den Fall, wenn ein Link auf eine Webseite oder ein Dokument verweist, das in einer anderen Sprache als der eigene Artikel verfasst ist: Auch hier ist es gute Praxis, die Sprache des verlinkten Artikels oder Dokuments zu vermerken. So kann der oder die Leser*in selbst entscheiden, ob sich der Klick auf den Hyperlink lohnt.

Schließlich ist es laut W3C im Allgemeinen nicht empfehlenswert, das Öffnen von Links in einem neuen Browser-Tab oder Fenster zu erzwingen. Das (erzwungene) Öffnen eines Artikels in einem neuen Tab oder Fenster führt insbesondere bei Menschen mit Sehbehinderungen schnell zu Verwirrung. Denn der Wechsel zwischen Tabs oder Fenstern unterbricht den Pfad im Internet-Browser und erschwert es den Leser*innen, den Weg zurück zur vorher geöffneten Seite zu finden.

Falls dennoch ein neues Tab oder Fenster geöffnet wird, empfiehlt es sich, einen entsprechenden Hinweis neben dem Link anzubringen.

5. Die Standardgröße in Textblöcken beibehalten

Die bei de.hypotheses verfügbaren WordPress-Themes erfüllen alle die Empfehlungen des W3C hinsichtlich der Textanzeige (16px bis 18px auf einem Computerbildschirm), wobei standardmäßig eine Schriftgröße von 16px vorgeschlagen wird. Die Standardschriftgröße, Auswahl der Schriftarten und mögliche Farboptionen eines Themes werden vom CSS-Stylesheet des Themes definiert.

In der Artikelansicht ist es möglich, die Textgröße eines „Absatz“-Blocks im Register „Block“ der rechten Seitenleiste zu ändern, entweder indem eine Pixelgröße angegeben wird oder indem unter den vordefinierten Größen (von „klein“ bis „groß“) die gewünschte Größe gewählt wird. Standardmäßig ist die vordefinierte Größe „normal“, was 16px entspricht. Da diese Größe die Standards für Barrierefreheit respektiert, wird empfohlen, nur geringfügig davon abzuweichen.

Wenn aus einem Textdokument oder von einer Webseite per copy&paste Text übernommen wird, kann es passieren, dass bestimmte Formatierungs-Tags des ursprünglichen Textes beibehalten werden. Das kann dazu führen, dass der kopierte Text nicht die von dem Theme vorgegebene Standardgröße annimmt. Es wird daher empfohlen, die ursprüngliche Formatierung von externem Text vor dem Einfügen in einen Artikel zu bereinigen, um diese restlichen Tags zu entfernen.

In Hueman kann die Schriftgröße des Textes angepasst werden. Auch hier wird empfohlen, für eine optimale Lesbarkeit innerhalb des Größenbereichs von 16px bis 18px zu bleiben.

Aktuelle Internet-Browser machen es sehr einfach, die Schriftgröße zu vergrößern. Es wird daher empfohlen, die Standard-Schriftgröße beizubehalten und den Leser*innen selbst zu überlassen, die Schriftgröße nach ihren Bedürfnissen anzupassen.

Farben

6. Kontrastreiche Farben verwenden

Der Kontrast zwischen Text und Hintergrund sollte ausreichend hoch sein. Die bei de.hypotheses verfügbaren WordPress-Themes ermöglichen es in der Regel, die Farbe des Seitenhintergrundes und – wenn auch seltener – die Farbe bestimmter Texte anzupassen. Im Blockeditor kann die Farbe des Textes in einem Absatzblock geändert werden, ebenso die Farbe des Hintergrundes, vor dem der Text steht.

Wichtig ist jedoch, darauf zu achten, dass der Inhalt leicht zu lesen ist, indem ein hoher Kontrast zwischen Textfarbe und Hintergrund gewählt wird. Mit dem Online-Dienst tanaguru contrast kann z.B. den Kontrast zwischen zwei Farben überprüft und korrigiert werden, in Übereinstimmung mit den Normen für die Barrierefreiheit des Internet.

7. Informationen nicht ausschließlich über Farbe kenntlich machen

Farbenblinde Menschen können nicht viel mit der Information „Klicken Sie auf die rote Schaltfläche“ anfangen. Weil Menschen mit Sehbehinderungen Informationen nicht über die Farbgebung wahrnehmen können, werden beispielsweise Hyperlinks standardmäßig sowohl durch unterstrichenen Text als auch durch farbigen (häufig blauen) Text gekennzeichnet.

Aus diesem Grund sollte übrigens auch darauf verzichtet werden, Text zu unterstreichen, der kein Hyperlink ist – dies könnte Leser*innen in die Irre führen.

Medien

Beim Hochladen eines Bildes in die Mediathek besteht die Möglichkeit, dem Bild alternativen Text hinzuzufügen. So können Informationen zum Bild zugänglich gemacht werden, die von Screenreadern und Indexierungsrobotern lesbar sind und die auch dann angezeigt werden, wenn das Bild nicht geladen werden kann. Die Informationen, die in diesem Feld relevant sind, unterscheiden sich je nach Art des Bildes:

  • Bei Bildern, die Text enthalten, der eine Information vermittelt (z.B. „Download“) wird in „Alternativer Text“ die Funktion des Bildes notiert.
  • Bei Bildern, die Text enthalten, der nicht im Fließtext oder in der Beschriftung erscheint, wird dieser Text im Feld „Alternativer Text“ notiert.
  • Enthält das Bild keinen Text, ist aber zum Verständnis des Artikels notwendig, wird eine entsprechende Erläuterung im Feld „Alternativer Text“ ergänzt. Sollte das Feld dafür nicht ausreichend Platz bieten, kann das Bild auch im Artikel selbst oder in der Beschriftung erklärt werden.
  • Hat das Bild eine rein dekorative Funktion und steht inhaltlich nicht in direktem Zusammenhang zum Text, dann wird das Feld „Alternativer Text“ freigelassen, um Verwirrung zu vermeiden. So können sich Leser*innen mit Screenreadern auf den Artikel konzentrieren.
  • Enthält das Bild Informationen, die ebenfalls in der Beschriftung angegeben sind, wird im Feld „Alternativer Text“ ein Hinweis „siehe Beschriftung“ vermerkt.
  • Ist das Bild anklickbar oder verlinkt zu einem Download, einer Webseite oder einem Dokument, so sollte im Feld „Alternativer Text“ das Ziel des Links angegeben werden.

9. Alternativen zu Audio oder Video anbieten

Für alle Medienelemente, die zum Inhalt oder Verständnis des Artikels beitragen, sollte im Artikel auf den Inhalt verwiesen werden. Bei eigenen Videos kann die Barrierefreiheit verbessert werden, indem in der Produktion dem Video Untertitel oder eine Audiobeschreibung hinzugefügt werden. Denkbar ist auch, das Video in Gebärdensprache zu dolmetschen.

Im Blog selbst ist es gute Praxis, ein Transkript des Videos zugänglich zu machen, das entweder angezeigt oder heruntergeladen werden kann.

10. Die automatische Medienwiedergabe deaktivieren

Es kommt leider immer noch häufig vor, dass beim Öffnen einer Webseite automatisch der Ton einer Audio- oder Videodatei abgespielt wird. So müssen Leser*innen mühsam herausfinden, aus welcher Registrierkarte im Browser der Ton kommt und wo sich die Taste befindet, mit der dieser ausgeschaltet werden kann. Gerade für Menschen mit kognitiven Problemen oder Epilepsie ist dies eine Stresssituation. Für Menschen, die einen Screenreader nutzen, wird eine Seite so unbenutzbar, da der Ton des Mediums den Ton des Sreenreaders übertönt.

Bei Videos oder Audio-Playern, die als eingebetteter Inhalt von externen Diensten eingefügt werden, finden sich die Einstellungen zur Verhinderung der automatischen Wiedergabe in der Regel auf der Originalseite und in der Konfiguration des Einbettungscodes.

Bei Video- oder Audiodateien, die selbst auf dem Blog gehostet werden, finden sich die Autoplay-Einstellungen in der Registerkarte „Block“ in der rechten Seitenleiste der Artikelansicht. Die automatische Wiedergabe ist standardmäßig deaktiviert. Aus ähnlichen Gründen ist die Kontrollleiste (Wiedergabe, Pause, Lautstärke) bei Videos standardmäßig sichtbar. Es ist zwar möglich ist, sie in der Registerkarte „Block“ auszublenden, dies wird aber nicht empfohlen.

Dieser Artikel ist eine Übersetzung des Artikels „Améliorer l’accessibilité de votre carnet“ von Marion Wesely. Der Artikel entstand als Teil eines Projekts über Barrierefreiheit, das von OpenEdition geleitet wurde. Vielen Dank an Valérie Mansard, Herausgeberin und Referentin für Barrierefreiheit im digitalen Raum bei ENS Editions, für die Hilfe beim Verfassen des Artikels.

Beitragsbild: Open von Kasper Jensen (CC-BY-SA)


Ulrike Stockhausen

Ulrike Stockhausen arbeitet als Referentin für digitale Wissenschaftskommunikation für de.hypotheses bei der Max Weber Stiftung in Bonn. Sie ist US-Historikerin mit Schwerpunkt Religionsgeschichte und bloggt rund um die Themen Promotionsalltag und Wissenschaftsbetrieb bei www.cafecumlaude.de.

Das könnte Dich auch interessieren …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Suche in OpenEdition Search

Sie werden weitergeleitet zur OpenEdition Search