Accessibility Tests mit der Web Developer Toolbar Technikwürze 127
Wer Webprojekte auf Zugänglichkeit überprüfen möchte kann sich dabei von unzähligen Tools und Browsererweiterungen unterstützen lassen. Dass man einige solcher Tests auch schon sinnvoll mit der bekannten Web Developer Toolbar durchführen kann, besprechen Sylvia Egger und Sascha Postner.
Transkript der Folge
-
Einspieler Herzlich willkommen zu Technikwürze, eurem Design und Webstandard Podcast. Heute die Nummer hundertsiebenundzwanzig mit Sascha Postner und...
-
Sylvia Silvia Egger.
-
Einspieler Herzlich willkommen zu Technikwürze, eurem Design und Webstandards Podcast. Von und mit David Maciejewski.
-
Sascha Ja, heute, tendenziell eher ohne, David, denn wir sind zu zweit im virtuellen Skype-Studio. Hallo Silvia, schön, dass du da bist.
-
Sylvia Hallo Sascha.
-
Sascha Wir wollen heute mal ein, eine Sendung machen zum Thema Access, Accessibility Tests mit der Web Developer Toolbar. Zu, dem Thema hattest du ja auch im Webkrauts, Adventskalender schon einen Artikel veröffentlicht und ich hab dich, als Expertin dafür wahrgenommen. Stimmt das?
-
Sylvia Na ja, ich will es dann hoffen, ne?
-
Sascha Ich denke, das hoffen wir jetzt einfach alle. Ja.
-
Sylvia Ja, ich fand's so 'n bisschen schade. Ich wusste nicht, dass, beim Adventskalender doch mehr Platz gewesen wäre, ne. Weil ich hab nachher eher dann so von Leuten 'ne Rückmeldung bekommen, dass es alles zu knapp war, ne. Weil ich hab mir drei Themen nur ausgesucht, aber die, da hätte man natürlich, viel weiter ins Detail gehen können. Aber ich hab gesehen, die anderen hatten da doch etwas mehr Raum sich genommen, aber ich dachte, es muss knapp sein und deswegen ist es 'n bisschen schade.
Deswegen ist die Gelegenheit jetzt gut, dass wir 'n bisschen ausführlicher darüber reden, ne.
-
Sascha Das stimmt. Also, wahrscheinlich benutzt ja jeder Zweite, die, die Web Developer Toolbar zumindest, auf dem Browser, den er selber, auf dem er entwickelt. Aber ich hab schon allein in deinem kurzen Artikel so 'n paar Sachen kennengelernt, wo ich dachte: „Ah, das ist, das war mir auch noch nicht so ganz klar“, grade in Bezug auf Barrierefreiheit. Und, da können wir uns ja heute mal 'n bisschen ausführlicher mit beschäftigen.
-
Sylvia Ja, es waren, zwei Ideen, warum ich mich entschieden hab, diesen Artikel zu schreiben. Einerseits gab's natürlich Vorläufer, die sich damit auch schon beschäftigt hatten. Die versuchte ich natürlich 'n bisschen auszubooten, indem ich versucht habe, diese Toolbar etwas, mir genau anzusehen und zu gucken, was kann man kombinieren und nicht immer nur Punkt für Punkt abzuarbeiten, ne.
-
Sascha Ja, ja.
-
Sylvia Und die zweite Idee war halt gewesen, dass man einfach mal hingeht und überlegt: Gut, es gibt, also es wird, wir werden heute auch noch drüber reden, es gibt Alternativen, um Barrierefreiheiten zu testen mit Plugins, aber ich hab mir gedacht: Gut, es will ja keiner irgendwie fünfzehn Plugins haben, sondern er möchte vielleicht mit möglichst wenigen klarkommen.
Und dann dachte ich mir: Gut, die Web Developer Toolbar, wie du eben sagst, verwendet wahrscheinlich jeder und zumindest jeder, der entwickelt. Und da kann man mal gucken, was kann man damit schon regeln, ne? Das ist natürlich nicht alles, aber ich dachte mir, da könnte man möglichst viele Leute einfach auch an das Thema, ranbringen.
-
Sascha Das ist, 'ne wahrscheinlich 'ne sehr geschickte Idee tatsächlich. Und, im Gegensatz zu vielen externen Tools, die jetzt nicht auf, Browser-Plugins, basieren, kann man sie auch, easy installieren und sie, hat halt keinen, keinen administrativen Aufwand dabei.
-
Sylvia Genau, und ich mein natürlich, wenn man 'ne Webseite gänzlich testen will, muss man auch Screenreader-Tests machen und so weiter, ne. Also darüber geht's, darum geht's jetzt gar nicht, sondern es geht darum, was kann man, über, es, es ist quasi 'n Übergang von Webstandards zur Barrierefreiheit einfach mit der Web Developer Toolbar schon regeln. Was kann man, schon optimieren? Und dafür ist die wirklich geeignet.
Ich hab das im Vergleich, da kommen wir heute ja noch dazu, mit diesen anderen Plugins durchaus gesehen, dass die ziemlich gut im Mittelfeld liegt, ne. Es gibt wenige Plugins, die noch besser, in dieser Form, optimieren, ne. Das konnt ich ganz gut feststellen.
-
Sascha Gut, dann, steigen wir mal ein. Zu, zunächst, muss ich, also das hör ich jetzt schon mal so zwischendurch hör ich mich mal selber. Ich vermute, dem ein oder anderen Hörer wird das auch auffallen. Das liegt daran, dass du tatsächlich kein, kein, kein Headset jetzt zur Hand hast. Aber ich versuch mal leise zu sprechen und das sind ja im Zweifelsfall 'n bisschen lauter zu regeln. Ich hoffe, dass das nicht zu sehr stört beim Hören, beim Autofahren oder wo ihr auch immer gerade Technikwürze hört.
Okay, ich, werd heute nicht so viel mit Jingles rumhantieren, weil ich einfach Schwierigkeiten habe, die anzustößen, anzustoßen, weil ich die irgendwie noch nicht so richtig in meinen neuen Recorder reingezogen bekommen habe. Aber ich versuch jetzt einfach mal ein passendes Jingle. Wenn es das Outro ist, dann entschuldigt das bitte.
-
Einspieler Das Thema.
-
Sascha Yeah, es hat funktioniert. So, das Thema. Genau, steigen wir ein. Womit möchtest du anfangen? Möchtest du erst über Alternativen sprechen oder direkt, über die Toolbar selbst?
-
Sylvia Nee, ich denk, die Alternativen, die passen am Schluss besser. Ne, weil dann haben wir einfach auch schon 'n bisschen Rüstzeug uns angeeignet. Ich fand's eben ganz interessant am Anfang überhaupt mal zu gucken, weil, Web Developer Toolbar, vielleicht sollte man den Leuten auch sagen, was wir wirklich damit meinen. Weil es gibt ja diverse ähnliche Toolbars, die, für andere Browser genauso heißen, ne.
Also wir sprechen, wenn wir jetzt davon sprechen, von der Erweiterung für Firefox, ne, Sea Monkey, Flock, was auch immer, ne. Aber es gibt ja auch eine für den Internet Explorer. Die kennen wir leider auch alle leidvoll. Und es gibt sogar eine für Opera, die tatsächlich auch Web Developer Toolbar heißt. Ich glaub, nur bei Safari heißt die irgendwie anders. Fällt mir jetzt grade nicht ein, wie die heißt.
Und, aber die für den Internet Explorer hat sehr viele Dinge natürlich auch, ne, aber ist halt tatsächlich echt 'n schwierig zu bedienendes Teil. Du hattest es ja auch schon angesprochen.
-
Sascha Ja, das ist richtig. Also ich benutz sie auch eigentlich hauptsächlich nur, um, das, Document Object zu inspiz, inspi, inspi, inspizieren wollt ich sagen, ja. Weil die ganzen anderen Funktionen, die einem halt so an der Firefox-Variante oder,, eben an deren Derivaten, so gut gefallen, die sind da halt einfach nicht so schön implementiert, wenn überhaupt.
-
Sylvia Das war jetzt auch ein Ton. Ja, also wir sprechen über die Erweiterung für Firefox. Die gibt's ja dann auch plattformüberhäng, überhängend, da überhängen. Also jetzt, da ist es bei mir auch schon. Und ich fand es sehr interessant, dass wenn man guckt, ne, dass schon etliche Leute versucht haben, für die Barrierefreiheit mit dem Tool tatsächlich zu arbeiten. Interessant ist, ich mein, da brauche ich jetzt nicht ins Detail gehen, weil da gehen wir ohnehin noch ins Detail.
Aber interessant fand ich, zum Beispiel zweitausendfünf hat da jemand schon 'n ziemlich langen Artikel dazu gemacht. Der hat, gesagt: "Ja, wie testet man, Accessibility mit Firefox und diesem, Plugin?" Und, da kann man sehr gut erkennen, dass zum Beispiel das Thema Layout-Tabellen überhaupt noch kein Thema war, ne. Also da steht dann nur ganz kurz da: Okay, Linearisierung, das hab ich auch lang nicht verstanden, was, eigentlich das bedeutet, Linearisierung.
Das heißt, es werden, alle Inhalte einfach linear dargestellt und dadurch kann man gut erkennen, ob zum Beispiel bei Layout-Tabellen der Fluss, der Lesefluss oder der Inhaltsfluss einfach völlig unterbrochen ist, weil Layout-Tabellen machen ja tatsächlich, was anderes als, 'ne Semantik. Und, aber da wurde einfach nur geguckt, okay, ist das einigermaßen lesbar?
Während zweitausendsechs hat es einer, gemacht und der hat dann halt tatsächlich gesagt: Okay, man müsste aber schon schauen, gibt's überhaupt Layout-Tabellen? Und, wahrscheinlich gab's vielleicht auch, da müsste das historisch tatsächlich, mit der Toolbar nachvollziehen, da gab's dann auch schon, die Möglichkeit, Tabellen hervorzuheben. Vielleicht gab's die auch zweitausendfünf noch gar nicht. Also das muss ich natürlich gestehen, dass ich jetzt nicht die verschiedenen Versionen
-
Sascha Ja, ja, es ist ja auch keine geschichtliche Aufarbeitung der Web Developer Toolbar, sondern das, was wir jetzt haben, ist halt einfach das, womit wir arbeiten.
-
Sylvia Ja, und ich fand's auch interessant. Also das hab ich leider irgendwie immer wieder gelesen, wohl in den letzten Jahren, dass, es so was wie 'n Speed Check auch gegeben hat mal, aber der ist irgendwann, in den Versionen irgendwie rausgenommen worden. Das wär nicht uninteressant heute wieder. Also ja nur diese, diese Funktion, wo man gucken kann, wie groß dies, die Seite insgesamt ist, ne, wo man eben sieht, welche Einzelteile halt wie groß sind.
Aber da gab's seinerzeit wohl auch 'n Speed Check und der war sehr beliebt, aber der wurde dann irgendwie entfernt. Keine Ahnung, den gibt's heute nicht mehr.
-
Sascha Okay, also was ich halt kenne, ist halt tatsächlich unter Tools diesen Speed Report, aber das ist ja irgendwie über 'ne externe, über 'n externen, Leist, Dienstleister. Weil ich wusste gar nicht, dass es tatsächlich noch die Möglichkeit gibt, die Größe der Elemente zu sehen. Ich benutze einmal dieses Wise Lo für diese Fire, Firebug, Extension. Ja.
-
Sylvia Nee, das gibt's, das gibt's unter Informationen, Seiteninformationen anzeigen. Nee, das war's nicht. So, so, so, so geht's mir, wenn ich jetzt mal was suche hier.
-
Sascha Page Informations oder so was? Nee.
-
Sylvia Ah, Informationen, Dokumentengröße anzeigen.
-
Sascha Ja, ich hab das natürlich alles jetzt hier grade noch auf Englisch, aber, View Document. Tatsache.
-
Sylvia Ja, und da sieht man wirklich 'ne ganz gute Übersicht. Ne, also Grafiken ist aufgeteilt nach Grafiken, Objekten, Skripten und Stylesheets und grad Skripte und Stylesheets ist heutzutage sehr interessant. Also grad wenn eben die ganzen JavaScript-Bibliotheken genutzt werden, da sieht man immer, wo die großen Prozente irgendwo, großen K, KBs irgendwie dann landen, ne? Also das fand ich, fand ich, fand ich ganz gut.
-
Sascha Schön, dass ich auch schon jetzt schon, jetzt schon was gelernt für mich allein.
-
Sylvia Ja, ich mein, das ist jetzt nicht unbedingt jetzt für die Barrierefreiheit so super wichtig, aber insgesamt für die Optimierung ist es nicht schlecht. Aber da gab's wohl offensichtlich früher die Option, auch, eben die Geschwindigkeit oder den Speed anzuzeigen, aber das ist wohl nicht mehr vorhanden. Und, ja, zweitausendsieben gab's dann noch, 'n Artikel, der ist ziemlich lang. Der orientiert sich, absolut nach dem WCAG eins null.
Der ist wirklich auch so nach den Punkten kann man, kann man gucken. Also da stehen die ersten Punkte des WCAGs, ne, des barrierefreien Gesetzes und daneben, was die Webdev, der Web Developer Toolbar damit irgendwie machen kann. Das fand ich schon ziemlich, ziemlich ausgefeilt, aber ich möcht es jetzt nicht wiederholen, weil im Grunde sind's immer die gleichen Bereiche, die gleichen großen Bereiche wie Farben, Grafiken, Überschriften, Tabellen, Formulare.
Ne, also das sind eben die großen Bereiche, die eben zu testen sind und das wiederholt sich. Ich hab dann in meinem Artikel ja dann, letztes Jahr eben rausgesucht, mhm, die Überschriften, die Datentabellen und die Farben. Ne, und das, orientiert sich halt, wir haben ja 'ne andere gesetzliche Vorgabe hier noch immer, das BTV. Das ist auch stark umkämpft, ne. Es gibt ja die große Fraktion, die möchte, dass wir uns auch nach dem WCAG zwei null jetzt dann eben richten. Gesetzlich muss gucken.
Man muss sehen, was sich draus entwickelt. Ich fänd's auch besser, wenn wir 'ne einheitliche Gesetzgebung hätten, aber gut, damit haben wir ja weniger irgendwie zu tun dann, ne, um so was zu entscheiden.
-
Sascha Na ja, zu entscheiden nicht, aber wir sind ja hinterher die, die,, na ja, Nutznießer oder halt die, die Notleidenden. Ich hatte jetzt gerade tatsächlich den Fall, dass ich auch für 'ne städtische Einrichtung, 'ne Webseite machen musste und, die, die Leute so unglaublich schlecht informiert waren, die, die dafür zuständig sind, quasi und ich dann auch, gefragt hab, wie das denn jetzt hinterher gecheckt wird und kontrolliert wird.
Und es, wurde mir halt immer wieder nur gesagt, was ich zu tun habe. Hinterher kontrolliert hat niemand. Also es war,, auch sehr schwierig, den Leuten dann gewisse Dinge, also ich glaube auch, dass, dass, das Verständnis für gewisse, Regeln gar nicht da war. Also denen zu erklären, ja, ja, das, ich weiß schon, was das heißen soll mit, die Textgröße soll vergrößerbar und ver, also ne, soll anpassbar sein. Aber, ich hab's jetzt hier so und so und so umgesetzt und dann kam dann immer nur: "Ja, wie?
Ist uns eigentlich egal. Hauptsache, Sie machen das."
-
Sylvia Oh Gott.
-
Sascha Also ein bisschen furchtbar, ganz, ganz schlimm, aber...
-
Sylvia Aber so 'n städtischer Anbieter sollte eigentlich schon, mehr wissen, ne? Also ich mein, grad die müssen ja barrierefrei sein, ne?
-
Sascha Ja, vor allen Dingen war's auch, es ist jetzt noch nicht mal irgendwie 'ne kleine, Stadt im Sauerland, sondern es ist schon eine, mit, mit ganz vielen Millionen von Einwohnern, wo man sich dann so gedacht hat, warum hat man da irgendjemanden an diese Stelle gesetzt, der überhaupt damit vorher scheinbar noch nie A, also der überhaupt keine Ahnung hat, sondern wahrscheinlich, wir mussten, wir müssen jemanden versetzen, der hat zwar keine technische Ahnung, aber egal, da ist 'ne Stelle frei, super.
Ist ja, aber das, -
-
Sylvia Wollen wir das nicht vertiefen?
-
Sascha Genau, wir schweifen ab.
-
Sylvia Genau. Ja. Also ich weiß jetzt nicht, wie wir das jetzt genau, machen sollen, um, sollen wir jetzt einfach Themenbereiche durchgehen? Und, ich könnte dann teilweise vergleichen zu anderen, Tools, was die besser machen oder, oder was die schlechter machen oder überhaupt, wie, wie man da jetzt damit testet und die einzelnen Bereiche durchtestet. Ich weiß auch nicht, wie wir genau das angehen sollen.
-
Sascha Ich glaub, das ist eine gute Idee. Also, wir haben ja hier vorliegen quasi, hast du ja so ein bisschen die Themen zusammengetragen. Wenn wir da einfach mal so ein bisschen, das durchbuchstabieren, dann kann man das, glaub ich, am besten nachvollziehen. Noch mal der Hinweis natürlich, die, auch die Links, auf die Artikel, die Silvia gerade, angedeutet hat, die packen wir natürlich in die Show Notes.
Könnt ihr dann jederzeit nachlesen und vielleicht dort euch noch mal ein paar Zusatzinformationen holen. Aber wir hoffen, dass wir das jetzt auch, intensiv genug behandeln können.
-
Sylvia Ich meine, vielleicht können wir ja gleich mal mit den Schwachstellen anfangen, weil die sind natürlich am, am prägnantesten. Die merkt man irgendwie sofort, was die Toolbar halt nicht ist, ne. Also ich glaube, es kam auch immer wieder, dass sie kein Live-Editing-Tool ist, ne.
Also dass man hingeht und sagt: "Gut, irgendwas stimmt jetzt hier nicht, jetzt verbessere ich das." Also dafür ist sicher Firebug besser geeignet, ja, um eben Sachen auch mal einfach schnell anzupassen und zu gucken, ob das dann irgendwie hinkommt. Es ist tatsächlich mehr ein Tool, um etwas zu testen, ne, um zu sehen: Aha, das ist die Struktur. Was kann ich mit der Struktur jetzt machen? Ne. Und ich muss sie dann quasi ändern, aber nicht mit dem Tool selbst.
Es gibt zwar ein CSS-Tool, das ich eigentlich auch nicht nutze, weil ich halt Firebug nutze, aber angeblich gibt's Leute, die auch auf dieses Tool schwören vom, von der Web Developer Toolbar. Aber im Grunde ist es mehr so ein Tool, um etwas anzuzeigen, ne.
-
Sascha Das stimmt.
-
Sylvia Um einfach, einfach Strukturen anzuzeigen und um Sachen eben in einer Webseite zu machen, zu deaktivieren oder, zu verändern. Ja, aber nicht in dem Sinn, dass man wirklich da live,, reinhackt und irgendwas macht, ne. Dafür ist Firebug eindeutig das bessere Tool. Was nicht gut funktioniert, sind Farben.
Also da hat, da gibt's einfach ganz wenige Optionen in der Toolbar, was ja tatsächlich auch ein schwieriges Thema ist in der Barrierefreiheit, wo die meisten Leute auch irgendwie, Schwierigkeiten damit haben, weil das hat sich jetzt auch mit der neuen Gesetzgebung wieder geändert, wie genau die, das Kontrastverhältnis sein muss oder das Farbverhältnis sein muss. Und da hat einfach, da gibt's einfach andere Tools, die besser sind, ne.
Also deswegen bei Farben hab ich auch in meinem Artikel im Grunde nur diese, aber auch eine, eine sehr schwerwiegende, Funktion aktiviert, nämlich Farben der Web-Webseite deaktivieren. Das macht man unter deaktivieren, Farben der Web-Webseite deaktivieren. Und, das hab ich heute auch mal spaßeshalber gleich mal an den Biene-Preisträgern getestet.
Weil es gibt eben die Option, dass eben, wichtige aktive Zustände in einer Webseite, damit man genau weiß, wo man ist, nicht allein durch Farben gekennzeichnet sein dürfen. Und, zum Beispiel darmkrebs.at, was ja eine goldene Biene bekommen hat, hat es eben nicht gemacht. Also wenn man da in der Navigation etwas weiter voranschreitet, also vor allem in den Unterebenen, wird alles irgendwie über Farben geregelt und sind die Farben weg, weiß man nicht, wo man ist.
Okay, man kann, man kann den Breadcrumb, nachlesen und so. Ja. Aber das ist eigentlich nicht gedacht. Es sollte jeder Zustand, auch ohne Farben gekennzeichnet sein. Und das ist eben, find ich, so 'n richtiges, Mörderinstrument. Farben der Webseite deaktivieren. Das macht mir immer recht Spaß, das zu machen, weil da sieht man eben sehr stark, wie die Leute noch immer auf Farben irgendwie sich orientieren, ne.
-
Sascha Ja, auf jeden Fall. Gibt's denn irgendwie 'n, hast du ein, Tool, das du nutzt, was das angeht, was zum Beispiel auch die Möglichkeit hat, Bilder, bisschen mehr zu behandeln? Also weil ich hab das jetzt schon öfter gemacht und dann werden halt, Teil-- Ich weiß, ich hab's noch nicht so genau durchstiegen, was da jetzt abgeschaltet wird und was nicht, aber ich denke, Bilder, die halt richtig eingebaut werden, da bleibt, die bleiben natürlich farbig.
Ich glaub, nur Hintergrundbilder werden mit abgeschaltet. Kann das sein?
-
Sylvia Genau. Also dieses, diese Option macht tatsächlich alles, was Farbe ist, weg und damit auch die Hintergrundbilder weg. Ne, nee, also Farben, da mach ich eigentlich immer irgendwie von 3C Studio, die Accessibility Toolbar, ne. Die hat halt die Möglichkeit, genau anzuzeigen, wie die Kontraste sind, ne, nach dem Verhältnis, was es erfüllt, was es nicht erfüllt, auch schon nach dem neuen WCAG 2.0.
Das ist einfach absolut, die bessere Wahl, wenn es wirklich darum geht, dass man sämtliche Farben einer Webseite einfach gegenchecken muss. Also damit scheitert man natürlich bei der Web Developer Toolbar, aber, ich denke, soweit ich das nachgelesen hab, versuchen sie, weil es gibt eine To-do-Liste bei der Web Developer Toolbar und da steht tatsächlich als To-do-Punkt, View Color Contrast Information. Ich denke, der möchte das gerne noch ausbauen, ne.
Also das ist wahrscheinlich schon bei mehreren Leuten irgendwie angemerkt worden, dass das doch ein Wunsch wäre, aber ich fürchte, man, man sollte dieses Tool halt auch nicht extrem aufbohren, ne. Also es bringt ja nix. Also es gibt einfach, spezialisierte Tools, die so ein sensibles Thema wie Farben und Kontraste dann einfach besser abarbeiten können, ne. Aber trotzdem find ich allein diese, diese Sache, deswegen hatte ich das als Einzelpunkt im Artikel eben behandelt.
Ich fand allein diese Sachen, Farben der Webseite deaktivieren, fand ich dann einfach schon ziemlich, ziemliches Killerargument bei, bei den meisten Seiten. Also man kann fast sagen, neunzig Prozent der Seiten, basieren einfach auf Farbe, ne. Ich meine, das ist klar, wir sind ja im Web. Aber es geht ja darum, dass, dass eben Farben tatsächlich eben nicht da sein können und, da funktionieren die meisten Seiten einfach absolut nicht.
Die zweite Sache sind Formulare, die sind auch so ein Schwachpunkt. Also ich find das eher ziemlich unübersichtlich. Man hat die Möglichkeit, sich Formulare anzeigen zu lassen, aber da wird nicht viel, angezeigt. Das ist eher ziemlich rudimentär. Ich glaub, das war unter Informationen. Hm.
-
Sascha Ich hab hier, ich hab hier, direkt neben CSS gibt's doch tatsächlich Vor--
-
Sylvia Ach, Formulare, ja.
-
Sascha Kann ich das mal auf Deutsch umstellen hier? Weil sonst, -
-
Sylvia Nee, umstellen kannst du's so in der Form nicht. Du musst, quasi dann die deutsche Version installieren.
Also ich hab die deutsche, ich hab normalerweise auch die, englische Version, aber nachdem ich den Artikel verfasst hab, hab ich halt die deutsche Version und seitdem halt nicht mehr, deaktiviert, weil ich dachte, nun gut, wenn man 'nen deutschen Artikel schreibt, vielleicht, vielleicht wär's besser gewesen, doch die englische Version zu nehmen, weil es gab in den Kommentaren dann Beschwerden, dass die Leute nicht wussten, wie das in der Übersetzung dann heißt eigentlich alles.
-
Sascha Gut, dann kann ich das jetzt immer parallel sagen. Also in dem Fall heißt der Menüpunkt Forms. Ja. Genau, da gibt's halt 'n paar, da gibt's halt 'n paar, Menümöglichkeiten oder gibt's halt 'n paar Möglichkeiten, wie man damit umgehen kann.
-
Sylvia Ich muss mal gucken, ob ich jetzt gerade ein Formular hier finde. Müsste ja eigentlich unter Kontakt meistens eins sein, ne. Guck mal grad mal bei, Einfach für Alle weiß ich das ja, wo das ist. So.
-
Sascha Ich bin natürlich gerade auf Technikwille und geh mal auf das Kommentarformular.
-
Sylvia Der erste Punkt ist, Formulardetails einblenden und dann haben wir noch Formularinformationen. Form-- Das fand ich eben auch so merkwürdig, weil, das ist überhaupt 'n Problem der Developer-Toolbar, dass sie, teilweise halt verschiedene Fenster bedient.
Weil Formulardetails einblenden meint, dass du eben auf der Webseite irgendwelche Informationen erhältst, während Formularinformation anzeigen dann irgendwie 'n neues Fenster ist, wo man irgendwie interessante Informationen über das Formular erhält. Und diese zweite Seite, ja, find ich ziemlich kryptisch. Aber witzigerweise, die anderen Tools machen das nicht viel anders, ja. Das sind ähnliche, interessante Listen.
Und, ich musste jetzt erst mal überlegen, aha, ID, Name, Typ, Wert, Label und so, ne. Man muss es halt da wirklich durchlesen. Da gibt's andere Tools, die da 'n eindeutigen Vorteil haben, weil sie das Label zum Beispiel besser auslesen. Weil hier sieht man tatsächlich bei einfachfüralle.de wird dann tatsächlich, so 'n Image Icon, das im Label ist wohl noch mit, ne. Eigentlich ist, wär das Label ihre Nachricht, aber da steht dann noch strong und irgendwelche, ein Pflichtfeld-Icon und so weiter.
Das ist 'n bisschen schwierig zu lesen, find ich, ne. Auch die Spar-Sprachauszeichnung ist da und so. Außerdem bringt einem das jetzt so in der Zusammenstellung nix. Das hat eher was Statistisches, ne. Und es gibt, glaub ich, dann noch, die Extension, welche war das, die das relativ gut konnte? War, glaub ich, die Firefox Accessibility Extension.
Die hat auch so 'ne Übersicht, aber die hat zusätzlich auch noch, quasi, die hat immer so 'n lokalen, Barrierefreiheit-Check mit bei und die zeigt dann an, wo irgendwelche Fehler sind, ne. Also die würde dann, was ich bei der, beim Submit-Button anzeigen, wenn kein Label ist, dann wär das rot markiert oder so. Das ist 'n bisschen ausgefeilter, ne.
Also ich find, das hat eher mehr so statistischen Zweck und die Anzeige selber auf der Seite find ich halt auch so 'n bisschen, ja, Labels werden ja nicht angezeigt, ne, sondern nur, nur im Grunde die, die Formularfelder. Und das bringt einem für den barrierefreien Check eben wenig, ne, weil man eben wissen, gleich wissen müsste, aha, da sind jetzt keine Labels verbunden oder Ähnliches, ne.
-
Sascha Das bringt einem ehrlich gesagt so gut wie gar nix. Ja.
-
Sylvia Genau. Also außer dass man halt weiß, gut, da gibt's, da sind IDs vergeben und Namen und so weiter. Aber die Fehler sieht man so auch. Also wenn, müsste diese Kombination mit diesem Extrafeld müsste in dieses, auf die normale Seite eben verbunden werden, dass man gleich den Fehler sieht. Also das sind die Sachen, die halt einfach 'n bisschen noch, Stiefkind-mäßig irgendwie abgearbeitet sind, find ich.
Ich mein, was die, Entwickler natürlich verwenden, ist diese super Funktion, die aber mit der Barrierefreiheit jetzt wieder weniger zu tun hat: Formularfelder mit Feldwerten ausfüllen, ne.
-
Sascha Mhm. Ja, das ist.
-
Sylvia Das ist etwas, glaub ich, wo ich lange Zeit überhaupt nicht wusste, dass es das gibt, ne, bis mich ein Programmierer darauf hingewiesen hat: „Komm, macht es doch so viel einfacher, ne." Ich hab ja Jahre damit verbracht, immer diese Formularfelder auszufüllen. Also, das, wusste ich nicht, bis mich da jemand wirklich, drauf hingewiesen hat. Ja, das waren jetzt die groben Schwachstellen, würd ich jetzt mal sagen. Ja, ich mein, überproportional sind Grafiken belegt, ne.
Also da kann man ja alles Mögliche damit machen. Entweder alle deaktivieren. Grafikanimationen find ich auch 'n interessanten Begriff, ob da jetzt animierte GIFs damit, gemeint sind.
-
Sascha Ja, das hab ich auch noch nie rausgefunden, ehrlich gesagt.
-
Sylvia Ja, das Problem ist immer die Übersetzungen, ne. Also teilweise merkst du schon, dass diese deutschen Übersetzungen etwas merkwürdig sind, dass man nicht so genau sagen kann, was damit wirklich gemeint ist.
-
Sascha Ja, also im Englischen heißt es halt, disable image animations. Also ich geh tatsächlich davon aus, dass es halt, also ich würde jetzt auf GIFs, schließen.
-
Sylvia Ja, animierte GIFs, ne? Ja. Ja, weil Flash kann's nicht sein, weil Flash steht noch auf der To-do-Liste. Also das wollen sie dann wohl erst irgendwie in nächster Zeit hinzufügen. Wär auch so 'ne Sache, die, die ganz gut wär, wenn man das irgendwie könnte. Und ansonsten, das ist eh 'ne Sache, das ist mehr so die, die Handarbeit, dass man einfach alle Grafiken deavi, deaktiviert und guckt, ist die Seite überhaupt noch, lesbar.
Also das meiste, was die Leute halt, was ich in letzter Zeit wieder öfter gesehen hab, das ist ja auch so 'ne umstrittene Geschichte, dass der Header-Bereich immer ganz gerne in den Hintergrund gelegt wird, also völlig vollständig als Bild, ne, also Logos und so weiter. Das Problem ist, dass wenn Grafiken da nicht greifen, weiß man nicht, auf wel-welcher Seite man eigentlich noch ist, weil es steht weder irgendwie da, um we-wen handelt sich's hier, ne. Wo bin ich? Was ist das da oben?
Vielleicht ist die Navigation dann auch noch in Grafik dann, dann war's das irgendwie, ne. Und wenn dann noch die, Alt-Attribute nicht gefüllt sind, dann ist es wirklich 'n bisschen leer, ne. Also findet man auch bei großen Webseiten irgendwie. Das machen die meisten Leute wahrscheinlich, weil es layouttechnisch einfacher geht, Sachen in den Hintergrund zu legen, ne. Weil sonst müsste man ja mit absoluter Positionierung irgendwelche Sachen übereinanderlegen, ne.
Ja, ja, ja, aber ich mein Ja, also man müsste halt HTML-technisch ausgefeilt arbeiten, ne? Und das scheinen sich die Leute dann irgendwie zu sparen. Aber ich finde, da bin ich eindeutig der Meinung, Informationen, also wenn Sachen Informationen tragen, dann gehören die in den Vordergrund, ne? Und nicht in den Hintergrund, weil dann passiert das eben nicht, wenn etwas nicht funktioniert, ne? Weil du kannst ja einem Hintergrundbild kein Kanalattribut zuweisen, ne?
Sondern das ist dann halt einfach weg, diese Information.
-
Sascha Ja, ja, also ich, finde es auch eine ganz unsägliche,, Geschichte, tatsächlich das, Logo, dann eben so mit in den Hintergrund zu verbauen. Ich, das ist so mit das, für mich der Standard. Das halt oft packe ich sogar in H, H1-Tag quasi. Und, dann halt zusätzlich meistens zum Alt-Tag sogar noch irgendwie 'n, im, im normalen Screen-Design, beiseite geschobenen,, Container irgendwie.
Ich hab tatsächlich jetzt öfter gesehen, dass dann, deshalb da zählt die Ausrede der Positionierung nicht, dass, dass gerne das Logo mit in den Background verpackt wird und dann ein,, drüber ein absolut positionierter Div, quasi ein, ein Link da drüber, ein, ein leeres Art, ein leerer Art-Tag platziert wird. Wo ich mir denke: Warum habt ihr dann bitte nicht das blöde Logo gleich da reingepackt? Also sehr merkwürdig.
-
Sylvia Ja, ich hatte da, ich hatte da,, das, da werde ich auch noch ein Artikel dazu schreiben. Das, ist bei mir unter, Barrierefrei-Optimierungsanekdoten irgendwie eingegangen. Es gab ja der große österreichische Jugendsender FM4 hat ja 'n Relaunch gemacht. Und die Österreicher müssen ja alle barrierefrei sein und ich sollte mir das halt ansehen. Und, die hatten eben genau solche Techniken gemacht.
Die haben versucht, irgendwelche Logos, FM4-Sachen irgendwie in den Hintergrund zu packen und darüber haben sie dann irgendwas, Verstecktes gelegt. Also es ist, es ist eine, eine, sozusagen eine Versteckorgie.
-
Sascha Schön um die Ecke gedacht, ja.
-
Sylvia Ja, vor allem, das Lustige ist das, dass, dass der quasi Screenreader-User interessantere Informationen kriegt als der herkömmliche Nutzer. Und das fand ich dann schon grenzwertig, ne? Also ich hab versucht, das mit den Leuten zu klären, aber die haben das nicht so ganz wahrgenommen, weil die, die waren, glaube ich, ganz, ganz, ganz, von diesem, von diesem System überzeugt, ne? Aber, ich hab gesagt so: Natürlich müssen wir Sachen teilweise eben verstecken, ne?
Oder aus dem Viewport hin, hinausschieben, ne? Damit eben Screenreader-Nutzer einige Informationen erhalten, die eben für die semantische Strukturierung wichtig sind, ne? Damit sie sich zurechtfinden, aber nicht irgendwelche Zusatzinformationen, weil das Bild ja nicht da ist und dann kann er das nicht verstehen und darum geht's nicht. Es, es, das Bild muss für jeden verständlich sein und nicht, dass man dann anfängt, Versteckwüsten da zu bauen.
Das war eigentlich sehr, sehr interessant, aber ich bin da irgendwie, eher nicht so auf, auf Verständnis gestoßen, möchte ich das jetzt mal ganz wertfrei sagen. Ich sag immer so: Mini-Minimalismus ist auch in der Barrierefreiheit wichtig, ne? Nicht, dass man anfängt jetzt, für alle möglichen, Gruppen, die vielleicht 'n Problem mit einem Bild oder 'nem Text hätten, irgendwelche Konstrukte zu bauen. Ab, ganz abgesehen von der Form, das zu Ende zu pflegen, ne?
Also ich möchte die sehen, die dann, in drei Jahren Spaß haben zu verstehen, warum hier dann irgendwelche Dinge stehen, die andere gar nicht sehen und so weiter, ne? Also ich mein, wir haben ja alle dynamische Systeme, würde ich mal annehmen. Trotzdem, schlimm.
-
Sascha Ja, in der Tat. Das, kommt schon fast wieder daran, dass man, unterschiedliche Versionen für unterschiedliche Gruppen hat und dann eine, also, tatsächlich zwei unterschiedliche Webseiten pflegt, also.
-
Sylvia Ja, das, das war ja diese große Diskussion, da schweifen wir jetzt natürlich wieder ab.
-
Sascha Ja, ja, okay. Zurück zum Thema.
-
Sylvia Mhm. Okay, wir hatten jetzt die Grafiken. Die Formulare hatten wir. Ja, wir könnten die Überschriften jetzt mal kurz besprechen.
-
Sascha Du hast grade hier noch 'n Punkt,, auf der, auf der Liste, Schriftgrafiken eruieren. Da, das ist mir jetzt nicht ganz klar, was, -
-
Sylvia Ja, es ist halt, das war, das ist zum Beispiel auch der, der aktuelle Fall von FM4. Die hatten halt zum Beispiel so 'n Teaser, Teaserelemente, die hatten, die waren zugeordnet gewissen Autoren, ne? Die halt diese Teaser offensichtlich, betreffen. Und da stand halt der jeweilige Name als Schriftgrafik. Abgesehen davon, dass dieser Name tatsächlich so klein und fusselig war, dass man ihn durchaus als normale Schrift hätte setzen können, ja? Also das hab ich überhaupt nicht verstanden.
War das einfach so, dass eben Schriftgrafiken nicht skalierbar sind, ne? Also die, die bleiben halt, wie sie sind, ne? Okay, wir haben jetzt demnächst unseren Zoom und so und dann, dann sind wir sowieso total glücklich. Aber, es war einfach sinnlos, diese, diese Schriftgrafiken da zu haben. Und wenn man die Grafiken deaktiviert, hatten die auch keinen richtigen Alt-Text, ja? Also so, da war nix drin richtig so. Da stand dann irgendwas von, „Zu allen Artikel von Hugo“, ja?
Und das war natürlich Quatsch, weil die Grafik an sich besagt nur den Namen Hugo, ja? Und, ich hab versucht, eben zu erklären, dass im Link das stehen müsste und nicht in der Grafik. Dazwischen wurde aber dann zwischen Link und Grafik wurde dann noch versteckt: „Alle Artikel von Hugo“. Das war ganz, ganz wilde Konstrukte. Und das kann man eben mit dieser Option auch, mit diesem, Entfernen der Grafiken kann man auch ganz gut gucken, verschwindet auf der Webseite plötzlich einfach Text.
Da kann man dann sehr gut sehen: Oh, da werden sehr viele Schriftgrafiken verwendet, ne? Ich mein, die Diskussion wird weitergeführt werden müssen, was tatsächlich mit dieser Schriftgrafik-Geschichte passiert in nächster Zeit, weil wir ja tatsächlich diese Zoom-Funktionen jetzt haben, wo alles, mitgezoomt werden kann. Aber ich denke, wir müssen immer noch davon ausgehen, dass diese Zoom-Funktion nicht alles lösen wird. Da müssen wir einfach gucken in der Zukunft, was das bedeuten wird, ne?
Ob tatsächlich einige Probleme damit gelöst werden können oder ob wieder neue entstehen. Man weiß es ja nicht, ne?
-
Sascha Wobei ich dazu sagen muss, dass ich zum Beispiel, in letzter Zeit tatsächlich es schaffe, komplette Webseiten nur mit relativen, Größen anzugeben und, solche, also da, da zoomen dann halt auch bei der Text, Vergrößerung tatsächlich auch Bilder und Flash-Elemente und was weiß ich noch was alles mit, ohne diese neue Zoom-Funktion in, in Internet Explorer 8, nee, 7 gibt's das auch schon, genau, und Firefox und so.
Sondern dass halt wirklich nur bei der Schriftgrößen-Größenänderung dann halt alles mit, skaliert. Aber, nichtsdestotrotz, ist, was ich hier 'ne ganz schöne, Funktion finde in Bezug darauf, ist tatsächlich dieses Replace images with alt attributes, also gegen die Alternativtexte austauschen. Und da sieht man dann nämlich auch schon ganz schön : Ich hab früher tatsächlich auch solche Alternativtexte eingegeben wie, das Logo von weiß ich nicht was.
Und das macht natürlich überhaupt keinen Sinn, weil wenn man's dann liest, unterbricht's natürlich total den Lesefluss an bestimmten Stellen, weil man irgendwie 'n Erklärungstext dazu macht und ja eigentlich nur der, die Schrift, die in dem Bild drin ist, ausreichen würde. Und, das ist halt schon sehr hilfreich, ja.
-
Sylvia Ja, das ist, ich, das war auch 'n Prozess bei mir. Ist ja nicht so, dass ich das alles von Anfang an... Ich hab das genauso gemacht mit dem "Das ist das Logo von", ja. Das haben wir alle gemacht. Nur wenn man dann tatsächlich mit Screen Readern sich die Sachen anliest, ja, oder anhört eigentlich eher, dann merkt man, wie du eben sagst, der, der Screenreader-Nutzer, dem ist egal, ob das jetzt 'n Logo war, weil das sieht er eh nicht.
Er, er, wie, er wird ja nur dieses Alt-Attribut, zu hören bekommen und da ist für den Lesefluss besser, es steht einfach tatsächlich nur der Name, ne.
-
Sascha Ja, genau.
-
Sylvia Das ist, also ich denke halt so, das ist, sind alles Entwicklungen. Deswegen, also wenn wir jetzt hier über die Sachen reden, kann sein, dass es sich in,, zwei Jahren wieder alles irgendwie verändert hat, ne. Wir können immer nur 'n Zustand irgendwie darstellen, aber es sind halt Erfahrungen, die man macht, wenn man, wenn man eben ab und zu, doch dann sich die Sachen anhört und sich sagt: Oh, das ist, da muss man richtig optimieren, wenn man im Screenreader sich das anhört.
Oh, da ist 'n Lesefluss irgendwie dann doch 'n bisschen heikel, ne. Das merkt man auch, wenn man, Seiten, die angeblich optimiert sind, sich dann anliest und man denkt: Oh ja, ich hab überhaupt keinen Zusammenhang. Wo sind wir jetzt? Was, was liest der vor, ne? Und, ja, wir haben ja auch, wir wollen jetzt nicht über Image-Replacement-Tech-Techniken oder so sprechen, aber da gibt's auch Möglichkeiten, ne.
Also Sifa ist jetzt natürlich auch nicht super barrierefrei, aber Sifa macht wenigstens so was, dass, wenn die Grafik oder Flash nicht da ist, dass tatsächlich eben dann, der Text bleibt und so weiter, ne. Also wir brauchen jetzt nicht zu vertiefen, aber es gibt noch andere Möglichkeiten, als eben, 'ne Schriftgrafik zu verwenden, ne.
-
Sascha In der Tat.
-
Sylvia Ja. Genau. Also Tabellen, denke ich mir, machen wir 'n bisschen später, weil das ist ja doch immer 'n bisschen komplex. Vielleicht sollten wir jetzt was Leichteres nehmen. Überschriften hört sich so total leicht an, oder? Ja, also Überschriften, Hierarchien, da gibt's halt auch zwei Möglichkeiten.
Also ehrlich gesagt, ich hab lange Zeit auch nur die Outline genutzt, also dass man einfach sich die Hierarchie anschaut, was wieder in der Form funktioniert, dass man einfach, 'ne Seite nimmt und, Informationen... So, wo haben wir's? Hier. Dokumentgliederung anzeigen. Ich glaub, das heißt, Document Outline. Ich weiß nicht, wie's im Englischen heißt.
-
Sascha Ja, ich bin jetzt grad, ich war jetzt grad tatsächlich in Outline. Da kann man ja sich immer die Sachen anzeigen lassen, aber du willst jetzt in Info, bist jetzt in Informationen. Oh, was könnte das hier sein? Ja.
-
Sylvia Also es ist, -
-
Sascha Top Graphic Info, nee, das ist es nicht.
-
Sylvia Ist es voll Dokumentengröße anzeigen?
-
Sascha Moment mal, hier, das ist dann-
-
Sylvia Farben, Farbinformationen anzeigen zwischen Farbeninformationen anzeigen und Doma-Documentengröße anzeigen.
-
Sascha View-
-
Sylvia Document Outline.
-
Sascha Document Outline, ja. View Document Outline, genau, ja.
-
Sylvia Und das ist halt wieder in diesem neuen Fenster. Und, da kriegt man halt dann quasi alle Überschriften, der Webseite in einer hierarchischen Darstellung. Zum Beispiel bei Einfach für alle sieht man eben, die erste Überschrift ist Einfach für alle. Dann die H2 ist dann Aktion Mensch, ne, und dann geht's halt 'n Stück weiter nach unten. Die nächste H1 dann Kontakt und die H2 fehlt und dann kommt erst die H3, Projektleitung, Einfach für alle, Biene. Das war jetzt die Kontaktseite.
Also da sieht man schon, da wird rot angezeigt, fehlende Überschrift. Da müsste man, also man muss da 'n bisschen aufpassen bei dieser Hierarchie, weil, diese Sache hatte lange Probleme mit, mit Grafiken in Überschriften, ne. Also wenn du da 'ne Grafik drin hattest, ja, dann hat er irgendwie, das angezeigt als missing. Das könnte hier jetzt auch wieder der Fall sein, obwohl ich nicht annehme, dass da jetzt 'ne...
Müsste ich jetzt gucken, wo da jetzt diese, diese H2 fehlt, aber das sieht eigentlich aus, wie wenn da überhaupt keine da ist. Also die scheint tatsächlich zu fehlen. Aber früher musste man aufpassen, das war lange Zeit 'n Bug, aber die scheinen jetzt diesen Bug behoben zu haben. Also es hat mich am Anfang ein bisschen gestört, weil man immer nachgucken musste: Fehlt sie wirklich oder ist da einfach nur 'ne Grafik drinnen, ne?
Weil er hat eben- -dies, dieses, dieses Alt, die Alt-Befüllung einfach nicht, interpretiert lange Zeit.
-
Sascha Ja, das macht er jetzt bei mir gerade auch. Ich hab das für Technikwürze mal kurz gemacht und da ist halt H1, das Logo mit 'nem Alt-Text und da sagt er jetzt hier No Heading Text. Was, also er erkennt, da ist halt was da, aber irgendwie sagt halt-
-
Sylvia Ja, aber zumindest, zumindest erkennt er's jetzt, ne.
-
Sascha Genau, ja.
-
Sylvia Und bei mir hier die H2 fehlende Überschrift heißt, die fehlt einfach schlicht, ne. Da hat er einfach was übersprungen und geht auf H3, ne. Und, das ist halt auch so 'ne Sache, das ist halt wieder extern. Lange Zeit hab ich nur das genutzt, bis ich letztens auf, diese andere Möglichkeit gestoßen bin. Da muss man eben bei Hervorheben Elementnamen beim Hervorheben einblenden. Das sollte man ohnehin immer aktiviert haben. Ich weiß nicht, wie das jetzt auf Englisch wieder heißt.
-
Sascha Das heißt, ja, das, der, die, die Option heißt Show Element Names When Outlining und dann Outlining Headings halt.
-
Sylvia Genau. Und dann eben... Na, wo haben wir sie? Ah ja, Überschriften hervorheben.
-
Sascha Seite, genau, ja.
-
Sylvia Genau. Und das hab ich lange Zeit, ehrlich gesagt, nicht genutzt, aber das find ich eigentlich jetzt schon ganz gut, weil da wär's natürlich jetzt eigentlich wieder gut, wenn man eine Kombination hätte, aber so kann man eben ganz gut einfach sehen: Wo sind die Überschriften? Sind sie sinnvoll so im Ablauf, ne? Ist es auch einigermaßen linear strukturiert? Also find ich schon nicht so schlecht.
-
Sascha Lustigerweise ist es bei mir genau umgekehrt. Ich hab immer das benutzt und, bin jetzt grade total platt, dass es diese hierarchische Ansicht gibt.
-
Sylvia Ja, da muss ich natürlich sagen, da ist die Web Devel-Web Developer Toolbar auch 'n bisschen noch hinten an. Da gibt's tatsächlich Besseres. Vor allem, das gibt's in der Form bei den anderen Tools, dass sich quasi 'ne Sidebar aufmacht, ne. Und dann i-ist die ganz schön in so 'nem aufklappbaren, Zustand. Also man kann auf und zuklappen und so weiter, ne.
Und man kann dann immer auf ei..., jede einzelne Überschrift des Baums klicken und auf der rechten Seite auf der Webseite wird es dann tatsächlich angezeigt.
-
Sascha Schön.
-
Sylvia Also das fand ich schon ziemlich schick. Das kann... Moment. Das kann... Ja Die Headings Map. Also ich hab eigentlich geguckt, also es gibt so ein altes Tool, Document Map, die läuft nicht mehr auf Firefox drei, die war ähnlich, aber die ist im Gegensatz zur Heading Map, einfach noch nicht so ausgefeilt gewesen. Vor allem wenn man die Sache angeklickt hat, ist sie immer nur zur Überschrift gesprungen, ne.
Also man musste-- man konnt's natürlich erkennen, wenn sie einigermaßen so gelayoutet war, ne. Aber, manchmal wär's vielleicht auf manchen Seiten schwierig zu erkennen, was ist jetzt da die Überschrift. Und die Headings Map, die find ich eigentlich so jetzt, wenn man wirklich einfach, 'n großen Überschriftenbaum hat, ist das schon ganz fein, weil man das eben auf und zuklapp, klappen kann.
Also ich hab das wie gesagt auch alles schon mit Link angeliefert und, so was geht halt bei der Web Developer überhaupt nicht, ne. Weil ich mein, du hast halt jetzt so 'n statischen Zustand und das war's dann halt. Ja. Was haben wir noch Schönes hier? Formular hatten wir.
-
Sascha Ja, was mich tatsächlich interessiert, ist, das ist ja auch schon der nächste Punkt, den du ja aufgeschrieben hast, ist diese Access Key und Tab-Index-Sache. Das ist 'ne Geschichte, die ich bis jetzt, bisschen stiefmütterlich behandelt habe. Was, was gibt's da? Also ich weiß, dass man tatsächlich sich anzeigen lassen kann, wie die,, wie der Tab-Index in der Reihenfolge ist, glaube ich. Wenn ich mich nicht irre. Genau, Display Tab-Index, das gibt's.
-
Sylvia Ja, also das sind die Sachen, die ich, eigentlich eher nicht so ausführlich besprechen möchte, weil, das Problem ist, diese Tools hängen natürlich immer ein bisschen hinterher, was die aktuellen Entwicklungen, und den aktuellen, Konsens betrifft, ne. Also Tab-Index zum Beispiel ist eine Sache, die man im Grunde eigentlich gar nicht mehr macht, ja. Also ich hab ja auch Jahre mit Tab-Index hinter mir, ne.
Also ich hab wirklich leidvolle Erfahrungen in dynamischen Systemen mit Tab-Index, weil man muss zu jedem Programmierer gehen und sagen: „Bitte mach auch jetzt, zähl den Tab-Index mit hoch", ja. Ne, damit-
-
Sascha Fang du mit deinem Modul bitte erst bei zehn an, ja.
-
Sylvia Genau oder so, ne. Und, das war natürlich auch 'ne Sache, wo ich dann einfach mit der Zeit festgestellt hab, dass andere das eigentlich im Grunde auch schon nicht mehr machen.
Jetzt bin ich mittlerweile auch auf diesem Level, wo ich sage, man kann, ne, also weil ich mich sehr stark auch mit Tastaturnavigation auseinandergesetzt hab, einfach mal geguckt hab, wie ist es, wenn man mit der Tastatur durch 'ne Seite geht, dass man einfach 'ne Seite versucht so anzulegen, dass die Tastaturnavigation auch stimmt, ne. Also dass die lineare Reihenfolge auch sinnvoll ist. Und wenn man das macht, braucht man eigentlich im Grunde keinen Tab-Index mehr.
Weil wenn wir ehrlich sind, warum haben wir 'n Tab-Index verwendet? In Formularen- Ja, weil wir einfach 'ne andere Struktur haben wollten als dieses halt irgendwie hier ausschaut, ne. Also dann haben wir gesagt: Gut, es wär schön, wenn er jetzt vom Namen vielleicht, zum Geburtsdatum springt, ja. Und dann fängt man an, so, so krude Strukturen zu machen. Aber das ist eigentlich alles total unsinnig, ja.
Sondern man versucht, 'ne Webseite einfach so durchzutappen und zu gucken, ja, das klappt, das sieht gut aus, da kommt man klar, ja. Und deswegen, also man verzichtet einfach mittlerweile auf den Tab-Index. Also ich würd sagen, das ist 'ne Sache, die sich... Obwohl der Tab-Index witzigerweise, das muss ich noch sagen, der kommt wieder, in, bei WAI-ARIA, ne. Also die nutzen Minus Tab-Index und so weiter. Die, da kann man dann direkte Elemente anspringen, ne.
-
Sascha Bei WAI-was?
-
Sylvia WAI-ARIA, diese, diese,, ja, wie soll ich das sagen? Also einfach für alle, die nutzen das schon. Da kann man, zum Beispiel 'n Div-Tag einfach mit 'ner Rolle versehen und, Divs, und das ist jetzt blöd, wenn ich das jetzt so aus dem Stand erklären soll. Und, es gibt schon Screenreader zum Beispiel wie Jaws zehn, die können dann Dinge auslesen. Das sind quasi auch wieder, semantische Informationen, dass er weiß, ach, ne, das ist jetzt 'ne Rolle für mich, das ist 'ne Navigation, das ist 'n Header.
Also das wird, noch mal angereichert und, über diese Accessibility-Schnittstellen der einzelnen Geräte können die Informationen, ausgelesen werden. Das ist halt der große neue Schritt, den es geben wird. Ich denke, dass die meisten Webseiten sich, die jetzt, barrierefrei sein wollen, werden sich damit beschäftigen, ne. Das ist halt der ganz neue Trend. Und die nutzen halt Tab-Index Minus auch zum Beispiel, um irgendwelche Dinge zu regeln.
Deswegen hab ich letztens, wie ich, bei dem Martin Kliem, im Vortragssaal gedacht: Ui, da kommt er wieder, der Tab-Index. Ich hatte mich schon so gefreut. Und bei Access Keys ist es natürlich auch so 'ne Sache, die kann man sich anzeigen lassen, aber die sind ja auch verschwindend, weil, man hat ja kaum Möglichkeiten, Access Keys tatsächlich sinnvoll zu belegen, weil eben ganz wenige Dinge tatsächlich, belegbar sind in den einzelnen, also wenn man jetzt wirklich übergreifend argumentiert.
Und ich glaub, es gibt so was wie null, sowieso nur, es gibt halt, das hab ich letztens wieder gesehen, Tab, Access Keys mit, mit Buchstaben, ja. Es gibt halt so 'n unter Anführungsstandard, den der Hellbusch mal ausgearbeitet hat, quasi die geringstmögliche Menge, auf die man sich dann einigen kann. Und das sind ohnehin nur Zahlen und so was wie nach oben, nach unten, nächste Seite oder so was, ja. Das sind ganz, ganz wenige.
-
Sascha Ja, ja, jetzt weiß ich auch, warum ich das nie benutzt habe. Ich merk's schon.
-
Sylvia Ja, ich hab Standard, standardmäßig hab ich das halt eingebaut, so 'n paar Sachen, aber das sind echt minimale Geschichten. Auch Access Keys sind so 'ne Sache, die kann man dann kombinieren mit Sprungmarken und so weiter, ne. Aber die Leute da sind sehr erfinderisch, im Auszeichnen mit Access Keys. Also, da glaubt man nicht, was man da alles findet.
Und, ich weiß nicht, ob sich die das tatsächlich browserübergreifend und plattformübergreifend mal angeguckt haben, ob das überhaupt funktioniert, ne. Also man hat ja schon mit den unterschiedlichen Browsern Schwierigkeiten und dann hat man noch Plattformschwierigkeiten. Ich bin jetzt nicht so 'n Windows-Mensch, aber, ich hab mir sagen lassen, dass da ja fast alles belegt ist.
-
Sascha Das ist ziemlich so, ja.
-
Sylvia Und, das sind eben auch, ganz bewusst Stiefkinder. Also ich mein, es ist gut, dass die Developer-Toolbar das einem anzeigt, aber es ist nicht unbedingt so 'ne, so 'ne wirklich gängige und genutzte Sache, ne. Also Access Keys ja, aber halt nur bedingt und Tab, Tab-Index eigentlich gar nicht mehr. Ja. Also wir reden ja heute auch quasi richtig Barrierefreiheit über alles mögliche, ne?
-
Sascha Ja, es ist, es ist nicht nur die Bei-, es ist jetzt nicht nur die Web-Developer-Toolbar, aber so, so, so ist es nun mal. Bei Technik wird's ja öfter. Man kommt von Höcksken auf Stöcksken. Ist ja auch nicht so schlimm. Solange wir wie jetzt immer wieder zurückfinden zum Thema. Genau.
-
Sylvia Interessant finde ich, diese, das hab ich auch, lange Zeit immer mal gesehen, dass es das gibt, aber ich hab's nicht wirklich genutzt. Aber, ja durch, durch die Beschäftigung jetzt mit diesem speziellen Fokus der Barrierefreiheit hab ich das doch dann auch mal, mir genauer angesehen. Es funktioniert nicht alles, was die Leute das glauben, das funktioniert. Aber zum Beispiel: Was macht man mit Abkürzungen und Akronymen, ne? Wenn man gucken will, haben die Leute das tatsächlich gemacht, ja.
Da hat man ja so jetzt nicht so unbedingt, die Möglichkeit, das zu machen, weil da gibt's nicht wirklich eine einzelne Option dafür, sondern dafür gibt's dann so was wie, benutzerdefinierte Elemente hervorheben. Das ist unter Hervorheben. Und da hat man die Möglichkeit, bis zu fünf Elemente zu definieren, also mit unterschiedlichen Farben, ne. Also da kann man jetzt reinklimpern Akronym, also Akronym oder APR für, für, ne. Also man kann da reinklimpern, was man will.
Angeblich kann man auch die Sprachauszeichnung Leng, aber das hat bei mir überhaupt nicht funktioniert. Also es scheint irgendwie bugged zu sein. Und da kann man sich dann eben die Dinge anzeigen lassen, ne. Also wenn man da jetzt APR reinpackt, dann sehe ich jetzt zum Beispiel einfach für alle de, die ganzen Abkürzungen. Das BETV, die wird, die Abkürzung an sich wird nicht ausge, ausgeschrieben oder so, aber ich sehe, dass da jetzt eine Abkürzung verwendet wurde.
Ich meine, das sieht man meistens natürlich auch so, wenn man draufguckt, ne, weil das eine spezielle, ja von, mit den Stylesheets eine spezielle Formatierung irgendwie hat oder so was.
-
Sascha Ja, aber es ist halt schon noch mal ein bisschen deutlicher so auf die Art und Weise.
-
Sylvia Genau. Genau. Also das ist halt nur ein Tool, das offensichtlich von vielen ganz gern verwendet wird, um eben sich ganz spezielle Dinge anzusehen.
Da kann man ja auch Kombinationen machen, ne, dass man einfach irgendwie verschiedene Elemente zusammen kombiniert und guckt, da könnte man zum Beispiel auch diese Formulargeschichte noch ausfeilen, dass man einfach sagt: „Zeig mir alle Labels an" und vorher, versucht man halt, diese Formulargeschichte zu nehmen und dann lege ich noch drauf und mir jetzt dann auch noch alle Labels anzeigen.
-
Sascha Ja, ja.
-
Sylvia Ne. Also das ist halt, so 'n benutzerdefiniertes Tool. Finde ich jetzt nicht so schlecht. Ich meine, ich hab gesehen, es gibt Extensions, die zum Beispiel, diese Sachen, also Akronyme und Abkürzungen, auch Längen anzeigen auf eine ganz andere Art und Weise. Das ist schon sehr ausgefeilt. Das war jetzt mal, Moment, ich muss mal gucken, welches Tool das jetzt war. Hmm.
Ja, also das ist sowieso, also wenn man, die Web Developer Toolbar ist gut, sie ist in Teilen auch sehr gut, aber sie hat halt ihre Grenzen. Und wenn man eben noch weitergehen möchte, dann sollte man sich die Firefox Accessibility Extension installieren. Die hat halt einfach schon noch, grad für die Barrierefrei-Freiheit eben wirklich, tolle Sachen mit bei. Übrigens auch WAI-ARIA Support schon.
-
Sascha Okay. Ich werd erst mal lernen müssen, was das ist, aber egal.
-
Sylvia Ja, das ist aber lustig. Wenn du die installierst, kannst du nämlich die Rollen auch schon sehen bei Einfach für alle. Also die kann man richtig auch schon gucken. Und, und die hat eben auch so wie Sprachwechsel anzeigen, hat die tatsächlich nicht jetzt mit so benutzerdefiniert oder so, ne. Also nicht so, dass man erst da schon wieder fünf Ecken gehen muss, sondern dass man einfach sagen kann, ja, zeig mir allen Sprachwechsel an, weil das ist ja auch so eine Sache, das macht ja kein Mensch, ja.
Aber es ist tatsächlich ganz, ganz schrecklich, mit einem Screenreader sich etwas anzuhören, wenn lauter englische Sachen sind zum Beispiel. Das hört sich einfach an extrem, ne. Also deswegen habe ich mir auch bei zum Beispiel beim Bloggen angewöhnt, das immer mit Sprachwechsel zu machen. Am Anfang, bevor ich das wirklich mit Screenreadern gehört hab, hab ich mir gedacht: „Was soll das sein? So wichtig ist es sicher nicht, ne." Aber es ist tatsächlich ganz, ganz komisch, ja, und wichtig.
-
Sascha Also noch mal zur, zur Erklärung: Es ist halt tatsächlich, dass man, Engl-- also Wörter in anderen Sprachen halt auch als solche auszeichnet, auszeichnet, damit halt Accessibility auch als Accessibility gelesen wird und nicht, ja, ich kann das jetzt nicht auf mit Deutsch Acc-Acc-Access.
-
Sylvia Ja, ja.
-
Sascha Whatever. Also zum Beispiel-
-
Sylvia So 'n einfaches Wort wie Chat, ne?
-
Sascha Ja, genau.
-
Sylvia Zum Beispiel FM vier hat das zuerst nicht ausgezeichnet gehabt und das liest er halt dann so,, Cut oder Cat oder irgend so was ganz Komisches. Also wenn wir das jetzt, wir sehen die Sachen ja auch noch, ne. Also wir müssen dann mal die Augen zumachen und sich dann so was anhören und dann, hast du einfach überhaupt keinen Zusammenhang mehr, weil, weil du nicht weißt, was das heißt, ne. Und, diese Accessibility Extension hat halt auch so Möglichkeiten, Abkürzungen, viel besser anzuzeigen.
Also du kriegst es auch so wie hier, ne, wo dann steht APR oder Akronym, ne, aber auch schon, man kann, auch sagen: „Bitte schreib mir diese Abkürzung aus." Da kann man sich dann richtig anzeigen lassen, wie, wie und was abgekürzt ist. Das ist schon ausgefeilter. Also das muss man sowieso sagen, dass diese Firefox Accessibility Extension sehr stark im Kleinteiligen, vorteilhaft arbeitet, ne. Also dass wirklich so ganz, ganz schönes Feintuning halt drinnen ist, ne.
Also da scheitert natürlich die Web Developer Toolbar irgendwann dann doch, weil das ist halt jetzt nicht, auf solche kleinteiligen Sachen ausgerichtet, ne. Das ist halt doch auf den, auf den Entwickler ausgerichtet und nicht so sehr, auf so soziale spezielle Aspekte. Obwohl für mich sind's ganz normale Aspekte, aber nicht jeder Webentwickler interessiert sich für die Sprachauszeichnung, ne. Ist halt so.
-
Sascha Ist richtig, ja.
-
Sylvia Ja, das waren die benutzerdefinierten Elemente. Und ja, was haben wir sonst noch? Gott, Fenstergröße anpassen. Ja, das ist jedem klar, denke ich, ne.
-
Sascha Ja, denk ich schon. Also das sollte jeder schon mal gesehen haben. Ja, ich, ja, genau.
-
Sylvia Und ansonsten, gut, also die klassischen Funktionen ohne JavaScript, ne. Sich die Seite eben ohne JavaScript ansehen, ne. Was funktioniert da noch? Also es ist meistens auch ganz gut, für Flash, weil dann funktioniert Flash halt auch bei den meisten nicht mehr, die es via JavaScript eingebaut haben. Und, da halt auch immer noch mal durchgehen, ob das alles funktioniert. Da stoßen wir meist-
-
Sascha Und auch da eine wirklich vernünftige Anzeige des, der Tatsache, dass JavaScript abgeschaltet ist. Ich hab, ich, ich surfe seit, einem Jahr ungefähr mit No Script, ja, und, es ist mir schon, obwohl ich ja nur weiß, dass es da ist, ist mir schon so oft passiert, dass ich davor stand und irgendwie fünfmal ein Formular abgeschickt habe auf einer neuen Seite und irgendwie immer dachte: „Warum passiert jetzt nix?
Also irgendwie mache ich was falsch." Und ich irgendwann festgestellt hab, ja Mist, ich musste ja JavaScript aktivieren. Und ich hab, bei mir selber auch schon oft erlebt, dass ich halt immer entwickle, entwickle, entwickle und immer so denke: Na ja, die wirklich zugängliche, JavaScript-Entschuldigung so, die machst du dann am Ende und dann hab ich's vergessen.
Und dann hat's, hatt ich am Ende nicht die Meldung: „Hier, du surfst hier gerade ohne JavaScript, die Hälfte funktioniert nicht“, oder ich baue jetzt gerade an einer Videoseite, da wird gar nichts funktionieren ohne JavaScript, weil eben mit Flash und so weiter.
-
Sylvia Ja, ja.
-
Sascha Und, da hab ich mir aber diesmal gleich am Anfang einen Riesenkasten quer über die,, quer über die Seite gelegt für die Leute, die JavaScript deaktiviert haben in Rot. Ja, das heißt, sagt: „Hier, du hast JavaScript deaktiviert, geht nicht.“
-
Sylvia Ja, ich meine, ich muss sagen, ich bin ja, ich bin da ja ein bisschen jetzt positiver gestimmt, nachdem ich mich mit, JavaScript Frameworks ein bisschen beschäftigt hab, zum Beispiel jQuery. Und, also fast jedes jQuery-, Skript, das man sich irgendwie reinholt, sei es eine Bildergalerie oder sei es irgendeine Blätternfunktion oder Ähnliches, ja, hat tatsächlich eine No-Script-Variante. Also das sieht dann meistens nicht so toll aus.
Also die Bildergalerie sind halt die Bilder untereinander als Liste, ne, aber die kann man sogar noch per CSS layouten, ne. Also das find ich halt schon, ziemlich bemerkenswert, diese Entwicklung. Und, da muss ich sagen, da hat sich wirklich viel getan, ne. Da-- ich ma-- ich würd sagen, dann orientiert man sich stärker an diesen Frameworks und greift auf solche Module zurück, weil die tatsächlich eben darauf Wert legen, ja.
Diese Eigenprogrammierung, ne, die Leute legen meistens überhaupt nicht drauf Wert, ne. Also da muss man's immer dem Programmierer wieder zurückgehen und sagen: „Du, hast du dran gedacht, dass diese Suche vielleicht auch irgendwie dann noch funktioniert, wenn JavaScript nicht aktiv ist? Wär schon ganz fein, ja.“
-
Sascha Ja, lustigerweise mache ich das tatsächlich so, dass ich mich, dass ich meistens erst meinen semantischen, meinen semantischen Quellcode habe quasi und dann, mir denke, also jetzt zum Beispiel bei diesem Beispiel dieser, dieser, dieser Video, dieser Videoseite, dann sage: Okay, ich hab da halt ein Vorschaubild, ich hab eine Beschreibung, einen Titel und jetzt versuche ich, mir quasi mit, CSS und, dem, dem JavaScript, also ich hab da auch jQuery benutzt, dann quasi das, schön zu animieren.
So, dann ist halt quasi von Natur aus die Tatsache da, dass, wenn ich kein JavaScript habe, es, entweder mit CSS gut aussieht und nur nicht animiert ist oder halt eben, komplett eben die normale Struktur hat. Also wenn ich auch noch CSS abschalte, sieht's halt auch,, vernünftig aus. Das ist schön, weil man ja eben tatsächlich mit solchen Sachen wie jQuery eben die, die ganzen IDs und Klassen eben direkt anspricht und nicht irgendwie, das in irgendeinen Font-Tag oder so reinschreibt. Horror.
Das, das ist auf jeden Fall eine po-- Da hat, sagen wir mal, JavaScript so ein bisschen das Dämonische verloren, so.
-
Sylvia Ja, also das auch, denk ich mir, eben in der Barrierefreiheit sich da auch dahingehend, im Verständnis so, weißt du, und Akzeptanz einfach was geändert hat. Weil erstens mal gibt's genug Leute, die ohnehin, das jetzt befürworten, ne. Ich mein, wir haben ja auch genug Entwickler, die ständig irgendwie, JavaScript-, Anwendungen entwickeln und es hat sich allgemein, glaube ich, langsam was getan, dass die Leute merken: Hm, ne, also es funktioniert auch ohne, ne.
Also das ist einfach automatisch und, das find ich einfach auch jetzt für den täglichen, barrierefreien Entwickler ist es auch 'ne extreme Erleichterung.
Weil sonst musste man immer irgendwie erst mal, ja irgendwelche Entscheidungsvorgänge noch in Gang bringen und sagen: „Könnte jetzt jemand vielleicht mal irgendwie?“, sondern ich hol mir so ein Script, sehe: Ah, das funktioniert auch so, wenn ich dieses und jene, jenes deaktiviere und damit ist einfach für den normalen Ablauf, eines Entwicklers, einfach auch mal wieder, Entspannung angesagt, ne. Und man, man freut sich, weil Dinge halt, ja auch, mit JavaScript wunderbar funktionieren.
Und das, das ist echt eine super Entwicklung, muss ich schon sagen. Jo, was haben wir denn noch? Ah ja, die Tabellen haben wir noch, ne? Das ist natürlich, auch ein schwieriges Gebiet, weil, ich hab's ja, glaub ich, als Stiefkind bezeichnet, ne, Datentabellen. Ich weiß gar nicht, wie viele Leute das eigentlich schon realisiert haben, dass man Tabellen, die nicht für Layout verwenden, verwendet werden, einfach anders auszeichnen muss.
Und, da gibt es einfach, das muss man auch, nach der Durchsicht der restlichen Plugins, sagen, dass das alles noch ziemlich, rudimentär ist, was man da tatsächlich damit machen kann. Also, es ist auch relativ komplex. Also ich mein, einfachfüralle.de hat ja diese verschiedenen Tabellen,, quasi beispielhaft einfach mal vorgeführt und es gibt auch wirklich eben komplexe Sachen, mit denen ich auch kaum zu tun habe. Also mit Axis und so arbeite ich eigentlich im Grunde nicht, ne.
Ich hab mir das mal angesehen, aber ich glaub, wenn ich das jetzt, erklären müsste, würde ich wahrscheinlich auch irgendwie, ziemlich schwimmen. Was ganz gut geht, ist einfache Datentabellen mit TH, TDs, mit Scope und, ne, also Scope heißt die Verbindung zwischen der Tabellenüberschrift und den restlichen Zellen. Die kann eben spaltenweise sein oder reihenweise sein, call oder raw. Das kriegen diese Tools einigermaßen hin, das darzustellen.
Wenn's dann komplexer, wird, also ID und Headers kriegen sie auch noch hin, weil das ist ja eine Alternative. Man sagt ja immer so, wenn die Tabelle einigermaßen einfach strukturiert ist, reicht diese Scope-Geschichte. Ansonsten muss man wirklich versuchen, die eindeutiger zu verbinden mit ID und Headers. Das ist auch von der Dynamisierung relativ üppig, das tatsächlich auch zu machen. Und das kriegen sie auch noch einigermaßen hin.
Aber wenn's dann wirklich komplex wird und, da sind ja einige sehr komplexe Tabellen drinnen und dann, ist find ich, leidet einfach die Übersicht in dieser Outline, ne. Man geht dann eben hin. Jetzt muss ich mal gucken. Wo haben wir denn das? Tabellenelemente hervorheben, Tabellenüberschriften, Tabellenzellen und Tabellen an sich.
Und Tabellenüberschriften, das hatte ich ja im Artikel schon angeführt, damit ist nicht die TH gemeint, sondern das sind die Captions- -die wahrscheinlich auch kein Mensch verwendet.
-
Sascha Muss ich zugeben, habe ich tatsächlich noch nicht benutzt, ja.
-
Sylvia Ja, es ist auch manchmal besser, da eine H irgendwie zu verwenden über der Überschrift. Ich weiß es auch nicht. Ich hab, glaub ich, auch noch nicht viele Captions verwendet. Und, aber Tabellenzellen meint, er zeigt durchaus an, diese Outline zeigt, zeigt durchaus an, ob, das 'ne TH oder 'ne TD ist. Also da wird unterschieden. Und Tabellen ist einfach, da würden einfach die Tabellen an sich angezeigt werden. Und dann gab's aber noch was, glaub ich. Das war unter genau.
Also zum Beispiel so was, Tiefe der Tabellenverschränkelung einblenden, ne. Also das ist eine Option, glaub ich, die heute dann eher überflüssig ist, weil, okay, es wird wahrscheinlich auch Datentabellen geben, die geschachtelt sind, ne. Aber das möchte ich dann eigentlich niemand antun. Ich würde sagen, das ist so ein Rudiment, das irgendwann wahrscheinlich, rausgenommen werden wird.
Und Tabelleninformationen einblenden, da werden dann, glaub ich, auf der Oberfläche selbst, die Tabelle angezeigt. Muss ich jetzt, muss mir, muss mir erst eine Tabelle suchen.
-
Sascha Also ich sehe jetzt tatsächlich original gar nix, wenn ich das aktiviere, aber vielleicht ist das auch was in, vielleicht ist das auch irgendwas, was in der Tabelle jetzt nicht angezeigt, was da nicht drin ist, aber...
-
Sylvia Ich muss jetzt grad mal gucken, wo war diese Tabellengeschichte? Benimmregeln für Datentabellen. So, dann nehme ich mir das Code Listing von einfach für alle und die erste Tabelle. Und dann Informationen, Tabelleninformationen. Ach ja, okay. Also Tabelleninformationen einblenden ist dann so was wie, Spaltenüberschrift. Ne? Zeilenüberschrift. Also da zeigt er quasi an, THs und bei den TDs selber nix. Abkürzungen zeigt er auch. Das fand ich interessant.
Also dass er wirklich auch die Abkürzungen alle anzeigt. Und dann hat man auch hervorheben Tabellenelemente, Tabellenzellen. Genau. Und Spaltenüberschrift meint er dann, dass das eben, er schreibt hier oben, das ist Scope Col, ne, ist dann Spaltenüberschrift. Ich glaub, das heißt im Englischen auch irgendwie anders. Und,, links sind dann die Raw und das heißt dann Zeilenüberschrift. Und, ehrlich gesagt, so eine Ansicht, war auch bei den anderen Tools nicht viel besser.
Also ich hab mir das dann angesehen. Zum Beispiel der Table Inspector, den es noch gibt, der kann weniger als der Web Developer. Der zeigt zum Beispiel überhaupt keine THs und TDs an, auch keine Captures. Also es ist ganz, ganz merkwürdig, obwohl es ein Table Inspector ist. Dann gibt's was ganz Komplexes. So was hab ich echt noch nie gesehen. Das funktioniert auch nur, das heißt Com Tab, also komplexe Tabellen. Und es funktioniert nur bei Tabellen, die mit ID und Headers verbunden sind.
Und so was hab ich echt noch nie gesehen. Es ist, es ist komplett komplex. Ja, also ich hab's überhaupt nicht wirklich verstanden. Und man kann zum Beispiel, man muss irgendwelche Tastenkombinationen, ich glaub, irgendwie Control drücken und dann geht man auf eine Tabellenzelle und dann sieht man die entsprechende, Zeilenüberschrift und Spaltenüberschrift mit aufblinken. Ja. Aber man muss dauernd irgendwie diese Keys wechseln. Das ich, das ich einfach überhaupt nicht warm geworden bin damit.
Aber vielleicht, wenn man da öfter damit arbeitet, könnte man sich eben die ganzen Sachen irgendwie, anlernen. Ich weiß es nicht, ne. Und die haben halt auch so eine interessante Funktion, weil manche Tabellen sind ja schon so geleertete, dass man wirklich nicht mehr die Tabelle an sich erkennt, so besonders, ne. Dann kann man das CSS für Tabellen deaktivieren und dann sieht man eben die ganz rudimentäre Tabelle, ne. Aber wie gesagt, wirklich empfehlenswert, glaub ich, ist es nicht, das Tool.
Und dann gab's noch, genau, und die, die von JUSIS Studio gibt's ja auch die Accessibility Toolbar. Die ist ähnlich gut mit der Tabelle zu, zu gucken wie beim Web Developer, aber man kann eben auf einen Klick auch sehen die Verbindungen, weil hier kann man's, kann man's halt natürlich lesen. Man kann sagen, Zelle vierunddreißig hat oben 'ne Spaltenüberschrift und links, ne- -ist es mit Borussia Mönchengladbach verbunden, ne.
Das sieht man schon, aber ja, einfach für alle, die einen Hang zum Fußball, ne. Und und bei dieser JUSIS Studio Toolbar ist es tatsächlich so, dass man eben draufklicken kann und er zeigt einem sofort, mit was, die Zelle verbunden auch jetzt. Das ist halt bei komplexen Tabellen, die es da auch noch gibt, wahrscheinlich ein ziemlicher Vorteil. Aber ehrlich gesagt, ich muss auch dann irgendwann die Fahnen strecken, wenn die, wenn diese Datentabellen so komplex werden.
Also es heißt ja immer so, man sollte dann lieber versuchen, die Sachen entweder in zwei Tabellen zu packen oder einfach versuchen abzuspecken, ne. Weil es ist tatsächlich auch, so ein Screenreader-Nutzer hat auch so seinen Spaß, solche Tabellen dann vorgelesen zu bekommen. Ich glaub, da muss man auch ein ziemliches, Töpfchen sein, um diese, um diese ganzen Funktionen und Inhalte dann tatsächlich noch richtig zu kombinieren, ne. Also ich, ich halte, ich war überrascht, dass es das gibt, ne.
Also das muss ich sagen, es war für mich eher eine Entdeckung bei der Web Developer Toolbar, dass es diese Darstellung der Tabellen gibt und deswegen hatte ich halt im den Artikel eben ein bisschen ausführlicher darüber berichtet, aber ich fürchte, wenn's komplexer wird, dann ist es einfach auch nicht das der richtige Weg, ne. Also dann hat es mehr so was von einem Geheimstudium.
-
Sascha Ja, aber es ist halt auf jeden Fall ein nettes Tool eben tatsächlich für Leute, die jetzt, mal da, da einsteigen wollen und jetzt nicht gleich die,, Barrierefreiheitsprofis, werden wollen oder respektive wenn man halt tatsächlich für kleines Projekt, mal anfängt. Also damit kann man halt schon relativ viel machen. Das ist ja genau das, was wir zeigen wollten.
-
Sylvia Ja, ich denk, ich denk auch. Ich mein, wahrscheinlich auch nicht, weiß nicht, wie groß die Prozentzahl ist, die tatsächlich mit Datentabellen zu tun haben werden. Ich meine, man muss sagen an sich, dass es überhaupt möglich ist, dass der das so darstellt- -ist wahrscheinlich schon toll. Weil die meisten Toolbars würden sich da wahrscheinlich einen feuchten Kehricht darum irgendwie kümmern, ne. Also insofern ist das schon eine tolle Sache, ne.
Nur ich denke, wenn man tagtäglich damit arbeiten muss mit so einer Datentabellendarstellung, dann wär ich wahrscheinlich mit der Zeit auch ein bisschen abgenervt, ja. Dann würde ich denken: Bitte macht uns was Netteres. Also irgendwas, was einfach ein bisschen, bisschen mehr uns hilft, wirklich damit arbeiten zu können, ne. Man sieht halt an diesen Ecken und Kanten, das ist toll, dass es das gibt, ne, aber es müsste eigentlich noch ausgebaut werden, ne.
Es ist einfach noch für den täglichen, für die tägliche Pflege so einer Datentabelle, glaub ich, hätte man nicht Lust, damit zu arbeiten, ne. Das muss man einfach sagen. Das muss gesagt werden.
-
Sascha Das muss gesagt werden.
-
Sylvia Das muss gesagt werden. Ja, dann sind wir ja, glaub ich, fast durch, ne?
-
Sascha Genau, dann kommt noch ein ganz, interessanter Punkt. Den du, User Styles verwenden genannt hast. Das, klingt für mich, also ich muss ehrlich gestehen, jetzt wo ich sehe, wo, wo ich die Folgepunkte sehe- -denke ich mir: Ja, das macht eigentlich total Sinn. Warum bin ich denn vorher noch nicht drauf gekommen? Aber das ist ja echt, 'ne schöne Idee auf jeden Fall.
-
Sylvia Ja, das war halt so eine Sache, das hab ich in, im Rahmen der meiner Beschäftigung mit der Tastaturnavigation erst entdeckt. Ich mein, irgendwie hab ich das schon wahrgenommen, dass es so was gibt wie User Styles Org, ja. Und, ich hab das irgendwie nie so richtig realisiert, was da eigentlich passiert. Ich hab das, glaub ich, nur so, im, am Rande wahrgenommen und bin halt drauf gekommen: Gut, das ist ja echt 'ne tolle Sache.
Das ist ja auch diese neue Bewegung der Social Accessibility, dass man einfach sagt: Gut, ich schau mal, wie kann ich jetzt etwas, reparieren auf die schnelle Form, damit ich jetzt einfach damit umgehen kann. Und das machen halt User für sich und für andere, ne. Die stellen Skripte zur Verfügung. Das gibt's zum Beispiel für Twitter, weil Twitter hat ja extreme Accessibility-Probleme.
Also ohne JavaScript oder so kann man teilweise eben, zum Beispiel, glaub ich, nicht mal replyen, eine Antwort geben oder so was. Und die schreiben dann so Skripte, damit eben Leute das dann doch können, ne, die eben Probleme haben. Und diese Toolbar hat die Möglichkeit, bei einem Punkt CSS ein Benutzer-Style-Sheet hinzuzufügen. Und da kann man sich jetzt einfach, ich hab, glaub ich, zwei angegeben, das können die Leute dann auch runterladen.
So 'n logischen Style-Sheet, das sieht ziemlich heftig aus, ja. Also da, da ist eigentlich im Grunde, ja, 'ne ganz eigene, da sieht 'ne Seite einfach nicht mehr aus, wie sie aussieht, sondern sie hat einfach einen ganz eigenen Style, ganz einfach strukturiert. Und da kann man sich mal vorstellen, einfach nur um 'ne Idee zu kriegen, wie Leute einfach, sich quasi eben ihre Umgebung einstellen, ne, wie sie die eigentlich, layouten, ne.
Also dann hat man sowieso, müsste man im Grunde eh vom Web Abschied nehmen, weil das hat ja absolut nix mehr damit zu tun, wie 'ne Webseite normalerweise aussieht. Aber ich finde, das ist ganz gut, weil dann kann man, wenn man sich so 'n paar Style Sheets einfach mal reinzieht, kann man sich das echt besser vorstellen, was darunter zu verstehen ist.
Das ist es nicht, weil ein anderer vielleicht nur Gelbtöne will, sondern es geht einfach nur darum, dass Leute einfach ihre Style Sheets, sich zurechtmachen, ne. Also zum Beispiel, ich hab bei, bei, bei User Styles Org dann solche Sachen gefunden wie so 'n Schnellfix Barrierefreiheit. Da ist die Schrift einfach viel größer und die Kontraste sehen ganz anders aus. Das kann man sich dann einfach mal installieren und gucken.
Da würd ich dann aber vorschlagen, dass man dieses, Plugin stylish verwendet. Das ist ganz cool. Darauf funktionieren alle diese User Style Org Teile. Die kann man einfach reinziehen und dann verschiedenlich aktivieren und dann einfach mal testen.
-
Sascha Ja, da bin ich das erste Mal drauf aufmerksam geworden, als Heise sein, Design geändert hat und alle Menschen total angestreßt waren davon. Und, es gibt halt ein, bei, ein User Style Sheet quasi, das, das wieder ins alte Heise-Design zurückholt. Und, da, da bin ich das, da bin ich dadurch aufmerksam geworden, ja.
-
Sylvia Ja, ich mein, das ist ja auch 'ne ganz normale Sache. Zum Beispiel bei Windows gab's das doch so bei XP, man wollte irgendwie wieder so was es wie vorher aussieht oder so, ne.
-
Sascha Ja, ja.
-
Sylvia Also bei, ne, dass man sagt, ja, ich will den Style haben und nicht diesen anderen komischen Bold Style da. Also im Grunde ist es ja nix anderes. Oder dass Leute ihre Browserumgebungen mit irgendwelchen anderen Styles belegen, ja. Kann man auch Webseiten so machen, ne. Aber jetzt, wir, wir sprechen ja über den barrierefreien Aspekt. Insofern ist es natürlich noch ganz speziell.
Also ich fand halt zum Beispiel dieses Low Vision Style Sheet extrem, weil, es hebt sämtliche, sämtliche, Struktur der Webseite auf. Vor allem das Schwierige ist, dass dieses Style Sheet macht, also das ist wohl auch 'n getestetes Style Sheet, also für gewisse Benutzergruppen, macht um jedes Element, quasi 'n Block-Element.
Also jedes Element wird zum Block-Element und das kann natürlich auf Dauer dann auch 'n bisschen anstrengend sein, also für uns, uns, uns einen so, weil man sich überhaupt nicht mehr richtig zurechtfindet, ne. Also zum Beispiel normale Inline-Elemente sind alle nur Blöcke. Aber, -
-
Sascha Oh ja, ich seh's gerade. Meine Herren.
-
Sylvia Meine Herren, ne? Sieht gut aus. Find ich.
-
Sascha Erinnert an alte C64-Spiele mit diesem braunen Hintergrund. Oh Mann, ja. Also beziehungsweise das ist jetzt, glaub ich, der Hintergrund der Seite, aber ja.
-
Sylvia Ja, ja. Aber gut,, ich fand's halt als, als Sache interessant. Ich mein, wenn man tatsächlich länger damit spielen möchte, dann macht's schon eher, ist es eher besser, dass man diese Erweiterung stylish, hat, weil die User Style Org Sachen basieren offensichtlich auf so 'n Format, was dann nur läuft über stylish. Aber, weil das hält das Ganze dann auch vor für alle Seiten und so. Dann kann man dann mehr damit spielen, ne.
Also man kann natürlich auch das jeweils da hinzufügen, bei der Web Developer, aber ich denk, wenn man dauerhaft 'n bisschen, was machen möchte, dann, bringt diese Zusatz Erweiterung dann mehr. Ich fand's halt nur interessant. Das 'ne Sache, die man einfach sich mal anschauen kann. Man kriegt 'n bisschen anderen Blickwinkel. Ja. Tja, dann sind wir eigentlich, glaub ich, langsam durch, ne?
-
Sascha Ja, wir haben ja doch die Stunde vollgekriegt.
-
Sylvia Ne? Das ist ja super, ne?
-
Sascha Sehr schön.
-
Sylvia Hätt ich, hätt ich nicht gedacht.
-
Sascha Ja, hab ich am Anfang auch nicht gedacht, aber wie gesagt, wir sind ja auch zwei, dreimal abgewichen. Entschuldigt uns dafür. Nichtsdestotrotz erhaltet ihr, wie gesagt, selbstverständlich die, Themenauflistung in den Show Notes und darin dann auch alle Links zu den Tools, von denen ich jetzt auch von einigen neuen gehört habe, zugegebenerweise. Und auch zu eben diesen User Style Sheets zum Beispiel und zu den Artikeln, die Silvia am Anfang erwähnt habt, hat.
Und, dann könnt ihr euch schauen, ob ihr entweder mit dieser Folge, Technikwürze jetzt ein paar neue Tricks und Kniffe für die Developer Toolbar gelernt habt oder vielleicht Spaß dran bekommen habt, eigene Kombinationen von Web Developer Toolbars, zum, Testen von Barrierefreiheit auszuprobieren oder ob ihr euch, wieder ein paar mehr Firefox-Plugins reinknallt, auf dass demnächst zwei Gigabyte Arbeitsspeicher vom Firefox belegt werden.
Und wenn ihr selber noch 'n paar Tipps dazu habt, dann wie immer gilt:, schreibt uns einen Kommentar in der Episoden, in den Show Notes einfach. Genau. Gut, Silvia, dann danke ich dir ganz herzlich dafür, dass du, wie mir entfallen war, die erste Sendung in diesem neuen Jahr, mit mir zusammen gemacht hast. Schauen wir mal, ob wir wieder es schaffen, in den einwöchigen Rhythmus reinzukommen, nachdem wir jetzt 'ne etwas längere Weihnachtspause hatten.
Danke für deine, für deine Insights und, hoffentlich bis zur nächsten Sendung.
-
Sylvia Ja, danke schön.
-
Einspieler Mehr Qualität im Webdesign durch Webstandards. Tipps und Tricks zur Umsetzung findet ihr bei den Webkrauts auf Webkrauts.de. Für ein besseres Web.
Weitere Informationen und die Links zur Sendung auf technikwürze.de.
Begriffsklärung: Was alles ist eine "Web Developer Toolbar"
- Wir reden über die Web Developer Erweiterung (http://chrispederick.com/work/web-developer/ ) für Firefox, Flock, Seamonkey für Windows, MacOSX und Linux
- Nicht zu verwechseln mit: Internet Explorer Developer Toolbar 1
- Außerdem gibt es noch: Web Developer Toolbar für Opera
Artikel, die explizit auf die Analyse von Barrierefreiheit mit der Web Developer Toolbar hinweisen: - Patrick H. Lauke: Evaluating Web Sites for Accessibility with Firefox (2005) [nach Checkpunkten des WCAG aufgebaut]
- Carsten Peters: Analyse von Barrierefreiheit mit Hilfe von Firefox-Erweiterungen 1 (2006) [ist nach Vorgaben des BITV aufgebaut]
- FireFox Web Accessibility Extension 1 (2007) - irreführender Titel, aber es geht tatsächlich sehr ausführlich um die Web Developer Toolbar ;)
- Sylvia Egger: Barrierefreiheit optimieren mit der Web Developer Toolbar 1 (2008)
Themenbereiche zum Optimieren
- Grafiken
- ALT-Attribute
- Ohne Grafiken
- Hintergrundgrafiken entfernen
- Schriftgrafiken erruieren
- Tabellen
- Überschriften
- ROW, SCOPE
- ID, HEADERS
- Komplexer Strukturen
- Formulare
- Überschriftenhierarchie
- Outline
- auf der Webseite anzeigen
- Accesskeys und (Tabindex)
- ohne Javascript
- Farben und Kontraste
- alle Farben deaktivieren
- Linearisierung
- CSS deaktivieren
- Seite linearisieren
- Fenstergrößen anpassen
- Mit benutzerdefinierten Elementen arbeiten:
- Sprachauszeichnung: LANG
- Akronyme und Abkürzungen: ACRONYM, ABBR
- Userstyles verwenden
- Low Vision Stylesheet
- Stylisch: Erweiterung zur Einbindung von Userstyles
Userstyle: Schnellfix Barrierefreiheit
- Userstyle: Dyslexie
Alternative Erweiterungen:
com tab 1
- Table Inspector 1
- Für die Überschriftenhierarchie
- Headingsmap
- Documentmap 1
Erwähnungen 13
Kommentare 7
-
Eine tolle Technikwürze - seit langer Zeit die Beste, wie ich persönlich finde. Gut aufbereitet, fachlich kompetent und für viele Nutzer im Web sicherlich eine gänzlich neue Erfahrung. Ich frage mich seit langem schon, wie ich ohne die eierlegende Wollmilchsau (aka Web Developer Toolbar) jemals Websites erstellen oder prüfen konnte. Bitte ein ähnliches Special noch zu FireBug!
-
Endlich wieder eine Sendung, mir wurde schon bange wie vor einem Jahr um die Zeit ;-)
Schön gemacht, viele kleine Sachen gelernt, die ich nicht kannte. Am Tollsten der Tipp mit XRefresh!
Danke -
Mir gefiel der lockere Moderationsstil von Sascha wieder sehr gut! Die Usability, ja da kam wieder ein bisschen das schlechte Gewissen in mir hoch. Macht halt alles sehr viel Arbeit.
Viele Funktionen in der Toolbar, die ich nicht kannte.
Gruß rp -
In puncto "SpeedCheck" empfehle ich den "Charles Webdebugging Proxy", eine Anwendung die sich als Dienst vor alle ein/ausgehenden Internetverbindungen schaltet und somit genaue Auskunft über alle Requests liefert. Für alle brauchbar denen die Auskünfte aus Web Developer Toolbar oder Firebug nicht reichen.
Vom Response-Header, Dateigröße, Antwortzeit, etc. bis hin zu einer sinnvollen "Bandwidth Throttling Funktion", die es einem ermöglicht eben das zu tun: die maximale Datenübertragung drosseln. So kann man, selbst wenn man direkt neben dem Rechenzentrum an einer Kabelstandleitung hockt, sehen wie eine Seite beim Kunden (mit z.B.IHGITT-ISDN) performt.
gruß
-
Tolle Folge! Gerade durch diese Abschweifungen in Richtung allgemeine Accessibility und weg von der reinen Betrachtung der Webdev. Toolbar sind einige interessante Denkanstösse in Sachen Barrierefreiheit zum Vorschein gekommen!
Danke für eure Zeit und Mühe!
-
Danke für das positive und motivierende Feedback Euch allen :)
-
Hi David,
mach doch mal eine Box in der man Themenvorschläge an dich schicken kann. Das kommt bestimmt bei deinen Stammzuhörer gut an!