TelefonKontaktiere uns


Einführung Accessibility für Blogger mit konkreten Tipps zur Umsetzung

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 unser Blog unter contentcure.de/blog zum ersten Mal mit der Tabulatortaste bedient habe, fiel mir Folgendes auf:

Unsere 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!

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 mit outline zu bewahren bzw. eine sichtbare Gestaltung dafür anzubieten. Falls sich dein Designer oder Entwickler davon nicht überzeugen lässt, kannst du es ggf. mit einem Skript versuchen, um vermeintlich unschöne Umrandungen ausschließlich für Nutzer mit Maus zu unterbinden.

Hier klicken, um den Inhalt von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

Einführung der Google Chrome Developers in die Verwendung von Tabindex, Teil ihrer Accessibility-Playlist, die ich dir wärmstens empfehlen möchte.

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 Liste mit Links 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 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 seine Maßnahmen zur Accessibility klar dokumentiert. Wenn du einen modernen Slider suchst, empfehle ich dir Swiper, der eine Komponente zur Optimierung der Barrierefreiheit (a11y) besitzt. Wenn du ein Theme oder einen Pagebuilder für WordPress einsetzt, solltest du ebenfalls prüfen, inwieweit sich seine Entwickler mit diesem Thema befasst haben. 

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 bloß 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, Plug-ins oder während der Realisierung darauf, entsprechend semantisches HTML5 zu verwenden: Eine Navigation etwa 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 Überschriftstruktur achtest, hast du vermutlich bereits ein recht sauberes semantisches Mark-up: 

HTML-Überschriftstruktur einer existierenden Webseite
Mit der Erweiterung „Web Developer“ von Firefox kannst du dir über „View Document Outline“ die Überschriften-Struktur einer Webseite ansehen. Hierarchisch ist die Struktur richtig. Allerdings ist aus semantischer Sicht noch Luft nach oben: Oder ergeben die H3-Überschriften wirklich Sinn? Hier sollte ich meine Startseite noch besser strukturieren (was ich in der Zwischenzeit auch getan habe. Tipp: Teste jetzt den Unterschied)!

Wichtig ist, dass du die Hierarchie wirklich befolgst. Beispielsweise solltest du keine H4 setzen, wenn du davor eine H2 gesetzt hast; du musst dazwischen 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, 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 (befasse dich hierzu mit CSS). 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 (ausreichend) semantische Lösung. 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 solltest du nur dann nutzen, wenn ein Element keine oder nicht die richtige semantische Information hat. Und das passiert bei dir als Blogger wahrscheinlich nicht besonders häufig. Wenn es dir möglich ist, verwende einfach semantisches HTML, also z. B. für einen Button <button>, für eine Überschrift etwa <h1> oder <h2>, für eine Navigation <nav>, für den Hauptinhalt <main>. Dann brauchst du i. d. R. keine ARIA-Roles! Jetzt fragst du dich sicherlich, in welchen seltenen Fällen ein solches Attribut überhaupt Sinn ergibt: Wir setzen auf unserer Website z. B. ein Akkordeon von einem Drittanbieter ein. Und das wurde – aus welchen Gründen auch immer – nicht mit einem Button realisiert, durch dessen Klick sich der zusammengeklappte Bereich öffnet, sondern mit einem Div-Container, also ohne semantische Information. Immerhin wurde stattdessen role=“button“ verwendet, damit die Information übermittelt wird, dass es sich hierbei um ein anklickbares Element handelt.
  2. Das Attribut „aria-label” kannst du nutzen, wenn du normalerweise ein Label nutzen würdest, es aber im konkreten Fall nicht nutzt (z. B. weil sich bestimmte visuelle Symbole eben „eingebürgert“ haben): im Zusammenhang mit einem Such-Icon etwa, in Buttons ohne Text (z. B. Close-Button, dem Burger-Button in der mobilen Navigation) oder in generell in Icon-Links. So ist es sinnvoll, deinem Nutzer mitzuteilen, dass eine <nav> die Hauptnavigation ist (mit aria-label=“Hauptnavigation“).  
  3. Das Attribut „aria-expanded” wirst du häufig in Dropdown-Navigationen finden oder in unserem Akkordeon zusätzlich zum genannten role-Attribut. Dieses Attribut wird hier verwendet, um den erweiterten oder reduzierten Zustand eines Akkordeon-Elements anzugeben, das gesteuert werden kann, um zusätzlichen Inhalt zu verbergen oder anzuzeigen, also aria-expanded=“false“ bzw. aria-expanded=“true“.

Übrigens finden sich auf vielen Websites nach wie vor widersprüchliche Informationen: Barrierefreies Webdesign schreibt: Wenn etwa ein MAIN-Element „eine Rolle bereits besitzt, dann ist es nicht sinnvoll, die Rolle zusätzlich mit dem role-Attribut zuzuweisen.“ Im Portal Barrierefreiheit der Dienstekonsolidierung des Bundes hingegen wird diese „doppelte Auszeichnung“ für bestimmte Landmark-Rollen empfohlen.

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.

Hier klicken, um den Inhalt von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

Einführung in ARIA von Google Chrome Developers

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.

Hier klicken, um den Inhalt von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

Video von den Google Chrome Developers über die korrekte Prüfung von Farben und Kontrasten für eine bessere Accessibility

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.

Hier klicken, um den Inhalt von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

Erfahre von Mozilla Developer, wie du Einschränkungen wie Protanopie (kein Rot), Deuteranopie (kein Grün), Tritanopie (kein Blau), Achromatopsie (keine Farben) oder verringerten Kontrast simulieren und somit testen kannst.

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.

Hier klicken, um den Inhalt von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

Tutorial zum Öffnen und Bearbeiten von Transkripten auf YouTube

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.


Beitrag veröffentlicht

in

von