Herzlich Willkommen bei wo wir sind ist vorne Frontend Fakten Frotzelein
der Late Night Frontend Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und Javascript-Jongleur Konstantin Groß.
Hallo und herzlich Willkommen zur vierten Ausgabe von wo wir sind ist vorne.
Zweiter Anlauf, das möchte ich jetzt nicht verschweigen aufgrund technischer Probleme.
Genau, wir praktizieren in dieser Folge wieder Physical Distancing, also so wie es sich jetzt gerade gehört.
Wir machen die Folge wieder remote, so wie die letzte und vielleicht stoßen wir einfach mal an.
Was meinst du?
Jawohl.
Also, zum Wohl.
Bei mir klingt es heute etwas anders.
Ich bin heute mal auf Weißwein umgestiegen.
Ja, und ich habe wieder ein Brooklyn Lager, also was heißt wieder, das hatten wir irgendwann schon mal.
Der Konstantin hat mir das dankenswerterweise mal geschenkt.
Und ich habe noch eine Flasche davon gefunden und bevor sie schlecht wird, werde ich sie jetzt mir einverleiben.
Und damit sage ich vielleicht einfach schon mal Jingle up.
Ja, jetzt neu auch mit Jingle.
Yeah, sehr gut.
Ja, was hat uns beschäftigt die letzten zwei Wochen?
Ich glaube, man kann sich's denken, das, was alle zurzeit gerade beschäftigt.
Und wir hatten ursprünglich auch geplant, vielleicht was zu dem Thema zu machen, besonders zum Thema Homeoffice.
Deswegen hatten wir auch auf Twitter mal ein bisschen vorgefühlt.
Aber wir haben uns jetzt gedacht, auf allen Kanälen bläst es gerade zu dem Thema und deswegen lassen wir das sein.
Ich werde trotzdem jetzt in der Retro eine Kleinigkeit dazu sagen.
Erstmal finde ich es spannend, dass durch die Krise jetzt alles Mögliche möglich wird, was vorher angeblich gar nicht ging.
Also eben das Thema Homeoffice.
Aber mir sind auch so ein paar Sachen aufgefallen, als ich so Newsartikel darüber gelesen habe, wie sich technisch auch so ein paar Sachen entwickeln.
Und zwar sind das zwei Artikel von der Washington Post und von der New York Times, die ich entsprechend auch verlinken werde in den Shownotes.
Also es sind zwei Artikel von der Washington Post, einer von der New York Times, wo die Verbreitung der Pandemie so ein bisschen visualisiert wird und zwar ziemlich cool visualisiert wird.
Und ich habe das gesehen und das hat mir echt gut gefallen, wie das gemacht ist.
Also im Endeffekt ein One-Pager und man scrollt da durch und dann sieht man die Ansteckung visualisiert durch Punkte und so weiter.
Und habe natürlich dann auch mal geguckt, wie das technisch so umgesetzt ist.
Jetzt nicht im Detail, welche Libraries die einsetzen oder so, aber erst mal geguckt.
Okay, es ist mit SVG, es ist mit Canvas gemacht und das fand ich einfach cool zu sehen.
Das ist eine ziemlich erfreuliche Entwicklung, weil es doch heutzutage immer noch so ist.
Also ich gucke immer wieder bei Webseiten in den Quellcode rein und ins Netzwerktab von den DevTools und gucke mal so an, was die so treiben.
Und ganz oft sieht man noch, dass Grafiken, die eigentlich perfekt geeignet werden für SVG, trotzdem noch als Rastergrafiken umgesetzt werden.
Also irgendwelche Logos vor allem oder auch irgendwelche Diagramme oder so, die dann klassischer Fall eigentlich für SVG werden, werden immer noch als Grafik umgesetzt.
Und von daher, dass Canvas und SVG, wir hatten es ja das mal ja auch über WebGL und Canvas, dass das jetzt zur Einzug hält, ist wirklich eine erfreuliche Entwicklung.
Und ich habe das Gefühl, dass der deutsche Bereich da wie so oft aber noch ein bisschen hinterherhängt, also auf Spiegel, Online oder Fokus oder sonstigen deutschen Nachrichtenseiten wird sowas klassisch immer noch als Video eingebunden.
Hat vielleicht aber auch den Hintergrund, dass die Leute da gerne noch ein, zwei Werbespots vorschalten, um ein bisschen was dran zu verdienen.
Aber so insgesamt finde ich das einen erfreulichen Trend, ja, dass sowas interaktiv, auch man kann dann da irgendwelche Regler und sowas einstellen und also finde ich super, dass sich da was tut.
Und an der Stelle noch eine kleine Eigenwerbung, ich habe da selber was damit gebastelt, werde ich auch in die Shownotes packen, habe ich jetzt gerade erst gestern live gestellt auf unserer Firmenseite, wo ich die Fallzahlen von Karlsruhe so ein bisschen visualisiere.
Nicht ganz so fancy, wie das die Washington Post und New York Times machen, sondern einfach nur in Chartform, aber da habe ich einfach mal ein bisschen mit dran rumgespielt, weil ich das ganz interessant fand, das mal auf Stadt- und Landkreisebene nachzuverfolgen.
Und umgesetzt natürlich das Ganze mit Vue.js und mit Vue.Apex.Charts, was ich auch verlinken werde, natürlich war für mich die Wahl klar als Vue.Fanboy.
Genau, dann noch eine andere Sache, um schon wieder vom Thema Corona mal wegzukommen, die Wikimedia Foundation will für ihre UI-Überarbeitung in Zukunft auch auf Vue setzen.
Da gab es ein RFC, also Request for Comments, das jetzt abgeschlossen ist und der Vorschlag, so wie es ausschaut, akzeptiert wurde.
Das hatte wohl ein bisschen eine Kontroverse ausgelöst, ob jetzt nicht vielleicht Web-Components sinnvoller wären und React war auch im Gespräch.
Darf ich kurz Zwischenfragen?
Also es kann sein, ja, natürlich, sowieso.
Wikimedia, was geht es da wirklich dann um die Oberfläche für Wikipedia oder worum geht es genau?
Also Wikimedia, die Wikimedia Foundation ist ja der Verein, der hinter diesen ganzen Wikipedias steht, den internationalen und auch noch diversen anderen Softwareprojekten, aber es geht tatsächlich darum, um Features im Frontend für die Bearbeiter.
Und das soll eben jetzt mit Vue umgesetzt werden.
Also das ist jetzt beschlossen.
Aktuell ist da noch ziemlich viel Shake gemacht.
Ja, beschlossen.
Also wie gesagt, die RFC ist abgeschlossen, aber es hat da Kontroversen gegeben, wie das immer natürlich so ist, wenn solche Vorschläge kommen und wäre das nicht besser und das nicht besser.
Also vielleicht wird es auch nochmal gekippt, es soll wohl auch so sein, dass es zunächst mal für kleinere Funktionen als Fallstudie quasi eingeführt wird und man schaut, wie das so funktioniert und dann erst großflächig überall ausgerollt werden soll oder vielleicht eben halt auch nochmal gekippt.
Bleibt abzuwarten.
Hast du da tiefere Informationen, also was die genau damit machen wollen?
Also wollen die jetzt Wikipedia zur großen Single-Page-Application umbauen oder geht es da mehr so um Library?
Also ich habe irgendwie mein statisches HTML noch und tue Vue.js da rein, um bestimmte Sachen interaktiv zu machen.
Also wenn ich das richtig verstanden habe, dann sollen tatsächlich auch die Inhalte nachgeladen werden quasi.
Also für das entsprechende Device zum Beispiel, für Mobile muss ich weniger laden als für Desktop.
Also es soll wohl schon die komplette Oberfläche aufgebaut werden, aber so tief bin ich da in der Tiefe nicht drin in dem Thema.
Wie gesagt, erstmal werden es nur kleinere Funktionalitäten sein, um eben JQuery abzulösen, was da oftmals noch im Einsatz ist.
Also da geht es eher um die Menüs und was weiß ich was für Funktionalitäten.
Ja, aber bleibt spannend und habe mich natürlich als View-Verfechter gefreut, dass da die Entscheidung drauf gefallen ist.
Verstehe, cool.
Coole Sache.
Und dann habe ich noch eine kleine Kleinigkeit, die doch wieder indirekt mit Corona ein bisschen zu tun hat und zwar Affinity.
Sagt dir das was?
Ja, ja, ganz dunkel.
Das ist eine Alternative zu Photoshop, Illustrator und InDesign von Adobe, wenn man es auch mal aussprechen möchte.
Und die haben jetzt im Zuge dieser Pandemiekrise 50 Prozent auf ihre Produkte gegeben.
Also das ist jetzt keine Werbung hier, soll es kein Product Placement sein, aber ich fand das eine ganz coole Aktion.
Es gibt ja viele solche Aktionen, also auch Microsoft hat irgendwelche Kommunikationssoftware, ich glaube dieses Skype Business oder Skype Meeting zur Verfügung gestellt, um den Leuten jetzt über die nächsten Monate so ein bisschen hinweg zu helfen.
Und das ist mir eben heute unter die Finger, unter die Augen gekommen, dass es das gibt und ich hatte schon länger mal vor, mich eventuell von dieser Creative Suite von Adobe zu verabschieden, weil es halt doch einfach auch ins Geld geht, so monatlich.
Und ich so häufig, weil ich ja eigentlich kein Grafiker bin, sondern halt reiner Entwickler, aber ab und zu halt doch mal was mitmache, lohnt sich das für mich eigentlich nicht.
Und das fand ich eigentlich eine ganz coole Aktion, also wie gesagt, da gibt es gerade 50 Prozent auf alle Produkte, es gibt eine 90-Tage-Testphase.
Ja, einfach schön zu sehen, dass Unternehmen da jetzt auch so ein bisschen Solidarität zeigen, aber man darf natürlich auch nicht vergessen, ist natürlich auch ein Werbeeffekt.
Natürlich erhoffen sich die Leute, dass am Schluss hinten dran was hängen bleibt und dass die Leute sagen, ja finde ich cool und mache ich mit.
Genau das Gleiche bei diesen Kommunikationstools, die jetzt da erstmal kostenlos sind für anderthalb Jahre.
Oder auch die Aufnahmesoftware, mit der wir ja aufnehmen, Reaper, gibt es jetzt auch eine Lizenz, die irgendwie, weiß ich auch nicht, glaube ich, 90 Tage oder so gültig ist.
Ja, irgendwie bis Juni oder Juli oder so, ja.
Natürlich erhoffen sich die Hersteller, das ist ja natürlich jetzt nicht reiner Goodwill, sondern natürlich erhoffen sich die Hersteller was davon.
Aber ist ja auch okay, also sie könnten es auch einfach nicht machen und ja, fand ich ganz nett.
Ja.
Das war's von mir.
Dankeschön.
Ja, das ist übrigens, das ist eine ganz gute Überleitung, jetzt muss ich auch vielleicht noch was zu Corona sagen.
Aber mehr so zu dem, wie man jetzt arbeitet, weniger zu der Sache an sich.
Passt jetzt ganz gut, weil ich habe jetzt gemerkt, nachdem ich jetzt viele Videokonferenzen habe in letzter Zeit,
beziehungsweise Audio-Videokonferenz mit Video ausgeschaltet, witzigerweise, dass am Ende nur noch Audio durchgeht,
oft auch aus Performance-Gründen, habe ich gemerkt, dass es extrem wichtig ist, wenn man jetzt zum Beispiel ein Meeting macht, wo jeder seinen Status abgibt.
Sonst haben wir immer so ein Token rumgegeben, das geht jetzt natürlich nicht.
Wir sehen uns dann teilweise auch gar nicht, das heißt, es ist extrem wichtig, dass man irgendwie, dass nicht die Stille ausbricht, dann nachdem einer fertig ist und man sich dann überlegt, wer ist denn jetzt eigentlich als nächstes dran und was kommt jetzt als nächstes.
Kann ich nur empfehlen, entweder genau das machen, was Konstantin gerade gemacht hat, sagen, ich bin fertig, aber am allerbesten ist, derjenige, der gerade gesprochen hat und fertig ist, sucht den Nächsten raus, der dran ist.
Ich meine, gut, bei uns zu zweit stellt sich die Frage nicht, aber wenn man zu viert, zu fünft, zu zwölft, also das habe ich jetzt selbst noch nicht erlebt, aber ich habe es von Kollegen gehört, die irgendwie zu zwölft im Call sind, dann da ist es, glaube ich, extrem hilfreich, wenn man dann schon genau weiß, wie es dann weitergeht.
Also das kann ich jetzt, kann ich auf jeden Fall empfehlen, dass man, dass man das macht, hilft auf jeden Fall weiter, aber ich meine, naja, es gibt jetzt, es gibt auch viele, viele Tools jetzt, die irgendwie aus dem Boden sprießen, der Konstantin hat es gerade schon angesprochen, beziehungsweise man entdeckt jetzt Dinge neu, gerade mit, man möchte gemeinsam zum Beispiel irgendwie an einer Code-Basis arbeiten und, naja, Pair-Programming ist irgendwie eine coole Sache, wenn man irgendwie nebeneinander am Platz sitzt, kann ich auf jeden Fall
nur empfehlen, geht nur gerade nicht und dann sucht man mal, vielleicht gibt es da ja was, dass man irgendwie gemeinsam coden kann, ich meine, gemeinsam Dokumente und Spreadsheets editieren und bearbeiten, das geht irgendwie schon ganz gut über beispielsweise Google-Produkte, aber für Code im Speziellen war mir jetzt, ich glaube, bei CodePen gibt es irgendwie so ein Pro-Feature, weiß ich nicht genau, habe ich nie getestet, aber vielleicht wäre es ja cool, wenn es was gibt, in den Editor integriert,
mit dem man tagtäglich arbeitet und bei uns, naja, wir arbeiten, glaube ich, nicht im Team alle mit VS Code, aber die meisten und dafür gibt es wohl schon seit 2017, habe ich gesehen, ein relativ cooles Plugin, das nennt sich VS Code Live Share und funktioniert so, dass ich, also beide Seiten oder, ich glaube, es geht sogar zu mehr als zu zweit, wir haben es bisher nur zu zweit getestet,
installieren sich dieses Plugin, dann sagt einer, ich möchte meine Session share und gibt, dann fällt da hinten einen Share-Link raus, den gebe ich weiter an die Leute, die ich dabei haben will und dann haben die tatsächlich in ihrem VS Code, sehen die, was ich sehe, man sieht den Cursor von dem anderen, beide können drin rumtippen, man sieht auch, wenn man jetzt noch eine Kommandozeile offen hat oder so,
auch die ist geshared, da kann man dann aber extra nochmal einstellen, darf der andere da auch was reinschreiben oder nicht, weil das ist natürlich theoretisch
eher, naja, eine Sicherheitslücke, die man da aufmacht, wenn der andere in die eigene Kommandozeile was reinschreiben darf, aber auch das kann man machen.
Und da haben wir dann mit Call nebenher, also Audio Stream nebenher, haben wir eine Menge schon jetzt gemeinsam gecodet und das ist echt eine coole Geschichte.
Also ich würde sogar sagen, da sind wir schon relativ nah dran am, oder wie soll ich sagen, am Pair-Programming sind wir relativ nah dran damit.
Wir haben uns sogar überlegt, ob wir das vielleicht auch nicht mal so im Büro machen sollen, weil das irgendwie einfacher ist, als zwei Tastaturen an einen Rechner anschließen.
Also das ist eine echt richtig coole Geschichte, kann ich empfehlen. Ein Kollege von mir hat sich das auch mal ganz, ganz, naja, security-technisch angeschaut, will ich jetzt, wäre jetzt übertrieben, aber er hat mal geschaut, wie die Daten da ein bisschen rumgeschickt werden und wie da die offizielle Aussage von Microsoft dazu ist, zu diesem Plugin.
Also ich meine, man muss natürlich auch gucken, wenn man jetzt irgendwie Code hat, den man vielleicht jetzt nicht mit der Öffentlichkeit sharen will, wo wird der denn da drüber geschickt?
Also ich meine, der muss ja dann irgendwie durch irgendeine Verbindung über irgendeinen Server, muss der ja von A nach B geschickt werden.
Und das scheint zumindest so weit Microsoft es sagt, alles in Ordnung zu sein.
Allerdings, ob man sich darauf verlassen kann, da kann man jetzt mal drüber streiten.
Aber auf jeden Fall eine coole Idee, funktioniert wirklich gut und macht Spaß, da gemeinsam zu coden.
Zweiter, kurzer Teil, was ich noch sagen wollte, vielleicht hört man es, ich hoffe, man hört es.
Ich habe ein neues Mikrofon.
Der Konstantin hatte ja in der letzten Folge ein neues Mikrofon und hat das da vorgestellt.
Ich habe jetzt mal ein neues und hoffe, dass es jetzt ein bisschen besser klingt als vorher.
Damit bin ich fertig.
Alles klar, ich auch und damit kommen wir zur...
Falsch.
Damit kommen wir zur...
Die Property der Woche.
Ja, alles heute ein bisschen verquer technisch.
Okay, die Property der Woche ist eigentlich heute eine API der Woche.
Es geht um diverse Build-Ins in JavaScript, also Language Features.
Die vereint sind unter Intel, I-N-T-L-Punkt.
Das sind Features, mit denen man Internationalization betreiben kann.
Also Internationalisierung nicht nur im Sinne von Sprache, auch von Nummernformatierung.
Da gibt es verschiedene Unter-Properties, von denen ich mir jetzt mal drei rausgesucht habe,
die ich kurz vorstellen will.
Ich habe eine kleine Demo dazu gebastelt auf CodePen, die ich natürlich auch verlinken werde.
Und das wären Date-Time-Format, Number-Format und Plural-Rules.
Und mit Date-Time-Format kann man, wie der Name sagt, Datum formatieren und Uhrzeit formatieren.
Da kann man in der Demo ein bisschen mit rumspielen.
Ich weiß nicht, habe ich die in Strello gepostet?
Ich glaube nicht.
Das heißt, du kannst das jetzt gerade gar nicht rumklicken.
Nee, ich habe sie noch nicht gesehen.
Egal, aber du kannst das dir mal anschauen.
Da kommt am Schluss dann auch der Code raus, zu dem, was man sieht.
Und da kann man verschiedene Locals wählen.
Also Englisch fürs Vereinigte Königreich, Englisch für Vereinigte Staaten, Deutsch Österreich, Deutsch Deutschland.
Und entsprechend ändert sich dann das Datum.
Number-Format kann automatisch Währungen entsprechend formatieren und darstellen.
Also mit Tausender-Trendzahl, entsprechendes Währungs-Icon.
Das heißt, ich übergebe diesen Short-Code, diesen ISO-Code, EUR für Euro zum Beispiel.
Und es formatiert dann automatisch ein Euro-Zeichen hintendran oder vorne dran.
Fun Fact, in Österreich steht das Euro-Zeichen vor dem Betrag.
In Deutschland steht es hinter dem Betrag.
Wusste ich auch nicht.
Doch, kann man auch in der Demo sehen.
Deswegen habe ich das Deutsch- und Österreichisch auch mit aufgenommen.
Und auch für das Daytime-Format, weil man in Österreich ja Jänner sagt statt Januar.
Und ich glaube, das wird bei ganz vielen Seiten nicht berücksichtigt.
Die denken, naja, mit Deutsch stecken wir ja Deutsch-Österreich und Deutschland-Österreich und Teile der Schweiz ab.
Aber es gibt ja doch so kleine, feine Unterschiede.
Und damit kann man auch diese Unterschiede theoretisch berücksichtigen, wenn man das möchte.
Und der dritte Punkt, das sind die Plural-Rules.
Beispiel habe ich da das Wort Podcast im Singular und Podcast im Plural.
Wenn ich Null habe, ist es im Deutschen auch Podcasts.
Ein Podcast ist Podcast und ab zwei aufwärts ist es wieder Podcasts.
Im Englischen funktioniert es genauso.
Und das funktioniert auch in vielen europäischen Sprachen so.
Oder vom Lateinischen und Germanischen abstammenden Sprachen so.
Das Arabische hat aber zum Beispiel sechs verschiedene Plural-Formen.
Ich weiß nicht, ob man da auch von Plural dann spricht oder ob das wieder irgendeinen linguistischen Fachbegriff hat.
Jedenfalls gibt es da eine Klassifizierung.
One, two, also zero, one, two, many, few, many und other.
Und über die Plural-Rules kann ich mir das zurückgeben lassen anhand von der Zahl.
Also ich übergebe als Parameter die Zahl, die ich habe.
Also Standardfall im Web wäre statt Podcast wahrscheinlich eher irgendwie Beiträge.
Und dann habe ich eben einen Beitrag oder x Beiträge.
Und fürs Arabische, wenn ich das berücksichtigen will, kann ich das auch entsprechend machen.
Normalerweise würde man sowas serverseitig machen beim Rausrendern und entsprechend vielleicht den Wert schon.
Oder man würde sich eine Library nehmen wie Moment.js, die das Ganze berücksichtigen kann.
Aber das funktioniert auch direkt im Browser.
Und zwar auch schon wieder erstaunlich lange und mit einer recht großen Abdeckung.
Die ist allerdings nicht für die ganze Internalization.
Ich kann dieses Wort nicht aussprechen.
Internationalization API.
Darfst du es auch auf Deutsch sagen?
Internationalisierung.
Die Internationalisierungs-API.
Die ist nicht einheitlich, die Abdeckung.
Sondern jedes Feature von dieser API hat eine unterschiedliche Abdeckung.
Datetime-Format mit über 94%.
Gibt es schon seit Firefox 29.
Das ist immerhin 2014.
Chrome 24 sogar seit 2012.
Und sogar IE11 kann das Ganze.
Dieselbe Abdeckung gibt es auch für Number-Format.
Und bei den Plural-Rules, was man vielleicht auch nicht ganz so häufig brauchen würde,
sind es 87%, Firefox 58 2018 und Chrome 63 von 2017.
Und Edge erst mit Chromium, also nicht mal in den vorherigen Edge-Versionen.
Das heißt, so ganz reich für den Produktiveinsatz ist es vielleicht noch nicht.
Aber es gibt natürlich auch entsprechend Polyfills dafür.
Einmal Intel.js, werde ich natürlich verlinken.
Und Core.js, was man ganz häufig hat, oder was es zumindest gibt, weiß nicht wie häufig das eingesetzt wird,
in Bubble-Build-Chains, wo das für Polyfills genutzt wird, hat es absichtlich nicht integriert aufgrund des Umfangs.
Also es ist wohl doch recht umfangreich, diese ganzen Locals zu integrieren.
Und zu den Locals noch ein Wort.
Die Unterstützung von den verschiedenen Sprachen ist abhängig vom System und vom Client, was der mitbringt.
Und es gibt leider keine Möglichkeit, sich alle verfügbaren Locals auflisten zu lassen.
Das hatte ich nämlich versucht.
Ich kann nur überprüfen, ob ein gegebenes Locale oder ein Array von Locales, welche davon unterstützt werden.
Finde ich ein bisschen schade.
Wäre ganz cool irgendwie für die Demo gewesen, dass ich da alle auflisten kann und man alle auswählen kann.
Aber das funktioniert nicht.
Ja, und das war es eigentlich auch schon.
Kennst du die API?
Ich kannte die nicht, nee.
Die Plural Rules sind eigentlich wahrscheinlich sogar das, was ich jetzt am häufigsten,
weil du gerade gesagt hast, das brauchen wir vielleicht nicht so oft.
Okay.
So von den Projekten, die ich so vom Rohr habe, ist das wahrscheinlich die, die ich am häufigsten brauchen würde.
Weil das kommt wirklich ständig vor, dass man ein Wort in mehreren Sprachen, in Plural und Singular irgendwie haben will.
Also ich habe selten irgendwie Euro-Beträge oder sowas.
A Date-Time-Format, ja, auf jeden Fall.
Aber wahrscheinlich tatsächlich Plural.
Plural ist echt häufig.
Ja, mit Datum habe ich häufig zu tun.
Deswegen meinte ich, dass ich das andere nicht so häufig brauchen würde.
Aber ja, du hast recht.
Natürlich, klar, ist das auf jeden Fall hilfreich.
Also es hat ja auch nicht jeder häufig mit Internationalisierung zu tun.
Also jetzt in meinem Fall, was wir so machen, ist eigentlich immer mindestens zweisprachig.
Aber ich weiß auch, dass es gibt wohl viele Web-Developer da draußen, die das eigentlich nicht machen müssen, weil die bauen einsprachige Firmen-Webseiten oder irgendwie sowas.
Da kommt das eher selten zum Einsatz.
Ja.
Okay, aber coole Geschichte auf jeden Fall, kannte ich nicht, werde ich auf jeden Fall mal mehr anschauen demnächst.
Freut mich, wenn ich dir auch mal was Neues erzählen kann.
Ach, ständig.
Sehr schön.
Kannst mal ein bisschen wieder Demo spielen.
Genau.
Gut, dann.
Dann kommen wir vielleicht gleich zum Thema.
Aber zuvor gibt's noch kurz Werbung.
Werbung.
Ich wurde gefeuert.
Mit Atemhilfe hätte ich Trennung vorbeugen können.
Quält dich Schnarchen?
Diese Atemhilfe stellt den Lärm ein.
Störst du andere mit Schnarchen?
Mit Schlafhilfe kein Lärm mehr.
Verursacht Schnarchen Herzanfall?
Mit Schlafhilfe gegen Gefahren.
Schnarchst du noch?
Mit Atemhilfe Lärm schnell weg.
Abmelden hier.
Schnarcht dein Partner unerträglich?
Ich zeige eine sichere Methode.
Von der Partnerin verlassen.
Hätte ich sie nur getragen.
Lerne etwas davon.
Zu Risiken und Nebenwirkungen lesen Sie die Dokumentationen oder fragen Sie Ihren Systemadministrator.
Ja, Wahnsinn, diese Dramatik am Schluss, oder?
Da leitet man richtig mit.
Also auch das wieder eine tatsächlich echte Spam-Mail, die ich so in meinem Posteingang hatte.
Und wir hatten es gerade eben auch noch davon, bevor wir die Aufnahme gestartet haben.
Spam-Spot, Atemhilfe, ist jetzt vielleicht gerade ein bisschen doppeldeutig, aber es geht ja zum Glück nur um Schnarchen.
Ja, Schnarchen, schrecklich.
Und damit kommen wir eigentlich auch schon zum Thema und wir haben leider immer noch kein Jingle fürs Thema, aber vielleicht beim nächsten Mal.
Vielleicht beim nächsten Mal.
Ich hatte schon ein paar Ideen, ich habe schon ein paar Sachen ausprobiert, aber noch ist es nicht so weit.
Ich will ja vielleicht auch nicht, dass der Jingle dann so klingt wie jeder andere Themen-Jingle.
Deswegen gibt es noch keinen.
Aber wer weiß, vielleicht kommt irgendwann noch einer.
Das Thema der Woche ist Web Accessibility Basics.
Das ist eins meiner Lieblingsthemen generell, Web Accessibility.
Und ich will da jetzt nicht so extrem in die Tiefe gehen, sondern einfach mal so ein paar Tipps zum Mitnehmen.
Weil, naja, man könnte jetzt sagen, naja, so Web Accessibility Basics, die hat irgendwie jeder schon drauf oder da kennt sich irgendwie jeder schon aus.
Die Wahrheit ist, mag sein, aber es hält sich offenbar keiner dran, selbst wenn die Leute das irgendwie wissen.
Also ich würde es zum Beispiel von mir nicht behaupten, dass ich mich damit jetzt großartig auskenne.
Ich musste bisher tatsächlich, ich versuche schon so Basics, die man so landläufig kennt, umzusetzen.
Aber ich würde von mir nicht behaupten, dass ich auch nur ansatzweise halber Profi wäre.
Naja.
Deswegen bin ich froh, dass du heute darüber berichtest, weil da kann ich auch noch richtig was davon lernen.
Ja, ich hoffe, also es ist neben tatsächlich Fachwissen oder Fachkenntnis, weil die haben tatsächlich viele, ist es auch ein Appell, es zu tun.
Also sich auch ein bisschen um Accessibility zu kümmern.
Aber bevor ich jetzt schon richtig einsteige, möchte ich mal kurz noch erklären, warum sollte man sich überhaupt ein bisschen damit beschäftigen?
Oder warum sollte man sich überhaupt mit Accessibility auseinandersetzen?
Naja, ich glaube, wir sind uns alle einig.
Wir wollen ein Web für alle, also möglichst viele Leute sollen unsere Webseiten oder Web-Apps, die wir bauen, benutzen können.
Oftmals werden da halt Leute mit bestimmten Einschränkungen vergessen.
Also ich meine, der Klassiker, worüber dann immer geredet wird, wenn man über Web-Accessibility redet, sind beispielsweise Blinde.
Für die ist es auch eine besondere, da muss man sich schon ein bisschen auskennen oder einige Best-Practices beachten, wenn man Webseiten für Blinde optimieren will.
Aber es ist auch, man muss noch dazu sagen, es gibt ja verschiedene Arten von Behinderung und was viele vergessen ist, es gibt ja auch sowas wie temporäre Behinderung.
Also was, wo ich vielleicht nur eine Zeit lang eingeschränkt bin, weil ich mich irgendwie verletzt habe, muss ich mal irgendwie eine Augenklappe tragen oder ich kann gerade keine Maus benutzen, weil ich mir den Arm gebrochen habe.
Oder ich bin, der einfachste Fall ist, ich bin irgendwie gerade draußen unterwegs, schaue auf mein Handy und die Sonne scheint mir aufs Display.
Also auch das ist quasi schon eine temporäre Behinderung, weil da wäre es dann vielleicht gut, wenn das, was ich benutze gerade einen hohen Kontrast hat zum Beispiel.
Also alleine schon die Sonne auf dem Display kann eine Behinderung sein.
Permanente Behinderung, ich glaube, da muss ich nicht näher darauf eingehen.
Naja, klar, ich meine, es gibt Leute, die haben Probleme mit ihren Augen oder mit ihren Ohren.
Behinderung gibt es natürlich auch, da kann man natürlich auch was machen und dann am Ende natürlich noch motorische Behinderung.
Genau.
Aber ich will gar nicht so sehr darauf eingehen, ich wollte nur mal kurz motivieren und sagen, naja, jeder ist irgendwann mal behindert, spätestens im Alter, aber auch manchmal sogar im Alltag.
Um so ein bisschen theoretischen Rahmen noch zu spannen, es gibt für Web Accessibility auch tatsächlich Regeln, die festgeschrieben sind, die empfohlen werden, dass man sich daran hält und das sind, ich gehe jetzt mal auf die deutschsprachigen Regeln, auf die deutsche Gesetzgebung mal nicht so tief ein, weil die da teilweise ein bisschen merkwürdige Sachen sich vorstellen oder die denken, sie müssen ja ihr eigenes Ding machen.
Ich empfehle die Web Content Accessibility Guidelines, WCAG, WCAG, sich mal durchzulesen.
Die sind aktuell, glaube ich, wenn ich es richtig weiß, in der Version 2.1 und da gibt es auch deutsche Übersetzungen dafür und es gibt auch, teilweise sind die Dokumente manchmal ein bisschen kompliziert geschrieben, wie man es von Standards oft so kennt, damit auch wirklich jeder Fall abgedeckt ist.
Es gibt aber auch einige Dokumente, wo das mal so in, oder einige Übersetzungen sozusagen, wo das mal in vernünftige deutsche Sprache gebracht wurde oder auch in einfach verständliche englische Sprache, wo man dann auch an Beispielen sehen kann, wie man jetzt die einzelnen Sachen umzusetzen hat.
Genau, aber kommen wir mal jetzt tatsächlich auch ans Eingemachte Basics, technische Dinge, die ihr tun könnt, damit eure Seiten ein bisschen zugänglicher sind.
Und als ersten Punkt habe ich da semantisches HTML verwenden.
Das hilft in jedem Fall.
Also das hilft nicht nur dem Blinden mit seinem Screenreader, der nämlich dann erkennen kann, welches Element ist denn jetzt überhaupt was.
Ich habe hier eine Überschrift, ich habe hier einen Button, ich habe hier verschiedenste semantische Elemente, Main und so weiter.
Das hilft nicht nur dem, sondern das hilft dir natürlich auch der Suchmaschine, die versucht irgendwie zu erkennen, was denn auf eurer Seite abgeht.
Also semantisches HTML verwenden, überleg dir bei dem HTML Element oder wenn du HTML schreibst, was ist das Ding eigentlich oder was für eine Funktion erfüllt das?
Und dann vielleicht mal nachschauen und nicht immer nur Diffs und Spans verwenden, sondern auch vielleicht mal Header, Footer, Listenelemente, Paragraph und so weiter.
Der nächste Punkt ist, für Nicht-Text-Content sollte immer eine Textalternative bereitstehen, wenn es möglich ist.
Das hat den Grund, dass auch zum Beispiel ein Screenreader, also ein Bildschirmvorleseprogramm, ein Bild oder so irgendwie im Kontext noch erklärt bekommt.
Also ich weiß nicht, ob das jemand mitbekommen hat, ich weiß nicht, wann war das, vor eineinhalb Jahren oder so irgendwann oder vor zwei Jahren, war mal eine Engine bei Instagram und bei Facebook kaputt, sodass die Bilder nicht mehr ausgespielt wurden.
Was dann alle plötzlich gesehen haben in ihren Apps und auf den Webseiten, waren die Alternativtexte, die Facebook dazu automatisch generiert.
Also soweit würde ich jetzt nicht gehen, dass jeder so einen Algorithmus bei sich implementieren muss, das automatisch erkannt wird.
Was auf Bildern zu sehen ist, das braucht man glaube ich nur, wenn man Content-heavy-Website hat, wo viel User-Generated-Content hochgeladen wird.
Aber generell, wenn ihr irgendwas habt, was kein Text ist, sollte eine Text-Alternative bereitgestellt werden.
Ein schlechtes Beispiel dafür, oder nee, ein interessantes Beispiel dafür, ein interessantes Problem bei der Stelle sind zum Beispiel Captures.
Weil da möchte man eigentlich gar nicht als Text irgendwo stehen haben.
Wäre kontraproduktiv.
Was genau drinsteht, da gibt es dann meistens Audio-Captures, aber die sind auch sehr schwer hörbar.
Ich weiß nicht, wer das schon mal versucht hat.
Naja, also ich schweife ab.
Generell zu sagen, nutzt Alt-Attribute bei Bildern oder macht auch irgendwie bei Videos oder allgemein interaktiver Content eine Text-Alternative, wäre immer eine gute Idee.
Kannst du da noch was dazu sagen zu guten und schlechten Alt-Texten?
Weil ich glaube, da gibt es auch qualitativ große Unterschiede, was denn da überhaupt rein sollte, was denn auch hilfreich ist für nicht sehende Personen zum Beispiel.
Ja, also ich glaube, ich habe da mal in der Präsentation eine Unterscheidung gemacht.
Ich glaube, es gibt so drei, mir fallen jetzt gerade spontan drei verschiedene Kategorien ein, in die man ein Bild stecken kann.
Je nachdem schreibt man dann was anderes rein.
Also das Einfachste ist, du hast eine Schmuckgrafik, die überhaupt gar keinen Zweck erfüllt im Inhalt.
Da machst du einfach ein leeres Alt-Attribut rein, weil das hat man sehr, sehr, sehr selten heutzutage, weil man ganz viel, was man früher mit Schmuckgrafiken gemacht hat, mit CSS macht.
Aber vielleicht habt ihr ja tatsächlich irgendwo noch eine Grafik auf der Seite, die überhaupt gar keine inhaltliche Relevanz hat.
Da ist es okay, das Alt-Attribut leer zu lassen.
Aber laut HTML-Standard, zumindest der letzte Stand, den ich habe, muss es auf jeden Fall drin sein.
Wenn ihr einen Image-Tag irgendwie auf der Seite habt, dann muss auf jeden Fall ein Alt-Attribut drin sein.
Wie gesagt, es darf unter Umständen leer sein.
Dann gibt es Funktionsgrafiken, also zum Beispiel ein Icon, das ein Menü öffnet oder sowas.
Da sollte dann möglichst drinstehen, oder ich meine, ja doch, das ist schon der klassische Fall.
Da sollte dann möglichst drinstehen, die Aktion, die ich auslöse, wenn ich da draufklicke.
Also üblicherweise sollte das ja dann auch ein interaktives Element sein, also ein Button oder ein Link.
Also wenn es jetzt tatsächlich ein Menü öffnet, also irgendwie ein Dropdown oder sowas,
dann sollte das auf jeden Fall normalerweise kein Link sein, weil ein Link hat normalerweise immer ein Ziel.
Und in dem Fall wäre das Ziel ja dieselbe Seite, beziehungsweise einfach nur ein Dropdown öffnen wäre eigentlich dann trotzdem ein Link.
Egal, also der Text, der da drinsteht, sollte die Aktion beschreiben, die ausgelöst werden soll.
Und dann gibt es noch Inhaltsgrafiken.
Also was wäre da jetzt ein gutes Beispiel?
Ich habe halt einen Text und da ist irgendwie ein Bild mit drin zur Erklärung.
Und da sollte dann möglichst das Bild beschrieben werden.
Was ist auf dem Bild denn zu sehen?
Ah genau, mir fällt noch eine Kategorie gerade ein.
Und zwar, das gibt es tatsächlich auch immer noch, Bilder, die Text enthalten.
Die sollten am besten als Alternativtext einfach den Text haben.
Also wenn ich jetzt irgendwie ein Logo habe, auf dem ein Text zu sehen ist oder irgendwie ein anderes Bild, auf dem ein Text zu sehen ist, dann einfach nur den Text reinschreiben.
Aber da dürft ihr mich auch gerne korrigieren.
Also ich spreche mich zwar immer mal wieder mit, jetzt gerade mit Blinden ab, weil das für die sehr wichtig ist.
Aber da lasse ich mich auch gerne korrigieren, weil ich habe zwar eine Rot-Grün-Schwäche, aber ich bin nicht auf Screenreader angewiesen.
Also falls ihr, falls ich jetzt irgendwie Quatsch erzählt habe, bitte dann mal in die Kommentare schreiben.
Genau.
Habe ich damit die Bilder ausreichend erklärt oder hast du dazu noch Fragen?
Ja, auf jeden Fall.
Danke.
Sehr gerne.
So, das Nächste, das liegt mir sehr, sehr am Herzen, weil das ganz oft vergessen wird auf Seiten.
Also ich habe irgendwann mal gedacht, jetzt ist der Moment gekommen, also so vor zwei Jahren oder so gab es so einen Accessibility-Hype.
Und da dachte ich so, jetzt hat es sich durchgesetzt, jetzt ist es im Mainstream angekommen.
Aber trotzdem treffe ich immer wieder auf Seiten, die das falsch machen.
Und zwar, wenn ihr Formularelemente habt, gebt denen immer ein Label.
Immer, immer, immer.
Also Input, Type, Hidden, okay, da vielleicht nicht.
Aber ansonsten, wenn ihr irgendwie Inputs habt, Radio-Buttons, Checkboxen, Text-Areas, immer, immer ein Label mit dazu, das auch damit korrekt verknüpft wird.
Also einfach nur die Anwesenheit eines Labels reicht nicht aus.
Also ich muss entweder das Input-Element in das Label reintun, dann ist es automatisch verknüpft.
Oder ich kann es per ID, also ich gebe dem Input-Element eine ID und dem Label das Vorattribut mit der ID drin, dann werden die automatisch miteinander verknüpft.
Genau, das ist extrem wichtig, weil wenn ich das nicht mache, dann habe ich unter Umständen den Fall, dass ich auf die Seite gehe, dann steht da, dann kriege ich vorgelesen im Screenreader Eingabefeld.
So, ja, was soll da jetzt rein?
Keine Ahnung.
Deswegen immer das Label dazu packen.
Also manchmal ist es ja auch, sagt der Designer, ich will jetzt hier kein Label haben oder da soll jetzt kein sichtbares Label sein aus irgendwelchen Gründen, weil es sich aus dem visuellen Kontext vielleicht erschließt, was da rein soll.
Das gibt es so Fälle.
Auch da bitte ein Label-Element hin.
Im allerschlimmsten Fall kann man auch ARIA-Label verwenden als Attribut auf dem Input-Feld oder so, aber im besten Fall habt ihr ein Label und man kann sowas ja auch ganz easy mit CSS verstecken.
Der nächste Punkt wäre Fokus, visueller Fokus.
Fokus-Styles werden ganz oft vergessen oder Fokus wird irgendwie ausgeblendet, sodass man irgendwie, also in Firefox war so der Klassiker immer so eine gepunktete Linie,
um Link beispielsweise oder auch um Button, wenn der Fokus auf das Element geht.
Das wird oft in vielen Frameworks ganz gern ausgeschaltet, weil der Designer möchte das nicht so haben oder sieht irgendwie nicht so hübsch aus, aber das sollte man auf keinen Fall machen.
Also wenn der Style nicht gefällt, den kann man anpassen.
Zum Beispiel finde ich das Bootstrap, das ganz nett gelöst hat, da könnt ihr ja mal reinschauen.
Die machen das, glaube ich, mit Box Shadow.
Ich bin mir jetzt gerade nicht sicher.
Ich glaube, die machen das mit Box Shadow.
Also man kann das echt hübsch machen und man kann es auch interaktiv machen, sodass man auch sieht, wo der Fokus über die Seite flitzt.
Auf jeden Fall ist immer wichtig, dass ich sehe, was hat denn den Fokus.
Eine ganz einfache Möglichkeit, das zu machen ist, ihr habt wahrscheinlich Hover-Styles schon auf allem Möglichen drauf.
Nehmt einfach die doch auch für den Fokus.
Es ist zwar noch cooler, wenn man einen extra Fokus-Style hat, sodass man einen Unterschied erkennen kann zwischen Hover und Fokus.
Aber ein Fokus-Style, der aussieht wie Hover, ist besser als kein Fokus-Style.
Das hilft auch nicht nur Leuten, die die Tastatur benutzen, die auf die Tastatur-Nutzung angewiesen sind, sondern das hilft eigentlich jedem, wenn man weiß, wo gerade der Fokus auf der Seite ist.
Also stellt es euch vor wie ein Cursor.
Ich wollte gerade sagen, ich bin selbst jemand, der gerne mal die Tastatur auch benutzt statt der Maus.
Und da stößt man bei vielen Seiten dann doch schnell an die Grenzen, weil man gar nicht sieht, wo man sich jetzt gerade aktiv bewegt.
Also wirklich ein wichtiger Punkt.
Ich erinnere mich noch an ein Stück gemeinsamer Geschichte von uns, Konstantin.
Als wir mal in einem Rechner saßen, wo keine Maus dran war, weil die irgendjemand geklaut hatte.
Und genau in diesem Fall hast du dann ein großes Problem, wenn du nicht siehst, wo dein Tastaturfokus ist, weil du versuchst irgendwie den Rechner zu navigieren, aber hast keine Chance, wenn du nicht siehst, wo gerade dein Fokus ist.
Also das ist, finde ich, eine extrem wichtige Sache.
Also ich meine, alle von den Sachen, die ich jetzt hier irgendwie erzähle, finde ich extrem wichtig, weil es sind nur die größten Klopper.
Es gibt natürlich noch viel mehr, was man tun kann, als das, was ich jetzt erzähle.
Genau, nächster Punkt, falls du dazu keine Fragen mehr hast.
Nee, alles gut von meiner Seite.
Farbkontraste.
Dazu gibt es auch ein ganz geiles Tool von Lea Verroux, so ein Kontrastchecker, contrast-ratio.com.
Genau, also Farbkontraste.
Ich meine, jeder war bestimmt schon mal auf einer Seite und hat sich gedacht, Mensch, ich kann den Text irgendwie kaum lesen, obwohl er vielleicht groß genug ist.
Es ist wichtig, dass der Farbkontrast hoch genug ist und dafür gibt es auch tatsächlich Werte, die vorgeschlagen werden in den Web-Content-Accessibility-Guidelines, die man sich einfach ausrechnen kann.
Auch zum Beispiel auf der Seite contrast-ratio.com.
Da trage ich einfach meine zwei Farben ein, also meine Textfarbe und meine Hintergrundfarbe und dann kriege ich da ganz einfach einen Wert ausgerechnet und dann kriege ich gesagt, ja, passt oder passt nicht.
Interessant an der Stelle, glaube ich, ist noch zu sagen, es ist manchmal gar nicht so einfach, verschiedene Kontraste hinzukriegen, gerade weil zum Beispiel es auch einen Wert gibt für, wie sehr sollte der Kontrast zwischen Linkfarbe und Textfarbe sein.
Und wenn du dazu dann noch eine Hintergrundfarbe hast, dann hast du nämlich schon drei Variablen in der Geschichte, die irgendwie zueinander passen müssen.
Also geht alles, aber ist gar nicht so einfach, das hinzukriegen.
Ich glaube, der Klassiker ist, wenn du jetzt überhaupt gar kein CSS auf der Seite hast, dann sollten die Farben alle passen, weil die sind ziemlich krass.
Ich weiß nicht, ob das jemand, ob man das irgendwie heutzutage noch kennt, Seiten komplett ohne CSS, wie die aussehen.
Die Standard-Styles von den Browsern sind ja da durchaus interessant.
Genau, vielleicht noch eine kleine Ausschweifung an der Stelle.
Was man da dann sieht und was viele Seiten nicht implementieren, beziehungsweise rausoptimieren, viele CSS-Frameworks, ist der Visited-Status von Links.
Ich weiß nicht, Konstantin, setzt du das ein, Visited?
Tatsächlich inzwischen eigentlich kaum noch.
Ja, früher hat man das irgendwie, eben zu Zeiten, als es noch nicht viel CSS gab und alles eigentlich schwarz-weiß war, hat man irgendwie immer geguckt, dass die Links schön aussehen.
Das war so das Ding.
Aber heute, ja, Visited eigentlich tatsächlich kaum noch.
Ja, und Active, finde ich, wird auch viel zu selten verwendet.
Also Visited, ich weiß nicht, ob es jeder weiß, ich erkläre es nochmal kurz, Visited sind Links, auf denen ich schon mal war, also die ich irgendwie schon mal geklickt habe.
Aber ich glaube, das wird tatsächlich auch gemacht, ich muss gar nicht auf den Link selbst geklickt haben, sondern ich muss nur das in meinem Browser-Verlauf drin haben, dass ich da schon mal drauf war auf der Seite.
Und Active ist genau der Zustand in dem Augenblick, wo ich gerade die Maustaste runterklicke.
Das ist auch was, was ich finde, was viel zu selten gemacht wird, weil damit, ich finde, es macht einem ein gutes Gefühl, wenn man gerade sieht, ich klicke da jetzt gerade drauf, der Button wird gerade reingedrückt, der Link wird irgendwie gerade, der verändert sich, weil ich gerade drauf drücke.
Das hat Facebook in seinem Redesign, was jetzt gerade ganz neu ist, irgendwie auch ganz nett gemacht.
Leider nicht an allen Stellen, man sieht schon, dass da viele Teams am gleichen Interface arbeiten.
Ist leider nicht ganz konsistent, aber ich finde es cool, weil da drückt sich, glaube ich, der Hintergrund von dem Button.
Ich muss gerade noch mal kurz gucken, bevor ich jetzt Quatsch erzähle.
Ja, also während du guckst, vielleicht noch ein kurzer Einschub, weil du gerade gesagt hast, Webseiten ohne CSS gibt es nicht mehr.
Man kann in Firefox zumindest, wenn man auf Alt klickt, dann kommt dieses Menü wieder, Datei bearbeiten Ansicht, was ja jetzt standardmäßig versteckt ist, kann man auf Ansicht, Webseitenstil, kein Stil klicken.
Und dann sieht man die Webseite tatsächlich so, wie Gott sie schuf, ohne CSS.
Und ich mache das tatsächlich ganz gerne, wenn ich was komplett neu entwickle, dass ich mir die Seite in dem Zustand mal anschaue.
Und das hat jetzt nicht mit Accessibility unbedingt was zu tun, sondern eigentlich eher so in Richtung SEO.
Man sieht da, wie das Dokument aufgebaut ist und sieht, ob man semantisch das Ganze sinnvoll strukturiert hat.
Und das schadet auf jeden Fall nicht, das mal so zu sehen, wie es zum Beispiel auch irgendwelche Crawler oder irgendwelche anderen Clients, die nur Textbasiert sind, wie die das sehen.
Finde ich immer ganz nett, das mal so anzuschauen.
Gibt es wahrscheinlich auch in Chrome, den habe ich jetzt gerade nicht offen, kann ich nicht gucken, aber bin ich mir sicher, dass es da auch funktioniert.
Ja, du hast mir jetzt quasi schon was vorbeggenommen, aber das macht nichts.
Es kommt nämlich am Ende tatsächlich nochmal genau der Tipp, also von wegen nur SEO.
Nein, dass es für viele Sachen ist, kann es gut sein.
Was ich jetzt gerade nachgeschaut habe, ist, ich weiß nicht, ob das jeder mitbekommen hat, viele mögen ja auch Facebook nicht.
Ich mag es eigentlich auch nicht mehr, aber ich finde ganz interessant gerade, was die so layoutmäßig so machen, weil die haben jetzt gerade ein Redesign, zumindest die Desktop-App oder die Desktop-Web-App wurde redesigned.
Und da haben die das so gemacht mit dem Active-Status.
Also der Klassiker ist, ich habe da ganz viele Icons, auf die ich klicken kann und die kriegen eine Background-Color oder die werden gehighlighted, wenn ich drüber hover und wenn ich draufklicke, dann wird die Farbe geändert und der Hintergrundfarbe, der Hintergrundrahmen, wenn man so möchte, das sind oft Kreise, nicht alle.
Manche sind rechteckig, manche sind Kreise, aber jetzt in dem Fall habe ich einen Kreis, also Icon mit Kreis förmig im Hintergrund, wird dann ein bisschen kleiner.
Also die Farbe ändert sich und wird ein bisschen kleiner und das gibt einem so ein Gefühl, als ob man jetzt was reingedrückt hat.
Und das finde ich eigentlich immer ein ganz, ganz gutes Gefühl, wobei das jetzt, ich weiß nicht, hat das jetzt was mit Accessibility zu tun, kann man jetzt drüber streiten, aber wir sind ja gerade ein bisschen ausgeschweift.
Wir waren ja eigentlich bei Farben gerade und wenn wir schon bei Farben sind, dann gibt es noch einen weiteren Punkt zu den Farben, nämlich verständlich ohne Farbe.
Also erst habe ich gesagt, ihr achtet auf eure Farben, also achtet auf eure Kontraste, wobei das nicht unbedingt Farben sein muss, kann ja auch schwarz-weiß sein.
Jetzt sage ich, es soll aber auch ohne Farbe verständlich sein.
Um da mal ein Beispiel zu bringen, ist, es gibt oft Seiten, die Fehlermeldungen anzeigen, beispielsweise bei Formularen.
Ich habe irgendwie was Falsches eingetippt oder ich habe ein Feld leer gelassen oder da ist irgendwie, keine Ahnung, ich habe Penis reingeschrieben, es hätte aber Vagina drinstehen müssen oder so.
Genau, und dann schicke ich das ab und dann sagt mir das Map, du hast hier einen Fehler.
Wenn ich jetzt zum Beispiel hingehe und dann das Feld einfach nur rot um Rande zum Beispiel, also das Eingabefeld, dann kann unter Umständen sein, dass ich das nicht erkenne, ich als jemand mit Rot-Grün-Schwäche, also als Rot-Grün-Schwächling habe ich jetzt gerade mal erfunden,
dass ich das nicht erkenne, weil, naja, Rot um Randen, vielleicht ist das gerade das Rot, das ich irgendwie schlecht sehe und dann fällt mir gar nicht auf, dass da irgendwie jetzt ein Fehler ist oder, naja, steht irgendwo, es ist ein Fehler aufgetreten, aber ich sehe dann gar nicht unter Umständen, wo.
In dem Beispiel würde sich dann anbieten, vielleicht noch ein kleines Achtung-Icon oder sowas nebendran zu tun, damit ich auf jeden Fall sehe, wo jetzt irgendwie gerade ein Problem vorliegt, weil das funktioniert im besten Falle, also das sollte natürlich auch rot sein, aber das funktioniert auch, wenn es nicht rot ist, weil ich sehe, was da passiert.
Genau, das ist eine Sache, das ist total eigennützig für mich, weil ich tatsächlich schon öfter an den Fall gestoßen bin, dass das Farbsehen in einer gewissen Qualität vorausgesetzt wird, die ich dann nicht liefern kann.
Wobei ich glaube, meine Rot-Grün-Schwäche ist noch relativ schwach im Vergleich zu dem, was für andere Farbfehlsichtigkeiten es noch so gibt.
Also da gibt es einiges und es gibt da, soweit ich weiß, auch interessante Tools mittlerweile in Browsern integriert, wo man sich die Seite dann entsprechend bestimmter Farbfehlsichtigkeiten anzeigen lassen kann.
Es gibt da auch Tools.
Also das ist auf jeden Fall echt interessant, weil man sich da als durchschnittlich Sehender natürlich überhaupt gar keine Gedanken drüber macht und ich meine, kann man jetzt auch niemandem vorwerfen, weil klar, man weiß ja gar nicht, was für Betroffene überhaupt wichtig ist.
Also das jetzt, wie du das jetzt erzählst, auf Basis deiner Rot-Grün-Schwäche ist schon interessant, weil man sich da vorher überhaupt keine Gedanken drüber macht.
Ja, ich biete mich da auch immer an. Also ich bin auch immer der, der meckert, wenn er was bei anderen sieht, was sie gebaut haben, wo ich dann sage, naja, okay, ich kann das jetzt an der Stelle, wie soll das denn funktionieren?
Und ich kann es nachvollziehen, dass es sehr schwer ist, sich in was reinzuversetzen, ein Problem, was man selbst nicht hat.
Deswegen, also falls jemand seine Seite mal auf Rot-Grün-Schwäche testen will, da stelle ich mich auch gern zur Verfügung.
Kann man mich gerne irgendwie bei Twitter oder so anschreiben.
Genau, nächstes Thema, falls du dazu keine Frage mehr hast, gehe ich weiter zu, naja, ich habe auf Englisch write descriptive links.
Link-Texte, die erklärend sind zum Inhalt, versuche ich das jetzt mal so zu übersetzen.
Was ist damit genau gemeint?
Es hilft einem zum Beispiel, wenn ich jetzt im Screenreader unterwegs bin, gar nichts, wenn ein Link heißt, klick hier oder mehr oder so.
Vor allem, wenn dieser Link mehrfach auf der Seite auftaucht, also ich habe zum Beispiel eine News-Seite mit ganz vielen angerissenen News-Artikeln, also kurzen Anreißern, wo hinter jedem steht mehr als Link-Text.
Dann, naja, das sagt mir erst mal gar nichts.
Also man sollte so multiple, also mehrfach denselben Link-Text auf der Seite sollte man vermeiden und man sollte im besten Falle sagen, was erwartet mich denn jetzt ganz genau?
Also ich kann natürlich einen mehr Link anbieten, wenn er sich aus dem visuellen Kontext erschließt, ist das auch für den Sehenden okay.
Aber ich sollte vielleicht noch einen unsichtbaren Text, also einen für die Sehenden unsichtbaren Text mit reinpacken, der dann sagt, naja, wo gehe ich denn jetzt genau hin?
Also ich erinnere mich auch, dass ich mal sowas in eine Mail-Liste eingebaut habe von einer Mail-Applikation, wo dann der Betreff nochmal vorgelesen wurde.
Also zur Mail-Doppelpunkt-Betreff, dann war das irgendwie eindeutig.
Also überlegt euch genau, was ihr in eure Links reinschreibt.
Also im Falle von Artikeln, was du jetzt gesagt hast, wäre dann zum Beispiel die Überschrift nochmal aufgreifen und sagen, den Artikel so und so weiterlesen zum Beispiel.
Genau, genau.
Und wenn ich nicht komplett falsch liege, dann liegt das daran, weil Screenreader-User oftmals gar nicht den kompletten Content durchnavigieren, sondern wirklich von Link zu Link zum Beispiel springen, um zu gucken, wo man hin, wo man landen kann. Ist das richtig?
Korrekt, also es gibt da verschiedene Arten, rumzuspringen, rumzunavigieren im Content.
Also ich meine, der Klassiker ist, das kannst du auch mit deiner Tastatur ganz normal machen.
Wenn du Tab drückst, dann siehst du schon, wo du hinspringst, nämlich zu allen interaktiven Feldern, was in dem Fall auch Links und Buttons sind.
Ja, also genau.
Da siehst du dann auch schon.
Aber nur dann, wenn entsprechend auch ein Style gesetzt ist, das ist wieder genau der Knackpunkt.
Genau, und nur dann kann ich es auch sehen. Also als Sehender hilft mir das auch nur, wenn da entsprechend der Fokus-Style gesetzt ist. Aber da sehe ich dann auch schon, wie ich da rumspringe.
Also Screenreader-Nutzer oder allgemein die Screenreader bieten normalerweise auch noch weitere Möglichkeiten zum Springen auf den Seiten an.
Also ich bin mir jetzt nicht sicher, ob ich alle weiß. Ich kenne aber noch eine weitere und zwar, was auch beliebt ist, ist zu Überschriften zu springen.
Also ich kann, also ich glaube, da kann man dann sogar auch auswählen, nur zu Überschriften, erster Ebene, zweite Ebene und so weiter. Aber von Headline zu Headline springen ist auch beliebt.
Und dafür gibt es Shortcuts, die die Screenreader bereitstellen.
Genau, also es gibt da verschiedene Möglichkeiten oder es gibt sehr viele Möglichkeiten, wie navigiert wird.
Von daher ist erklärende Texte immer, sind immer eine gute Idee.
Also ich glaube, also die meisten Sachen, die ich hier aufgreife, sind für alle eine gute Idee und nicht nur für die einzelne Gruppe.
Weil ich finde ja, Accessibility ist in den meisten Fällen auch einfach Usability.
Also es geht nicht nur darum, bestimmte Leute nicht auszuschließen, sondern das ist zwar auch sehr wichtig, aber der normale Nutzer in Anführungsstrichen, der ohne Einschränkungen irgendwie was benutzt, hat normalerweise in vielen Fällen auch was davon, wenn diese Best Practices umgesetzt werden.
Genau, der nächste Punkt, Video und Audio sollten Texte haben.
Also man sollte im besten Falle sollte es für Video und Audio Textdescriptions geben.
Jetzt fällt mir gerade das Wort nicht ein, Untertitel.
Genau.
Das gibt es bei Video, wenn ich es richtig weiß, bei HTML Video gibt es dafür sogar einen Standard.
Das habe ich jetzt selbst noch nie implementiert, aber dafür gibt es was, auch mit Timecodes.
Was wir jetzt nicht machen...
TTML glaube ich, oder?
Ja.
Moment, was hast du gesagt nochmal?
TTML.
Ja, ich glaube, das war es.
Habe ich im Zusammenhang mit Untertiteln schon mal gehört.
Genau, es gibt auf jeden Fall einen Standard, wie gesagt, implementiert habe ich den noch nicht.
Ist auf jeden Fall eine gute Sache und zum Beispiel so Plattformen wie YouTube, die bieten ja mittlerweile auch schon Auto-Captioning an, also die versuchen automatisch herauszulesen.
Aber wie gesagt, dafür braucht man dann auch wieder einen großen Machine-Learning-Algorithmus, der irgendwie den Text erkennt.
Aber sowas ist, glaube ich, mittlerweile sogar erschwinglich.
Gibt es auch für Podcasts, habe ich schon gehört.
Ausprobiert auch noch nicht, aber ist auf jeden Fall eine gute Ergänzung.
Also was dahinter steckt ist, der Content sollte halt von möglichst jedem begriffen werden können.
Das heißt, jemand, der gehörlos ist, könnte dann in dem Fall auch von dem Content profitieren.
Also gerade von Audio-Inhalten.
Ein Punkt, der mir am Herzen liegt, weil ich da schon oft Grabenkämpfe ausführen musste, ist Pinch und Zoom.
Also die Zoom-Funktionalität auf Seiten wird gerne mal ausgeschaltet, um nervige Browser-Bugs auf mobilen Geräten zu umgehen.
Weil man da immer mal wieder, also es gab schon einige Browser-Bugs in der Vergangenheit oder Ungenauigkeiten, Unschärfen, die man mit Zoom-Deaktivieren los wurde.
Aber ich kann davon auf jeden Fall nur abraten, weil jeder nimmt das Web auf eine andere Weise wahr.
Wenn ich die Möglichkeit jemandem nehme, eine Seite zu zoomen und damit meine ich jetzt explizit mobile Geräte, also die, wo ich sowieso, naja, die Pinch- und Zoom-Geste irgendwie so was ganz Normales ist.
Da sollte das auf jeden Fall funktionieren.
Ich bin mir jetzt nicht sicher.
Habe ich gerade mal spaßeshalber nebenher gecheckt.
Auf unserer Seite haben wir tatsächlich nicht deaktiviert, zum Glück.
Also man kann da lustig reinzoomen.
Aber ich erinnere mich auch tatsächlich selber, dass ich sowas schon eingesetzt habe.
Ist allerdings jetzt auch schon einige Jahre her, dass das nötig war.
Da war das mit den Mobilgeräten auch noch nicht so weit verbreitet.
Und da gab es tatsächlich noch diverse Bugs.
Aber ich würde fast behaupten, mag natürlich sein, dass ich da falsch liege, dass man so einen Hack heute gar nicht mehr braucht.
Und wenn, dann macht man was falsch, dann sollte man überdenken, was man da gerade tut.
Ja, ich glaube auch.
Also ich habe jetzt in letzter Zeit das auch nicht mehr so häufig gesehen.
Immer dann, wenn ich es gebraucht habe, hat es funktioniert.
Ich hoffe, dass sich das jetzt vielleicht auch mal durchgesetzt hat.
Wobei ich da vielleicht noch eine Einschränkung bringen möchte.
Also jetzt aus heutiger Sicht, wenn man jetzt eine Web-App baut, die sich so verhalten soll wie eine native App.
Also die Progressive Web-App, quasi die Twitter-Web-App.
Da kann ich nicht zoomen.
Und das ist vielleicht sogar auch okay so.
Dann möchte, dann sollte die aber so gebaut sein, beziehungsweise, ja, sollte der Browser, den ich dafür verwende, so sein,
dass wenn ich die Systemschrift anpasse in der Größe oder ich glaube in Firefox auf Android kann ich auch im Browser die Schriftgröße anpassen,
dann sollte die sich da in jedem Falle auch vergrößern oder verkleinern.
Also die Möglichkeit gibt es auch, weil ich meine, nicht jede App kann es oder normalerweise das Verhalten von Apps, von native Apps auf dem Mobilgerät ist ja nicht, dass ich da zoomen kann.
Also nur bestimmte Sachen, also beispielsweise Bilder oder so, wenn ich die da habe, aber alles andere, das Interface lässt sich ja normalerweise nicht zoomen.
Aber dann muss irgendwie die Möglichkeit gegeben sein, dass ich die Schriftgröße über das System verändern kann, was bei native Apps normalerweise, wenn die vernünftig gebaut sind, der Fall ist.
Und wie gesagt, in Firefox für Android, das ist mein Hauptbrowser, mein mobiler, da geht das auch.
Also da kann ich auch die Schriftgröße verändern und dann verändert sich es auf der Seite.
Also das sollte ich auf keinen Fall irgendwie unterbinden, dass das geht.
Also falls es wirklich sehr App-mäßig sein sollte, dann auf jeden Fall die Möglichkeit zulassen, dass der Text vergrößert wird.
Genau, dann kommen wir auch schon zum letzten Punkt von den Sachen, die ich empfehle.
Ich habe jetzt viele, viele Dinge genannt.
Manchmal kommt man an den Punkt, wo man nicht alles so umsetzen kann, wie es die Best Practices sind, weil ich habe hier irgendwie ein Framework vorgegeben und ich darf da die Elemente nicht verändern.
Und es müssen jetzt alles Spans sein und ich darf keine Ahnung, keine Links nehmen oder keine Buttons oder keine Headlines oder irgendwie sowas.
Für den Fall und eigentlich auch nur für den Fall gibt es dann, oder in den meisten Fällen nur für den Fall, gibt es Y-Area, also Web Accessibility Initiative, Accessible Rich Internet Applications.
Da gibt es eine Menge Standards, beziehungsweise hauptsächlich funktioniert das in Attributen und teilweise auch ein bisschen mit JavaScript, womit ich dann den Elementen wieder Semantik geben kann, auch wenn sie diese quasi verloren haben.
Also ich kann damit zum Beispiel mir ein Konstrukt bauen aus Spans, das wieder so funktioniert oder sich so verhält tatsächlich wie ein Button.
Also oder das zumindest vom Screenreader so erkannt wird wie ein Button.
Ich kann damit einem Diff eine Headline-Ebene geben oder sowas, wenn das unbedingt sein muss.
Aber eigentlich sollte man das nur im allerschlimmsten Fall, wenn ich gar nichts an der HTML-Semantik, in der Original-HTML-Semantik verändern darf, einsetzen.
Aber da gibt es einige interessante Sachen, die man damit machen kann.
Da komme ich vielleicht auch noch kurz auf den Endgegner zu sprechen.
So das Schwierigste, was ich mal versucht habe, Screenreader Accessible zu machen, war ein Suchfeld mit Autocomplete und Suggest.
Wer dafür Best Practices hat, der darf sich auch gerne mal bei mir melden.
Ich habe mir die Zähne daran ausgebissen, es hat dann am Ende geklappt, sodass dann auch irgendwie halbwegs vernünftig was vorgelesen wurde und auch die Vorschläge da waren.
Aber das fand ich dann schon relativ schwierig.
Da kommt man dann auch um ARIA-Attribute nicht drumherum, wenn man das vernünftig machen will.
Zumindest bin ich nicht drumherum gekommen.
Vielleicht gibt es einen coolen Weg.
Dann bitte auch mal in die Kommentare.
Genau, so und dann bin ich mit den Best Practices, die man machen soll, schon am Ende.
Würde jetzt aber noch ein paar Tests, die man machen kann, um seine Seite zu testen, noch erzählen.
Und zwar der erste ist, also so Dinge, die man einfach mal ausprobieren soll.
Der erste ist, einfach mal die Seite auf 200% zoomen im Browser und gucken, was passiert.
In vielen Fällen funktioniert es, je nachdem, wie man sein CSS verwendet hat.
Falls da was kaputt geht oder irgendwelche Sachen dann unsichtbar werden, dann sollte man vielleicht da an der Stelle nochmal nachjustieren.
Der nächste ist Check Keyboard Navigation, also einfach mal mit der Tastatur versuchen zu, nur mit der Tastatur versuchen zu navigieren.
Die Maus einfach mal links liegen lassen oder rechts, je nachdem, ob ihr Links- oder Rechtshänder seid.
Einfach mal nur versuchen, mit der Tastatur durch eure Seite zu navigieren und zu schauen, wie kommt ihr zurecht.
Seht ihr alles, seht ihr den Fokus, seht ihr, was gerade aktiv ist, könnt ihr alles, könnt ihr jedes Menü zum Beispiel auch mit Enter oder mit Leertaste öffnen.
Funktioniert die Escape-Taste, kann man damit tatsächlich auch geöffnete Dinge schließen und so weiter.
Das nächste, das ist hart, das ist anstrengend und das habe ich auch mal versucht für einen Tag durchzuhalten.
Ich habe es, glaube ich, nicht ganz geschafft, nämlich einen Screenreader benutzen und den Monitor dabei tatsächlich ausschalten.
Weil nur, wenn ich nicht sehe und nur höre, kann ich auch wirklich merken, funktioniert meine Seite jetzt tatsächlich mit Screenreadern oder nicht.
Ist jede Funktion, die ich irgendwie haben will, auch, wird die mir auch vernünftig vorgelesen, sodass ich sie benutzen kann.
Da gibt es zum Beispiel, Voice-Over ist, glaube ich, auf Apple-Geräten, ich glaube, auf dem Mac ist es auch, Voice-Over ist einfach schon mit dabei.
Windows hat in den aktuellen Windows 10-Versionen auch schon einen Screenreader mit eingebaut.
Der heißt auf Deutsch, wenn man Windows auf Deutsch hat, Sprachausgabe, glaube ich, einfach, kann man ganz einfach anschalten.
Es gibt natürlich auch noch, was viele benutzen, NVDA, kostet nichts, ist Open-Source, soweit ich weiß, könnt ihr euch installieren, ist für Windows.
Auf Android ist auch schon was mit eingebaut, da heißt das...
Wollte ich gerade sagen, Talkback auf Android.
Talkback, genau, danke.
Genau, habe ich nämlich, ich habe gerade kurz mal nebenher gegoogelt, weil ich mir nicht mehr sicher war, wie man es aktiviert.
Beide Lautstärketasten gleichzeitig drücken für drei Sekunden, dann wird es automatisch angeschaltet.
Oder man kann es natürlich auch in den Geräteeinstellungen aktivieren.
Habe ich tatsächlich auch schon gemacht, um es zu testen, weil ich wollte nämlich gerade sagen, wenn man jetzt irgendwie die Ausrede hat,
dann muss ich da erst Software installieren und einrichten und das dauert viel zu lang.
Also, wenn man ein Android-Gerät hat oder wie du auch gerade gesagt hast, auch iOS-Geräte, es gibt eigentlich keine Ausrede, das nicht mal zumindest zu probieren, spaßeshalber.
Ja, dabei noch eine kleine Warnung.
In einigen Fällen, also gerade bei Touch-Geräten, verändert sich die Bedienung durch Anschalten des Screen-Readers häufig auch.
Da muss man dann, also der kleine Tipp, falls Scrollen nicht mehr geht, versucht es dann mal mit zwei Fingern.
Falls irgendwas antippen nicht mehr geht, versucht es mal mit einem Doppeltab.
Auf jeden Fall, wie gesagt, die Bedienung kann sich ein bisschen verändern dadurch, weil, naja, wenn ich zum Beispiel mit dem Finger über das Display gehe,
möchte ich damit nicht gleich dann Sachen aktivieren, weil eventuell nutze ich den Screen-Reader ja, weil ich gar nichts sehen kann.
Also muss ich erst mal vorgelesen bekommen, was ist denn an der Stelle irgendwie gerade unten drunter.
Also deswegen verändert sich da die Bedienung.
Was ich sehr interessant finde, ich weiß nicht genau, wie das bei iOS ist, aber bei Android, glaube ich, gibt es auch einen Sound für Scrollen.
Also der mir wirklich in Form von einem Ton, der immer höher oder tiefer wird, sagt, wie weit bin ich denn jetzt schon Richtung Ende gescrollt?
Hast du das gerade an bei dir, Konstantin?
Kannst du das mal kurz testen?
Nee, ich habe das nicht angemacht, aber ich, ja, ich habe das auch schon gehört, ja.
Also das ist wirklich verrückt, da wünsche ich mir manchmal, ich wüsste das, ich hätte das auch so, weil, weil ich dann einfach hören kann, ohne hinzugucken, wie weit kann ich jetzt noch runterscrollen.
Das ist natürlich bei Infinite Scrollen ein bisschen witzlos, aber ja.
Genau, so.
Ich habe es jetzt gerade mal angemacht, vielleicht kann ich es kurz demonstrieren.
Man hört es aber, glaube ich, nicht.
Nee, schade, lässt sich jetzt nicht so wirklich demonstrieren, aber wir glauben es dir jetzt alle.
Ja, genau.
Einfach in den Einstellungen mal anschalten und dann hilflos sich melden, weil man nicht mehr weiß, wie man es wieder ausschalten kann.
Genau, nächster Punkt und vorletzter Punkt damit zum Testen ist, in Chrome gibt es schöne Accessibility Audits.
In Chrome generell, was ich empfehlen kann, ist da in den DevTools der Audit-Tab.
Da kannst du auch noch ganz viele andere Sachen testen, also Performance, Progressive Web App und keine Ahnung und so weiter.
Aber eben auch Accessibility, da steht auch dann schon direkt dabei, nur weil du jetzt in Chrome im Accessibility Audit 100 Punkte hast, heißt das noch lange nicht, dass deine Seite accessible ist.
Man kann da auch ganz gut und clever drum herum arbeiten.
Aber es gibt einem schon eine ganz gute Vorstellung davon, was man denn da eigentlich gemacht hat.
Also das erinnert, das sagt einem zum Beispiel, du hast hier jetzt mehrfach den gleichen Link-Text verwendet oder dein Kontrast ist hier an der Stelle nicht so gut.
Also diesen Audit über eine Seite drüber laufen zu lassen, ist in jedem Fall eine gute Sache.
Und es ist einfach nur ein Häkchen mehr bei den anderen Audits, die man sowieso drüber laufen lassen sollte, um zu gucken, ob die Performance passt oder SEO oder sowas.
Auf jeden Fall eine gute Idee, das mal zu machen und das kostet eigentlich nichts, außer irgendwie eine halbe Minute Zeit.
Und der letzte Punkt ist, das hat der Konstantin vorhin schon vorweggenommen, einfach mal CSS ausschalten.
Einfach mal CSS ausschalten und anschauen, wie sieht denn die Seite dann aus?
Gibt die Struktur noch Sinn, die ich da habe?
Kann ich irgendwie, ist irgendwie noch alles da, was da sein soll?
Ist die Reihenfolge immer noch gut?
Könnte ich das im Notfall so immer noch benutzen?
Ich finde das ein ganz, ganz guter Test, um rauszufinden, habe ich denn jetzt hier kompletten Bullshit gemacht?
Ist meine Semantik vielleicht auch irgendwie gut oder habe ich da irgendwie noch Fehler?
Habe ich denn die richtigen Elemente verwendet für mein Formular oder ist das dann jetzt irgendwie alles ganz komisch geworden oder so,
weil ich irgendwelche komischen Formular-Widgets verwendet habe, wo ich gar nicht genau weiß, was da unten drunter tickt oder so?
Also einfach mal CSS ausschalten, das öffnet einem die Augen.
Damit bin ich am Ende mit den Tests und wollte noch darauf hinweisen, alles, was ich jetzt heute gesagt habe oder fast alles, was ich gesagt habe,
ist auch auf meinem Accessibility-Cheat-Sheet zu finden.
Den Link habt ihr dann später in den Shownotes.
Das habe ich vor eineinhalb Jahren oder vor knapp zwei Jahren habe ich das mal gemacht, weil ich der Meinung war,
naja, so diese Basissachen, die sollte es irgendwie in leicht einfach konsumierbarer Form mal irgendwie geben.
War da für mich auch eine schöne Gelegenheit, mal mit CSS-Grid ein bisschen rumzuspielen und mal mit merkwürdigen Einheiten,
sowas wie Zentimeter habe ich da verwendet.
Also ihr könnt euch auch gerne mal den Code anschauen, den gibt es auch auf GitHub.
Ja, das ist so ein bisschen meine Spielwiese gewesen.
Das Ding hat auch einen Dark-Mode und ja, einfach mal angucken.
Das ist was, was man sich auch schön ausdrucken kann und irgendwie neben dem Rechner hängen kann.
Da sind die Sachen in ganz kurz und knapp drauf.
Und noch ein bisschen Selbstbeweihräucherung an der Stelle.
Das hat damals auch ein bisschen Aufmerksamkeit bekommen über Twitter und das ist auch bei Reddit empfohlen worden.
Also gar nicht mal von mir, sondern von anderen Leuten.
Da waren ein paar Leute drauf.
Ich sage jetzt mal keine Zahlen, aber das haben ein paar Leute gesehen damals.
Ja, genau.
Also wie gesagt, wenn ihr die ganzen Tipps nochmal zusammengefasst haben wollt, die könnt ihr euch auf dem Cheatsheet anschauen.
Das gibt es auf meiner Homepage und das in den Shownotes.
Ja, damit bin ich mit meinem Thema am Ende. Hast du noch Fragen, lieber Konstantin?
Nee, also Fragen habe ich so direkt jetzt keine mehr dazu.
Aber ich fand es sehr interessant, das ganze Thema.
Man beschäftigt sich nämlich, wenn man nicht muss, leider auch nicht von sich aus damit.
Es ist ja so, dass Behörden-Websites müssen ja gesetzlich accessible sein.
Und wenn man jetzt nicht gerade Behörden als Auftraggeber hat, dann wird man nicht dazu gedrängt, sich damit zu beschäftigen.
Und das ist eigentlich sehr schade.
Also eigentlich sollte man versuchen, sich eben genau diese Basics, das ist jetzt kein Hexenwerk, was wir jetzt heute gelernt haben, genau diese Basics auf jeden Fall mal drauf zu schaffen und zu versuchen, die auch wirklich in jedem Projekt umzusetzen.
Egal, ob das jetzt extra bezahlt wird oder nicht.
Aber so für die Große, wenn man in die Tiefe gehen möchte und das Ganze richtig gut machen möchte, dann ist, glaube ich, halt echt das Problem, wer bezahlt das?
Wenn ich den Mehraufwand nicht gezahlt bekomme, dann kann ich das aus reinem Gutwillen natürlich tun und da extra Zeit investieren, aber wer macht das schon?
Also da müsste das Bewusstsein geschaffen werden, nicht nur bei Behörden, sondern auch bei Firmen einfach generell und bei Auftraggebern, dass man sich dem Thema Accessibility annimmt, weil es ist wichtig.
Dazu habe ich noch zwei Punkte, ganz kurz. Also Behördenseiten, nur weil die das sein müssen, heißt das noch lange nicht, dass die das sind.
Gut, klar.
Also ich habe mir auch schon mal überlegt, es wäre eine unmoralische Art, Geld zu verdienen, wäre Behördenseiten sich zu suchen, davon gibt es eine Menge.
Also es müssen ja nicht unbedingt nur Behörden sein, sondern alle, die irgendwas mit Öffentlichkeit, mit öffentlichem Dienst und so zu tun haben.
Also zum Beispiel auch Asten oder sowas von Universitäten und so, die müssen das eigentlich auch machen.
Wer unmoralisch unterwegs sein will, ein bisschen Geld verdienen will, der schreibt die einfach an, von denen er gefunden hat, dass sie nicht zugänglich sind und sagt, naja, ich kann euch das zugänglich machen, mir müsste es übrigens gesetzlich sein.
Oder man kann sich da noch viel schlimmere Sachen ausdenken, ich will jetzt niemanden zur Erpressung ermutigen, aber es wäre für die Sache vielleicht eine gute.
Gut, als Betroffener kann man es abmahnen, also ganz klar, wenn ich als Betroffener da in die Röhre schaue, also das war jetzt auch gerade wieder, jetzt kommen wir doch nochmal kurz zu Corona, ist jetzt gerade so ein Thema Gehörlose, dass die Informationen bekommen in diesen Krisenzeiten.
Und da ist es ganz häufig so, dass obwohl es eigentlich sein müsste, solche Informationen nicht mit Gebärdensprachdolmetscher übertragen werden.
Und das geht halt eigentlich nicht, wenn es gesetzlich vorgeschrieben ist.
Oder es ist halt auf irgendwelchen Kanälen, man setzt dann voraus, die Leute können das ja online nachschauen, das setzt jetzt wiederum voraus, dass jeder Gehörlose auch Internetzugang haben muss.
Was einfach nicht sein kann, dass man das voraussetzt.
Auch heute nicht.
Ja, da gab es auch, weiß ich nicht, ich glaube letztes Jahr einen Fall in den USA mit einer Pizzalieferkette, die verklagt wurde von einem Blinden, der gesagt hat, ich kann keine Pizza bestellen bei euch auf der Webseite.
Und da ist, glaube ich, das hat ziemlich viel Aufruhr gesorgt, weil die haben nämlich verloren den Prozess und ich glaube, die mussten am Ende relativ viel Geld bezahlen.
Da ist es mal so ein bisschen in die Medien auch gekommen, so eine Geschichte.
Aber ich habe noch einen kleinen Tipp, was man machen kann.
Also wenn man jetzt sagt, naja, ich habe jetzt, ich kann es mir jetzt nicht leisten, da immer drauf zu gucken oder wenn ich es nicht bezahlt kriege, dann habe ich vielleicht keine Zeit dafür.
Ich empfehle an der Stelle, um so ein paar Basics irgendwie richtig zu haben, nutzt ein Framework dafür, wo das schon fest mit eingebaut ist.
Also zum Beispiel, also ich weiß jetzt nicht, ob ich jetzt sagen würde, Bootstrap ist ein Accessible Framework.
Aber bei Bootstrap wurde schon an vielen Stellen drauf geschaut, dass das auch mit der Tastatur vernünftig bedienbar ist und dass es Screenreader Texte gibt.
Man muss es nur noch richtig verwenden.
Aber in der Doku ist es meistens schon mit drin bei verschiedenen Komponenten.
Ich hatte jetzt gerade heute die Dropdown Komponente zum Beispiel.
Die ist, wenn man sie richtig so einbaut, wie Bootstrap das vorgibt, ist sie Accessible.
Also für Screenreader wunderbar zu benutzen, als auch für Tastatur.
Und im Zweifel, wenn ich jetzt kein Bootstrap einsetzen will, sondern irgendwie was eigenes, dann baut es doch einfach da mal ein.
Also ich meine, es ist, glaube ich, nicht zu viel verlangt, sich mal einen Tag vielleicht hinzusetzen, falls man ein eigenes Framework hat und sich mal versuchen, genau die Stellen rauszusuchen und am eigenen Framework das dann einfach mal zu verbessern.
Dann habe ich einmaligen Aufwand und muss das einfach in Zukunft nur noch Copy-Pasten.
Natürlich kann ich nicht alles mit Framework und Copy-Paste erschlagen, aber die schlimmsten Sachen vielleicht schon.
Oder zumindest habe ich dann Stellen im Code, die mich daran erinnern, ah ja, wenn ich da das jetzt so mache, dann muss ich jetzt nur noch hier das eine machen und dann bin ich schon viel zugänglicher.
Also in dem Fall würde ich auf jeden Fall sagen, versucht es mal mit Framework.
Das wird euch auf jeden Fall helfen und Arbeit abnehmen.
Da gibt es nicht viele Frontend-Frameworks, wo ich sagen würde, dass sie wirklich accessible sind oder dass da viel drauf geachtet wurde.
Ja, aber ich glaube, irgendwo bei GitHub gibt es, muss ich den Link nochmal raussuchen, packen wir vielleicht auch in die Shownotes, hat mal jemand sich die Mühe gemacht, so eine Tabelle aufzuschreiben, wo die ganzen Frameworks, die ganzen Frontend-Frameworks aufgelistet sind und wie die seiner Meinung nach Accessibility-mäßig dastehen.
Das ist vielleicht eine ganz gute Anlaufstelle.
Ja, damit wäre ich am Ende mit dem Thema.
Dann kommt jetzt das...
Das Geil-Teil.
Geil-Teil.
Yeah.
Und das Geil-Teil ist heute ganz kurz und knackig, ist eigentlich nur ein Link und es geht um einen Film von 1996, Space Jam.
Jetzt, je nachdem, wie unsere Altersgruppe verteilt ist, kennen den vielleicht manche gar nicht.
Das war ein Realfilm, gemischt mit Animationen, Michael Jordan in der Hauptrolle und die Looney Tunes, also Bugs Bunny, falls jemand mit Looney Tunes nichts mehr anfangen kann.
Ich weiß schon gar nicht mehr genau, um was es ging.
Ich habe den ungefähr 1996 auch zum letzten Mal gesehen.
Ich glaube, so toll war er gar nicht.
Aber, was für uns toll ist, es gibt die Webseite noch, spacejam.com, die Original-Webseite.
Da kann man mal drauf gehen und sich nochmal anschauen, wie Webseiten 1996 aussahen.
Alles schön mit großflächigen Hintergrundbildern gekachelt und grelle Farben.
Ein paar bewegte GIFs sind auch dabei.
Ganz wichtig, Frames natürlich.
Es funktioniert, glaube ich, an manchen Stellen schon nicht mehr so ganz, aber so im Großen und Ganzen existiert diese Seite noch.
Und das macht einfach mal Spaß, sich sowas mal wieder anzuschauen.
Und ich finde es cool, dass Warner Brothers, die für den Film verantwortlich sind, tatsächlich die Seite in all den Jahren, mittlerweile über 25 Jahre fast, knapp, online gelassen hat, dass man sich das anschauen kann.
Ein paar Veränderungen wurden wohl eingebaut, so Disclaimer-Links und so.
Die Seite läuft auch unter HTTPS, das war mit Sicherheit 1996 auch noch nicht so.
Aber so im Großen und Ganzen kann man da so ein bisschen einen Zeittunnel betreten.
Ja, kleiner Disclaimer an der Stelle von meiner Seite.
Ich kann sie bei mir gerade nicht öffnen, ich weiß nicht genau warum.
Vielleicht kann sie jemand anderes ja auch nicht öffnen, dann haben wir das gleiche Problem, warum auch immer.
Dann in die Wayback-Maschine, web.archive.org.
Ah, ja, genau. Gute Idee.
Ja, ich glaube, damit sind wir am Ende.
Ich glaube, dann sind wir heute schon am Ende.
Ja, es wird wohl noch eine Weile so weitergehen, wie ich die Sache einschätze, mit dem Remote aufnehmen.
Wir haben, glaube ich, heute irgendwie zwischendrin zweimal Probleme gehabt, mindestens mit Komplettaussetzern.
Du musst noch mal neue ansetzen, wird man wahrscheinlich im Schnitt nicht hören.
Aber so generell nimmt dieses Remote aufnehmen schon ein bisschen von der Dynamik raus.
Das ist ein bisschen schade.
Man kann einfach nicht mehr so aufeinander reagieren.
Aber ich hoffe, dass es trotzdem Spaß macht, zuzuhören und vor allem interessant ist.
Ja, das hoffe ich auch.
Und an der Stelle müssen wir natürlich noch mal einen kleinen Werbeblock einschieben, jetzt ganz ohne Jingle.
Bewertet uns bei iTunes oder bei deinem Podcast-Portal.
Bewerten, weitererzählen natürlich den Freunden bei Social Media teilen, wenn ihr sowas benutzt.
Gerne bei Twitter auch mal unsere Tweets zu der Folge retweeten oder so.
Da würden wir uns sehr drüber freuen.
Ja.
Ich glaube, wir müssen ein bisschen schimpfen mit den Hörern auch.
Wir haben das ja jetzt schon am Ende jeder Sendung gesagt und darum gebeten, dass auch Kommentare hinterlassen werden.
Wir haben genau einen Testkommentar bekommen, sogar ohne Inhalt.
Na doch, da stand Test drin.
Da stand doch Test drin.
Es war jedenfalls eine E-Mail-Adresse, die testen sollte, ob Wordpress das auch tatsächlich anerkennt.
Ja, jedenfalls, da müssen wir doch mal hier den Zeigefinger erheben und sagen, hey, kommentiert, bewertet.
Es darf ja auch Kritik sein.
Wir wollen ja nicht nur hören, ihr seid so toll und das ist der beste Podcast überhaupt.
Auch wenn er das ist.
Den Anspruch stellen wir ja auch gar nicht.
Ja, das ist selbstverständlich.
Aber wir akzeptieren auch gerechtfertigte Kritik und möchten einfach mal ein bisschen Feedback einholen.
Wir können uns nur verbessern, wenn man uns auch darauf hinweist, was wir besser machen können.
Jetzt könnte man natürlich annehmen, wenn wir kein Feedback und keine Kritik kriegen, dass vielleicht keiner uns zuhört.
Aber unsere Statistiken sagen was anderes, muss ich dazu sagen.
Außer das sind alles nur irgendwelche komischen Roboter, die von allen möglichen IPs auf der Welt unseren Podcast runterladen.
Also wir haben schon einige Hörer gehabt.
Das weiß ich auf jeden Fall aus der Statistik.
Und vielleicht meldest du dich mal.
Bitte melde dich.
Dich?
Also du, der einzige Hörer.
Du, der Hörer mit den 500 IPs.
Melde dich.
Melde dich bei uns.
Du kriegst dann auch ein Bier demnächst vielleicht.
Ja, so ein Sechserbier machen wir locker.
Oh, jetzt müssen wir jetzt für den ersten Kommentar gleich ein Sechserbier raushauen.
Ich hoffe nicht.
Das könnten wir doch eigentlich machen, oder?
Ich meine, das ist einer.
Das ist nur der Erste, der das kriegt.
Sonst, also das ist ja, kriegen wir schon hin.
Ich glaube, es ist jetzt.
Das wird sich eh keiner melden.
Warten wir es ab, warten wir es ab.
Dann gucken wir, was wir machen.
So machen wir es.
Ja, dann bin ich jetzt auch schon am Ende.
Ich bin auch am Ende.
Auch geistig.
Ist jetzt durch die ganze Technik jetzt auch ein bisschen spät geworden und irgendwie ist es anstrengend, der Alltag.
Auch wenn man denkt, man hat mehr Zeit, aber irgendwie auch doch nicht.
Gerade so mit Kind daheim ist doch irgendwie die Zeitaufteilung nicht so flexibel, wie man das gerne hätte.
Nun gut.
Wir machen so weiter, wie wir es jetzt gemacht haben und sehen uns nächste Woche wieder.
Bis dann.
Ciao.
Bis dann.