 Ja, willkommen nach dem Mittagessen zum, zum zweiten Bereich quasi, das, ja, das Slots. Mein Thema ist, wie Gutenberg dich zum Eli Superhelden macht, passend zu dem Thema von dem WorldCamp. Gutenberg, also erst mal über mich vielleicht, ich bin Maja Wenke, ich komme aus Berlin und bin Webdesignerin und Bloggerin und contributee zu WordPress in den Teams Design and Accessibility. Ich bin so ein bisschen so die Brücke, also vor allem Accessibility Design ist mein Hauptbereich und bin auch im Community Team aktiv. Und falls ihr was Twittern wollt, ihr könnt mich über den Händel at BP161 erreichen. Gutenberg ist ein neuer Editor, ein neuer Standard-Editor, der mit WordPress 5.0 eingeführt wird. Dies wird vermutlich dieses Jahr noch passieren. Ich vermute mal, dass das im Dezember auf dem WorldCamp US angekündigt werden könnte. Es gibt innerhalb von Gutenberg ein paar Accessibility-Tools, die da eingebaut wurden, die dazu helfen sollen, Menschen, die damit Content erstellen, ihren Content selbst barrierefrei zu machen. Und auf diese Tools und diese Besonderheiten möchte ich kurz eingehen. Erst mal der Punkt, was ist barrierefrei im Internet, was bedeutet das Ganze? Und es ist vor allem, dass Inhalte und Funktionen auf Webseiten einfach für jeden User zugänglich und nutzbar sind. Und zwar ohne Einschränkungen, also die der User selber haben könnte. Diese Einschränkungen können sich bekoognitiv oder auch körperliche Einschränkungen sein. Zum Beispiel, wenn ich Legasthenie hab oder wenn ich blind bin, wenn ich nicht gut hören kann oder wenn ich meine Maus nicht benutzen kann, wenn ich solche Parkinson hab und so weiter, also jede Art von Einschränkungen, die ich als User haben könnte. Und dazu wird auch unterschieden zwischen temporären Einschränkungen und permanenten Einschränkungen. Eine temporäre Einschränkung könnte zum Beispiel sein, wenn ich mir den Arm gebrochen hab und ich kann sie ja immer nicht verwenden oder wenn ich ein Baby halte und nur eine Hand hab, um irgendwas zu bedienen. Oder auch wenn ich mein Smartphone am Strand benutze, wo einfach sehr viel Sonne ist und ich einfach den Bildschirm nicht so gut sehen kann. Und Accessibility ist der englische Begriff für barrierefreiheit und wird häufig mit Ali abgekürzt. Das ist deswegen, weil zwischen dem A und dem Y 11 Buchstaben stehen. Und deswegen wird eine 11 reingesetzt und nur A und Y am Ende genannt und gesprochen wird es Ali. Vielleicht, dass es auch ein Hashtag der Vier verwendet wird und es gibt aber häufig auch eine Verwirrung, was dieser Begriff überhaupt bedeutet und woher er kommt. Eine große Problematik bei Webseiten im Sinne von Barrierefreiheit ist, dass eine falsche Semantik verwendet wird. Eine Semantik ist, dass ich die Überschriften Hierarchien richtig einsetze. Dazu gehört zum Beispiel, dass ich nur eine einzige H1 auf jeder Webseite, also auf jeder Page habe die ich ja als einzelne Seite oder als auf einem Beitrag habe. Und danach muss ich mir in der richtigen Semantik einfach weitergehen. Also ich habe eine H2, ich kann mehrere H2 noch haben und wenn ich eine H3 habe, sollte das inhaltlich auch zu der H2 gehören. Und da ist ein großes Problem, was ganz viele machen, dass die Überschriften Hierarchie nicht genommen wird, um inhaltlich eine Struktur zu geben, sondern einfach nur nach dem Design gesetzt wird. Zum Beispiel, weil sie einfach gerade von der Größe optisch gut passt. Und es ist ein riesiges Problem, vor allem für alle Screenreader-User, aber auch für SEO, weil sich die Screenreader-User sagen können, ließ mir mal die H1 Form zu wissen, worum geht es auf dieser Webseite. Und dann können sie sagen, okay, das interessiert mich, ließ mir doch mal die H2 vor, aber ich will wissen, was Unterpunkte sind. Wenn es keine H2 gibt, dann hören sie auf. Und sie kommen nicht darauf zu fragen, es gibt vielleicht auch eine H3. Es ist einfach wie so eine Art Blocker. Und deswegen sollte man auf jeden Fall auf diese Semantik achten. Und da hat Gutenberg ein ziemlich gutes Tool eingebaut. Ich hoffe, das geht an. Ich habe ein kleines Gift gemacht. Und zwar gibt es hier ein kleines I. Da kann man drauf klicken. Und kann hier, so hier ist das I. Und kann ein Ziel sehen, wie die Überschriften Hierarchien sind. Und wenn ich da einen Fehler drin habe, der wird mir das rot markiert. Also der Standard, also diese Demo-Version hat sich bei H2 drin. Wenn ich das jetzt als H3 ändere und jetzt raufgucke, habe ich hier, na, da war es gerade, wird mir rot markiert. Ist das eine Frage? Genau, also ihr seht das vielleicht nochmal, das I, was ich anklicken kann. Hier wird es mir jetzt angezeigt, wie die Überschriften Hierarchien sind. Und wenn ich jetzt hier das Endere nach H3 und mir das nochmal anschauen, wird es mir hier rot markiert. Und es steht auch falsche Überschriftzeile. Das heißt, es ist einfach ein richtig gutes Tool, wo ich einen guten Überblick haben kann, habe ich die vernünftige Struktur der Semantik mit eingebaut. Also ich liebe dieses Tool. Es ist der Hammer, weil ich hoffe sehr, dass sich das jetzt verbessern wird, dass zukünftige Beiträge und Seiten, die geschrieben werden, endlich diese Semantik mal einen Griff kriegen. So ein nächstes Problem ist ein schlechter Farbkontrast. Ganz häufig kann man Sachen nicht erkennen, weil sie einfach viel zu hell sind. Und es gibt leider auch einen Trend, dass vor allem Schriften immer dünner und immer heller werden, weil sie einfach minimalistisch sind und schön aussehen. Und stylisch sind. Das Problem ist, man kann das gar nicht schlecht lesen, vor allem, wenn man eine visuelle Einschränkung hat oder auch, wenn man Farben blind ist. Das habe ich gerade gesagt. Und es gibt auch die Problematik, wenn man mit dem Bildschirm im hellen Sonnenlicht ist, wenn ich das nicht fähm mit meinem Wima oder auch im Büro, habe ich vielleicht nur sehr helle Vorhänge oder gar keine Vorhänge, dass ich das kaum noch sehen kann. Und dafür gibt es auch ein Tool. Und zwar kann ich bei dem Block für Text, also für normalen Fleece Text und auch bei Buttons, kann ich die Farben verändern. Und zwar kann ich sagen, wie ist die Schriftfarbe selber, aber auch, wie ist die Hintergrundfarbe. Da hatten wir natürlich überlegt, das könnte ein bisschen problematisch werden, wenn Menschen, die jetzt keine Designer sind und auskennen damit, dass da Farbkombinationen gewählt sind, die gar nicht schwer zu lesen sind. Und aus diesem Grund gibt es einen Checker, ich kann es mal anmachen, dass ich jetzt hier Farben wählen kann. Und wenn ich jetzt eine Farbkombination habe, wie jetzt in dem Fall, wo ich es nicht sehen kann, kriege ich hier unten eine Meldung. Also es ist jetzt hier, dass diese Farbkombination nicht funktioniert. Ich könnte das trotzdem abspeichern, zumindest habe ich ein Indikator dafür, ob es funktioniert oder nicht. Und das Schöne ist, dass auch die Schriftgröße mitbeachtet wird. Weil je größer die Schrift selbst ist, desto heller kann ein Farbkontrast sein. Wenn ich aber kleiner werde mit der Schrift, desto stärker muss ich darauf achten, dass der Farbkontrast stark genug ist. Und das geht ebenfalls in die Berechnung bei diesem Farbkontrast Checker um Siebmanns. Okay, sehr gut. Ich kann es ja nochmal abspielen. Soll ich es nochmal abspielen und jetzt die Vorführung. Sie jetzt jetzt anklicken. Hier wähle ich eine Farbe aus. Und hier habe ich jetzt den Indikator dafür. Und kann man damit auch abspielen. Ich finde es super, dass es eingebaut wurde. Weil so hat man immer noch die Freiheit, dass Leute sich selber ihre Farben wählen können. Aber dass wir sicher gehen können, dass der Content, der damit auch erstellt wird, barrierefrei ist und nicht total schwierige Farbkombinationen kommen, wie zum Beispiel Blau und Rot, was man dann ganz schwer nur sehen könnte. Ein weiteres Problem ist die nicht korrekte Nutzung vom Alttext. Der Alttext ist der alternative Text, den ich vergeben kann, wenn ich ein Bild habe mit einer Information. Und wenn dieses Bild notwendig ist, um den Inhalt des Textes zu verstehen, dann habe ich das Problem, das ich als Screenreader-User, der dieses Bild nicht sehen kann. Oder wenn ich eine visuelle Einschränkung habe, diese Information nicht habe und damit diesen Beitrag eventuell nicht verstehe. Ein anderes Problem ist auch, dass es ein skurratives Element ist und ich aber trotzdem ein Alttext vergebe, dass dies ebenfalls verwirrend sein kann. Und diese Problematik, da die Leute ein bisschen mehr darauf zu trimmen, Alttext zu vergeben, wenn es notwendig ist, also hier habe ich erstmal noch die, also was das Problem ist. Und es ist halt vor allem für Screenreader-User einfach her. Sehr, sehr schwierig. Und vor allem auch natürlich für SEO, weil Google ist der größte Blende im Internet. Und dafür gibt es jetzt diesen Bereich. Das heißt, wenn ich ein Bild habe, habe ich hier relativ prominent in Block-Einstellungen, dass ich ein Alternativtext eingeben kann. Also vielleicht erinnert ihr euch noch, wenn ich ganz normal über die Mediathek gehe, dann habe ich immer den Titel, ich habe den Alttext, ich habe die Beschreibung und ich habe noch ein viertes Element, also die Bildunterschrift. Und das ist immer die große Verwirrung, was ist denn jetzt da wichtig, was muss ich denn hier ausführen? Und ganz häufig haben die Leute einfach viermal dann vorgelesen, was nicht gerade sehr schön ist. Und jetzt ist es halt so, ich habe zwar immer noch diese vier Elemente, die ich über die Mediathek definieren kann, wenn ich aber das Image-Block verwendet, dann kann ich hier einfach über diesen Alttext, der sehr prominent da ist, das verwenden. Und ich habe sogar eine Beschreibung darunter, was hier rein soll. Also beschreibe den Zweck des Bildes, aber lasse das fällt leer, wenn es nur ein dekoratives Element ist. Und das finde ich echt eine gute Lösung, einfach, wie man Menschen Barrierefreiheit oder WordPress-User an die Barrierefreiheit ein bisschen mehr heran führen kann. Okay, es gibt im Gutenberg selber, wenn ich das verwende als Content-Ersteller, verschiedene Modus, die ich aktivieren kann, damit es mir selber leichter fällt, den Gutenberg zu verwenden. Und das ist zum einen die einheitliche Symbolleiste. Ich kann zum Beispiel, wenn ich den Gutenberg verwende und auf unterschiedliche Blocks raufklicken, dann habe ich hier so eine Werkzeugleiste oben drüber. Und die sind über jeden einzelnen Block, schwebt diese Werkzeugleiste. Das kann aber für bestimmte User verwirrend sein, die solche mit springenden Elementen so ein bisschen Schwierigkeiten haben. Und deswegen gibt es den Modus, den ich einstellen kann, der verbirgt sich hier in diesen Settings. Ich habe den gerade schon aktiviert. Genau, da sind die Settings. Ah, ich habe das hier auch gelernt. Ach ja. Und da kann ich sagen, einheitliche Werkzeugleiste, dann wird es hier oben rangestickt. Das heißt, selbst wenn ich dann unterschiedliche Blocks anvisiere, habe ich die Werkzeugleiste immer ganz oben kleben quasi. Und das kann ich mir als User ganz einfach selber individuell aktivieren. Das heißt auch, wenn ich unterschiedliche Benutzer habe in dem selben WordPress, selben WordPress-Installation, kann es jeder User für sich selber einfach einstellen, was man lieber haben möchte. Der lädt ganz schön lang. Ein weiterer Modus ist der Spotlight-Modus. Und zwar ist es so, wenn ich verschiedene Blöcke anvisiere, dann sind sie eigentlich relativ gleich in ihrem Kontrast. Und wenn das für mich aber schwierig zu erkennen ist, welchen Block ich jetzt gerade aktiviert habe, kann ich den Spotlight-Modus aktivieren. Der ist auch hinter diesen Einstellungen hier. Und wenn ich den aktiviert habe, dann wird alles ausgegraut, außer das aktive Block, was ich gerade anvisiert habe. Das ist auch Geschmackssache. Einige möchten vielleicht lieber den kompletten Content, den Sie gerade editieren, direkt zu sehen, wie er eigentlich zu sehen ist. Aber wenn ich damit Schwierigkeiten habe zu erkennen, wo bin ich denn jetzt genau, in welchem Element befinde ich mich. Kann ich den Spotlight-Modus anmachen und kann das ganz klar erkennen, was stärker einfach zu sehen ist und wo ich mich befinde. Dann gibt es noch den Vollbild-Modus. Der ist für da, dass ich ein ablenkungsfreies Schreiben habe. Diese ähnliche Funktion gab es bereits auch schon, dass ich quasi alles links und rechts ausblenden konnte. Und der Vollbild-Modus deaktiviert oder blendet einfach den Bereich hier oben und die Menüleiste aus und er verbirbt sich ebenfalls hier oben. Jetzt ist das hier oben und links einfach weg. Und ich kann den auch noch verbinden, indem ich diese Block-Einstellungen, die ich hier habe, ebenfalls deaktivieren kann. Und das geht dann im Nächsten. Und zwar kann ich, wenn ich den anmache, kann ich hier über dieses Einstellungs-Rädchen deaktivieren, dass einmal die Block-Einstellungen selber, aber auch die Meta-Einstellungen für die gesamte Page oder für die gesamten Post einfach rausnehmen kann. Das heißt, ich kann, wenn ich beides verwende, eine komplett klare, weiße Seite haben, wo ich einfach nur meinen Text drunterschreiben kann. Der hält gerade für Menschen, die ablenkungsfreies Schreiben brauchen, sehr gut verwenden können. Das war das Ende quasi. Wenn ihr Fragen habt, wäre jetzt der Moment dafür. Ich glaube nicht, also wenn ich den Alltext einfüge, wird ja auch nicht in der Mediathek gespeichert. Also wenn man sich das Bild dann anschaut in der Mediathek, ist dort nicht der Alltext zu sehen. Ich glaube nicht, nein. Bin ich mir aber gerade nicht 100% sicher, aber ich glaube nicht. Ah, okay, die Frage war, ob der Alltext, den ich im Gutenberg definiere, den Alltext, den ich in der Mediathek definiert habe, überschreibt. Das ist ein eigenes Block. Das ist ein Full-with-Bild-Block. Also es gibt unterschiedliche Blöcke für Bilder. Es gibt ein Galerie-Block, es gibt ein Image-Block, es gibt ein Full-with-Block, es gibt ein Titel-Bild-Block. Also es gibt da verschiedene Blöcke. Ah, du willst mir die Sections? Ja, das hat was mit der, also die Frage war, ob Sections mit HTML5 relevant sind für Accessibility. Ja, ist es, denn ich kann im Screenreader definieren oder auch, wenn ich mit der Tastatur mich bewege, kann ich sagen, ich bin im Header-Bereich, ich bin im Content-Bereich, ich bin im Futter-Bereich. Meinst du diesen Teil? Beides ist, also jetzt war die Frage, ob die Sections wichtiger sind, als die Überschriften. Beides ist relevant. Also eine Semantik ist immer sehr wichtig und es ist auch sehr, sehr wichtig, die richtige Auszeichnung der Elemente zu verwenden. Also ich würde jetzt nicht sagen, dass eine wichtig oder besser ist, als das andere. Es muss einfach immer nur das richtige Element für das richtige, also das richtige Element genutzt werden, zum Beispiel Links, sollten immer mit einem A, also mit einem Link tag, gekennzeichnet werden. Und Button sollten auch immer als Button definiert sein, im HTML, weil diese unterschiedliche Funktionen haben. Man kann nicht sagen, das ist eines Besseres als das andere, sie haben unterschiedliche Funktionen und es ist sehr, sehr wichtig, dass diese korrekt ausgezeichnet werden. Und auch wenn ich verschiedene Sektionen verwende, dass die einfach in einer Semantik vernünftig funktionieren, dass ich nicht Inhalte in den Header reinschreibe, der eigentlich reingehört, nur weil ich das aus irgendwelchen Layout-Bedingungen besser finde. Ich habe gerade die Frage gar nicht richtig verstanden, also die Spotlight-Modus. Ich bin mir gerade nicht sicher, also die Frage war, ob ich in jedem einzelnen Beitrag, den ich erstelle, die Spotlight-Modus neu aktivieren muss. Ich bin mir gerade nicht sicher, ob man das machen muss. Sören, weißt du da eine Antwort? Müsste man austesten, aber Jobjohn ist auch nicht immer so barrierefrei. Ja. Also die Aussage war gerade, wenn ich in der Mediathek einen Alltext definiert habe, wird er im Gutenberg mit übernommen. Wenn ich den bei im Gutenberg nochmal verändere, wird die Veränderung nicht in der Mediathek gespeichert. Nein. Weil dann hätte ich ja das Problem, wenn ich also die Frage war gewesen, ob es korrekt ist, dass das Logo als H1 definiert werden sollte, die Menüleiste als H2 und dann im Content-Bereich mit H3. Also ich habe diese Aussage tatsächlich noch nie gehört und das ist sorry, absolut auch schwachsinn. Denn das Problem ist, wenn ich auf das Logo das die H1 ist und das Menü ist ein Link und nicht eine H2, weil es ja eine Navigationsleiste, das heißt, ich sollte auch dieses entsprechende Element nehmen und nicht mit einer H2 auszeichnen. Und der eigentliche Content-Bereich sollte ich dann mit einer H1 beginnen, weil das ja das Relevante auf dieser spezifischen Page ist. Denn angenommen, ich hätte eine Webseite mit 100 Unterseiten und ich hätte das Logo als H1, würde mir auf jeder einzelnen Unterseite diese H1 vorgelesen werden, die aber keine Unterscheidung macht zwischen den einzelnen Pages in dem Sinne. Also, nein. Ah, der Spotlight-Modus bleibt erhalten. Sehr schön. Okay, weitere Fragen. Ja. Hallo. So, Thema Ally. Ally. Gibt es ein Theme oder etwas? Ein was? Ein Theme. Ein Theme. Das ist ganz gut mit Ally oder ein Firma, das macht gutes Team in so einem Bereich, dass sie haben gearbeitet damit, dass sie könnte entfällen. Ja, also alles, was von der WordPress-Commente offiziell kommt, also die ganzen Standard-Themes sind sehr accessible. Ich würde mich sehr empfehlen, was von der Vorbereitung her schon sehr accessible ist. Ansonsten gibt es, wenn man über die Directory geht, also WordPress.org-Themes, gibt es ein Tag, der Ally-Ready oder barrierefrei auf Deutsch heißt. In Englisch ist es wahrscheinlich Ally-Ready oder Accessible-Ready oder Prepared oder so. Die wurden getestet. Da haben wir auch mit dem Theme-Review-Team und das Accessibility-Team haben da zusammen gearbeitet, um die Standards zu definieren, ab wann bekommt man dieses Theme tatsächlich Accessible ist. Also wenn man ein Theme haben möchte, was barrierefrei ist, würde ich danach auf jeden Fall suchen. Ansonsten sind, ich fühle mich nicht zu weit aus dem Fenster eng, aber fast alle Layout-Bilder ist schwierig. Also ich will nicht sagen, dass sie gar nicht barrierefrei sind, aber das ist teilweise sehr schwierig, weil ganz viel JavaScript mit drin ist. Und so bei JavaScript im Spiel ist, man kann JavaScript barrierefrei machen, es fordert aber mehr Aufwand. Also gerade wenn die bestimmte Effekte drin haben, was meistens mit JavaScript umgesetzt wurde, sind häufig nicht barrierefrei, weil dieses extra diese extra mile einfach nicht gegangen wurde, damit es barrierefrei wird. Wobei ein statisches Menü einfach mit HTML und CSS umgesetzt wurde, von vornherein barrierefrei ist in der Regel, weil HTML an sich schon ein barrierefreie Auszeichnungssprache ist. Aber es ist jetzt auch nicht überall so, also das ist so eine Tendenz eher. Wenn ich jetzt auf einer Übersichtsseite zum Beispiel die Beiträge reinlose, also Artikel 1, Artikel 2, Artikel 3 und die macht es nicht statisch im PHP, sondern lade das mit Achecks. Also dann erst kleinzeitig noch zum Beispiel ein mehr Ladenpartner, wo dann die Beiträge nachgeladen werden. Es ist dann erst schon mal ready wahrscheinlich, oder? Ich habe die Frage gar nicht verstanden, ich verstehe, sorry. Wenn ich jetzt nicht, wenn ich die Beiträge dynamisch mit Chabas gibt, dann ist das auch nicht ready, oder? Kommt drauf an, also man kann JavaScript durchaus accessible machen. Ich bin jetzt aber kein JavaScript-Experte. Bernhard, magst du was dazu? Genau, also es gibt so so Aria-Attribute und es gibt so ein Aria-Live-Attribut, damit kannst du dem Screenreader sagen, in diesem Inhalt werden Daten nachgeladen und dann kann man praktisch dem Screenreader dann nach dem nachladenden Nachricht schicken. Lieber Screenreader, hier ist jetzt was dazugekommen. Bitte liest mal vor. Das wird zum Beispiel auch verwenden, wenn man so eine Autoverfolge suche hat, dann kann man sagen, das ist so eine Live-Area und sobald dann irgendwie Einträge kommen nach der Suchengabe kann man sagen, jetzt liest mal bitte vor. Das heißt, man muss aktiv dafür sorgen, dass der Screenreader mitbekommt, jetzt ist was dazugekommen und jetzt liest ich das vor. Du hattest für die Farbauswahl diesen Kontrastberechnung. Wie kommt dir da an die Werte? Ist das wirklich eine Berechnung, oder habt ihr auch Anpassen über meinen Fimo oder über den Plugin? Es ist eine tatsächliche Berechnung, ich weiß gerade nicht genau, welches Tool sie technisch da eingesetzt haben. Es gibt aber zum Beispiel auch Webseiten suche ich beconfessedchecker.com oder .org, wo du fahrst. Also es ist eine echte Berechnung, wozu der, also wir verwenden hier, ich glaube, den AA-Standard, der von WCAG definiert wurde und da gibt es bestimmte Werte, der befindet sich zwischen 1 und 2, 4,5, also der Kontrast ratio sollte nicht unter 4,5 zu 1 sein. Also das ist die Berechnung und auch wenn du selber Farben einsetzt, wird das mit ihnen die Berechnung eingehen, also fließt das mit rein. Ich weiß gerade nicht genau, wie sie das technisch eingebaut haben, aber es ist eine echte Berechnung. Okay, gibt es auch mehr Fragen? Dann bedanke ich mich für eure Aufmerksamkeit. Danke.