{"id":837,"date":"2025-01-05T10:11:32","date_gmt":"2025-01-05T10:11:32","guid":{"rendered":"https:\/\/jennifer-sonntag.de\/?page_id=837"},"modified":"2025-01-06T11:58:19","modified_gmt":"2025-01-06T11:58:19","slug":"wie-man-mit-lippenstiften-eine-barrierefreie-webseite-erstellt","status":"publish","type":"page","link":"https:\/\/jennifer-sonntag.de\/index.php\/einblicke\/wie-man-mit-lippenstiften-eine-barrierefreie-webseite-erstellt\/","title":{"rendered":"Wie man mit Lippenstiften eine barrierefreie Webseite erstellt"},"content":{"rendered":"\n

Als blinde Fachjournalistin ist es mir ein gro\u00dfes Anliegen, unsichtbare Themen sichtbar zu machen. Der digitale Raum k\u00f6nnte der inklusivste Ort der Welt sein, wenn wir ihn gemeinsam barrierefrei gestalten. Dort habe ich die M\u00f6glichkeit, Teilhabe und Teilgabe zu leben, in Austausch zu treten und meine Arbeit zu zeigen. Doch Sichtbarkeit und nicht sehen k\u00f6nnen, das bedeutet f\u00fcr mich auch regelm\u00e4\u00dfig, dass ich an Grenzen sto\u00dfe, wenn Barrierefreiheit nicht mitgedacht wird. Menschen mit unterschiedlichen Behinderungen haben unterschiedliche digitale Bed\u00fcrfnisse. Nichtsehende Menschen orientieren sich im Internet anders als Sehende. Beide Sichtweisen m\u00f6chte ich ber\u00fccksichtigen. 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 \u00dcbersetzung meiner Inhalte von der unsichtbaren in die sichtbare Welt. Uns beiden war es ein Bed\u00fcrfnis, \u00fcber meine pers\u00f6nlichen Perspektiven und Erfahrungen hinaus auch allgemeine Praxistipps zur digitalen Barrierefreiheit bereitzustellen. Daf\u00fcr habe ich Franziska Appel die Tastatur \u00fcberlassen. Inspiriert durch die Wissenschaftsshow \u201eMaithink X<\/a>\u201c mit Dr. Mai Thi Nguyen-Kim haben wir uns in den Infoboxen in die technischen Details vertieft und sprichw\u00f6rtlich reingenerdet.<\/p>\n\n\n\n

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\u00f6glich, dass mir der Bildschirminhalt vorgelesen wird. Neben der Sprachausgabe kann ich zus\u00e4tzlich 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\u00f6glichen. Damit das Zusammenspiel zwischen einer Webseite und der Hilfsmitteltechnik funktioniert, sind beim Aufbau von Webseiten bestimmte Informationen f\u00fcr die Hilfsmitteltechnik blinder Menschen zu hinterlegen.<\/p>\n\n\n\n

Nerden wir uns da mal rein Part 1 \u2013 Grundlagen

F\u00fcr einen barrierefreien Internetauftritt kann man sich beispielsweise an den \u201eWeb Content Accessibility Guidelines\u201d (WCAG), einem international anerkannten Standard f\u00fcr Barrierefreiheit von Webinhalten, und der \u201eBarrierefreie-Informationstechnik-Verordnung\u201c (BITV) der Bundesrepublik Deutschland, welche auf der WCAG 2.1 basiert, orientieren. Etwas anschaulicher erkl\u00e4rt es Domingos de Oliveira in seinem Podcast. Der blinde Experte f\u00fcr 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\u00f6glicht, miteinander zu kommunizieren. Die Accessibility API sorgt daf\u00fcr, dass Barrierefreiheits-Informationen, also Daten, die Menschen mit Behinderungen den Zugang zu digitalen Inhalten erleichtern, in Programmen und Dokumenten hinterlegt werden. Dazu geh\u00f6ren unter anderem semantische Informationen, also Bedeutungsangaben, wie die Funktion von UI-Elementen (User Interface, also Bedienelementen), Bildbeschreibungen oder \u00e4hnliche Daten. Diese Informationen werden dann vom Screenreader entweder in gesprochene Sprache oder in Blindenschrift auf der Braillezeile umgewandelt. Das vollst\u00e4ndige Transkript der Podcast-Folge ist hier verf\u00fcgbar.<\/pre>\n\n\n\n
Wie darf man sich das aber nun im praktischen Herangehen und beim Erstellen meiner pers\u00f6nlichen Webseite vorstellen? Meine Freundin Franziska Appel und ich waren es bereits durch ein gemeinsames Buchprojekt<\/a> und unsere digitale Ausstellungsplattform<\/a> gewohnt, \u00fcber Gestaltungsaspekte in einen beiderseits bereichernden Dialog zu treten. Ich freute mich daher \u00fcber ihr Angebot, mich bei der Entwicklung meines neuen Online-Auftritts<\/a> zu unterst\u00fctzen. Sie verstand, dass ich einen eigenen Stil lebte und man diese pers\u00f6nlichen \u201eLebensfarben\u201c auch nach meiner Erblindung auf meiner Webseite wiederfinden sollte. Daher fragte sie mich gleich zu Beginn ganz selbstverst\u00e4ndlich nach meinen Vorstellungen f\u00fcr die farbliche Gestaltung der Seite. Als erblindete Frau brauchte ich daf\u00fcr Eselsbr\u00fccken. An welche Farben konnte ich mich noch gut erinnern? Was war meine Signatur? Ich habe lange f\u00fcrs Fernsehen gearbeitet und mit meinen Visagistinnen vor Farbpaletten gesessen. Mein Schminkkoffer half Franziska und mir am besten bei der Kommunikation \u00fcber 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\u00fcr den Screenreader erkennbar ist: \u201eBeschreibung zur optischen Gestaltung der Webseite: Die Seiten haben als Hintergrund einen dunklen Rotton (in Richtung Aubergine), w\u00e4hrend die Links und Bildunterschriften einen Farbton zwischen Altrosa und Pink haben. Hintergrund vom Header und sonstige Schrift sind in einem leichten Beigeton gehalten, w\u00e4hrend die Schrift vom Header schwarz dargestellt wird. Das Seiten-Icon ist ein \u201eJ\u201c in Braille-Schrift.\u201c Das Verstecken ist \u00fcbrigens sehr einfach: die Schriftgr\u00f6\u00dfe ist winzig und der Text hat die Farbe vom Hintergrund. Wir w\u00fcnschen den Sehenden viel Spa\u00df bei der Suche (durch Markierung mit dem Cursor wird der Text sichtbar).<\/p>\n\n\n\n
Auch der Austausch mit meiner Community macht mir immer wieder deutlich, dass ich als blinde Person nicht nur \u00fcber Farben sprechen kann, sondern oft sogar dar\u00fcber 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\u00e4hrend ich mir s\u00e4mtliche Inhalte von meinem Screenreader vorlesen lasse oder Informationen auf der Braillezeile ertaste, nutzen sehbehinderte Menschen Hilfsprogramme, mit denen sie sich Farben, Kontraste und Schriftgr\u00f6\u00dfen ihren Augenbed\u00fcrfnissen entsprechend anpassen k\u00f6nnen. Ich kann das gut nachvollziehen, da ich die \u00dcberg\u00e4nge von der Sehbehinderung hin zur Erblindung kenne und im Erblindungsprozess jeweils unterschiedliche Optionen nutzte. Solange ein Sehverm\u00f6gen da war, wollte ich damit arbeiten, ohne die Augen zu \u00fcberfordern. Bei meiner Augenerkrankung (Retinopathia pigmentosa) half mir eine lange Zeit eher helle Schrift auf dunklem Grund. Ein heller Hintergrund h\u00e4tte mich zu stark geblendet. Durch meinen fortschreitenden Tunnelblick durften die Buchstaben jedoch nicht zu gro\u00df 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\u00f6glichst klaren Schriftart ohne Serifen und hohe Kontraste.<\/p>\n\n\n\n
Nerden wir uns da mal rein Part 2 \u2013 Kontraste

Der Kontrast ist das Verh\u00e4ltnis zwischen Vorder- und Hintergrundfarbe \u2013 je h\u00f6her der Wert, desto h\u00f6her der Kontrast. Laut WCAG sollte dieser f\u00fcr normalen Text mindestens bei einem Verh\u00e4ltnis von  4,5 1 liegen. F\u00fcr 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\u00fcr den Hintergrund (#2d0115), ein helles Cremewei\u00df f\u00fcr den Text und den Hintergrund von Kopf- und Fu\u00dfzeile (#edede3) und einen hellen Rotton (#c96490). Dieser hellere Rotton wird einheitlich f\u00fcr Links, Buttons und Bildunterschriften verwendet. Die Links sind zus\u00e4tzlich unterstrichen und wechseln kurz zu Cremewei\u00df, sobald man mit dem Cursor dar\u00fcber geht. F\u00fcr 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 \u00fcberpr\u00fcfen m\u00f6chte, der kann dies unkompliziert \u00fcber den Contrastchecker von Webaim tun. Wir sind uns bewusst, dass jedes Auge anders sieht und die von uns gew\u00e4hlten Einstellungen nicht f\u00fcr alle passen. F\u00fcr Menschen mit Augenproblemen, die noch keine eigenen Hilfsmittel nutzen, haben wir daher zus\u00e4tzlich ein Tool eingef\u00fcgt, das eine Einstellung von Schriftgr\u00f6\u00dfe, Farben und Kontrasten f\u00fcr die individuellen Sehbed\u00fcrfnisse erm\u00f6glicht.<\/pre>\n\n\n\n
Neben den Kontrasten ist vor allem die Struktur der Webseite essentiell f\u00fcr die Barrierefreiheit. Was f\u00fcr das Auge \u00fcbersichtlich aussieht, ist es f\u00fcr 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\u00f6nnen wichtige Informationen f\u00fcr den Screenreader unsichtbar bleiben, was die Nutzung der Seite erheblich erschwert. Ich brauche dann sehr viel Zeit und Energie, um Gew\u00fcnschtes zu finden. Das gilt im \u00dcbrigen auch f\u00fcr PDF-Dateien, die visuell oft sehr ansprechend sind, blind aber wie Kraut und R\u00fcben wirken k\u00f6nnen. So rief ich mir k\u00fcrzlich in einer PDF die \u00dcberschriftenliste auf und fand darin riesige Textfragmente aus dem Flie\u00dftext, unsinnig durcheinandergew\u00fcrfelt, leider aber keine orientierenden \u00dcberschriften. Gerade in professionellen Kontexten kann hier ein sehr unaufger\u00e4umter Eindruck von einer Publikation entstehen. Auf einer gut strukturierten und aufger\u00e4umten Seite f\u00e4llt hingegen nicht nur sehbehinderten und blinden Menschen die Orientierung leichter.<\/p>\n\n\n\n
Nerden wir uns da mal rein Part 3 \u2013 Struktur

Zun\u00e4chst m\u00fcssen alle relevanten \u00dcberschriften korrekt als \u201eHeader\u201c gekennzeichnet werden und f\u00fcr Unter\u00fcberschriften die Abstufungen Header 2, 3, usw. entsprechend der \u00dcberschriftenebene gew\u00e4hlt werden. Diese klare Struktur erm\u00f6glicht es blinden Menschen, mithilfe von Screenreadern effizient durch die Webseite zu navigieren. So nutze ich beispielsweise Tastenkombinationen, um mir Listen mit allen vorhandenen \u00dcberschriften, Links und Rahmen anzeigen zu lassen und mir so einen \u00dcberblick \u00fcber die Seite zu verschaffen. Ebenfalls mit der Tastatur kann ich dann einzelne \u00dcberschriften, Eingabefelder oder Schaltfl\u00e4chen anspringen, ohne mir permanent den gesamten Bildschirminhalt vorlesen lassen zu m\u00fcssen. Zus\u00e4tzlich sollte darauf geachtet werden, Textpassagen niemals als \u00dcberschriften (Header) zu formatieren, wenn sie lediglich hervorgehoben werden sollen. Stattdessen sollten Schriftgr\u00f6\u00dfen angepasst sowie fett oder kursiv verwendet werden. Unterstreichungen sollten ausschlie\u00dflich f\u00fcr Verlinkungen vorbehalten sein, um Verwirrungen zu vermeiden.<\/pre>\n\n\n\n
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\u00fcndete, wenn es um die barrierefreie Umsetzung von Ideen geht. Unser Ziel ist es, im Kleinen zu zeigen, was wir uns von den Gro\u00dfen w\u00fcnschen, die im Gegensatz zu uns oft \u00fcber ein entsprechendes Budget verf\u00fcgen. 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\u00dfes Augenmerk auf Bilder und Bildbeschreibungen. Ich pers\u00f6nlich erfreue mich auch \u00fcber den rein informellen Aspekt hinaus an gestalterischen Elementen, war ich doch \u00fcber 20 Jahre lang Sehende und m\u00f6chte diesen Teil in mir auch weiter beleben. Wir haben versucht, meine Farben und Fotos im Zusammenspiel zu denken, wenn das auch nicht f\u00fcr alle blinden Menschen gleicherma\u00dfen wichtig ist. Aus meiner Sicht sollten wir jedoch die Chance haben, selbst ausw\u00e4hlen zu k\u00f6nnen, wie tief wir in Bilderwelten einsteigen wollen. Ich bin bei eigenen Fotos immer wieder erstaunt, wie wenig ich dar\u00fcber wei\u00df. Oft erschlie\u00dft sich mir erst durch die angelegten Alternativtexte eine Situation, Szene oder Wirkung, die ich mir \u00fcber gro\u00dfe Zeitr\u00e4ume 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\u00df gemacht hat mir das Brainstorming mit den Lippenstiften und das Bespielen meines Kopfkinos durch die Bildbeschreibungen. Weitere kreative Beispiele f\u00fcr unser Zusammenwirken zeigen Franziska und ich auf unserer K\u00fcnstler*innenseite \u201eGaleriegefl\u00fcster<\/a>\u201c. Unser Credo ist: \u201eDu wirst sehen, wir werden uns blind verstehen!\u201c<\/p>\n\n\n\n
Nerden wir uns da mal rein Part 4 \u2013 Alternativtexte

Um den Inhalt von Bildern f\u00fcr einen Screenreader zug\u00e4nglich zu machen, lassen sich auf Webseiten und in Dokumenten Bildbeschreibungen, sogenannte Alternativtexte, f\u00fcr einzelne Bilder hinterlegen. In WordPress ist das Einf\u00fcgen 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 \u201eAlternativtext\u201c, in dem die Bildbeschreibung eingegeben werden kann. Da dieses Feld recht klein ist, kann es bei ausf\u00fchrlicheren Bildbeschreibungen \u00fcbrigens 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\u00fcgen. Dazu kann man im img-Tag die Bildbeschreibung im alt-Attribut hinterlegen. Ein einfaches Beispiel sieht so aus: <img src=\u201cbild.jpg\u201c alt=\u201cBeschreibung des Bildinhalts\u201c>. Alternativtexte auf Webseiten verbessern \u00fcbrigens nicht nur die Barrierefreiheit, sondern auch die Suchmaschinenoptimierung (SEO). In Microsoft Word f\u00fcgt man Alternativtexte hinzu, indem man mit der rechten Maustaste auf das Bild klickt und im Kontextmen\u00fc \u201eAlternativtext\u201c ausw\u00e4hlt. Im sich \u00f6ffnenden Bereich kann dann die Beschreibung des Bildes eingetragen werden. Es gibt auch die Option \u201eDieses Bild als dekorativ kennzeichnen\u201c, die dazu f\u00fchrt, dass Screenreader dieses Bild \u00fcberspringen. Allerdings w\u00e4re da zu \u00fcberlegen, warum nicht auch die dekorativen Elemente barrierefrei zug\u00e4nglich sein sollten, da sie zum \u00e4sthetischen Gesamteindruck beitragen. In Word ist es zudem auch notwendig, eingef\u00fcgte Textfelder mit einem Alternativtext zu versehen, da diese sonst ebenfalls f\u00fcr den Screenreader unsichtbar bleiben. F\u00fcr PDF-Dokumente ist es wichtig, Alternativtexte bereits im Ausgangsdokument (z.B. Word) zu hinterlegen, da diese beim Export in PDF \u00fcbernommen werden. In Programmen wie Adobe Acrobat Pro k\u00f6nnen Alternativtexte auch nachtr\u00e4glich direkt im PDF hinzugef\u00fcgt werden, indem man auf \u201eWerkzeuge > Barrierefreiheit > Alternative Texte hinzuf\u00fcgen\u201c geht.<\/pre>\n\n\n\n
Ich w\u00fcnsche mir mehr kreative Ans\u00e4tze f\u00fcr digitale Barrierefreiheit und bin gespannt, wie wir gemeinsam neue Wege finden k\u00f6nnen. Es muss nicht immer gleich perfekt sein und oft ergeben sich im gemeinsamen Austausch neue L\u00f6sungen. Besonders gern m\u00f6chte ich  damit experimentieren, wie sich Farben und Layouts f\u00fcr blinde und sehbehinderte Menschen noch zug\u00e4nglicher gestalten lassen. Auch die Einbindung k\u00fcnstlicher Intelligenz in diese Prozesse ist f\u00fcr mich hochinteressant. Perspektivisch hoffe ich stark auf die Wirkkraft des Barrierefreiheitsst\u00e4rkungsgesetzes. Wenn ihr weitere Tipps sucht, wie eure Webprojekte barrierefreier werden k\u00f6nnen, schaut bei www.netz-barrierefrei.de<\/a> vorbei \u2013 Franziska und ich w\u00fcnschen Neugier und Spa\u00df beim Entdecken inklusiver M\u00f6glichkeiten!<\/p>\n\n\n\n
\n
Zum Blog<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
Als blinde Fachjournalistin ist es mir ein gro\u00dfes Anliegen, unsichtbare Themen sichtbar zu machen. Der digitale Raum k\u00f6nnte der inklusivste Ort der Welt sein, wenn wir ihn gemeinsam barrierefrei gestalten. Dort habe ich die M\u00f6glichkeit, Teilhabe und Teilgabe zu leben, in Austausch zu treten und meine Arbeit zu zeigen. Doch Sichtbarkeit und nicht sehen k\u00f6nnen, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":322,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-837","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jennifer-sonntag.de\/index.php\/wp-json\/wp\/v2\/pages\/837"}],"collection":[{"href":"https:\/\/jennifer-sonntag.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jennifer-sonntag.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jennifer-sonntag.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jennifer-sonntag.de\/index.php\/wp-json\/wp\/v2\/comments?post=837"}],"version-history":[{"count":2,"href":"https:\/\/jennifer-sonntag.de\/index.php\/wp-json\/wp\/v2\/pages\/837\/revisions"}],"predecessor-version":[{"id":846,"href":"https:\/\/jennifer-sonntag.de\/index.php\/wp-json\/wp\/v2\/pages\/837\/revisions\/846"}],"up":[{"embeddable":true,"href":"https:\/\/jennifer-sonntag.de\/index.php\/wp-json\/wp\/v2\/pages\/322"}],"wp:attachment":[{"href":"https:\/\/jennifer-sonntag.de\/index.php\/wp-json\/wp\/v2\/media?parent=837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}