Accessibility für Websites

[00:00:06.310] – Timo

Hallo und herzlich willkommen zur neuen Folge von The Digital Shift der netzstrategen Podcast. Ich bin euer Host Timo und habe heute meine liebe Kollegin Doro zu Gast hier in unserem Podcaststudio. Doro, herzlich willkommen!

[00:00:19.090] – Doro

Hallo! Vielen Dank!

[00:00:20.410] – Timo

Genau. Du bist bei uns UX Designerin. Möchtest du dich einfach mal gerade kurz mit zwei, drei Sätzen vorstellen, wer du bist und was du so tust?

[00:00:28.750] – Doro

Ja, hallo, ich bin Doro. Ich bin seit circa sieben Jahren bei den netzstrategen und bin im Design Team als UX Designerin tätig und kümmere mich darum um die Konzeption von digitalen Produkten. Meistens sind das Websites. Das heißt, ich gucke, dass die so konzipiert sind, dass sie möglichst leicht zu verstehen sind und leicht zu benutzen sind. Genau.

[00:00:55.060] – Timo

Ja, und Websites ist das Stichwort. In dieser heutigen Ausgabe widmen wir uns einem ganz wichtigen Thema, und zwar dem Thema Barrierefreiheit. Schrägstrich Accessibility von Websites. Ich glaube, ich muss diesen Begriff auch. Kann man den kongruent verwenden, weil ich tue mir manchmal schwer. Also beschreiben ist die Hölle, wenn ich Accessibility schreiben muss und dann verwenden wir den Begriff einfach, glaube ich jetzt mal kongruent, wenn wir davon Barrierefreiheit sprechen. Genau heute widmen wir uns dem Thema. Das ist ein Thema, was dich, was dir sehr, sehr am Herzen liegt. Das könntest du vielleicht mal in zwei, drei Worten auch beschreiben, warum dem so ist. Warum ist das Thema so für dich persönlich wichtig? Und dann machen wir auch gleich mal den Switch. Warum ist das für Webseitenbetreiber oder in Summe für alle eigentlich wichtig?

[00:01:39.130] – Doro

Also grundsätzlich kann man ja mal sagen, Barrierefreiheit bedeutet Zugänglichkeit. Wortwörtlich übersetzt. Und es geht darum, dass eben Websites jetzt, wenn wir bei dem Beispiel bleiben, für alle Menschen ungeachtet einer möglichen Einschränkung benutzbar sind. Das heißt, dass. Informationen aufgenommen werden können, verstanden werden können, aber auch selbst Informationen in – also beigetragen, etwas beigetragen werden kann. Genau.

[00:02:15.280] – Timo

Von welchen Nutzergruppen sprechen wir da? Also mit Einschränkungen. Das sind ja auch sehr verschiedenartige Gruppen. Kannst du die mal beschreiben, wie man die Cluster kategorisiert?

[00:02:25.480] – Doro

Genau, da geht es um Menschen mit eingeschränktem Hörvermögen oder taube Menschen, Menschen mit eingeschränktem Sehvermögen oder blinde Menschen, Menschen mit motorischen Einschränkungen oder gar Lähmungen, aber auch Menschen mit kognitiven Einschränkungen oder Neigung zu epileptischen Anfällen. Das alles gehört dazu. Ja, und man darf nicht vergessen, dass auch man selbst wenn man völlig gesund ist, auch mal in eine Situation kommen kann, wo man vielleicht angewiesen ist auf assistive Technologien oder die Benutzung von der Tabnavigation. Wenn ich zum Beispiel einen gebrochenen Arm habe und vielleicht nur mit einem mit einem Finger meinen Computer bedienen kann.

[00:03:10.990] – Timo

Das war mir vorher gar nicht so bewusst. Es kann ja eigentlich jeden da treffen oder temporär einfach was, was, was ausmachen. Ich kann jetzt wirklich die Tastatur nicht bedienen oder die Maus nicht bedienen, oder? Ja, das ist auf jeden Fall ja super wichtig, glaube ich. Dieses Internet für alle ist ja glaube ich auch so ein Zitat von Tim Burnley. Das es wirklich keine Einschränkung ist. Deine persönliche Einschätzung. Ist das Internet aktuell für alle wirklich zugänglich oder wie viel Arbeit ist da noch notwendig?

[00:03:42.130] – Doro

Da muss man sagen, da ist noch einiges zu tun. Ja, da wird ja jetzt auch gesetzlich nachgebessert, so dass es dann auch verpflichtend wird für eigentlich so gut wie alle Unternehmen, Dienstleister, Onlineshops usw. und ja, ich denke, dass das auch ein notwendiger Schritt ist.

[00:04:03.430] – Timo

Können wir das? Hast du da auch schon Jahreszahlen im Kopf, wo du schon sagen kannst, ich habe jetzt auch mal natürlich mich ein bisschen vorbereitet und mal geguckt, was passiert denn da eigentlich? Da gibt es so ein paar Jahreszahlen, dass wir das auch noch mal ein bisschen kommunizieren jetzt für die Zuhörer, die wissen, was passiert denn da eigentlich gerade? Was wurde da beschlossen? Hat vielleicht auch nicht jeder auf dem Schirm.

[00:04:19.510] – Doro

Genau. Es wurde jetzt auf europäischer Ebene ein Gesetz verabschiedet. Der European Accessibility Act nennt sich das. Da wurde eben entschieden, dass man auf europäischer Ebene eine einheitliche Gesetzgebung hat. Und jetzt? Ich meine, dieses Jahr im Sommer wurden quasi diese Gesetze auf Landesebene sozusagen beschlossen oder umgesetzt. In jedem Land und 2025 ist es dann so, dass es quasi durchgesetzt wird.

[00:04:52.150] – Timo

In drei Jahren ist wirklich dann Schicht im Schacht bzw. muss, müssen Websitebetreiber genau umgesetzt haben.

[00:04:58.930] – Doro

Sie müssen dann eben bestimmte Richtlinien erfüllen.

[00:05:02.410] – Timo

Okay, kommen wir nachher noch mal. Können wir noch mal ein bisschen vertiefen. Ich finde diese Zahlen darzustellen schon mal super wichtig und auch die Notwendigkeit, dass da wirklich Handlungsbedarf ist. Lasst uns noch mal auf die Nutzergruppen zurückkommen. Du hast jetzt ein paar genannt. Hast du da auch ein paar paar Zahlen, um das mal so greifbar zu machen? Ich sage mal Deutschland. Wir haben hier 85 Millionen Menschen, davon sind 90 % oder ich weiß nicht wie viel Prozent online direkt. Was bedeutet das? Welche Zahlen stecken hinter diesen Nutzergruppen? Das ist vielleicht ein bisschen plastischer für uns zu machen und für die für die Hörer zum Vorstellen.

[00:05:33.700] – Doro

Also ich habe jetzt Zahlen von 2019, da waren ungefähr 7,8 Millionen schwerbehinderte Menschen in Deutschland, dann Sehbehinderte, also wirklich schwer Sehbehinderte bis Blinde haben wir 350.000 Menschen. Es gibt aber auch natürlich andere Sehschwächen, wie zum Beispiel eine Rot-Grün-Blindheit. Und das haben – als ich die Zahlen zum Ersten Mal gesehen habe, war ich wirklich erstaunt. Das sind also wirklich etwa 9 % aller Männer Haben diese Rot-Grün-Sehschwäche.

[00:06:07.360] – Timo

Auch im Straßenverkehr? Weiß ich gar nicht.

[00:06:09.340] – Doro

Ja, vielleicht. Das finde ich also wirklich eine sehr hohe Zahl. Bei den Frauen sind es nur 0,8. Warum auch immer. Und dann haben wir 16 Millionen schwerhörige Menschen. Und eine Nutzergruppe habe ich vorhin nicht erwähnt. Das sind ältere Menschen. Also 60 plus jetzt mal als genauso betagtere Menschen, die natürlich auch dann da lässt die Sehkraft langsam nach, die, die Hörkraft wird schwächer, die koordiniert auch die, die die koordinative Fähigkeit lässt nach. Und das ist eine Nutzergruppe, die ist sehr groß. Also die sind ungefähr 24 Millionen über 60-jährige haben wir und immer mehr von dieser Nutzergruppe gehen auch online. Das ist eine steigende Tendenz.

[00:07:04.810] – Timo

Wenn wir uns den demografischen Wandel anschauen, wie sich da die Alterspyramide auch verschiebt. Generell werden das ja tendenziell die nächsten Jahre noch noch mehr Menschen werden, die genau in diese Gruppe reinfallen. Genau. Also Handlungsbedarf ist auf jeden Fall da. Okay, wenn ich jetzt noch mal auf das Thema – Bleiben wir noch mal bei den bei den Nutzerinnen das sind oder waren das alle schon Zahlen habe ich, habe ich da irgendwas schon vorweggenommen oder waren es welche, welche…

[00:07:27.340] – Doro

Ne mehr Zahlen habe ich jetzt nicht, nicht dabei sozusagen. Aber ich denke, da kommt schon mal zum Vorschein, dass es eben eine ganze Menge Menschen sind, die da betroffen sind.

[00:07:37.660] – Timo

Ja, ja, was bedeutet das denn jetzt mal prinzipiell für einen Websitebetreiber, inhaltlich Inhaltzugang zugänglich zu machen? Also was muss man da auf dem Schirm haben?

[00:07:49.720] – Doro

Es gibt Guidelines, die zusammenfassen, was man alles machen sollte. Und zwar gab es da zuerst die Internationalen, also die Webcontent Accessibility Guidelines. Die gibt es in drei verschiedenen Leveln, also die sind geclustert nach Level A, Doppel A und Triple A und die, das Double A Level, also das ist so die Empfehlung für für barrierefreie Websites jetzt auch in unserer Gesetzgebung. Genau. Und dann betrifft es verschiedene Bereiche. Also einerseits das Visuelle, also das Design, dann natürlich auch den Content, wie es der Content aufbereitet und beschrieben. Und vieles ist eben auch technisch so, dass man eben gucken muss, dass bestimmte Dinge so programmiert sind, dass sie für den Screenreader beispielsweise erkennbar sind, also genau, oder die Tabnavigation funktioniert. Das sind eben auch Dinge, die müssen so programmiert werden, dass sie funktionieren.

[00:08:58.420] – Timo

Das wäre auch so die nächste Frage Was bedeutet das für deine Arbeit als als UX, als Designerin in dem Fall? Also was, wenn wir reden von der Website immer von Website Relaunch aus. Viele stehen gerade an dem Prozess, an dem Punkt Website Relaunch anzugehen, so wie ich es jetzt raus höre, auch mit 2025 macht es schon sehr viel Sinn, das mal auch gleich mitzudenken. Was bedeutet das jetzt? Und das sind ja auch viele andere Disziplinen noch involviert, die die Webentwicklung, aber auch Content oder SEO, vor allem die Suchmaschinenoptimierung, was da zusammenspielt. Was bedeutet es denn für deine Arbeit konkret als UX Designerin, wenn wir jetzt von barrierefreien Webseiten sprechen, was musst du da handwerklich tun?

[00:09:38.440] – Doro

Also wenn man jetzt mal anfängt beim oder im letzten Schritt eigentlich anfängt beim Visual Design, gibt es verschiedene Sachen zu beachten, also zum Beispiel ich kann jetzt nur einige Beispiele nennen, weil es wirklich relativ viel ist insgesamt also zum Beispiel die die Darstellung der Inhalte, also der Kontrast und die Schrift. Sind die so dargestellt, dass es eben alle Nutzer. Lesen können. Das ist ein Thema. Da denkt man immer so: Ach nee, das ist doch ein kräftiges Orange, das hat doch genug Kontrast. Aber das täuscht. Und es ist eben bei dem Double As Standard ist es so, dass der Kontrast die, die Kontrastratio muss bei eins zu 4,5 sein, liegen. Und da gibt es eben Tools, da kann man das prüfen mit und…

[00:10:28.570] – Timo

Sorry, wenn ich da gerade wenn wir schon bei den Tools sind, hast du da ein, zwei Tools, die du nennen kannst, die wir natürlich auch in den Shownotes verlinken für euch.

[00:10:35.950] – Doro

Ja, gerne. Also da haben wir das – ein Online Tool heißt Contrast Checker, glaube ich. Da kannst du dann deinen Hexer Dezimalcode eingeben und die Vordergrundfarbe zur Hintergrundfarbe und dann spuckt er dir das den Wert aus und sagt eben auch, für welche Schriftgrößen es in Ordnung ist. Das macht auch noch einen Unterschied. Ein anderes Tool ist WhoCanUse, das zeigt dir auch, wenn du einen Farbwert eingibst, wie das simuliert so ein bisschen, wie Menschen mit bestimmten Sehschwächen den Wert sehen.

[00:11:11.800] – Timo

Okay. Ja, cool. Da haben wir auch schon mal wieder zwei Tools noch mal geteilt, wo jeder mal von euch das, mal auf der eigenen Webseite oder man die mal was heißt. Oder haut man nur die URL mal rein oder was? Was muss man da noch? Muss man auch an was anderes tun?

[00:11:22.660] – Doro

Man gibt nur die URL ein und dann erscheint ein Interface, wo ich die Farben eingeben kann und dann wird es geprüft. Genau. Und ansonsten, als UX Designer gibt es dann so Sachen, dass man zum Beispiel für die Buttons States haben wir zum Beispiel mit aufgenommen, dass wir wirklich immer einen Button State haben für ein Focusdate. Muss ich vielleicht kurz erklären, dass wenn du mit der…

[00:11:44.170] – Timo

Erklärs mir mal.

[00:11:45.820] – Doro

Wenn du mit der Tastatur navigierst, also stell dir vor, du kannst eben deinen Arm oder Hand nicht, nicht so bewegen, dass du die Maus nutzen kannst. Dann kann man eben über die Tastatur eine Website bedienen. Das ist dann die Tab-Taste und die Return- und die Pfeiltasten. Und dann musst du aber ja irgendwie aufzeigen, wo du dich gerade befindest auf der Webseite, weil du hast keinen Mauszeiger und dafür gibt es eben diese Focusdates, die dann eben Du drückst Tab und springst dann inhaltlich immer einen Punkt weiter und wenn du Return drückst, dann aktivierst du den Link, also wie ein Klick. Und genau da muss man natürlich beachten, dass das alles sichtbar ist für den Fall, dass jemand eben mit der Tastatur navigiert. Man muss natürlich auch darauf achten, dass die quasi die Reihenfolge der Inhalte Sinn machen und usw. und so fort. Also du musst dich halt einmal in diesen Use Case reinversetzen.

[00:12:46.480] – Timo

Was bedeutet es dann noch in Zusammenarbeit mit den anderen Disziplinen? Also was Schnittstelle jetzt Design, Webentwicklung, was das angeht? Was wie sie da was, was, was machst du da in der Praxis? Was passiert da? Wie muss ich mir das vorstellen? Habe ich null Ahnung von.

[00:13:01.180] – Doro

Also in der Praxis ist es tatsächlich so, dass die Entwickler da ihre Sachen wissen, was sie zu tun haben, also wie sie zum Beispiel Buttons oder Links auszeichnen müssen. Die Zusammenarbeit ist eher, wenn wir ein Audit machen, also Accessibility Audit. Das heißt, jemand kommt zu uns und sagt Könnt ihr bitte mal prüfen, wo ich stehe, wo habe ich Probleme und wo mache ich die Sachen schon richtig? Da arbeite ich dann direkt mit einem Entwickler zusammen und wir teilen uns sozusagen die Tasks. Also ich gucke sozusagen die designrelevanten Dinge an und der Entwickler, die, die technischen Sachen und das ist schon auch etwas umfangreicher.

[00:13:44.350] – Timo

Weil es wahrscheinlich auch tiefer einfach mehr in die tieferen Designs auch reingeht. Okay, das heißt was, was bekomme ich dann da im Endeffekt, wenn ich jetzt sage, ich mache ein Audit, also dann kriege ich mal einen Status quo und weiß nachher, an welchen Stellschrauben ich da was wie verändern muss.

[00:14:00.520] – Doro

Genau. Man bekommt am Ende einen Report, in dem im Prinzip drinsteht, wie viele ich, wie viel Guidelines ich erfülle und wo ich Probleme habe. Und da steht dann auch drin, genau, wo das Problem liegt. Also beispielsweise nehmen wir mal das Beispiel von einem Button, dass der Button nicht so ausgezeichnet ist, dass beispielsweise ein Screenreader dem Nutzer:innen sagen kann das ist ein Button und der führt da und dahin als Beispiel. Und dann steht es eben der Codeschnipsel da drin und wie man es sozusagen optimieren müsste.

[00:14:36.640] – Timo

Okay, okay, also klare Handlungsempfehlung sozusagen.

[00:14:39.880] – Doro

Genau.

[00:14:40.180] – Timo

Gut, dann würde ich sagen, den verlinken wir mal auch in den Shownotes mit rein, den Accessibility Audit. Zum Thema noch mal auf das Thema Content oder ich bin noch aus der, lass uns mal mit dieser Nutzersicht noch mal bleiben oder Beziehungsweise von der Disziplin her. Wenn ich jetzt auch Thema SEO mit einfließen lasse, was ist da noch mal notwendig? Ich würde das mal aus meiner Perspektive sagen, die Bilder müssten ausgezeichnet sein. Also sollten sie sowieso mit, mit ALT Text ausgezeichnet sein. Was ist noch wichtig, was Thema Bewegtbild angeht? Also was, was muss ich da auch als Websitebetreiber beachten?

[00:15:16.940] – Doro

Also grundsätzlich ist es so, dass SEO stark profitiert davon, wenn man jetzt wirklich alles, was empfohlen ist von Accessibility Sicht oder Barrierefreiheit, wenn man das gut macht, dann hat man eine Super SEO Grundlage. Also da strahlen die SEOs immer, wenn man davon erzählt, weil es kommt eben darauf an, dass man eine gute Struktur hat, also eine H1, H2, dass man die ganze Seite so strukturiert, dass sie gut verständlich ist und so Sachen wie Links, Linktexte beispielsweise. Also das ist immer ein ganz gutes Beispiel. Da ist es ja aus SEO und Usabilitysicht wichtig, dass man einen eindeutigen Link Text hat, damit der Nutzer sich.

[00:16:04.340] – Timo

Also nicht.

[00:16:04.790] – Doro

Zurechtfindet.

[00:16:05.660] – Timo

Hier klicken.

[00:16:06.470] – Doro

Genau. Dann ist es wichtig, dass man interne und externe Links unterscheidet. Und für, für normale Nutzer:innen ist es eben wichtig, damit sie sich orientieren. Aber wenn man sich vorstellt, man ist ein blinder Nutzer, dann kann es eben existenziell sein. Denn wenn ich auf den Link klicke und weiß nicht, dass es ein Externer ist, dann habe ich die Orientierung verloren. Unter Umständen, insofern…

[00:16:32.560] – Timo

Das heißt, da ist schon eine enge Zusammenarbeit im Endeffekt was, was interdisziplinär angeht, oder?

[00:16:37.120] – Doro

Also es ist so, dass wenn man eine gute Accessibility hat, hat man in der Regel kein Usability Problem. Also das heißt es ist und und man hat eine gute SEO Grundlage. Also es ist nichts, was man sozusagen on top macht, sondern, man macht es schon on top, aber es spielt eben in anderen Disziplinen positiv mit rein. Genau. Und beim Content ist es eben so, dass wir ja auch Non-Text Content haben, also sprich Bilder und Videos und Audiofiles, die für Nutzergruppen, die eben nicht sehen können, beschrieben werden müssen. Und das heißt, weil du vorhin gefragt hast wegen ALT Text. Ein Text ist natürlich aus SEO Sicht immer wichtig. Je besser ich das pflege, desto besser. Aber für einen blinden Nutzer ist es eben essenziell zu sagen okay, ich beschreibe eben auch den, den Inhalt, der nicht vorgelesen werden kann. Also im Text, so dass ich eine Vorstellung habe, welches Bild da gezeigt wird. Kurz und prägnant beschreiben, was auf dem Bild zu sehen ist Und das eben, man kann sich ja auch mal versuchen hineinzuversetzen, wenn man es eben nicht sehen würde, wie würde man es kurz und prägnant beschreiben? Das ist wichtig. Wohingegen man auch beachten muss, dass man dekorative Bilder, also Bilder, die jetzt nicht zum Inhalt beitragen. Da würde man den ALT Text leer lassen, damit eben nicht unnötige Informationen irgendwie.

[00:18:03.100] – Timo

Aufs wesentliche reduzieren.

[00:18:04.570] – Doro

Genau. Und was ganz schlecht ist also jeder, der vielleicht auch mal einen Screenreader ausprobiert hat. Wenn in dem ALT Text die, der File Name drin ist und der dann irgendwie „Image.12395LK“ oder was, weil wenn das vorgelesen wird, dann ist das eben fürchterlich.

[00:18:24.010] – Timo

Apropos Screenreader gerade noch mal was kann ich das auch noch mal, wie kann ich das checken als, als Websitebetreiber das? Gibt es da auch mal Tools oder ist das etwas was, kann man das überhaupt checken?

[00:18:33.770] – Doro

Also es gibt in den Betriebssystemen Screenreader und dann gibt es ein paar gängige. Genau. Ich wollte noch eine Sache sagen zu Videocontent. Da ist es eben auch so, dass natürlich jemand, der nicht hören kann, da muss man dann umgekehrt den Text transkribieren, also das man Captions hat. Und der nächste Schritt ist dann zu sagen, man macht es wie bei den Bildern und macht eine Transkription. Also sagt eben nicht nur was reden die Menschen in dem Video, sondern was sehe ich denn auch? Also für, für Blinde, für blinde Nutzer. Dann also zwei Menschen auf einer grünen Wiese als Beispiel agieren wie folgt. Das ist dann der nächste Schritt, der natürlich ein bisschen aufwendiger ist. Genau. Aber für die, für die Captions gibt es ja auch Tools, die man verwenden kann. Das ist ja mittlerweile Gott sei Dank recht gängig.

[00:19:30.830] – Timo

Wenn ich jetzt mal auf die Nutzer:innen noch mal schaue, welche Möglichkeiten habe ich da noch mal als als Nutzer selbst rauszufinden, ob die Website jetzt barrierefrei ist oder wir hatten das vorhin wie gesagt im Vorgespräch mal überlegt, mit welchen Einstellungen es gibt an Bedienungshilfen, sei es Kontrast, Schriftgröße. Das ist also das kann man ja erst mal selber schon für sich mal einrichten im Endeffekt, oder? Genau.

[…]