Transkript

00:00:00: Music.

00:00:07: Hallo und herzlich willkommen bei Inside IONOS. Mein Name ist Andreas Maurer. In dieser Folge geht es wieder einmal um das Open-Source-CMS WordPress und das hat einen guten Grund.

00:00:16: Mehr als 40 % aller Websites weltweit laufen mit WordPress und wenn man sich nur die Seiten anschaut, die mit einem Content-Management-System erstellt worden sind,

00:00:23: dann liegt der Marktanteil von WordPress sogar bei mehr als 64%.

00:00:27: Vor ein paar Wochen haben wir uns schon einmal mit dem Thema Barrierefreiheit im Web beschäftigt und natürlich sollte das führende Content-Management-System hier auch ein Vorreiter sein.

00:00:35: Wie WordPress und Barrierefreiheit, oder neudeutsch Accessibility, zusammengehen, darüber spreche ich heute mit Maja Benke. Hallo Maja! Hallo!

00:00:42: Ich hab jetzt gerade Accessibility gesagt, wird im Netz auch als A-1-1-y oder

00:00:48: Ally abgekürzt, wo kommt das her? Genau, das liegt daran, dass zwischen dem A und dem Y von Accessibility 11 Buchstaben sind und deswegen werden die als Zahl zusammen gekürzt und gesprochen Elli. Für mich hat es immer noch diesen schönen

00:01:00: Nebeneffekt, dass das auch wie Ally ist, also quasi, ja, Mitämpfer für etwas zu sein oder

00:01:06: für etwas unterstützen und man macht das auch mit anderen Sachen, zum Beispiel mit Internationalization, das sind ja glaube ich 18 Buchstaben zwischen dem I und dem N und dann wird das halt auch zusammen gekürzt, damit man das nicht jedes mal so

00:01:18: ausschreiben muss und auch Accessibility, gerade für jemanden, der Legasthenie hat wie bei mir, ich mag dieses Wort nicht so gern schreiben, weil das immer so wie viele waren das jetzt, mit den 2 C und 2 S und dann als mit e und y und wie viele Ls.

00:01:30: Also, A11y ist ja doch deutlich einfacher, aber leider auch nicht barrierefrei, wenn man das nicht vorher erklärt was das bedeutet.

00:01:36: Du bist Web-Designerin, aber hast du eigentlich auch ganz anderes studiert. Wie bist du zu dem Thema Webdesign gekommen? Genau, ich habe Landschaftsarchitektur studiert

00:01:44: und habe das Studium selbst auch total genossen und habe dann aber in der Praxis gemerkt, dass das nicht ganz so meins ist, weil es dann doch nicht so viel Design und Kreativität war, sondern dann auch wirklich viele Anträge, sehr bürokratisch. Man konnte sich kreativ nicht so austoben,

00:01:58: weil man natürlich auch sehr von Kosten und Materialien bestimmt ist und da ist man dann halt auch ortsgebunden und

00:02:04: es war dann doch nicht so ganz meins. Und ich bin dann auf Reisen gegangen und habe an unterschiedlichen Orten gelebt und habe versucht, irgendwie raus zu kriegen, was möchte ich denn jetzt mit meinem Leben beruflich anfangen.

00:02:14: Und mir war immer wichtig, ortsunabhängig arbeiten zu können,

00:02:17: hab dann überlegt, was kann man dann machen, wenn man gerne reist, ortsunabhängig arbeiten möchte. Reiseblogger, das war damals so die Zeit, wo das so sehr aufgekommen ist.

00:02:25: Dann hab ich überlegt, wie setze ich denn jetzt im Blog um, ach WordPress. Okay, das benutzen alle, fange ich mal an mit WordPress, und habe dann aber gemerkt, dass so Bloggen und dieses ganze Marketing und dieses Influencer-Ding, ich weiß gar nicht, ob es Begriff damals schon so gab, ein Influencer, aber es lag mir gar nicht.

00:02:40: Und ich habe einfach viel lieber an der Seite rumgebastelt und fand das technisch gesehen total spannend, designmäßig hald auch, weil das ja auch mal mein Studium war,

00:02:48: Design, Konzeption, Architektur, Entwurf, das war mein Schwerpunkt gewesen, und das ist eigentlich nur ne andere Leinwand. Also auch da geht es ganz viel darum, um das Usability-Thinking, also wie

00:02:58: verhält sich ein User im Raum oder ein Spaziergänger zum Beispiel oder wie wird ein Raum benutzt, wie wirkt ein Raum und genauso ist das auch bei Webseiten. Wie komme ich in die Webseite rein, wie bewege ich mich,

00:03:08: es hat sehr, sehr viele Parallelen, auch wenn das auf den ersten Blick gar nicht so wirkt, und das ist eigentlich nur eine andere Leinwand und in meinem Studium habe ich mit Pflanzen und Steinen und

00:03:17: andere Materialien gearbeitet, und jetzt ist es halt Code und, genau, macht mehr für sehr viel Spaß. Und die ganze Technik hast du dir selbst beigebracht? Ja, alles autodidaktisch, ja. Also das war schon teilweise sehr hart da irgendwie durchzugehen und das erstmal alles zu lernen, aber

00:03:31: mittlerweile ist das auch schon so lange her mit dem Studium, dass ich mich, also mein Haupt Berufsleben ist Webdesign und Accessibility,

00:03:38: und nicht Landschaftsarchitektur. Und klar, wenn man blogt, dann liegt das Thema WordPress wahrscheinlich nah, weil das das verbreitetste CMS ist.

00:03:46: Mittlerweile bist du auch in der WordPress Community sowohl in Deutschland als international ziemlich aktiv und bekannt. Wie bist du da rein gekommen?

00:03:54: Genau, das war eigentlich eine ziemlich lustige Geschichte und zwar war ich in verschieden Facebook Gruppen aktiv und da wurde von dem WordCamp Köln 2015 mal gepostet und ich war mir nicht so richtig sicher, ob ich hingehen soll oder nicht, und bin dann irgendwie über,

00:04:09: ja, über Online-Connections hat man sich irgendwie ausgetauscht und dann habe ich mich sehr, sehr kurz entschlossen, ich glaube drei Tage vorher, mir noch ein Ticket gekauft und bin dann spontan nach Köln gefahren,

00:04:19: und war damals dann schon Web-Designerin seit 1-2 Jahren, glaube ich,

00:04:23: und kannte aber nichts davon, dass das jetzt open-source ist und Community. Ich hätte keine Ahnung davon, ich habe irgendwie das es open-source ist und dachte eigentlich, das ist was Negatives, weil da stand jeder kann man kann am Code mitarbeiten

00:04:33: und dachte da kann dann jeder Security Issues irgendwie reinbasteln, so das ist, also, ich habe kein Verständnis davon gehabt, was open-source und Community bedeutet und wie das funktioniert,

00:04:43: bis ich dann bei dem bei dem WordCamp war und da hat mich damals Robert Windisch, ich glaube, 1-2 Stunden lang bearbeitet, dass ich es auch zum Contributer Day , das ist immer ein angegliederter Tag an die Konferenz, wo man

00:04:55: quasi in die auch open-source Community eingeführt wird, wie man mit mitarbeiten kann. Der mich da ja sehr lange bearbeitet, dass ich dahin gehen soll,

00:05:02: ich dachte immer, ach, das ist nichts für mich, ich bin ja keine Entwicklerin, ich bin ja Designerin, was soll ich da schon machen. Genau, das war so mein aller erster Kontaktpunkt mit der Community und ich fand die Menschen einfach total toll und hab sehr

00:05:13: krass Blut geleckt einfach, wie man so schön sagt, und bin dann direkt auf das WordCamp Europe in Sevilla damals gefahren nach Spanien,

00:05:19: und kurz danach war ich dann in WordCamp Utrecht in Niederlande

00:05:24: und da gabs auch ein Contributor-Day, wo ich dran teilgenommen habe, und damals waren auch mir die Teams alle noch so ein bisschen unbekannt und ich hatte auch in Köln mir leider ein falsches Team ausgesucht, das war nämlich Themes und ich dachte, es geht um Desgin, aber es ging um

00:05:35: PHP Code, was hat auch nicht meins war, und dann bin ich lieber die Workshops gegangen und da hat damals Rian Rietveld ein Workshop gemacht zum Thema

00:05:43: Was ist nicht barrierefrei in WordPress, und das war das erste Mal, dass ich über digitale Barrierefreiheit gehört habe. Über mein Studium kann ich natürlich schon die ganz physische Barrierefreiheit zum Thema Treppen und Rampen und solche Geschichten, da gibt's auch viele Richtlinien.

00:05:58: Aber digital war mir das tatsächlich komplett neu und ich war sehr überrascht davon, was es für elementare Probleme damals gab in WordPress und

00:06:07: das hat mich irgendwie sehr mitgerissen und von da an war Accessibility mein Team gewesen und habe da super, super viel gelernt und, ja, durch die Begeisterung

00:06:16: sauge, versuche ich gerade irgendwie alles aufzusaugen, immer besser zu werden und genau, das war so der Startpunkt und habe dann aber auch in Berlin angefangen, das WordPress-Meetup mitzuorganisieren,

00:06:24: Hab dann auch mehre WordCamps in Berlin mitorganisiert und

00:06:28: mach halt auch in anderen Teams Übersetzungen und durch die Accessibility ist man auch manchmal dann in Core oder Meta mit drin, das sind anderen Teams, die halt auch mit Code

00:06:35: beschäftigt sind, aber wo ich dann halt vor allem nach Accessibility-Problemen suche oder auch im Designteam, wo es hauptsächlich um Farbkontrast oder so geht, dass man da Vorschläge macht, also

00:06:45: das hat Anknüpfungspunkte zu anderen Teams, wo ich dann auch mitmache, aber Accessibility ist eigentlich schon so mein Hauptteam. Ich kannte das Thema Accessibility bis vor ein paar Jahren, glaube ich, primär aus Windows, wo dann ab und zu mal Accessibility-Tools angeboten werden, meistens mit so einer Lupe

00:06:59: als Symbol.

00:07:01: Und für mich war das lange Zeit auch primär verbunden mit Sehbehinderung, mit Blinden, aber Barrierefreiheit, verbirgt sich ja viel mehr dahinter oder? Ja genau, also es betrifft extrem viele Gruppen, 20 bis 25% aller Menschen, die das Internet benutzen, benötigen Barrierefreiheit.

00:07:16: Da fällt zum Beispiel auch Hörbehinderung oder Taubheit mit drunter,

00:07:19: das ist aber auch zum Beispiel, ganz viel im kognitiven Spektrum, zum Beispiel Legasthenie, Matheschwäche, Autismus, ADHS, Epilepsie, auch körperliche Beeinträchtigungen oder Behinderung, zum Beispiel Parkinson,

00:07:32: oder auch komplette Lähmung zum Beispiel, also es ist ein sehr, sehr umfangreiches Feld, auch zum Beispiel Farbenblindheit, also es hat zwar auch was mit Sehbehinderung zu tun, aber ich glaube, wenn wir jetze an sehbehindert denken, denken wir nicht an Farbenblindheit, was zum Beispiel 8% aller Männer betrifft.

00:07:45: Und genau, es ist ein sehr, sehr großes Spektrum und deswegen ist das auch gar nicht so simpel, weil manchmal

00:07:52: sich Bedürfnisse auch widersprechen. Zum Beispiel, wenn jemand eine Sehbehinderung hat, sind sehr starke Kontraste wichtig, damit man das noch sehen kann, weil sehr schwache Kontraste sind kaum sichtbar. Wenn aber Menschen im kognitive Spektrum sind, zum Beispiel Autismus oder auch

00:08:05: Legasthenie,

00:08:06: dann sind sehr, sehr starke Kontraste eher hinderlich, weil das einfach bisschen weh tut im Gehirn oder im Kopf hat und sehr anstrengend ist zu lesen, und da muss man immer eine Balance finden und das macht es schon manchmal ein bisschen schwierig, wenn es ums Detail geht, aber genau, es sind sehr viele Gruppen.

00:08:20: Das heißt, Barrierefreiheit bei der Web-Entwicklung, beim Webdesign mitzudenken, ist auf jeden Fall gar nicht so einfach, aber gibt's vielleicht ein paar grundsätzliche Schritte, wenn ich ein neues Webprojekt anlege,

00:08:31: die ich im Kopf haben sollte? Genau, also in Deutschland sage ich auch immer lieber Barrierearmut, weil eine komplette Barrierefreiheit für alle Menschen, würde ich jetzt mal sagen, ist so gut wie nicht möglich.

00:08:41: Deswegen sage ich lieber Barrierearmut, und bei einem Webprojekt geht man da durch verschiedene Phasen, also zuerst plant man ja ein Projekt und da ist es schon auch wichtig, dass man zum Beispiel seine Zielgruppe kennt und zum Beispiel auch da zu wissen, ist da vielleicht ein Schwerpunkt irgendwo, zum Beispiel wenn ich

00:08:54: zum Thema Legasthenie ein Projekt mache, dann sollte das natürlich darauf auch optimiert werden, oder wenn ich vielleicht ein Seniorenheim

00:09:01: mache, dann soll das vielleicht auch für ältere Menschen, also gerade Sehbeeinträchtigungen, auch körperliche Beeinträchtigung,

00:09:07: optimiert sein. Aber im generellen ich würd schon versuchen alles mitzudenken, aber vielleicht gibt's ja einen Schwerpunkt irgendwo,

00:09:12: und da ist schon auch wichtig, dass man hinter jeder Projektphase einmal die Barrierefreiheit überprüft, also zum Beispiel fängt das ja mit der Konzeption an, dass man darauf achtet, dass die Architektur der Webseite logisch aufgebaut ist, dass es leicht verständlich. Das geht ja nicht nur über die leichte Sprache sondern auch,

00:09:27: verstehe ich denn, dass auch die Menüpunkte

00:09:29: klar beschriftet sind und nicht sich hinter lyrischen Worten und Expressionen verstecken, weil das habe ich auch manchmal, gerade wenn jemand sehr kreativ ist, dass dann manchmal das einfach nicht heißt, ach wir wollen nicht Kontakt oder ein "Über mich" haben, sondern wir benutzen jetzt irgendwie ein

00:09:44: irgendein schön klingendes Wort, aber man weiß eigentlich nicht so richtig, zum Beispiel sowas wie mein Lebensweg,

00:09:49: würde man vielleicht schon verstehen, aber das nicht so eindeutig wie "Über mich". Dann geht es meistens ja an das Design

00:09:55: und da beginnt man ja mit dem Styleguide in der Regel, also mit Farbauswahl, Schriftauswahl, und da sollte man immer auf die Kontraste achten, dass die Hauptfarben,

00:10:02: mit, zum Beispiel, dunkelgrau und einem offwhite,

00:10:06: miteinander harmonieren, dass das barrierefrei ist, und wenn ich bereits bei der Auswahl der Farben darauf acht, dann habe ich später in der Umsetzung nicht das Problem, dass die Farbkontraste, zum Beispiel, nicht stimmen, weil in einer bereits realisierten Webseite die Farben zu ändern, ist doch recht

00:10:20: umfangreich und stressig, vor allem wenn man, ja, auch einen Styleguide und ein Design hat, und da dann sollte man prüfen, wenn man dann die Mockups gemacht hat und dann noch das Design,

00:10:29: sollte man das auch noch mal abklären lassen. Das klingt zwar immer super viel und aufwendig, aber wenn ich da die Schritte, also nach diesen Schritten das einfach nur mal teste, dann stellt man ja sicher, dass in der nächsten Phase es einfach weitergehen kann, am Ende sich alles zusammenfügt.

00:10:43: Und also auch beim Inhalt sollte man das prüfen und natürlich dann auch bei der Entwicklung, also das sind so diese Hauptpunkte.

00:10:49: Wobei ich jetzt natürlich auch noch mal drüber reden könnte, was man da spezifisch beachten sollte. Gerne, was sind denn so die ganz wichtigen Aspekte?

00:10:57: Und gleich würde ich vielleicht auch noch mal darauf kommen, wenn ich jetzt wirklich ein in Anführungszeichen einfacher Anwender oder Redakteur bin, der eben dann im Tagesgeschäft nachher die Inhalte einpflegt,

00:11:06: kann ich sicher auch noch das ein oder andere tun.

00:11:08: Ja, da kann man sehr viel tun, ist jetzt gerade die Frage, mit welcher Gruppe ich anfangen soll, vielleicht erst mal beim Design. Genau, also Farbkontraste, dass die Schrift natürlich gut lesbar ist, dass man auf achtet, dass vielleicht Italic, also kursiv, nicht unbedingt so viel benutzt wird. Es gibt manchmal, gerade wenn man

00:11:23: im wissenschaftlichen Bereich arbeitet, gibt es eine Art und Weise, wie man zum Beispiel Quellen und Zitate ausweist, das muss dann kursiv sein, eine bestimmte Zeichengröße, das ist dann okay, aber

00:11:33: man sollte schon versuchen jetzt nicht alles kursiv zu schreiben, weil das schwer zu lesen ist. Auch wie breit etwas ist, also man sollte nicht mehr als 900 Pixel breit eigentlich werden, was rein Textfluss

00:11:43: angeht, auch Blocksatz ist nicht so gut, weil es halt zum einen nicht responsive ist, aber gerade für Legastheniker ist sowas nicht so gut lesbar.

00:11:51: Farbkontraste und auch Farbanwendung ist eigentlich so das Hauptproblem häufig. So sehr minimalistische Designs waren sehr modern oder sind sehr modern, wo man mit sehr schwachen Farben arbeitet, zum Beispiel so pastellig und das ist dann

00:12:06: so schön ,aber wenn man das nicht gut lesen kann,

00:12:10: weil einfach der der Kontrast nicht stark genug ist, dann ist das halt auch kein gutes Design, dann ist das halt vielleicht Kunst, aber dann kein gutes Design, weil man muss ja auch bedenken, dass das ja nicht nur Menschen betrifft,die im Moment eine Behinderung haben, sondern die auch situationsbedingt

00:12:23: Probleme haben, zum Beispiel wenn

00:12:25: der Bildschirm in der knalligen Sonne steht und wir sind mit dem Smartphone unterwegs und im Sommer gerade, irgendwie am Strand oder so, dann kann man überhaupt nichts mehr lesen, wenn das alles so pastellfarbig ist, und da war aber auch, zum Beispiel, dass die Information nicht alleine über die Farbe transportiert werden sollte, zum Beispiel, dass Links

00:12:40: die sich innerhalb von Text befinden, immer unterstrichen werden sollten. Also weil da ist der Grundsatz,

00:12:45: dass die Farbe nicht alleine die Information transportieren sollte, sondern immer ein weiterer Style dazu kommt, und bei Links wäre das der Unterstrich, weil alles andere ist nicht verständlich als Link. Man würde es zwar trotzdem sehen, zum Beispiel wenn man da eine Lightbulb, also so eine

00:13:00: Glühbirne irgendwie noch davorsetzt, da würde man zum Beispiel erkennen, das ist jetzt was anderes, aber würde man jetzt verstehen, dass das ein Link ist? Wahrscheinlich nicht. Oder auch wenn ich das jetzt in bold setze, würde ich auch erkennen, aber da würde ich eher denken, es ist eine Hervorhebung, als dass es ein Link ist, also da geht's auch um Verständlichkeit, und auch

00:13:13: die,

00:13:14: also Barrierefreiheit und Usability, also die... Nutzerfreundlichkeit, Benutzerführung? Genau, Benutzerfreundlichkeit, das geht ja auch fließend über, weil alles, was gut ist für die Barrierefreiheit, ist halt auch gut für alle anderen,

00:13:25: von daher sollte man Barrierefreiheit und Usability irgendwie auch so zusammen betrachten und

00:13:29: wenn man sagt Usability, da sind irgendwie alle gleich dabei, und bei Barrierefrei, das ist immer noch so ein bisschen stiefmütterlich. Genau, das sind so die Design-Themen, auch natürlich, dass die Schrift groß genug ist,

00:13:39: dass auch die Zeilenabstände groß genug sind, dass es genug Weißraum gibt, dass zum Beispiel mein Auge sich auch mal ausruhen kann, wenn ich etwas lese, dass man nicht so erschlagen wird. Das wirk auch gleich viel aufgeräumter und viel verständlicher.

00:13:50: Flat Design, also wo es keine Schatten gibt und alles sehr flach ist und sehr harte Kanten, kann manchmal schwierig sein, zu verstehen, wo zum Beispiel klickbare Elemente sind,

00:14:00: oder sich Dinge abgrenzen. Da sind manchmal so ganz leichte Rundungen auch hilfreich, also da kann man schon mit vielen Tweaks quasi was machen.

00:14:08: Das sind jetzt vom Prinzip ja alles Aspekte, die gelten generell für das Webdesign, für gutes Webdesign.

00:14:13: Hilft WordPress mir als Entwickler denn dabei, bessere Webseiten zu bauen, barrierefrei oder barrierearme Webseiten zu bauen? Also wenn wir über Designs reden, dann kommt das ja über Themes, und da kommt das natürlich dann auf die Theme-Entwicklung drauf an, wie die gemacht wurde, oder auch das Design,

00:14:28: also das kann also es kann WordPress ja nicht gewährleisten, was dich Themes machen.

00:14:33: Aber werde ich als Nutzer von WordPress unterstützt und wie sieht's denn aus mit den Themes, haben Entwickler, die heute an WordPress programmieren oder die eben neue Themes entwickeln,

00:14:44: haben die das Thema Barrierefreiheit in der Regel schon im Hinterkopf?

00:14:48: Also ich würde sagen vielleicht so, also dass so 10 bis 20% der Theme-Entwickler das Thema auf dem Schirm haben,

00:14:55: wenn es hoch kommt. Also, wenn ich Themes auswähle, ich habe ganz oft das Problem, dass ich Themes für Projekte nicht benutzen kann, weil sie nicht barrierefrei sind.

00:15:02: Wobei ich da für mich immer ein bisschen unterscheide, sind das Dinge, die im Code verankert sind, oder ist das ein Design Thema, weil

00:15:09: Farbkontraste, das kann man immer einstellen, also da kann mir ein Theme, also klar, wenn irgendwie die Muster,

00:15:15: Templates oder die man vielleicht auch importieren kann und falls es sowas gibt, wenn da die Farbkontraste bereits ausreichend sind,

00:15:21: ist das vielleicht gut, wenn ich es da nicht anpasse, aber Farben kann man in der Regel immer anpassen, auch Schriftarten kann man meistens auswählen.

00:15:28: Das hängt dann so ein bisschen auch von mir ab, was ich dann einstelle, ob Links unterstrichen sind oder nicht, ist auch manchmal eine Einstellungsfrage im Customizer. Also, manche bieten das an, dass man das

00:15:38: sagt, dass im Content die Links unterstrichen werden sollen oder nicht.

00:15:42: Häufig ist leider der Default, also das was vorausgewählt ist, dass sie nicht unterstrichen sind, das ist dann halt auch nicht so barrierefrei.

00:15:48: Also das Design selber, manchmal kann man ja auch, zum Beispiel, die Breite des Textes selber einstellen. Also alles, was ich selber einstellen kann, da ist vielleicht die Frage, was ist die Voreinstellungen oder was wird mir als

00:15:57: Muster angezeigt und kann ich das ändern, aber wenn man das ja ändern kann,

00:16:01: finde ich, das ein bisschen, also da muss man das dann schon so ein bisschen selber wissen und drauf achten. Bei Themes finde ich das immer spannender,

00:16:08: was technisch verbaut ist, weil man das nicht unbedingt immer ändern kann, beziehungsweise nicht so ändern kann, dass es update-sicher ist,

00:16:15: da geht es zum Beispiel los mit dem Fokus Style. Also, der Fokus Style ist etwas, wenn ich mit der Tastatur durch eine

00:16:21: Webseite navigiere, dass ich sehe, wo ich bin. Diesen Focus Style gibt es ganz automatisch auf jeder Webseite, genauso so wie zum Beispiel Links automatisch blau unterstrichen sind, wenn man es nicht ändert. Das ist das, was

00:16:32: der Web-Standard quasi ist. Leider ist es so, dass viele Themes diesen Focus Style deaktivieren, dass sie irgendwie eine Non oder eine Null reinsetzen.

00:16:41: Das heißt, ich sehe nicht mehr wo ich bin,

00:16:43: und das ist natürlich ein Riesenproblem, also das sind zwar Styles, die ich dann wieder anpassen kann, das muss man aber wissen, und viele wissen das natürlich nicht. Also, das ist für mich immer so ein KO-Kriterium, ob ich sehe wo ich bin,

00:16:54: Auch ob ich die Navigation, zum Beispeil das Hauptmenü, ob ich das über die Tastatur überhaupt bedienen kann. Also komme ich zum Beispiel auch in die Untermenüpunkte, da sind auch einige Themes dann meistens schon raus, dass das nicht funktioniert, weils

00:17:05: ein Java Script-Menü ist und die sich anders verhalten als ein HTML Menü, also eine Liste. Dann geht es um die Landmarks, das ist

00:17:12: etwas, was in HTML5 eingeführt wurde, dass man Landmarks oder Regions definieren kann. Zum Beispiel, früher hat man gesagt für den Header-Bereich, dass es jetzt ein Diff, und das, wo du dann als Klasse definiert hast, das ist der Header. Mittlerweile gibt es einen eigenen

00:17:26: HTML-Tag dafür, also jetzt wird's ein bisschen technisch, aber gibt's einen eigenen HTML-Tag dafür, den man dann definieren kann, genauso für Main- und Sidebar und Footer oder auch für Zusatzinformation, also quasi alles, was so Sidebar-

00:17:39: Inhalte quasi sind, und die sind sehr, sehr nützlich, gerade für Screen Reader-User, also jemannd der blind ist, der sich das vorlesen lässt und darüber navigiert, da kann man auch navigieren mit

00:17:48: "gehe in das Main rein". Das sind Dinge, die kann ich nur bedingt anpassen, weil ich ja dann in die ganzen Template-Dateien rein müsste, um sie zu ändern, was dann aber wieder bei einem Update schwierig ist, wenn ich da meine ganzen eigenen Templates im Chart Theme habe,

00:18:00: also das sind durchaus Dinge, die ich immer drauf achte, wenn ich ein Theme auswähle, ob Landmarks gesetzt und ob der Fokus Style funktioniert,

00:18:07: ob der Jump-to-Content, also Jump-to-Main quasi vor dem Hauptmenü sitzt und ob ich das Hauptmenü bedienen kann. Wenn die Punkte beachtet sind,

00:18:16: dann ist das vielleicht nicht ein vollständiger Test, aber dann weiß ich schon mal, okay, hier wurde schon mal zumindest einiges richtig gemacht und die Wahrscheinlichkeit, dass der Rest in Ordnung ist, ist etwas höher. Ach so, und ich achte immer drauf, dass der Weiterlesen-Link

00:18:27: in WordPress, dass die Screen Reader-Klasse ausliest, wie der Titel des Beitrages ist, weil auch ein Problem ist, wenn ich

00:18:34: in der Archive-Seite bin, also quasi auf der Blogseite, wo alle Beiträge aufgelistet werden, kann ich mir da auch alle Links, ich kann mir auch alle Überschriften anzeigen lassen und ich kann mir alle Links anzeigen lassen, und wenn ich diese Linkliste sehe und es wäre nicht implementiert, dann würde ich ja nur hören

00:18:48: "weiterlesen", "weiterlesen", "weiterlesen", "weiterlesen", und ich habe gar keine Ahnung, wohin das überhaupt geht, und deswegen ist es wichtig, dass ich dann höre weiterlesen und dann der Name des Beitrags.

00:18:58: Wir haben jetzt darüber geredet, wie man das Design barrierearmer machen kann, aber ich kann ja auch bei den Inhalten ansetzen. Was sind da so die wichtigsten Tipps, die ich beachten sollte?

00:19:07: Also, da gibt es eigentlich sehr, sehr viele Tipps, wir fangen aber im Text an. Zum einen sollte man diesen mit Zwischenüberschrift und generell mit Überschriften gliedern, damit man das auch besser scannen kann, weil wir wissen es alle, die Aufmerksamkeitsspanne im Internet ist jetzt nicht so groß,

00:19:20: und wenn ich zwischen Überschrift und auch eine klare Überschrift habe, die auch wirklich eindeutig sagt, was jetzt kommt

00:19:26: im Text, hilft das sehr, um diesen Text zu strukturieren und zu überfliegen, und ihn einfach besser zu verstehen. Generell, Weißraum, also auch Absätze machen, also nicht

00:19:35: ganzen Text flüssig runterschreiben, sondern ruhig auch mal Absätze machen, vielleicht auch mal mit Listen oder mit einem Zitat arbeiten, wo das Auge vielleicht auch mal

00:19:43: besser drauf hängenbleiben kann. Generell auch kurze Sätze, also nicht irgendwie Thomas Mann-Style, der über drei Seiten einen Satz hat mit 1000 Nebensätzen, sondern

00:19:53: quasi eine wichtige Information pro Satz. Es gibt auch manchmal so von SEO Empfehlungen, wie lange ein Text sein sollte. Ich sage immer, der Text sollte so lang wie nötig und so wenig wie möglich sein, weil ich muss das ja als User immer noch lesen und ich benutze zum Beispiel

00:20:07: im Firefox gibt es so einen Reader Mode, wo darüber angezeigt wird, wie lang ist

00:20:11: dieser Text und wenn das irgendwas Richtung 15-20 Minuten geht, dann überlege ich mir auch immer, ok will ich jetzt diese Zeit investieren, diesen Artikel jetzt zu lesen, oder möchte ich vielleicht lieber 5 Minuten nur investieren, deswegen

00:20:23: kurze Sätze und kurze Texte, wenn möglich immer gerne. Wenn es sehr, sehr umfangreich ist, kann man das ja auf mehrere Beiträge

00:20:30: zum Beispiel aufteilen und untereinander verlinken, aber generell würde ich schon sagen,

00:20:34: in der Kürze liegt die Würze, zum Beispiel, dass man auch bei Linktexten sehr eindeutig ist, worum es da geht, also dass man zum Beispiel nicht schreibt "klicke hier",

00:20:42: weil da habe ich ja wieder das Problem, wenn ich mir die Links auflisten lasse als Screen Reader, dass ich das nicht nicht weiß, worum geht es hier.

00:20:49: Aber auch Links stechen sehr hervor, wenn man einen Text scannt, und ich als Leser und als sehender Mensch gucke ja auch darauf, was sind denn hier für weiterführende Links, und wenn dann steht aber nur "klicke hier", da müsste ich ja den gesamten Text, teilweise den ganzen Abschnitt lesen,

00:21:02: wohin dieser Link jetzt führt, wenn das irgendwie ungünstig formuliert ist, und deswegen ist das immer besser, zum Beispiel, dann zu schreiben, also anstatt "Um uns zu kontaktieren klicken Sie hier.",

00:21:12: und dann ist das "hier" verlinkt, was hat auch noch ein relativ kleiner klickbarer Bereich ist, was jetzt auch nicht so optimal ist. Viel besser wäre

00:21:18: "zu unserem Kontaktformular" und dann ist das Kontaktformular, zum Beispiel, verlinkt oder "rufen Sie uns an" und dann ist das verlinkt, und dann kann ich ja hören zum Kontaktformular und dann weiß ich, worum es konkret geht, das sind so, finde ich, die wichtigsten Punkte

00:21:30: Man kann aber auch ganz viel Barrierefreiheit erreichen, indem man Formate kombiniert.

00:21:34: Dass ich zum Beispiel nicht nur einen Text habe, der durchaus gleich mal am barrierefreisten ist, irgendwie, weil man sich den ja vorlesen lassen kann, das ist für Blinde auch gut wahrnehmbar,

00:21:42: oder wenn man taub ist, da kann man ja auch den Text wahrnehmen, aber gerade komplizierte Sachverhalte kann man über eine Grafik, zum Beispiel, sehr gut aufwerten oder auch über ein Video, wobei jetzt zum Beispiel die Grafik alleine nicht so barrierefrei wäre, weil das natürlich, wenn jemand nicht sehen kann, eine Grafik ja auch nicht versteht, aber wenn man sagt,

00:21:57: die Grafik ist quasi

00:21:58: etwas zusätzliches zum Text und im Text ist die Grafik erklärt, da kann ich das ja im alternativen Text auch erwähnen, dass das jetzt erklärt wird. Und auch generell alternative Texte, super wichtig, dass man die immer

00:22:10: mit reinnimmt, also auch die ganzen Social-Media-Plattformen, zum Beispiel Instagram, Twitter und auch Facebook, haben die Möglichkeit, einen Beschreibungstext oder einen alternativen Text rein zu schreiben, was ich immer empfehlen würde, weil das die Barrierefreiheit

00:22:23: auch ausmacht. Es gibt da leider aus meiner Sicht ein kleines Missverständnis manchmal mit sogenannten dekorativen Bildern, denn es gibt die,

00:22:33: es gibt quasi die Aussage, wenn das Bild relevant ist für den Inhalt, dann mach einen alternativen Text, wenn das Bild rein dekorativ ist,

00:22:39: dann setze einen leeren alternativen Text auf kann man im Block Editor machen, indem man den Alt Text frei lässt. Das bedeutet, dass dieses Bild unsichtbar wird für Menschen die einen Screen Reader verwenden, also die kriegen gar nicht mit, dass da ein Bild ist. Wenn man

00:22:52: früher da nichts gesetzt hat, dann wurde der Dateinamen, zum Beispiel, vorgelesen, was dann halt auch ungünstig ist.

00:22:57: Der Begriff dekoratives Bild ist aber eigentlich aus einer Zeit, wo mit Bildern damals noch Layouts gestaltet wurden,

00:23:03: also mittlerweile gibt es ja den HTML-Tag HR, dass ist zum Beispiel eine Linie oder eine Trennung, manchmal macht man das aber auch mit PNG-Bildern zum Beispiel, dass man

00:23:12: Symbole oder grafische Elemente in das Layout reinnimmt. Für diese Dinge oder auch für Hintergrundbilder kann man den alternativen Text

00:23:19: quasi leer setzen, also ein leeren alternativen Text reinsetzen, aber halt nicht für Bilder, die eigentlich in den Inhalt gehören,

00:23:25: weil eigentlich sind ja Bilder immer dekorativ, dann könnte man hald argumentieren, ist ja nur dekorativ, brauche ich kein alternativen Text, aber es gibt einen Grund, warum ich da ein Bild reinsetze, und ich würde schon sagen,

00:23:34: lieber einen alternativen Text zu viel setzen als zu wenig.

00:23:38: Und Alt Texte generell, da könnte man ewig drüber reden, was da wichtig ist, aber auch da gilt eigentlich, sich kurz fassen und sich quasi vorstellen, ich erkläre dieses Bild jetzt jemanden am Telefon in 2-3 Sätzen.

00:23:48: Und du hast eben das Stichwort SEO genannt, so ein bisschen negativ behaftet, ich glaube aber, wenn ich deine Tipps so anhöre, die du genannt hast,

00:23:55: wenn man die beherzigt, dann wird man vermutlich bei Google und Co sogar deutlich besser ranken als mit den langen Thomas Mann-Texten.

00:24:02: Genau, also SEO, also Google ist ja quasi der größte Blinde im Internet, es soll jetzt gar nicht so negativ rüberkommen, ich glaube es klingt nur manchmal so ein bisschen mit,

00:24:10: weil wenn man zum Beispiel sagt, das ist aber wichtig, zum Beispeil der Slider, das ist jetzt nicht so gut für die Barrierefreiheit, dann kommt manchmal die Argumentation,

00:24:17: ja, das ist ja nicht so wichtig, so, ist es ja nur so eine kleine Randgruppe. Wenn man dann aber sagt, es ist aber auch nicht gut für SEO, ooh ja nee, dann nimm es bitte raus. Also, ich finde noch immer, dass die Wahrnehmung, ob jetzt Barrierefreiheit oder SEO wichtig ist,

00:24:28: SEO wird immer noch als wichtiger wahrgenommen, obwohl eigentlich alles, was man für Barrierefreiheit macht, auch sehr gut ist für SEO.

00:24:35: Viele Sachen auf die man achten muss und das sind jetzt aber fast alles Elemente, glaube ich, aus dem sogenannten Frontend von WordPress, also das, was der Endnutzer nachher draußen

00:24:42: auf einer Webseite zu sehen bekommt, über die wir geredet haben. Aber WordPress besteht ja auch aus dem Backend, also da wo ich dann als Administrator oder Redakteur nachher meine Inhalte eintrage. Auch da sollte ich wahrscheinlich auf Barrierefreiheit achten.

00:24:53: Genau, also da sollte man auf die Barrierefreiheit achten, wenn es Menschen gibt, die an einer WordPress-Seite mitarbeiten, die eine Barrierefreiheit benötigen. In der Regel ist das Dashboard ziemlich barrierefrei, zum Beispiel die ganze Suchfilterung, die Navigation,

00:25:06: Farbkontraste, da wurde sehr darauf geachtet, dass das barrierefrei ist. Ein großes Manko ist natürlich so ein bisschen der Gutenberg Editor,

00:25:12: der im Frontend, wenn es um die Core-Blöcke geht, also das, was mit WordPress mitkommt von den Blöcken, barrierefrei ist, was aber im Back-End, also da, wo ich die Inhalte erstelle, nicht barrierefrei ist zum Teil.

00:25:22: Ich weiß jetzt gerade den aktuellen Stand nicht, ich habe mich damit jetzt seit 2-3 Jahren nicht so beschäftigt, es kann sein, dass sich da Dinge geändert haben,

00:25:30: wobei ich es ein bisschen bezweifle um ehrlich zu sein, also zumindest als das entwickelt wurde und auch als das dann als Plugin rauskam und in den Core reinkam, war es im Backend nicht barrierefrei, was eigentlich ein Riesenproblem ist für komplett

00:25:42: den europäischen Bereich, denn wir haben eine Richtlinien in Europa,

00:25:46: dass alle öffentlichen Stellen barrierefrei sein müssen, auch für Deutschland gilt das mit der BITV und

00:25:54: das heißt eigentlich dürften alle öffentlichen Stellen WordPress nicht verwenden, weil es im Backend nicht komplett barrierefrei ist, wenn der Gutenberg

00:26:01: Editor drin ist, wobei ich aber auch sagen muss, dass die ganzen Layout-Builder, die ganzen Page-Builder ebenfalls nicht barrierefrei sind, weder im Frontend noch im Backend, also das muss man auch mal dazu sagen, aber der Classic Editor, der war im Backend auf jeden Fall barrierefrei, auch im Frontend, wenn man

00:26:14: inhaltlich und so da nicht irgendwas falsch gemacht hat.

00:26:17: Die erste WordPress-Version ist 2003 veröffentlicht worden als Beta. Jetzt sind wir 19 Jahre später bei WordPress 6. Was ich so höre,

00:26:26: ist aber trotzdem noch Luft nach oben was das Thema Barrierearmut angeht? Da ist sehr, sehr viel Luft, also generell in allen Bereichen wo man über Barrierefreiheit redet, ist immer Luft nach oben. Wir sind da noch lange nicht am Ziel, was man eigentlich alles machen könnte.

00:26:39: Ja also, ich meine, immerhin ist es schon soweit, dass das Frontend, wenn man jetzt zum Beispiel ein Standard Theme verwendet und einfach WordPress an sich und die Core Blocks, dass man da barrierefrei ist

00:26:49: von dem Output, wenn man

00:26:50: im Inhalt das richtig macht, da kann man schon mal barrierefrei sein. Die Frage ist hald trotzdem mit dem Backend, also kann ich zum Beispiel als große Agentur, wo ich auch inklusiv sein möchte,

00:26:59: kann ich überhaupt Tools und Software verwenden, die dann halt nicht für alle barrierefrei sind. Also das aber generell leider auch ein Problem, weil das für sehr, sehr viele

00:27:06: Software und sehr viele Produkte leider gilt. Ich finde aber, dass wir da als WordPress-Communuity eigentlich Vorreiter auch sein sollten und dafür sorgen sollten, dass das auch im Back-End

00:27:13: barrierefrei ist. Leider ist halt die Architektur vom Block Editor nicht so simpel, dass man es mal eben ändern könnte. Es ist halt leider auch manchmal so eine,

00:27:24: also, vielleicht ein Verständnisproblem oder so eine falsche Annahme, dass man ja einfach nur Dinge umändern müsste, dann funktioniert das schon. Aber wir haben ja auch das Ziel, dass wir

00:27:32: backwards compatible sind, das heißt, wenn wir updaten, dass Dinge nicht einfach kaputt gehen. Das ist ja gerade in WordPress auch ein großes Thema, damit man halt auch relativ sicher updaten kann, deswegen kann man sowas auch nicht einfach eben umschreiben, nachdem es veröffentlicht wurde.

00:27:44: Und ja, das ist leider ein sehr großes Problem.

00:27:48: Um ein bisschen mehr Aufmerksamkeit für das Thema zu generieren, findet ja unter anderem am 2. und 3. November der internationale WordPress Accessibility Day

00:27:56: als virtuelle Veranstaltung statt, kannst ein bisschen was zu der Idee dahinter sagen und was da passiert?

00:28:00: Genau, ich glaube das findet jetzt zum zweiten oder dritten Mal statt, ich bin mir gerade nicht ganz sicher, und das ist ein bisschen wie das auch mit dem Polyglots Day stattfindet, dass es 24 Stunden lang, glaube ich, einen Stream gibt mit Vorträgen,

00:28:13: meistens auf Englisch, ich glaube vielleicht auch noch in anderen Sprachen,

00:28:16: wo es um das Thema Barrierefreiheit geht, wie man Barrierefreiheit im Web umsetzt, wie man das testet, einfach generell Thema Accessibility.

00:28:24: Das kann man sich online und kostenlos live angucken, da gibt es glaube ich einen YouTube Kanal wahrscheinlich dann für, auch eine Webseite, wo auch die ganzen Speaker und Vorträge und so vorgestellt werden.

00:28:34: Und ich glaube, du bist aber auch mit einem eigenen Programmpunkt mit rund um diesen Tag dabei? Genau ich habe mich mit Ralf Wiechers zusammengetan, der einen Co-Working in der Schlei hat, das liegt im Norden Nähe Ostsee, schön auf dem Land, sehr schön, sehr idyllisch.

00:28:46: Und da machen wir ein Workshop-Programm von drei Tagen Workshop, wo ich zum einen, quasi am Vormittag

00:28:54: theoretisches Wissen, einfach Wissensvermittlung mache komplett zum Thema Barrierefreiheit, und am Nachmittag kann man dann selber an seiner Webseite

00:29:01: basteln oder auch testen, also das, was man dann gelernt hat am Vormittag, kann man dann umsetzen und Fragen stellen, ich werde den ganzen Tag quasi da sein. Das geht dann drei Tage lang, von, ich glaube, dienstags Anreise,

00:29:13: Mittwoch, Donnerstag, Freitag Programm, Samstag ist dann noch ein freiwilliges Co-Working, Sonntag ist dann die Abreise und, genau, das bieten wir an. Wir sind auch fleißig in der Vorbereitung

00:29:22: von dem Programm und genau.

00:29:25: Die Links dazu, genauso wie den Link zum Accessibility Day selbst, packen wir auf jeden Fall in die Shownotes. Wenn sich unsere Zuhörerinnen und Zuhörer jetzt noch ein bisschen tiefer in das Thema Barrierefreiheit und Barrierefreiheit rundum WordPress rein arbeiten wollen,

00:29:38: was wären jetzt so die wichtigsten Quellen, wo du sie hinschicken würdest?

00:29:41: Okay, also wenn das jetzt spezifisch für WordPress und Barrierefreiheit geht, wenn das Theme-Entwickler/innen sind, würde ich auf das Developer Handbook für Theme-Entwicklung verweisen, da gibt es einen eigenen Abschnitt für Accessibility.

00:29:54: Wenn es allgemein um Accessibility geht, vielleicht auch mit Thema WordPress, da gibt es bei dem Contributer-Team Accessibility gibt es ein Handbook

00:30:02: und da stehen so die Grundsätze drin, da sind sehr viele Verlinkungen, das meist natürlich auf Englisch.

00:30:08: Wenn es allgemein um Barrierefreiheit geht, ist es manchmal bisschen schwierig, weil es gibt ja zum Beispiel die offizielle Richtlinien.

00:30:16: Die durchzulesen ist alles andere als barrierefrei, das ist sehr technisch, es ist ein bisschen kryptisch, weil es natürlich auch nicht nur

00:30:22: um Webseiten gehst, sondern zum Beispiel auch um Apps oder zum Beispiel Bankautomaten oder andere Anwendungen, deswegen ist das manchmal ein bisschen,

00:30:29: ja, ein bisschen schwierig, es ist so Richtlinien, es sind so Rechtstexte, die technisch sind, es nicht immer so ganz verständlich. Ich finde aber wirklich gute Ressourcen

00:30:38: hat, zum Beispiel, von, in England ist das Thema Barrierefreiheit ein bisschen größer und ein bisschen weitergedacht bereits als bei uns in Deutschland, und es gibt eine Webseite government.uk,

00:30:47: und die haben ein eigenes Team

00:30:48: zum Thema Web Accessibility und die haben einen Blog und da gibt es wirklich sehr gute Artikel, ganz viele Ressourcen und da gibt es unter anderem, das nennt sich Accessibility Poster,

00:30:58: das sind so Zusammenfassungen, auch graphisch hinterlegt, was zum Thema Barrierefreiheit für verschiedene

00:31:04: Nutzergruppen wichtig ist. Das liegt auf Github, gibt es sogar auch auf Deutsch, kann man sich auch ausdrucken, an die Wand hängen, bei mir hängt das auch an der Wand. Das kann ich sehr empfehlen, also einfach googlen "government UK Accessibility Blog Accessibility Poster",

00:31:17: dann findet man einen Artikel, da gibt es einen Link für GitHub und da gibt es die Sprache Deutsch.

00:31:23: Sehr viele Informationen und gut, dass wir die Quellen haben, packen wir alle in die Shownotes. Wie gesagt, ist ein sehr komplexes Thema, dass heißt ich nehme an, die Community, die sich damit befasst, die ist auch gar nicht so riesengroß.

00:31:33: Nee, die ist leider relativ klein, wäre schön wenn sie größer wäre, wir sind auch immer offen für neue Leute. Genau, es ist ne also weltweit ist es schon eine größere Community, Deutschland

00:31:43: noch nicht ganz so groß, und auch WordPress, also es wird schon größer, aber es ist immer noch relativ, also, ich meine die meisten wollen hald bei Core oder so mitmachen und nicht unbedingt Accessibility, aber

00:31:53: wir sind auch cool, also zu uns kann man auch kommen, genau. Den Eindruck habe ich auch. Wo trifft sich denn diese Community im Netz, gibt's da den einen großen Ort?

00:32:02: Es gibt tatsächlich einen großen Ort, der nennt sich E11y-Club, das ist ein Slack Channel, den kann ich auch gerne verlinken, und dann kann man auch

00:32:09: mit rein. Das ist die internationale Accessibility Community unabhängig von WordPress, also es gibt auch einen WordPress Channel, vieles, was da besprochen wird, ist natürlich auch für WordPress relevant, aber es ist jetzt nicht so WordPress-spezifisch, und in Berlin ist das so, dass es ein

00:32:23: Wordpress, nein nicht WordPress, einen Accessibility Meetup in Berlin gab, was jetzt nicht WordPress-spezifisch ist, sondern Web Accessibility.

00:32:30: Das hat eine Weile online auch stattgefunden als Corona losging, hat jetzt eine relativ lange Pause gemacht und da sind wir jetzt auch gerade dabei, das wieder aufleben zu lassen, ich hoffe im Oktober, aber das steht noch nicht so ganz fest. Das wird online sein und da auf meetup.com eine Gruppe, wo man

00:32:45: beitreten kann und da geht's auch allgemein um Barrierefreiheit und es gibt auch hie und da einen

00:32:51: Konferenztag zum Thema Web Accessibility, zum Beispiel wenn Beyond Tellerrand stattfindet, gibt es auch häufiger Accessibility-

00:32:59: Konferenzen daneben, quasi als Side-Event, und, genau, da gibt's schon noch einiges, aber das findet man auch im Slack Channel, wenn man da drin ist.

00:33:06: Freut mich, vielen Dank für das Gespräch, vielen Dank für die vielen interessanten Informationen. Wie immer packen alle Links, und in dieser Folge sind es einige, in unsere Shownotes.

00:33:14: Wenn Sie Fragen oder Anregungen haben, erreichen Sie uns unter podcast@ionos.com, und wenn Sie unseren Podcast noch nicht abonniert haben, sollten Sie das natürlich schleunigst nachholen

00:33:21: direkt in Ihrer Podcast App, unter inside.ionos.de und natürlich auf allen gängigen Podcast-Plattformen. Vielen Dank fürs Zuhören und hoffentlich bis bald.

00:33:29: Music.