Was braucht es eigentlich, damit eine Webseite barrierefrei ist? Und welche Rolle spielen ästhetische Ansprüche und Vorlieben auch für blinde oder sehbehinderte Menschen, wenn es um die Gestaltung von Webseiten geht? Jennifer Sonntag zeigt anhand der Erstellung ihrer eigenen Homepage, welche Grundlagen und spezifischen Features wichtig sind, welche Standards es bereits gibt und welche Rolle ihre Lippenstifte beim Gestaltungsprozess gespielt haben.
Als blinde Fachjournalistin ist es mir ein großes Anliegen, unsichtbare Themen sichtbar zu machen. Der digitale Raum könnte der inklusivste Ort der Welt sein, wenn wir ihn gemeinsam barrierefrei gestalten. Dort habe ich die Möglichkeit, Teilhabe und Teilgabe zu leben, in Austausch zu treten und meine Arbeit zu zeigen. Doch Sichtbarkeit und nicht sehen können, das bedeutet für mich auch regelmäßig, dass ich an Grenzen stoße, wenn Barrierefreiheit nicht mitgedacht wird. Menschen mit unterschiedlichen Behinderungen haben unterschiedliche digitale Bedürfnisse. Nichtsehende Menschen orientieren sich im Internet anders als Sehende. Beide Sichtweisen möchte ich berücksichtigen. Deshalb ist mir das blinde Verstehen mit meiner Webseiten-Gestalterin und Kreativ-Freundin Frau Dr. Franziska Appel sehr wichtig, denn sie hilft mir bei der Übersetzung meiner Inhalte von der unsichtbaren in die sichtbare Welt. Uns beiden war es ein Bedürfnis, über meine persönlichen Perspektiven und Erfahrungen hinaus auch allgemeine Praxistipps zur digitalen Barrierefreiheit bereitzustellen. Dafür habe ich Franziska Appel die Tastatur überlassen. Inspiriert durch die Wissenschaftsshow „Maithink X“ mit Dr. Mai Thi Nguyen-Kim haben wir uns in den Infoboxen in die technischen Details vertieft und sprichwörtlich reingenerdet.
Da ich seit meiner Erblindung nicht mehr mit Maus und Monitor arbeiten kann, ist mein PC mit einem Screenreader ausgestattet. Dieses Hilfsmittel macht es möglich, dass mir der Bildschirminhalt vorgelesen wird. Neben der Sprachausgabe kann ich zusätzlich eine Braille-Zeile nutzen. Das ist eine Art Punktschrift-Display, welches vor die Tastatur gestellt wird. Die Tastatur selbst beherrsche ich blind und sie unterscheidet sich nicht von der Sehender. Ich habe sehr viele Tastenkombinationen im Kopf, denn sie ersetzen die Maus. Diese Voraussetzungen allein sind es aber nicht, die ein barrierefreies Arbeiten am PC ermöglichen. Damit das Zusammenspiel zwischen einer Webseite und der Hilfsmitteltechnik funktioniert, sind beim Aufbau von Webseiten bestimmte Informationen für die Hilfsmitteltechnik blinder Menschen zu hinterlegen.
Nerden wir uns da mal rein Part 1 – Grundlagen
Für einen barrierefreien Internetauftritt kann man sich beispielsweise an den „Web Content Accessibility Guidelines” (WCAG), einem international anerkannten Standard für Barrierefreiheit von Webinhalten, und der „Barrierefreie-Informationstechnik-Verordnung“ (BITV) der Bundesrepublik Deutschland, welche auf der WCAG 2.1 basiert, orientieren. Etwas anschaulicher erklärt es Domingos de Oliveira in seinem Podcast. Der blinde Experte für digitale Barrierefreiheit beschreibt darin, wie Screenreader auf Informationen aus der sogenannten Accessibility API zugreifen. Eine API (Application Programming Interface) ist eine Programmierschnittstelle, die es verschiedenen Softwarekomponenten ermöglicht, miteinander zu kommunizieren. Die Accessibility API sorgt dafür, dass Barrierefreiheits-Informationen, also Daten, die Menschen mit Behinderungen den Zugang zu digitalen Inhalten erleichtern, in Programmen und Dokumenten hinterlegt werden. Dazu gehören unter anderem semantische Informationen, also Bedeutungsangaben, wie die Funktion von UI-Elementen (User Interface, also Bedienelementen), Bildbeschreibungen oder ähnliche Daten. Diese Informationen werden dann vom Screenreader entweder in gesprochene Sprache oder in Blindenschrift auf der Braillezeile umgewandelt. Das vollständige Transkript der Podcast-Folge ist hier verfügbar.
Wie darf man sich das aber nun im praktischen Herangehen und beim Erstellen meiner persönlichen Webseite vorstellen? Meine Freundin Franziska Appel und ich waren es bereits durch ein gemeinsames Buchprojekt und unsere digitale Ausstellungsplattform gewohnt, über Gestaltungsaspekte in einen beiderseits bereichernden Dialog zu treten. Ich freute mich daher über ihr Angebot, mich bei der Entwicklung meines neuen Online-Auftritts zu unterstützen. Sie verstand, dass ich einen eigenen Stil lebte und man diese persönlichen „Lebensfarben“ auch nach meiner Erblindung auf meiner Webseite wiederfinden sollte. Daher fragte sie mich gleich zu Beginn ganz selbstverständlich nach meinen Vorstellungen für die farbliche Gestaltung der Seite. Als erblindete Frau brauchte ich dafür Eselsbrücken. An welche Farben konnte ich mich noch gut erinnern? Was war meine Signatur? Ich habe lange fürs Fernsehen gearbeitet und mit meinen Visagistinnen vor Farbpaletten gesessen. Mein Schminkkoffer half Franziska und mir am besten bei der Kommunikation über Facetten und Nuancen. Wir holten meine Lippenstifte kurzerhand mit an den Brainstorming-Tisch. Nach meinen Lieblingslippenstiften richteten wir dann das Farbkonzept der Seite aus. Uns war es wichtig, dass auch blinde Menschen einen Eindruck von der optischen Gestaltung meiner Webseite bekommen. Darum hat Franziska Appel auf der Startseite eine kurze Beschreibung versteckt, die nur für den Screenreader erkennbar ist: „Beschreibung zur optischen Gestaltung der Webseite: Die Seiten haben als Hintergrund einen dunklen Rotton (in Richtung Aubergine), während die Links und Bildunterschriften einen Farbton zwischen Altrosa und Pink haben. Hintergrund vom Header und sonstige Schrift sind in einem leichten Beigeton gehalten, während die Schrift vom Header schwarz dargestellt wird. Das Seiten-Icon ist ein „J“ in Braille-Schrift.“ Das Verstecken ist übrigens sehr einfach: die Schriftgröße ist winzig und der Text hat die Farbe vom Hintergrund. Wir wünschen den Sehenden viel Spaß bei der Suche (durch Markierung mit dem Cursor wird der Text sichtbar).
Auch der Austausch mit meiner Community macht mir immer wieder deutlich, dass ich als blinde Person nicht nur über Farben sprechen kann, sondern oft sogar darüber sprechen muss, wenn es um die Richtlinien der Barrierefreiheit geht. Sehbehinderte Menschen, die im Gegensatz zu einer vollblinden Person wie mir, am Computer noch mit den Augen agieren, nutzen teilweise andere Hilfsmittel als ich. Während ich mir sämtliche Inhalte von meinem Screenreader vorlesen lasse oder Informationen auf der Braillezeile ertaste, nutzen sehbehinderte Menschen Hilfsprogramme, mit denen sie sich Farben, Kontraste und Schriftgrößen ihren Augenbedürfnissen entsprechend anpassen können. Ich kann das gut nachvollziehen, da ich die Übergänge von der Sehbehinderung hin zur Erblindung kenne und im Erblindungsprozess jeweils unterschiedliche Optionen nutzte. Solange ein Sehvermögen da war, wollte ich damit arbeiten, ohne die Augen zu überfordern. Bei meiner Augenerkrankung (Retinopathia pigmentosa) half mir eine lange Zeit eher helle Schrift auf dunklem Grund. Ein heller Hintergrund hätte mich zu stark geblendet. Durch meinen fortschreitenden Tunnelblick durften die Buchstaben jedoch nicht zu groß sein, sonst passten sie nicht in den enger werdenden Gesichtsfeldausschnitt. Bei anderen Sehbehinderungen kann das aber genau umgekehrt sein. Entscheidend ist die Wahl einer möglichst klaren Schriftart ohne Serifen und hohe Kontraste.
Nerden wir uns da mal rein Part 2 – Kontraste
Der Kontrast ist das Verhältnis zwischen Vorder- und Hintergrundfarbe – je höher der Wert, desto höher der Kontrast. Laut WCAG sollte dieser für normalen Text mindestens bei einem Verhältnis von 4,5 1 liegen. Für grafische Bedienelemente sieht die Richtlinie ein Minimum von 3:1 vor. Basierend auf meinen Lippenstiften gibt es auf meiner Webseite im Wesentlichen drei Farben: ein ganz dunkles Rot für den Hintergrund (#2d0115), ein helles Cremeweiß für den Text und den Hintergrund von Kopf- und Fußzeile (#edede3) und einen hellen Rotton (#c96490). Dieser hellere Rotton wird einheitlich für Links, Buttons und Bildunterschriften verwendet. Die Links sind zusätzlich unterstrichen und wechseln kurz zu Cremeweiß, sobald man mit dem Cursor darüber geht. Für den Haupttext kommen wir so auf einen sehr hohen Kontrast von 15,81. Bei Links, Buttons und Bildunterschriften hat Franziska darauf geachtet, einen Wert von 5 nicht zu unterschreiten. Wer selber einmal Kontraste von Webseiten oder Dokumenten überprüfen möchte, der kann dies unkompliziert über den Contrastchecker von Webaim tun. Wir sind uns bewusst, dass jedes Auge anders sieht und die von uns gewählten Einstellungen nicht für alle passen. Für Menschen mit Augenproblemen, die noch keine eigenen Hilfsmittel nutzen, haben wir daher zusätzlich ein Tool eingefügt, das eine Einstellung von Schriftgröße, Farben und Kontrasten für die individuellen Sehbedürfnisse ermöglicht.
Neben den Kontrasten ist vor allem die Struktur der Webseite essentiell für die Barrierefreiheit. Was für das Auge übersichtlich aussieht, ist es für den Screenreader nicht automatisch auch. Deshalb war es notwendig, dass Franziska im Hintergrund alle Informationen so anlegte, dass meine Hilfsmitteltechnik darauf zugreifen kann. Ohne diese saubere Strukturierung können wichtige Informationen für den Screenreader unsichtbar bleiben, was die Nutzung der Seite erheblich erschwert. Ich brauche dann sehr viel Zeit und Energie, um Gewünschtes zu finden. Das gilt im Übrigen auch für PDF-Dateien, die visuell oft sehr ansprechend sind, blind aber wie Kraut und Rüben wirken können. So rief ich mir kürzlich in einer PDF die Überschriftenliste auf und fand darin riesige Textfragmente aus dem Fließtext, unsinnig durcheinandergewürfelt, leider aber keine orientierenden Überschriften. Gerade in professionellen Kontexten kann hier ein sehr unaufgeräumter Eindruck von einer Publikation entstehen. Auf einer gut strukturierten und aufgeräumten Seite fällt hingegen nicht nur sehbehinderten und blinden Menschen die Orientierung leichter.
Nerden wir uns da mal rein Part 3 – Struktur
Zunächst müssen alle relevanten Überschriften korrekt als „Header“ gekennzeichnet werden und für Unterüberschriften die Abstufungen Header 2, 3, usw. entsprechend der Überschriftenebene gewählt werden. Diese klare Struktur ermöglicht es blinden Menschen, mithilfe von Screenreadern effizient durch die Webseite zu navigieren. So nutze ich beispielsweise Tastenkombinationen, um mir Listen mit allen vorhandenen Überschriften, Links und Rahmen anzeigen zu lassen und mir so einen Überblick über die Seite zu verschaffen. Ebenfalls mit der Tastatur kann ich dann einzelne Überschriften, Eingabefelder oder Schaltflächen anspringen, ohne mir permanent den gesamten Bildschirminhalt vorlesen lassen zu müssen. Zusätzlich sollte darauf geachtet werden, Textpassagen niemals als Überschriften (Header) zu formatieren, wenn sie lediglich hervorgehoben werden sollen. Stattdessen sollten Schriftgrößen angepasst sowie fett oder kursiv verwendet werden. Unterstreichungen sollten ausschließlich für Verlinkungen vorbehalten sein, um Verwirrungen zu vermeiden.
Franziska Appel und ich haben beide keinen IT- Hintergrund und hatten von Anfang an nicht den Anspruch, alles perfekt umzusetzen. Dennoch ist Franziska eine echte Verbündete, wenn es um die barrierefreie Umsetzung von Ideen geht. Unser Ziel ist es, im Kleinen zu zeigen, was wir uns von den Großen wünschen, die im Gegensatz zu uns oft über ein entsprechendes Budget verfügen. Besonders bei Webauftritten von Unternehmen, die Produkte und Dienstleistungen anbieten, fehlt es nach wie vor oft an Barrierefreiheit, insbesondere wenn es um Bildbeschreibungen geht. Dadurch gehen mir z. B. in Online-Shops wichtige Informationen verloren. Deshalb legten wir bei meiner Seite ein großes Augenmerk auf Bilder und Bildbeschreibungen. Ich persönlich erfreue mich auch über den rein informellen Aspekt hinaus an gestalterischen Elementen, war ich doch über 20 Jahre lang Sehende und möchte diesen Teil in mir auch weiter beleben. Wir haben versucht, meine Farben und Fotos im Zusammenspiel zu denken, wenn das auch nicht für alle blinden Menschen gleichermaßen wichtig ist. Aus meiner Sicht sollten wir jedoch die Chance haben, selbst auswählen zu können, wie tief wir in Bilderwelten einsteigen wollen. Ich bin bei eigenen Fotos immer wieder erstaunt, wie wenig ich darüber weiß. Oft erschließt sich mir erst durch die angelegten Alternativtexte eine Situation, Szene oder Wirkung, die ich mir über große Zeiträume ganz anders, ja sogar falsch, vorgestellt habe. Deshalb interessieren mich nicht nur die notwendigen technischen Standards zur Barrierefreiheit, sondern auch Layouts und Designs. Besonders viel Spaß gemacht hat mir das Brainstorming mit den Lippenstiften und das Bespielen meines Kopfkinos durch die Bildbeschreibungen. Weitere kreative Beispiele für unser Zusammenwirken zeigen Franziska und ich auf unserer Künstler*innenseite „Galeriegeflüster“. Unser Credo ist: „Du wirst sehen, wir werden uns blind verstehen!“
Nerden wir uns da mal rein Part 4 – Alternativtexte
Um den Inhalt von Bildern für einen Screenreader zugänglich zu machen, lassen sich auf Webseiten und in Dokumenten Bildbeschreibungen, sogenannte Alternativtexte, für einzelne Bilder hinterlegen. In WordPress ist das Einfügen von Alternativtexten sehr einfach: Nach dem Hochladen eines Bildes kann man in der Mediathek die Bildeinstellungen aufrufen. In der rechten Seitenleiste befindet sich dann ein Feld namens „Alternativtext“, in dem die Bildbeschreibung eingegeben werden kann. Da dieses Feld recht klein ist, kann es bei ausführlicheren Bildbeschreibungen übrigens ratsam sein, diese erst in einem Dokument vorzuschreiben und dann einfach in das Alternativtext-Feld hinein zu kopieren. Alternativtexte lassen sich auch direkt im HTML-Code einfügen. Dazu kann man im img-Tag die Bildbeschreibung im alt-Attribut hinterlegen. Ein einfaches Beispiel sieht so aus: <img src=“bild.jpg“ alt=“Beschreibung des Bildinhalts“>. Alternativtexte auf Webseiten verbessern übrigens nicht nur die Barrierefreiheit, sondern auch die Suchmaschinenoptimierung (SEO). In Microsoft Word fügt man Alternativtexte hinzu, indem man mit der rechten Maustaste auf das Bild klickt und im Kontextmenü „Alternativtext“ auswählt. Im sich öffnenden Bereich kann dann die Beschreibung des Bildes eingetragen werden. Es gibt auch die Option „Dieses Bild als dekorativ kennzeichnen“, die dazu führt, dass Screenreader dieses Bild überspringen. Allerdings wäre da zu überlegen, warum nicht auch die dekorativen Elemente barrierefrei zugänglich sein sollten, da sie zum ästhetischen Gesamteindruck beitragen. In Word ist es zudem auch notwendig, eingefügte Textfelder mit einem Alternativtext zu versehen, da diese sonst ebenfalls für den Screenreader unsichtbar bleiben. Für PDF-Dokumente ist es wichtig, Alternativtexte bereits im Ausgangsdokument (z.B. Word) zu hinterlegen, da diese beim Export in PDF übernommen werden. In Programmen wie Adobe Acrobat Pro können Alternativtexte auch nachträglich direkt im PDF hinzugefügt werden, indem man auf „Werkzeuge > Barrierefreiheit > Alternative Texte hinzufügen“ geht.
Ich wünsche mir mehr kreative Ansätze für digitale Barrierefreiheit und bin gespannt, wie wir gemeinsam neue Wege finden können. Es muss nicht immer gleich perfekt sein und oft ergeben sich im gemeinsamen Austausch neue Lösungen. Besonders gern möchte ich damit experimentieren, wie sich Farben und Layouts für blinde und sehbehinderte Menschen noch zugänglicher gestalten lassen. Auch die Einbindung künstlicher Intelligenz in diese Prozesse ist für mich hochinteressant. Perspektivisch hoffe ich stark auf die Wirkkraft des Barrierefreiheitsstärkungsgesetzes. Wenn ihr weitere Tipps sucht, wie eure Webprojekte barrierefreier werden können, schaut bei www.netz-barrierefrei.de vorbei – Franziska und ich wünschen Neugier und Spaß beim Entdecken inklusiver Möglichkeiten!
#32 Social Media
Dank der sozialen Netzwerke haben auch behinderte Menschen die Möglichkeit, gesehen zu werden. Aber wie sieht es eigentlich mit der Zugänglichkeit aus? Und: Müssen Menschen mit Behinderung zwangsläufig dank ihrer Reichweite Aufklärungsarbeit leisten? Darüber sprechen wir – nicht bei Instagram live, aber in unserem Bayern 2-Podcast.
Blinde Menschen brauchen Bildbeschreibung
Gespannt liest unsere Kolumnistin Lydia Zoubek auf Social Media mit. Doch immer wieder fehlen ihr Informationen und sie kann nicht folgen. Das Problem: Fehlende Bildbeschreibungen. Wie man blinden Leser*innen Bilder zugänglich machen kann, berichtet sie in ihrer Kolumne.
„Einfach anfangen“ – ein Interview mit der Initiative #barrierefreiPosten
Immer mehr Inhalte werden auf Social Media Kanälen bereitgestellt, geteilt und empfohlen. Die Initiative #barrierefreiPosten gibt Tipps, wie man mit Barrierefreiheit eine größere Zielgruppe im Internet erreicht. Wir haben mit zwei der Initiator*innen – Prof. Christiane Maaß und Heiko Kunert – über ihre Ziele gesprochen.
