Accessibility ist für Blogger besonders leicht umzusetzen. Denn meist steht der Content im Vordergrund, seltener aufwändige Effekte oder Funktionen wie etwa Shopping-Elemente. Und auch die Content-Strukturen selbst sind oft repetitiv und daher leichter zu kontrollieren. Ein Appell an Blogger, sich mit der Einführung von Accessibility auseinanderzusetzen. 

Menschen, die von einer verbesserten Barrierefreiheit profitieren

Oft wird über die Einführung von Accessibility oder Barrierefreiheit gesprochen, ohne sich eingehend mit den Menschen zu befassen, die davon profitieren. Dabei ist es wichtig, ihre Herausforderungen zu verstehen, gerade, wenn man als Webentwickler, Webdesigner oder eben Blogger selbst nicht von einem Handicap betroffen ist:

  1. Menschen, die keine Maus bedienen können (Personen mit motorischen Defiziten, Sehbehinderte): Wer keine Maus bedienen kann, nutzt stattdessen die Tastatur. Websites werden meist mit der Tabulatortaste bedient. Also müssen wir unser Blog für eine Bedienung per Tab optimieren. 
  2. Blinde Menschen, die Inhalte nur via Screenreader rezipieren: Da blinde Menschen Websites via Screenreader erfassen, sind sie auf gut strukturierte Inhalte und aussagekräftige Funktionselemente angewiesen. Ein Beispiel: Sie können dein Search-Icon oder die Dropdown-Funktionalität in deiner Navigation nicht sehen; du musst sie ihnen kommunizieren. 
  3. Menschen, die Inhalte / Funktionen nur erschwert sehen können: Ihnen können wir helfen, indem wir die Skalierbarkeit (Vergrößerung) unserer Texte überprüfen und den Kontrast unserer Schrift optimieren. 
  4. Menschen mit Farbenfehlsichtigkeit (z. B. Rot-Grün-Schwäche): Hier ist es problematisch, wenn Information über Farbe vermittelt wird. Lösungen können z. B. in der Unterstreichung und zusätzlich in Hover-Zuständen liegen. 
  5. Gehörlose Menschen, die keine akustischen Inhalte wahrnehmen können: Sicherlich wirst du deine Videos nicht mit einer Gebärdensprache ausstatten können. Aber Untertitel sind in der Regel kein Problem. Bindest du Videos über YouTube ein, verfügst du bereits über diese Funktionalität. 
  6. Menschen mit kognitiven Einschränkungen oder Aufmerksamkeitsdefiziten sind auf eine leichte und verständliche Sprache angewiesen.  

Accessibility ist oft ein abstraktes Thema — doch das muss nicht sein

Accessibility ist für Menschen, die selbst nicht betroffen sind, recht abstrakt. Informationen darüber muss man sich mühevoll zusammensuchen, weil sie oft nicht für konkrete Anwendungsfälle aufbereitet werden — etwa für die Anforderungen von Bloggern. Lass uns beginnen:

1. Menschen, die keine Maus bedienen können, nutzen die Tabulatortaste

Als ich mein Blog unter cogtail.de zum ersten Mal mit der Tabulatortaste bedient habe, fiel mir folgendes auf:

Meine Artikel-Teaser verlinken jedes Mal dreifach auf den Artikel; die Überschrift ist ein Link, das Artikelbild ist einer, hinzu kommt noch der Weiterlesen-Button. Für viele Nutzer ist das super: Jeder Klick führt zum Ziel! Für Menschen, die via Tabulator-Taste navigieren, muss das hingegen super nervig sein. Sie müssen bei über zehn Artikel-Teasern durch mehr als dreißig Links navigieren.


Und in jeder Listenansicht wiederholt sich das Spiel!

Nimm Redundante Teaser-Links aus der Tab-Reihenfolge heraus

Beim Navigieren innerhalb einer Seite mit der Tabulatortaste werden normalerweise Links und Steuerelemente in der Reihenfolge ihrer Anordnung im Quelltext angesprungen. Für die meisten Inhalte ist dies in Ordnung und die Tab-Reihenfolge muss nicht beeinflusst werden. 

Für unsere doppelten, redundanten Elemente können wir einfach tabindex=”-1” hinzufügen. in meinem Blog habe ich die Überschrift davon ausgenommen, sie bleibt als einziger Link via Tabulatortaste erreichbar. So sieht das dann z. B. für den Weiterlesen-Link aus:

<a aria-hidden="true" class="btn" tabindex="-1" href="/themen/die-besten-content-marketing-blogs-2020">weiterlesen </a></div>



Gestalte den aktuellen Tab sichtbar

Leider sorgen viele Webdesigner und Webentwickler dafür, dass aktuell angesteuerte Tabs nicht angezeigt werden. Offenbar finden sie diese sichtbaren Umrandungen aus „Design-Sicht” nicht besonders ansprechend. Aus meiner Sicht sollte Design jedoch nicht dazu führen, dass die Website schlechter funktioniert. Daher empfehle ich für eine optimierte Accessibility, die CSS-Regel :focus { outline: none; } zu bewahren. Falls sich dein Designer oder Entwickler davon nicht überzeugen lässt, kannst du es ggf. mit einem Skript versuchen, das vermeintlich unschöne Umrandungen ausschließlich für Nutzer mit Maus unterbinden soll.

2. Blinde Menschen mit Screenreader brauchen eine wohl strukturierte Website

Ein blinder Nutzer kann nicht sehen, dass du ein Dropdown-Menü einsetzt. Er nimmt auch nicht das Search-Icon wahr oder etwa das Icon von Facebook bzw. LinkedIn. Er kann auch nicht unmittelbar erkennen, welche Linkliste die Seitennavigation stellt. Das sind Dinge, die du ihm mitteilen musst. In meinem Blog etwa hatte ich ursprünglich ein RSS-Feed-Icon ganz ohne Text: Wie soll jemand wissen, was sich hinter dem Icon befindet, wenn er keinerlei Hinweis darauf erhält? Also habe ich den Text einfach per CSS ausgeblendet, was in diesem Fall übrigens auch aus SEO-Sicht völlig unproblematisch ist. 

Du kannst eine ganze Menge tun, um die Accessibility deines Blogs zu verbessern. Wichtig ist, dass da du dieses Thema in deiner Tätigkeit als Blogger stets mitdenkst:


Setze Frameworks und Komponenten mit bereits vorhandener Accessibility ein

Prüfe bei der Wahl eines Frameworks, eines Themes, Plug-ins oder einer Komponente (z. B. Slider, Akkordeon, Formulare etc.), ob die Accessibility darin ausreichend berücksichtigt worden ist. In der Regel sollte es einen entsprechenden Abschnitt in der Dokumentation geben, der dir über die Barrierefreiheit der Software Auskunft erteilt. So nutzen viele Websites das Framework Bootstrap, welches die Maßnahmen zur Accessibility klar dokumentiert. Darin befinden sich ebenfalls einige Komponenten (z. B. ein Akkordeon oder die Hauptnavigation). Wenn du einen modernen Slider suchst, empfehle ich dir Swiper, der eine Komponente zur Verbesserung der Barrierefreiheit (a11y) besitzt. Wenn du nach Themes für WordPress suchst, lohnt sich eine Filterung nach Accessibility

Verwende semantisches HTML

Um eine Website blind bedienen zu können, werden Screenreader genutzt. Der Begriff „Screenreader” ist allerdings ein wenig irreführend, da sich der Nutzer die Inhalte nicht nur vorlesen lässt. Er muss auch mit der Website interagieren können, also Menüs bedienen oder zu bestimmten Bereichen auf der Website navigieren. Daher ist es sehr wichtig, dass diese Bereiche sowohl inhaltlich als auch strukturell korrekt eingeteilt werden. 

Achte bei der Auswahl eines Themes oder während der Realisierung darauf, entsprechend semantisches HTML5 zu verwenden: Deine Blog-Liste etwa sollte mehrfach umschließende Artikel-Tags

<article><!-- ein Artikel-Teaser --></article>


enthalten. Eine Navigation kennzeichnest du mit

<nav><!-- eine Navigation --></nav>.


Weitere Tags wie

<footer><!-- Dein Fußbereich --></footer>,, <header><!-- i. d. R. Logo, Blogtitel und Menü --></header> und <aside><!-- deine Sidebar --></aside>


strukturieren dein Blog. Wenn du jetzt noch auf eine saubere Überschriftenstruktur achtest, hast du wahrscheinlich ein sauberes semantisches HTML-Mark-up:
 

Wichtig ist, dass du die Hierarchie wirklich befolgst. Beispielsweise solltest du keine H4 setzen, wenn du davor eine H2 gesetzt hast. Du musst zuvor eine H3 erstellt haben. Es gibt noch H4, H5, H6 und H7, aber die meisten Websites kommen mit den ersten drei (oder vier) Hierarchien aus. Seit der Einführung von HTML5 kann es zudem Situationen geben, in denen du auch mehr als eine H1-Überschrift auf einer einzelnen Webseite nutzen kannst (etwa zusätzlich innerhalb von <footer>); das allerdings sehe ich eher als ein Thema für Fortgeschrittene an, zumal es ohnehin sehr kontrovers diskutiert wird.

Auf keinen Fall solltest du Überschriften aus optischen Gründen setzen, also eine H1 nutzen, nur, weil du an einer Stelle eine schön große Überschrift haben möchtest. Hierfür gibt es die Alternative, bloß das Layout einer H1-Überschrift z. B. auf eine H2 anzuwenden. Das ist der bessere Ansatz!


Bereichere dein Blog mit zusätzlicher Information (Accessible Rich Internet Applications (ARIA))

Es gibt Fälle, in denen es mit HTML keine semantische Lösung gibt oder eine Lösung zumindest nicht möglich oder ausreichend ist. Nehmen wir an, du hast auf deiner Website drei Menüs. Nun möchtest du deinen blinden Nutzern mitteilen, welches die Hauptnavigation stellt. Oder du möchtest darauf hinweisen, dass sich die Navigation aufklappen lässt. Genau das — und andere Dinge — kannst du mit ARIA-Rollen, Zuständen und Eigenschaften sowie weiteren Attributen umsetzen. Nachfolgend gehe ich auf die wichtigsten Attribute ein, die dir in der Praxis als Blogger begegnen können:

  1. Das role-Attribut kannst du nutzen, wenn ein Element nicht oder nicht ausreichend semantische Information hat. Mit role="menubar" etwa kannst du eine Navigation als Hauptnavigation kennzeichnen. Es geht bei ARIA-Roles um zusätzliche Information, nicht aber darum, vorhandene semantische Elemente umzudeuten (aus einem Button soll z. B. kein Link werden (role=”link”)).
  2. Das Attribut „aria-label” kannst du nutzen,um ein Element zu kennzeichnen, das sonst keine oder nicht ausreichend Information zeigt: In der Suche etwa, in Buttons ohne Text (z. B. Close-Button, Burger-Button der mobilen Navigation) oder in Icon-Links. Wenn du einen Text für ein ARIA-Label erstellst, solltest du darin das Element nicht wiederholen: Bei einem Button etwa ist ja klar, dass es sich um einen Button handelt. Du brauchst daher das Wort „Button” nicht noch einmal in dem Label verwenden. „arial-labelledby” als ein sog. Beziehungsattribut wirst du wohl eher selten nutzen: Du brauchst es nur, wenn ein anderes Element (mit einer bestimmten ID) bereits das Label enthält und du an einer anderen Stelle darauf verweisen möchtest (hier findest du dazu Beispiele). 
  3. Die Attribute „aria-haspopup”, „aria-expanded”, „aria-controls” wirst du häufig in mobilen Dropdown-Navigationen finden. Damit kannst du angeben, ob es 1. an einer bestimmten Stelle ein Popup/Dropdown hat, ob es 2. initial geöffnet ist (i. d. R. wohl nicht) und 3. dass der mobile Toggle-Button („der Burger”) mit der Hauptnavigation verknüpft ist, was mit einer eindeutigen ID angegeben wird.
  4. Falls du z. B. Icons aus rein dekorativen Zwecken verwendest, ist das Attribut „aria-hidden” für dich vielleicht interessant. Damit gibst du sozusagen an, dass hinter einem Icon keine Funktion steckt.

Achte bei der Auswahl deines Themes also auch auf ARIA-Attribute. Überprüfe, ob in deiner aktuellen Website alles korrekt ist. Vermutlich findest du zumindest die eine oder andere Stelle, an der du noch etwas verbessern kannst.

3. Menschen, die Inhalte / Funktionen nur erschwert wahrnehmen können, brauchen große Schriften und Kontrast

Auf ausreichend Kontrast wird oft aus „Design-Aspekten” verzichtet: Ein bestimmter Grauton wirkt oft durchaus eleganter als bloßes Schwarz. Design ist sicherlich auch für Blogger wichtig. Wichtiger aber ist wohl die Lesbarkeit deines Contents. Daher sollte es eigentlich keine Ausrede mehr geben: Ein ordentlicher Kontrast ist Pflicht! Aber wie hoch sollte er sein? Im Contrast Checker gibst du die Hintergrundfarbe, die Text- und die Linkfarbe ein und erhältst so ein konkretes Ergebnis. Auch ein Bezug zur Schriftgröße wird dabei hergestellt. 

Einen offiziellen Standard für eine Mindestschriftgröße wirst du übrigens nicht finden. Es gibt aber einen breiten Konsens darüber, dass mindestens 16px für Fließtext ein guter Anhaltspunkt sind. Selbstverständlich kann sich die Lesbarkeit unabhängig davon von Schriftart zu Schriftart deutlich unterscheiden. Auch der Kontrast spielt dabei eine große Rolle. Mit 16px und einer Optimierung des Kontrasts hast du aber einiges für eine verbesserte Accessibility getan.

    

4. Menschen mit Farbenfehlsichtigkeit brauchen andere oder stärkere visuelle Hinweise

Mit der Erhöhung des Kontrasts und einer größeren Schrift wirst du vermutlich auch Nutzern aus dieser Gruppe einen wertvollen Dienst erweisen. Zusätzlich kannst du überlegen, ob du Links mit Unterstreichungen kennzeichnen möchtest oder lieber Icons (ein Ankersymbol etwa) nutzt. 

Neben einer kontrastreichen Schrift ergibt es grundsätzlich Sinn, auch Farben in Bildern mit ausreichendem Kontrast zu verwenden. Wenn du das ein wenig im Hinterkopf behältst, wirst du vielleicht bei der Bildauswahl für deine Blogartikel die eine oder andere Auswahl überdenken. Und das ist schon ein kleiner Aspekt, der für die Zielgruppe hilfreich sein könnte

5. Gehörlosen Menschen Alternativen zu akustischen Inhalten anbieten

Als Blogger kannst du vor dem Einbinden von Videos darauf achten, dass Untertitel hinterlegt sind. Bei YouTube-Videos sollte dies in der Regel der Fall sein. An ihrer Qualität kannst du nicht viel machen. Aber vielleicht lohnt es sich, die Untertitel kurz zu prüfen. Falls du eigene Videos in YouTube erstellst, kannst du die automatisch erzeugten Untertitel übrigens selbst nacharbeiten und sogar ein eigenes Transkript hochladen.

6. Menschen mit kognitiven Einschränkungen oder Aufmerksamkeitsdefiziten verständlichen Content anbieten

Ich bin davon überzeugt, dass viele Blogger zu umständlich schreiben. Wenn wir ehrlich sind, findet jeder von uns Passagen, die nicht so gut gelungen sind. Kürzere Sätze, eine sinnvolle Gliederung, ggf. ein Inhaltsverzeichnis und eine Prüfung der Lesbarkeit können vielen Menschen helfen, darunter Personen mit besagten Einschränkungen. Übrigens ist auch sog. Snackable Content, also besonders leicht konsumierbarer Inhalt, ein interessanter Ansatz, um einen Artikel nicht nur für Social Media aufzubereiten, sondern auch in leichter Sprache. Jedenfalls bin ich davon überzeugt, dass wir alle auch in dieser Hinsicht etwas mehr tun könnten.  

Accessibility für Texter 

Accessibility ist auch für Texter ein wichtiges Thema: Kurz angerissen hatte ich es im Grunde, als ich über einen Wiederholungsfehler des Wortes „Button” in einem Button-Element sprach. Wenn ein Element ein Button ist, muss ich nicht noch einmal im Text darauf hinweisen. Sprechen wir nun über sinnvolle Dokumententitel und Alternativtexte. 

Sinnvolle Dokumententitel: Gemeint ist der Title-Tag

Der Title-Tag sollte aus zwei Bestandteilen bestehen: Der eine Teil betitelt die aktuelle Webseite, der andere, allgemeine Teil gibt z. B. den Firmennamen oder Blog-Titel wieder. Getrennt werden die Teile durch ein Minus oder einen senkrechten Strich.

In Content-Management-Systemen (CMS) wird der zuletzt genannte Teil oft automatisch ausgegeben. Der Texter muss sich also nur um einen guten aktuellen Titel kümmern. 


Alternativtexte für Bedienelemente, Grafiken und Objekte: Gemeint ist der Alt-Tag

Wie bereits aufgezeigt, können Grafiken, Objekte oder Bedienelemente für blinde Menschen nicht ohne weiteres erschlossen werden. Daher solltest du diese Elemente aussagekräftig beschreiben: 

Beispiele für Bedienelemente können etwa so aussehen und folgen der Faustregel „Was sieht man und was macht bzw. wohin führt es”:

  • Lupe mit Suchfunktion
  • Haus mit Link zur Startseite

Grafiken und Objekte haben einen deskriptiven Charakter: 

  • Ein schwarzer Hund rennt von links über eine große Wiese
  • Notre Dame wenige Stunden vor dem Großbrand im April 2019

Wenn Bilder Links enthalten, wirst du die Funktion („Was es macht”) im Alt-Tag des Ankerlinks beschreiben; der Alt-Tag im Bild beschreibt also nur das Bild, keine Funktion! 

Im Übrigen dürfen sich Alt- und Title-Tags in Bildern selbstverständlich unterscheiden: Der Alt-Tag ist wichtig für die Barrierefreiheit. Mit dem Title-Tag vergibst du deinem Bild einen Titel, der aus Accessibility-Sicht (und auch aus SEO-Sicht) nicht ganz so wichtig ist. 


Accessibility und Suchmaschinenoptimierung

Mittlerweile behaupten selbst bekannte SEO-Agenturen, dass sauber gesetzte bzw.  verschachtelte HTML-Überschriften für die Suchmaschinenoptimierung nicht so wichtig sind. Ich kann dem nur entgegnen: Sauber zu arbeiten ist immer wichtig! Spätestens bei dem Thema Accessibility gewinnen Überschriften wieder an Bedeutung. Und da Accessibility übrigens zunehmend als Rankingfaktor für Google diskutiert wird, scheint sich der Kreis dann doch wieder zu schließen. 

Accessibility testen

Du testest die Barrierefreiheit deiner Website am besten, indem du sie einmal per Tab bedienst. Den Contrast-Checker kennst du ebenfalls. Weiterhin empfehle ich dir das WAVE Web Accessibility Evaluation Tool, welches einen automatischen Test vornimmt: Die Ergebnisse sind vielleicht nicht ganz leicht zu interpretieren. 

Und natürlich kannst du auch mal einen Screenreader testen. Lade hierzu den kostenlosen Open-Source-Screenreader NVDA herunter und installiere ihn auf einem Windows-Computer. In dem nachfolgenden Video von Google erhältst du eine Einführung in NVDA:

Selbstverständlich sollte ein solcher Test durch echte Screenreader-Nutzer erfolgen. Falls du den Selbstversuch wagst, ziehe ich dennoch meinen Hut vor dir. Respekt!

Und dann gibt es natürlich auch noch das Prüfverfahren zur BITV (Barrierefreie-Informationstechnik-Verordnung), das auch als Selbsttest genutzt werden kann. Wenn du richtig tief in die Materie einsteigen und alle Details umsetzen möchtest, lohnt sich dieses Verfahren auf jeden Fall. Weniger hilfreich ist es, um einen einfachen Einstieg zu finden oder gar für dieses wichtige Thema sensibilisiert zu werden. 

Fazit:

Je nach technischer Expertise wirst du vermutlich eine kompetente Person brauchen, die dich an der einen oder anderen Stelle unterstützt. Und dennoch hast du mit dieser Einführung in Accessibility einen guten Überblick über das Thema erhalten. Übrigens glaube ich, dass sich gerade Blogger damit befassen sollten, wenn sie nach ethischen oder journalistischen Grundsätzen arbeiten wollen. Zumal sich viele Aspekte aufgrund der zumeist einfacheren technischen Basis deutlich leichter umsetzen lassen als in so manchem  komplexen Web-Portal. Ich hoffe, ich konnte dich ein wenig für dieses wichtige Thema begeistern. Accessibility ist nun idealerweise Bestandteil deines Mindsets, um deinen Content für möglichst viele Lesergruppen zu optimieren. Der Anteil der Menschen, die in irgendeiner Form auf Barrierefreiheit angewiesen sind, ist groß. Der Anteil jener, die sie zumindest als hilfreiche Unterstützung empfinden, ist sehr groß.

Wir optimieren oft für alle nur erdenklichen Browser, selbst, wenn sie nur zu 1 oder 2 % genutzt werden. Aber für mehr als 10 % der Menschen optimieren wir nicht? Daran sollten wir dringend etwas ändern.


Als Blogger kannst du viel dafür tun, die Zugänglichkeit deines Blogs zu verbessern. Du siehst, das Thema ist sehr komplex. Sicherlich wirst du nicht sofort alles perfekt machen (können). Und doch habe versucht, dir eine leicht verdauliche Einführung in die Optimierung der Accessibility deines Blogs zu geben.

Jetzt entdecken: