Formulare total 2 (Barrierefreie Formulare) Technikwürze 158
Auf jeder Webseite sind sie zu finden: Formulare. In der vorherigen und dieser Technikwürze wollen Sylvia Egger, Sascha Postner und Daniel Jagszent das Thema von allen Seiten beleuchten. In dieser Folge geht es um barrierefreie Formulare, mit Einblicken in HTML5 und WAI-ARIA.
Transkript der Folge
-
Einspieler Überschrift Ebene ein Kontakt. Bitte füllen Sie das folgende Formular aus. Punkt. Ihr hört die einhundertachtundfünfzig. Punkt. Folge von Technikwürze, Komma, eurem Design- und Webstandards-Podcast. Punkt. Heute mit Daniel Jackzent, Komma, Sascha Posner und Sylvia Egger zum Thema barrierefreie Formulare. Punkt.
-
Einspieler Herzlich willkommen zu Technikwürze, eurem Design- und Webstandards-Podcast.
-
Sascha Ja, herzlich willkommen, zu einer neuen Folge Technikwürze. Ihr habt an dem, Vor-Intro schon ein bisschen gemerkt, es geht um barrierefreie Formulare und wir haben, einige interessante Tonbeispiele aus dem Screenreader mitgebracht. Und mitgebracht hat uns diese Tonbeispiele Sylvia Egger. Hallo Sylvia.
-
Sylvia Hallo.
-
Sascha Und mit im Studio ist wie bei der letzten Formularwürze beim Formulartotal Teil eins auch der Daniel Jackzent. Hallo Daniel.
-
Daniel Hallo Sascha.
-
Sascha Ich übergib den Staffelstab quasi, stante pede direkt an Sylvia, die, auch wenn sie vielleicht nicht ganz glücklich damit ist, unser Experte jetzt in dieser, Sendung sein wird, denn, ich bin bei dem Thema nicht der allergrößte Kenner. Deshalb Sylvia, starte durch.
-
Sylvia Ich bin immer ein ganz fröhlicher Experte. Ja, ich hab das ja erwartet. Wir hatten das ja auch besprochen, das ist kein Problem. Ich hab, versucht, das ein bisschen aufzubereiten. Da gibt's ja relativ, es gibt da einen gewissen Standard, der ja mit Webstandards, sehr stark gekoppelt ist, wie man Formulare einfach bauen soll. Das hat man in der letzten Sendung ja auch in der Form nicht wirklich vertieft. Ich denk, da gehen wir als Erstes, irgendwie rein.
Wir hören uns ganz am Anfang auch ein normales Standardformular an, damit man einfach mal so einen Eindruck kriegt, wie hört sich das denn tatsächlich an? Als Zweites, ich hab halt versucht, für mich auch ein paar neue, Dinge zu erfahren, hab ich mich halt mit dem aktuellen WCAG 2 beschäftigt und was da so eigentlich zu Formularen gefordert wird. Das ist ja quasi unser quasi aktuellster Standard, weil auf die BITV auf zwei warten wir ja noch.
Insofern, beschäftige ich mich eigentlich die ganze Zeit nur noch mit dem WCAG 2. Also keine Gesetzgebung, ist aber eine Empfehlung. Und, dann hab ich mich ein bisschen weiterbewegt und hab geguckt, so ja, ich wollt auch 'n bisschen Blick in die Zukunft starten, der dann auch unsere erste Sendung ein bisschen abrundet. Wie sieht es dann mit HTML5-Formularen aus? Die gibt's ja tatsächlich auch schon. Wie sieht die Unterstützung aus und was bedeutet das zum Beispiel so 'n bisschen?
Also ich hab jetzt keine Breitband, Geschichten zu bieten, sondern mehr so, Einblicke, kurze Einblicke: Was kann man da für die Barrierefreiheit finden? Wie sieht es damit aus? Und als letzten Punkt, hat, Sascha auch angesprochen, er hätte gerne auch etwas zu WAI-ARIA und Formulare und, das war für mich auch so 'ne Sache. Natürlich Pflichtfelder, das wusste ich, aber ich hab mich nur nicht, noch nicht wirklich, intensiver damit beschäftigt.
Das hab ich aber jetzt gemacht und, da kann ich auch einige Tonbeispiele dann dazu wieder vorstellen.
-
Sascha Das klingt auf jeden Fall nach erstens einer sehr intensiven, aber zweitens auch sehr interessanten Technikwürze.
-
Sylvia Ja, ich fand's für mich selber sehr interessant und ich hoffe, dass ich das dann auch entsprechend vermitteln kann.
Wir haben natürlich wieder das Problem, dass wir eben visuell die Sachen nicht so darstellen können, aber am Screenreader, wenn man eben zuhört, das ist ja vom Medium her jetzt auch ganz passend, kann man dann eben ganz gut nachvollziehen, was die Unterschiede sind, warum gewisse Dinge sich dann eben ganz furchtbar anhören in dem Sinn, man, es fehlt einfach die Information oder wie die Information durch WAI-ARIA zum Beispiel ziemlich smooth werden kann, ne?
Okay, ich würd sagen, nachdem wir jetzt grad, die Biene, Preisverleihung hatten, hab ich mir, das, Formular vorgenommen, von Manufaktum.de. Die haben ja die Goldene bekommen dieses Jahr und, die haben jetzt kein reines Kontaktformular, das gibt's wohl nicht. Also da gibt's, da kann man nur quasi eben 'ne E-Mail-Adresse, klicken, aber es gibt so was wie Newsletter-Formular, ist ja auch eher was Klassisches, ne? Und das spielen, spielen wir jetzt ein.
Ist auch ein bisschen längeres Beispiel, weil es quasi eben tatsächlich das ganze Formular durchgeht, aber ich möchte am Anfang, dass tatsächlich, ein größerer Eindruck, ne, entsteht, wie sich das anhört. Es ist, Jaws. Jaws ist, sozusagen der verbreitetste Screenreader, auch der teuerste, so ungefähr. Und, wir hören aber auch Beispiele von, NVDA später, was ein Open-Source-Screenreader ist, kann quasi gratis heruntergeladen werden und sofort gestartet werden.
Ich glaube, die meiste Zeit hab ich mit dem Firefox 3 das gemacht und wechselweise dann auch mit dem IE 8, aber ganz kann ich's jetzt nicht mehr zuordnen, aber vielleicht fällt's mit 'm Einzelfall dann wieder ein. Okay, ich mach das jetzt mal auf hier. Das sind ungefähr so zwei Minuten.
Vor Tab Landausklappliste Belgien. Die Auswahl ändern Sie mit den Pfeiltasten. Punkt. Tab Anrede Ausklappliste Frau. Die Auswahl ändern Sie mit den Pfeiltasten. Punkt. Tab Titel Ausklappliste Professor. Die Auswahl ändern Sie mit den Pfeiltasten. Punkt. Tab Vorname Eingabefeld. Geben Sie Text ein. Tab Nachname Eingabefeld. Ge-geben Sie Text ein. Punkt. Tab Adresszusatz runde Klammer auf optional runde Klammer zu Eingabefeld. Geben Sie Text ein. Punkt. Tab Straße Eingabefeld. Geben Sie Text ein.
Punkt. Tab. Hausnummer Eingabefeld. Geben Sie Text ein. Punkt. Tab. Postleitzahl Eingabefeld. Geben Sie Text ein. Tab. Ort Eingabefeld. Geben Sie Text ein. Punkt. Tab. Geburtsdatum runde Klammer auf Tag Eingabefeld. Geben Sie Text ein. Punkt. Tab. Wohnpunkt Ausklappliste. Januar. Die Wohnpunkt Liste. Tab. Jahr Eingabefeld. Geben Sie Text ein. Punkt. Tab. E Bindestrich Mail-Adresse Eingabefeld. Geben Sie Text ein. Punkt. Tab. Telefonnummer runde Klammer auf optional runde Klammer zu Eingabefeld.
Geben Sie Text ein. Tab. Woher kennen Sie uns? Fragezeichen Ausklappliste. Bitte wählen. Die Auswahl ändern Sie mit den Pfeiltasten. Punkt. Tab. Bevorzugtes Format Doppelpunkt Ausklappliste. HTML Komma mit Bildern. Die Auswahl ändern Sie mit den Pfeiltasten. Punkt.
-
Sascha Ja, das ist mal lang.
-
Sylvia Ich verstehe gerade die Anzeige hier nicht. Moment. Nee, komisch. Ja. Ich weiß nicht. Habt ihr überhaupt verstanden, was er so sagt? War das verständlich? Weil JAWS ist eigentlich relativ verständlich, wie ich finde.
-
Daniel Ja, das, das hat man schon gut verstanden, ja. Also man, man muss sich daran gewöhnen, aber das,, hat man dann ja schnell, wenn man sich daran gewöhnen muss. Was, was mich ein bisschen, bisschen irritiert hat, war das, war das Punkt mal hinter dem, so vor dem Eingabefeld. Punkt. Also ist das, das so eine Einstellungssache, oder?
-
Sylvia Also ich hab, ich hab quasi überhaupt keine Spezialeinstellung. Das ist das, wie JAWS sich installiert und, dann einfach vorliest, ja. Vielleicht, Punkt einfach um zu setzen: Jetzt geht's aus, jetzt geht's nächste an. Also, Details darfst du mich leider auch wirklich nicht so fragen. Ich, nutze das immer nur zum schnellen Testen, muss ich auch immer gestehen und versuche, mich da irgendwie durchzu, zu lavieren. Interessant.
Also ich meine, man muss halt wissen, dass ich das jetzt nicht so runterlese. Du kannst auch den normalen Lesemodus haben, ne. Dann würde er tatsächlich das Label vorlesen und auch alles, was sonst neben den Formularfeldern steht. Also wenn du zum Beispiel etwas, als Information zwischen die Formularfelder stellst, dann würde er das vorlesen. Wenn du aber durchtabst, wenn du quasi eben etwas eingibst, dann bist du ja in einem Formmodus im Screenreader und dann liest er das eben nicht mehr vor.
Dann kriegst du diese Informationen so nicht mit, wenn du nicht etwas damit machst, um, dass sie vorgelesen werden. Also wenn die Information Links enthält, wie ich letztens sehen durfte, dann wird zumindest der Link vorgelesen. Aber der nutzt dir meistens nichts, wenn die ganze Information dann nicht, zur Verfügung steht. Also im Grunde müsste jemand dann einfach das Formular mal so durchhören, ne, und dann reinklicken und dann sein Formular ausfüllen, was natürlich auch Quatsch ist.
Aber da haben wir dann später eben auch so Sachen wie WAI-ARIA, wo das dann eben möglich ist, die Sachen zu verknüpfen mit dem Screenreader und der liest es dann vor. Aber das, da kommen wir noch später dazu..
-
Daniel Ja, was, was mir noch an diesem, an diesem speziellen Beispiel, an dem Manufaktum-Formular aufgefallen ist: Also die hätten auch mal den, also wenn wir mal an unseren, an unseren nächsten, an den letzten Podcast denken, die hätten in der Planungsphase ein bisschen, bisschen, intensiver arbeiten sollen, glaube ich. Also warum für ein Newsletter-Formular, warum brauchen sie da das Geburtsdatum?
Also einige Fragen waren für mich sehr, sehr, sehr komisch, warum sie jetzt gestellt haben, aber das ist jetzt in dieser Folge jetzt nicht unbedingt interessant.
-
Sylvia Ja, das, das hatten wir in der letzten Sendung gehabt, ne. Also natürlich müsste man jedes Formular dann einfach noch ein bisschen feintunen, ne. Da wüsste ich jetzt, wüsste ich auch nicht warum. Und da steht eben tatsächlich auch viel Text zwischen den Sachen, ne, den du jetzt gar nicht gehört hast, sondern immer nur die Formularfelder selbst, ne. Also ich weiß nicht mehr, was das alles war, aber da standen einige Sachen, ne.
-
Sascha Ja, hier ist-- Ich hab's gerade jetzt mal aufgemacht. Steht zum Beispiel „Postfachadresse nicht möglich“ und solche Sachen.
-
Sylvia Genau, und solche Sachen hast du jetzt alle nicht gehört. Also wenn, wenn der Screenreader-Nutzer nicht irgendwie entweder, durch andere Technik enhanced wird oder dass er einfach das Formular tatsächlich sich vorher so vorlesen, er erfährt er das einfach nicht, ne. Okay, jetzt zu den gängigen Webstandards, weil für Screenreader ist es halt schon wichtig, dass da gewisse Dinge einfach verknüpft sind, ne.
Also man muss einfach sagen, man muss für Screenreader einfach Dinge verknüpfen, damit er sie im Zusammenhang tatsächlich versteht. Da muss man sagen, dass JAWS tatsächlich auch sehr kulant mittlerweile ist. Da war ich sehr überrascht, während NVDA da sehr strikt ist. Also das kennen wir ja bei Webstandards. Label sollen halt tatsächlich... Es soll auf alle Fälle mal ein Label geben, ne, und ein Feld dazu und sie sollen mit for und id einfach eindeutig verknüpft werden, ne.
Ich meine, das ist, das ist ja eh eine gängige Praxis. Man findet aber da durch, durchaus eben viele Auftritte, wo ja nicht mal ein Label existiert. Und, ich spiele das dann auch gleich mal vor, was das eben tatsächlich dann bedeutet. Und, die Position hatten wir ja schon angesprochen. Die ist für Screenreader, nicht unbedingt, sehr wichtig, ja.
Weil wenn sie tatsächlich mit for und id verknüpft sind, ja, wird automatisch, das Label mit diesem Feld verknüpft, egal, wenn es auch ganz unten stehen würde, ne.
Mhm. Mhm.
Und, da spiele ich jetzt mal vor, JAWS ohne Label. Also das, also das ist ein Formular, nur ein Formularfeld ohne Label.
-
Einspieler Herr, Auswahlschalter nicht aktiviert. Tab. Frau, Auswahlschalter nicht aktiviert.
-
Sylvia Das ist das, was ich meinte. Dass, obwohl wir kein Label haben, ja, erkennt JAWS, das Label steht dicht nah am Feld. Okay, ne. Dann nehme ich mir das, was hier steht und verbinde das einfach. Ne, weil er hat hier diesen, dieses Checkbox.
-
Sascha Du hast gerade wieder diesen Alien-Effekt.
Entschuldigung. Entschuldigung.
Wenn wir jetzt, schon wissen... Jetzt ist er wieder weg.
-
Sylvia Die, die ist einfach eine Anrede mit zwei, Radios, ne? Du hast halt, Frau und Mann als Auswahl. Und, er kapiert es halt, okay, hinter, er erwartet hinter dieser, diesem Radio halt Frau oder Mann. Und weil das halt tatsächlich vorliegt ohne Labelverbindung, sagt er sich: „Okay, ich lese das jetzt einfach vor“, ne? Radio nicht aktiviert Frau oder Mann nicht aktiviert, oder so. Das ist aber sehr kulant.
Also wenn man sich das dann, zum Beispiel jetzt bei NVDA – ich versuche es noch mal, aber wahrscheinlich wird das wieder einen komischen Effekt hier geben..
-
Einspieler Auswahlschalter nicht aktiviert, eins von zwei. Auswahlschalter nicht aktiviert, zwei von zwei.
-
Sylvia Ne? Da hat man jetzt gehört- Er, er erkennt das nicht, weil es ist kein Label da. Es ist auch keine Verbindung, mit for ID da. Er sieht nur, okay, hier ist irgendeine Checkbox. Auswahlschalter nicht aktiviert.
-
Sascha Mhm, ja, eins von eins, genau, ja.
-
Sylvia Genau. Ja, also die fangen natürlich dann auch Durchzählen an und solche Geschichten. Das finde ich halt, sehr, JAWS ist da einfach kulant, ne? Er verbindet das einfach. Er sagt: Okay, wenn das in der Nä-- Ich nehme, wenn da in der Nähe stehen würde, was weiß ich, Hochhaus, würde er das jetzt Hochhaus nennen. Ja? Aber das ist natürlich nicht der Weg, sondern der Weg ist tatsächlich, dass ich ein Label nehme und, mit den Attributen for und ID das einfach eindeutig zuordne.
Dann kann nichts schiefgehen, ne? Und, genau, also bei, bei NVDA ist es egal, ob du kein Label hast oder auch wenn du for ID nicht hast, dann, kapiert er das einfach nicht und verbindet das. Was ja nicht richtig ist. Was heißt „nicht kapiert“? Also ich meine, es gibt ja auch Standards und das ist jetzt kein zusätzliches Feature oder so, sondern wir sollen das einfach machen.
-
Sascha Ja, und vor allem wollte ich sagen, es kann ja auch nicht sein, dass, wie das früher immer gerne mal so war, dass man, nur weil man schlecht arbeitet, quasi die Browser das alles ausbügeln sollen. Also in dem Fall ist ja quasi der Screenreader auch kein an-- nichts anderes als ein Browser, ne?
-
Sylvia Ja, eben, eben. Genau, er guckt sich einfach: Sind die Sachen richtig verdrahtet? Und wenn sie das sind, dann hat der Nutzer einfach viel Freude, ne?
-
Sascha Ja, genau.
-
Sylvia Ja dann, das Nächste, ist halt immer so eine Sache: Wann setzt man ein Fieldset, ne? Und Fieldset, ist ja laut Standard auch zwingend mit Legend verbunden. Ist halt, man muss halt gucken, wie lang die Formulare sind. Gibt es eindeutige Bereiche, die man damit, kennzeichnen möchte? Ne? Zum Beispiel längere Formulare, aber in einer Such, Geschichte wird man das natürlich nicht verwenden, ne?
Aber, wenn man jetzt wirklich längere Formulare hat, von mir aus der Adressbereich, dann was weiß ich, noch ein eigener Inhaltsbereich und noch ein Inhaltsbereich, dann kann man tatsächlich das mit Fieldset, klammern und das wird halt, also die Legend wird dann vor jedem einzelnen Punkt vorgelesen, ne? Also sich Adresse, Name und dann Eingabefeld. Adresse, ne, Vorname, Eingabefeld. Das ist natürlich, damit, der Nutzer die Orientierung nicht verliert.
Da muss man natürlich immer aufpassen bei den Legends, dass sie nicht zu lang werden, weil sonst, -
-
Sascha Ja, ja.
-
Sylvia -dauert das ja Jahre, ne? Und was ich interessant fand, was ich gefunden hab, also ich hab mir halt einfach ein paar Formulare angeguckt, die verschachtelten Fieldsets. Das war mir noch nicht so präsent. Da muss ich auch jetzt irgendwie, muss ich mir, Asche über mein Haupt gießen, dass, auf das-- die machen zum Beispiel so, also die normalen Bereiche mit Fieldsets und wenn man zum Beispiel eine Checkbox oder eine Radio Group hat, ja, dass man das dann schachtelt mit Fieldsets.
Weil dann hat man, dann, weil sonst hat man immer das Problem mit diesen Checkboxen: Vorne dieses, Ding ist ja nicht mehr wirklich Label, ne, sondern das ist das Label der Gruppe.
-
Sascha Ja, ja, absolut, ja.
-
Sylvia Ne? Und was macht man da immer damit? Wie fängt man das semantisch richtig auf? Ja? Weil das ist ja auch eine Sache, die es, so jetzt einfach noch nicht wirklich gibt. Und, diese Lösung mit dem, dass man dann Fieldset nimmt, wo ja eine automatische Legend ist, die quasi das Label dann darstellt, und dann hat man die einzelnen Checkboxen und Radios. Also, das fand ich eine gute Idee, aber es ist wohl von der Screenreader-Unterstützung nicht so ganz doll.
Also das müsste man, da möchte ich einfach mal ein paar Tests machen. Das fand ich jetzt so, weil wir das relativ, wenn man lange Formulare hat, kommt das ja oft vor, fände ich das eine interessante Sache, um auch eine Dynamisierung damit ganz gut hinzukriegen, aber das muss ich erst richtig testen.
-
Sascha Okay. Was hältst du davon: Ich hatte in der, als wir, als ich mich hier quasi auf die Sendung vorbereitet hab, hab ich, einen Artikel gefunden, wo jemand empfohlen hat, in Anführungsstrichen, jetzt nicht als quasi Umdeutung des Standards, aber eben, du hattest ja erwähnt, dass die Legend quasi aus dem Fieldset immer wieder mit vorgelesen wird.
Und ich hatte quasi, einen Artikel gelesen, wo darauf hingewiesen wurde, dass vielleicht eben anstelle eines, a-anstelle der Legend quasi Zwischenüberschriften, also tatsächlich als ausgezeichnete Überschriften, also zum Beispiel H zwei, drei, was auch immer dann in dem Moment Sinn macht- -das einzusetzen als, als Abgrenzung und, quasi wenn, das, das Fieldset zwar zur, zur Gruppierung zu nutzen, aber die Legend leer zu lassen. Was hältst du davon?
Macht das Sinn oder ist das halt eigentlich, eigentlich wieder nur eine Umgehung von Standard, die eigentlich nicht gut ist?
-
Sylvia Na ja, ich meine, Standardisierung heißt halt, dass die Legend eigentlich gefüllt, sein soll, ne? Also, eine Legend zu verwenden, die dann wieder leer ist, ist halt so eine Frage, ne? Ich, nutze das manchmal auch mit diesen, es gibt ja auch die Empfehlungen, ich glaube, ich, ich weiß jetzt nicht mehr, welches Buch das empfohlen hat, dass man eben diese, Bereiche durch Überschriften strukturiert. Das habe ich eine Weile auch, eingesetzt.
Das Problem ist es, man müsste das dann wirklich testen: Was macht er das? Wird das vorgelesen? Ne? Also da muss halt der Nutzer immer wechseln zwischen den Modi, ne? Bin ich jetzt im Formular oder bin ich wieder im Lesemodus, ne? Während die Fieldset oder Legends tatsächlich vorgelesen sind, weil sie eben standardisierte, Formularelemente sind.
-
Sascha Mhm. Okay, das ist jetzt auch noch mal ganz interessant. Also das war mir jetzt quasi tatsächlich auch einfach nicht klar, dass du, dass du da, dass es zwei unterschiedliche Modi sind. Also das, das ist auch der Effekt, wo du vorhin meintest, wo dann halt teilweise Texte zwischen den Formularfeldern nicht mitgelesen wurden, ja? Genau, okay, okay. Mhm.
-
Sylvia Und das ist tatsächlich eben unterschiedlich. Ich hab das, bei dem JAWS, weil der halt einfach schon, sehr weit entwickelt ist, hab ich auch das Gefühl gehabt, manchmal liest er auch wieder Sachen vor. Also ich bin da auch noch nicht so ganz,, zufrieden mit dieser, dieser, ne? Also man muss halt im Einzelfall, wie wir das ja bei dem
-sowieso gesagt haben, einfach durchtesten. Was, was lä-lässt sich einfach am besten verstehen und nutzen? Du bist ja auch Tastaturnutzer. Das heißt, du springst dann quasi eben von Formularfeld zu Formularfeld und, die Informationen dazwischen müssen dann in irgendeiner Form halt dann präsent sein, ne?
-
Sascha Mhm. Mhm. Okay.
-
Sylvia Okay. Interessant fand ich halt wieder der Hinweis, ich hab halt einfach so 'n paar, ältere Artikel auch studiert. Das war mir auch nicht mehr, nutze ich ja auch kaum, dieses opt Group. Also, dass man Auswahllisten-Select-Geschichten halt einfach noch durchstrukturieren, unterstrukturieren kann durch diese opt Group. Ich weiß nicht.
-
Sascha Ja, das benutze ich sogar relativ oft, muss ich sagen.
-
Sylvia Ja? Das ist interessant. Ja, mhm.
-
Sascha Also ich hab, zum Beispiel für, also ich meine, das könnte man vielleicht auch besser lösen, aber ich hab zum Beispiel zwei Kunden, die, die, wie so, so Seminar, Seminarbuchungen und so anbieten, ja. Und, quasi da, wird das, werden, werden quasi die Listen noch mal unterstrukturiert. Also das heißt, da sind, da steht dann so was wie, wie Sprachkurse und dann kommen halt die Sprachkurse und dann kommt halt irgendwie so was wie, was weiß ich, technische Weiterbildung oder so. Keine Ahnung.
Also muss ich zugeben, als ich das, seinerzeit gebaut habe, hab ich mich mit, mit, mit dem Thema Screenreader überhaupt noch nicht auseinandergesetzt. Das ist schon 'n paar Jahre her. Ob das überhaupt Sinn macht oder ob man nicht tatsächlich 'nen bess-besseren Weg findet, diese, diese Einzelgruppen, darzustellen, ne.
-
Sylvia Ja, dann wieder aufzulösen, ne.
-
Sascha Ja, genau.
-
Sylvia Also wenn's zu komplex wird, weil du natürlich dann ewig aussuchen musst, ne. Also man muss sich so lange Listen dann vorstellen. Man muss ja das, wir sehen ja, aber wenn du's nicht siehst, dann musst du das tatsächlich irgendwie im Kopf visualisieren, wo du gerade bist, ne. Und, ja, aber ich fand's zumindest, ich hab überlegt so, ich muss mal mir die aktuellen Formulare ansehen, wo es eben sinnvoll wäre, dieses opt Group, also ich meine, es ist ja auch 'ne schöne Strukturierung so an sich, ne.
Von der Semantik her ist es eigentlich richtig, aber ich hab's, wie gesagt, eben kaum eingesetzt. Es ist interessant, unterschiedlich offensichtlich. Und der letzte Punkt wären halt dann die Buttons. Da waren wir ja auch eigentlich schon und, da ist das kritischste eigentlich Type Image, was man tatsächlich einsetzen kann.
Man muss halt wirklich dann, Zusatzinformationen, genauso wie in jedes Bild muss es eben einen Alt-Text haben, es muss 'n Namen haben, man soll den Value befüllen und optional auch 'n Title-Attribut befüllen. Aber wie ich jetzt letztens wieder, wahrnehmen konnte, hat es halt noch andere... Wir sprechen jetzt eher so über die Screenreader-Ecke, aber bei diesen, wenn du Buttons als Image hast, ja, hast du halt das Problem, das ist 'ne feste Schrift, ja, die da draufsteht.
Die lässt sich nicht skalieren, ja. Also wenn du jetzt nur Text hoch... Also es gibt ja zwei Skalierformen im Browser mittlerweile. Es gibt den reinen Textzoom und es gibt den Layoutzoom, ne. Im Layoutzoom wird meistens dieser Text dann unleserlich, obwohl er mitskaliert. Also er franzt dann so aus, ja. Und wenn du nur den Text skalierst, wird dieser Button niemals mitskalieren. Der bleibt dann einfach fusselig, ne, während alles andere wächst.
Und du hast meistens auch das Problem, da sind, also die Leute finden das ja dann auch schick, ist meistens auch ganz schön, Verläufe, ne, hinter diesen, Schriftgrafiken als Buttons und, dann hast du halt keine eindeutige, du kannst die Farbe halt nicht wirklich bestimmen, die dahinter liegt. Und, man kann das alles machen. Es ist tatsächlich, mit dem Screenreader auch zugänglich, aber da haben wir dann halt wieder andere Probleme, ne.
Also Barrierefreiheit ist ja 'n, 'n weiteres Feld als eben jetzt nur die Screenreader-Praxis, zu bedienen. Das wär dann der nächste Punkt mit der Tastaturbedienbarkeit haben wir ja auch wieder. -
-
Sascha Noch mal zu, zu den Buttons noch mal. Hast du da 'ne, hast du da 'ne Präferenz oder 'ne, hast du da Erfahrung, ob Screenreader, Sc-Sc-Screenreader schwer, schwer-
-
Sylvia Die lesen's, die lesen's vor. Ja, ja.
-
Sascha Unterschiede machen bei Input Type Submit, Input Type Button oder dem Button Tag?
-
Sylvia Nö, das ist, also sobald du halt, wenn du alle die Attribute einfüllst, die 'n Screenreader braucht, ja. Also meistens wird das halt vergessen, dass das halt quasi wie 'ne Grafik ist, dass die halt genauso mit einem Alternativtext belegt werden muss, ja. Das vergessen die Leute. Die setzen halt nur Type Image ein und packen die Source dazu und dann war's das, ja. Und vergessen, dass, wenn jemand die Grafik eben nicht sehen kann, ja, braucht er halt quasi den Alternativtext dazu, ne.
Und der Screenreader liest dir das dann einfach vor.
-
Sascha Ja, ja, aber, aber der versteht auch die, den, den Button Tag und ist, ja.
-
Sylvia Ja, ja klar. Das ist, das ist ja 'n, das ist ja 'n klassisches,, standardkonformes Element. Ja, also dam-damit hat der Screenreader nie 'n Problem. Ja.
-
Sascha Ja, aber da kann man ja auch komische Sachen machen, wie in den Button Tag dann noch 'n, noch 'n Bild dazu reinpacken und, und solche Sachen. Also das ist ja noch 'n bisschen trickreicheres, Tag.
-
Sylvia Ja, also da, da weiß ich weniger dazu, weil wenn, dann setz ich Input Type Image ein und nicht Button, ne. Aber, da müsste ich dann einfach mal nachgucken. Muss ich jetzt passen. Seid ihr noch da? Ja?
-
Sascha Ja, ja, ich bin, voll, voll da.
-
Sylvia Voll da.
-
Sascha Nee, nee, ich, ich hab andächtig, andächtig gelauscht und, bin voll auf der Höhe, ja.
-
Sylvia Das Nächste war halt, was wichtig ist, also Webstandards war jetzt so das eine Paket, ne, was halt wichtig ist, um Formulare, halt barrierefrei gängig zu machen. Das zweite ist die Tastaturbedienbarkeit. Das ist halt so 'n Punkt, der leider meistens vernachlässigt wird.
-
Sascha Absolut.
-
Sylvia Also ich mein, wenn man-- Ich hab jetzt zum Beispiel, am Freitag 'n ganzen Tag verbracht und hab mir die ganzen Biene-Gewinner mal tastaturmäßig, angesehen und hab die durchgetappt. Und da muss ich sagen, da hat sich sehr viel getan. Also es gibt, sozusagen keine Tastaturfallen mehr. Man kommt wirklich durch, ne. Also das ist ganz gut. Nur was immer noch fehlt, die Leute beim Tabben fokussieren fast alles auf der Webseite, nur Formulare werden meistens vergessen, ja.
Also es ist so, eigentlich wär's schön, wenn man im aktuellen Feld ist, das da auch, weil das kann man per CSS ja eigentlich relativ gut machen, ne.
-
Sascha Ja, ja absolut, ja.
-
Sylvia Ne, da einfach 'n bisschen zu sagen: „Aha, ich bin jetzt hier." Ne. Also bei kleinen Formularen oder auch so zum Beispiel, ich find's auch teilweise mit Suchfeldern schwierig, weil die sind oft irgendwi-- wirklich so integriert in diesen, in diesen Header-Bereich, ja. Und,, wo bin ich jetzt? Ach ja, da oben ist dieses Suchfeld. Ach ja, da bin ich wahrscheinlich jetzt, ne. Und, und spätestens beim Button ist es dann ohnehin aus, weil der Button ist dann kaum fokussierbar.
Dann, ja, dann verliert sich das 'n bisschen. Find ich immer schade. Da möcht ich immer wieder plädieren, das ist eigentlich nicht viel Arbeit, 'n bisschen den Fokus hervorzuheben. Ja. Und, ja, und dadurch werden, kann-- Das kann man auch recht schick machen, ne. Ist ja nicht so, dass, dass das irgendwie hässlich ausschauen muss. Ja.
-
Sascha Ja. Also das Manufak-Manufaktum zum Beispiel, die haben das jetzt, die haben quasi den, den, das Hintergrundbild von dem, also haben den Hintergrundverlauf geändert. Das find ich jetzt fast schon 'n bisschen zu subtil.
-
Sylvia Mhm, mhm.
-
Sascha Also ich hätte da mir, da hätte man schön noch irgendwie den, den Rahmen oder so, 'n bisschen anpassen können oder so. Aber es muss ja, es muss ja, so, viele Leute verwechseln ja immer barrierefrei mit hässlich. Also es, ne. Oder, oder, oder, oder total ungestylt. Und das, das muss es ja tatsächlich eben nicht sein. Ja.
-
Sylvia Ja, das ist ja, das ist ja reines CSS, ja. Also ich meine, im Grunde ist das einfach nur CSS-Arbeit und hat, und das kann man einfach quasi für Ach, irgendwie schade, dass da immer so ein bisschen drauf vergessen wird. Dann hab ich-- Okay, den Form-Modus hatte ich schon erklärt. Dann Fehlerbehandlungsgeschichte, die hatten wir in der ersten Sitzung schon mal kurz angesprochen. Die ist natürlich dann, erstens mal, dass man wirklich erkennt, dass ein Fehler vorliegt, ne.
Wo, werden die Fehler überhaupt markiert? Ist ja auch ein völliger Raubbau, was die Leute da so machen. Und, es wird halt in der Barrierefreiheit immer empfohlen, dass man, was allgemein usability-technisch ja gut ist, dass man eben eine Liste von Fehlern an der Seite mit einer Sprungmöglichkeit direkt zum ersten Feld macht.
-
Sascha Ja, okay, das, das mit der Sprungmöglichkeit habe ich auch noch nie bedacht. Ja, das, stimmt. Ja.
-
Sylvia Ja, und, das ist halt nur, das geht halt nur dann. Also ich mache es teilweise, wenn wir längere Formulare haben, dass ich wirklich nur zum ersten, also dass ich sage, es ist ein Fehler und, Sprungmöglichkeit zum ersten Feld. Weil wenn du oben diese langen Listen hast, das finde ich nämlich auch ziemlich ungut, ja. Also irgendwie, es, weil es zerstört halt teilweise dann auch wirklich so Zusammenhänge, ne, wenn du dann hier fünfzehn Fehler, meldungen hast, ne, und die dann alle runterspringen.
Vor allem müsst, müsstest du dann, das habe ich auch, gelernt, da müsstest du ja im Grunde bei jedem Feld eine Möglichkeit haben, wieder zurückzuspringen oder zum nächsten zu springen, ne. Weil sonst hast du ja den Faden wieder verloren, ne. Also das finde ich, das sind ja alles eigentlich Effekte einer guten Usability. Da muss man echt testen, ja.
Also da bin ich auch, so ein bisschen hellhörig geworden und hab gedacht: Gut, da muss ich jetzt noch mehr in die Tiefe gehen und das noch mal austesten. Und was halt immer wieder wichtig ist, der serverseitige Fallback, ne. Es ist ja nicht, dass, das keine JavaScript-Validierung sein soll, aber wenn die halt mal nicht greift, dann muss die Möglichkeit, sein, dass das Formular abgeschickt wird und trotzdem die Fehler, behandlung einfach klar ist, was da zu machen ist, ne.
-
Sascha Ja. Aber, 'ne kurze Frage, die mir jetzt gerade einfällt, wo wir jetzt über diese, über diese Liste, die Fehlerliste am Anfang gesprochen haben. Würde es vielleicht Sinn machen, kam mir gerade die Idee, quasi die in Anführungsstrichen fehlerhaften Felder zusammen nach oben zu ziehen, also, anzubieten, zu sagen: „Okay, also im Folgenden sind jetzt alle Felder, die, einen Fehler enthalten“, ja, und dann die Felder anzuzeigen. Macht das Sinn oder ist das, keine gute Idee?
-
Sylvia Also, du willst die Felder insgesamt nach oben schieben? Also du willst die richtig, -
-
Sascha Also man kann, also ich würde das Formular, glaube ich, jetzt so aus dem Gefühl her auf jeden Fall komplett unten noch mal lassen, weil es kann ja auch sein, dass man dann überlegt: Ja, irgendwie muss ich jetzt auf jeden Fall trotzdem dann noch mal was ändern, weil ich habe jetzt zum Beispiel meine geschäftliche Adresse eingegeben. Da habe ich mich jetzt vertan. Total blöd.
Aber dass man zum Beispiel sagt: „Okay, ich dupliziere die Felder noch ein-- Also ich, ich ziehe die nach oben als Duplikat und biete an, quasi, dass du nur die Felder, die einen Fehler enthalten, verändern kannst und dann runter auch gleich und jetzt, quasi mit diesen veränderten Feldern abschicken.“ Würde das Sinn machen? Also ich meine, ich habe das noch nie gesehen. Das kam mir jetzt gerade so in den Sinn.
-
Sylvia Ich würde das dann wahrscheinlich eher unter experimentell- -test, testwürdig abhaken.
-
Sascha Ja, ja, ja, okay.
-
Sylvia Das finde ich jetzt-
-
Sascha Zumal, das darf man ja auch nicht vergessen, wenn man-- Ich habe vorhin daran gedacht, als das erste Formularbeispiel von Jaws durchgelaufen ist, ne, das ja, knapp anderthalb Minuten gedauert hat. Ich hab auf 'nem Barcamp mal gesehen, wie sich, wie jemand, der, der das richtig im, im Regelbetrieb einsetzt, wie der so, durch solche Sachen durchspringt. Ich hab nichts verstanden. Ja, und das, das ist einfach der, die, die Sp-Sp-, Sprachgeschwindigkeit ist ungefähr das, Achtfache von dem gewesen.
Deshalb wahrscheinlich wird das ja auch nicht so lange dauern und jetzt so 'ne, so 'ne neue Idee umzusetzen, wird wahrscheinlich die einen oder anderen sogar total verwirren. Also da, -
-
Sylvia Ja, vor allem ich glaube, wir hatten es ja letzte Sitzung auch schon angesprochen: Die Schwierigkeit ist halt, die Balance zu finden zwischen Innovation und Standard, ne. Also man darf die Leute nicht verwirren und ich grad denk auch, Leute eben, die, Screenreader nutzen, wenn die dann völlig verwirrt sind, wie ist es-- Die müssen ja quasi, die, die, die leben ja dann doch eher davon, dass das Konstrukt einigermaßen verständlich ist und bekannt, ne.
-
Sascha Absolut, ja.
-
Sylvia Ich mein, man kann das schon machen, dann müsste man aber vorher das erst erklären, was hier anders ist. Und ich finde das dann einfach, wahrscheinlich auch für den normalen Alltag ein bisschen, bisschen zu forsch, ne.
-
Sascha Wa-wahrscheinlich, ja.
-
Sylvia Und dann wollte ich eben noch mal auf die strittigen Punkte an, -
-
Sascha Ganz kurz, ein, ein Punkt, den, den du jetzt gerade übersprungen hast, der aber sehr sinnvoll ist in deiner, in deinen Notizen, die du,, quasi uns zur Verfügung gestellt hast. Fehlerhaftes Feld markieren nicht nur mit Farbe, ja. Wird immer wieder gerne, wird immer wieder gerne übersehen und ich meine, ich finde die Farbe sehr wichtig. Hatten wir ja auch in der letzten Folge schon kurz drüber gesprochen.
Ich meine, Rot symbolisiert einfach nun mal, irgendwas stimmt hier nicht, aber erstens kann das nicht jeder sehen und der Screenreader schon überhaupt gar nicht. Und das ist echt wichtig.
-
Sylvia Ja, also man muss es halt in irgendeiner Form anders kenn-- mit 'nem, mit 'nem eigenen Symbol oder noch fett oder irgendwas, ne, dass klar ist, dass es sich hier, um eine Fehlermeldung handelt, weil, Leute können einfach ihre eigenen Farben einstellen, ne. Also man kann es ganz einfach simulieren in,, Firefox, in der Web Developer, kann man einfach alle Farben rausnehmen und spätestens dann sieht man, es ist nicht mehr klar, was hier jetzt ein fehlerhaftes Feld ist, ne.
-
Sascha Wir verweisen zu diesem Zweck noch mal ganz kurz auf die Sendung, die wir damals aufgenommen haben.
-
Sylvia Wollte ich. Das war der einzige Grund.
-
Sascha Genau. Okay.
-
Sylvia Ja, zu den strittigen Punkten:, das ist ja auch so eine historische Geschichte. Da hatten wir auch schon einige Sachen davon angesprochen. Die eine Sache war die Vorbelegung von Feldern. Die hatten wir letztes Mal schon, ne. Wo du meinst, es sieht schick aus. Das würde eben gleich mit dem übermäßigen Einsatz von, dem Title-Attribut. Das hatte ich früher auch gemacht, muss ich ganz ehrlich gesagt gestehen. Das hatte ich auch gelesen und so.
Man liest ja und man guckt sich an, wie es gemacht ist und in jedem Feld stand dann, was weiß ich, irgendwie Vorname, Feld, „Tragen Sie hier bitte Ihren Vornamen ein“. Und es ist tatsächlich so, ein Screenreader liest es dann halt einfach dauernd vor, ja. Und, das ist halt, ich meine, wenn es eingestellt ist, wie gesagt, das Title-Attribut ist wohl nicht so gängig. Und man muss halt einfach nur gucken, vielleicht sollte man das nur belegen, wenn's etwas Spezielles ist, ja.
Wenn, wenn man's Gefühl hat, so, oder wenn das Label nicht gesetzt werden kann, ne. Darauf kommen wir noch später. Das WCAG zwei, lässt ja tatsächlich solche Sachen mittlerweile zu, was, was wir ja jahrelang irgendwie nicht wussten und jetzt uns ereilt. Mm, man muss vielleicht da einfach immer gucken, sich das einfach auch mal öfter durchhören und sagen: „Okay, das ist jetzt schon 'n bisschen vielleicht too much." Ja, weil Vorname ist ja klar, was einzutragen ist, ne.
Wenn's gut verdraht ist, verdrahtet ist, hast du ja tatsächlich eben die Information. Dann der Tab-Index ist ja auch so 'ne Sache, das wird auch immer wieder empfohlen: Ja, man soll doch irgendwie die Formulare mit einem Tab-Index ausstatten. Und ich sag immer so:, 'n Tab-Index auf 'ner ganzen Seite muss eigentlich im Grunde nicht mehr sein. Also es gibt neuere Techniken wie by ARIA, die dann auf 'ne ganz andere Form mit dem Tab-Index natürlich dann arbeiten.
Aber, wir haben das früher auch, ne, den Tab-Index von oben bis unten durchgezogen und so weiter, ne. Aber erstens mal hat man ihn ohnehin nicht gebraucht, wenn man versucht hat, das, sinnvoll linear zu struk-strukturieren, ja. Also wie du sagst, dass man eben von oben bis unten tatsächlich durchtabben kann. Da braucht man keinen Tab-Index.
Wenn's so absolut, ich mein, ich muss sagen, ich hab's deswegen auch noch mal gesehen bei den Biene-Preisträgern jetzt: Es wird der Tab-Index genutzt, um spezielle Bereiche als Erstes anzugehen, meistens in Suchfeldern, ne? Es gab so 'ne, ich glaub, das ist, war dieser, Verkehrsverbund, der hatte, 'nen Tab-Index gesetzt für seine Fahrplanauskunft, ja, dass du da sofort dort bist, wenn du irgendwie auf der Seite tabst, ja. Kann man drüber streiten.
Find ich, okay, ja, weil das halt für, für die die wichtige Einstiegsquelle ist, ne.
-
Sascha Ja, ja.
-
Sylvia Also die auf diesen Verkehrsweg gehen, werden wahrscheinlich als Erstes auf dieses Formular wollen, ja. Und Access Keys werden tatsächlich, hab ich auch gesehen, werden häufig eingesetzt, aber eben nur ganz, für spezielle Geschichten. Also nicht in Formularen eigentlich, sondern, eher nur, um gewisse Bereiche auf der Website schnell anzusteuern oder gewisse Seiten anzusteuern.
Find ich in Formularen einfach auch, Access Keys an sich sind ja eigentlich auch vernachlässigenswürdig- -weil sie einfach, rundum schwierig unterstützt werden. Und es gibt halt so 'ne Pro-forma-Einigung, welche man so verwenden kann, aber die haben eigentlich nix mit Formularen zu tun. Und, witzigerweise bei den Biene-Preisträgern gab's viele, die da ihre eigenen Sachen zusammengezimmert haben. Ist halt immer schwierig.
Du weißt gar nicht, welche dich da erwarten und, da müsste man eigentlich 'ne Legende richtig dafür machen. Also ich nutz eigentlich auch keine Access Keys, hab die auch nie genutzt, aber ich, gut, ja, ist halt so 'ne Eigenheit, aber ich denke, auf das kann man in Formularen schlicht verzichten. Wenn man das gut linear und standardkonform baut, dann braucht man diese Sachen eigentlich nicht, ne, sag ich immer. Ja.
Jetzt hab ich mich 'n bisschen umgetan, weil das WCAG zwei ist ja schon seit, glaub ich, letzten Oktober, November-
-
Sascha Ja, ist schon 'n Jahr, glaub ich, ja.
-
Sylvia Ja, ja. Genau, wir, wir feiern schon das Einjährige.
-
Sascha Yay.
-
Sylvia Yeah. Ist das nicht die Silvestersendung?
-
Sascha Ja, es ist, glaub ich, es müsste jetzt wie gesagt zwischen Weihnachten und Neujahr sein grade, ja.
-
Sylvia Genau. Und, ja, da hab ich mir einfach 'n bisschen geguckt, wieso, es ist ja auch immer sehr interessant,, durch die Levels in der WCAG wird ja bestimmt, wie hoch oder wie, wie hochwertig tatsächlich, 'ne Sache ist, ne? Also auf manche Dinge, die sind erst auf drei Stufe. Das heißt, wenn man, nur die zweite Stufe erreicht, kann man vielleicht die dritte irgendwie dann lassen.
Ich bin ja für diese Stufen eher, find ich, ja, bin ich ja dagegen, weil ich immer sage:, wichtige Dinge sollen gemacht werden, egal welches Stufe sie dann, -
-
Sascha Ja, absolut, genau.
-
Sylvia -laut, laut, Sache erreichen, weil viele Semantik-Sachen zum Beispiel sind erst auf Stufe drei, was ich 'n bisschen schade finde.
-
Sascha Sehr.
-
Sylvia Aber gut, Semantik ist halt für manche Leute dann offensichtlich nicht so wichtig. Aber interessant ist eben zum Beispiel, dass der Einsatz von dem Label before ID und Fieldsets und Legends auf Level A liegt. Das heißt, es ist absolut, wichtig, ne. Also jetzt, um das jetzt, die Klammer 'n bisschen wieder, auf diesen ersten Webstandards-Block hinun, hinunterzunehmen.
Und, interessant find ich halt, diese, diese Sache, dass WCAG zwei vorschlägt, also das WCAG zwei ist eben sehr interessant, weil es versucht, wirklich jetzt, an die Praxis anzudocken, ne? Also ich mein, das ist natürlich jetzt, nicht wirklich im totalen Wirkbetrieb, weil du kannst nicht hingehen und sagen: „Ich hab festgestellt, dass das Label in der Form Anordnung eigentlich nicht wirklich was bringt.
Lass es uns anders machen." So geht's natürlich nicht, aber es wirken gewisse Mechanismen offensichtlich über Jahre jetzt zurück und man kann tatsächlich auch, neue Techniken, dort einreichen oder neue Ergebnisse. Es sind dann diese Techniken, die halt, verschiedene... Also es gibt halt immer so, Erfolgskriterien, die mit gewissen Techniken dann,, ausgeführt werden können. Und die kommen tatsächlich aus der Praxis.
Zum Beispiel eben solche Sachen: Haben wir uns nicht über alle Jahre schon gedacht: Verdammt, jetzt hab ich dieses kleine Suchfeld und diesen Button, Fieldset passt eh nicht drum rum und jetzt muss ich noch dieses Label verstecken, ne? Weil eigentlich, würde, ist das im Layout überhaupt nicht vorgesehen, ja. Ich mein, wie viele Labels haben wir versteckt, ne? Es, es, ich mein-
-
Sascha Ich wollt grad sagen, ja, ja klar.
-
Sylvia Wir können doch ehrlich sein. Wir können ehrlich zueinander sein, das ist so, ja?
-
Sascha Ja, absolut.
-
Sylvia Also jetzt nicht versteckt im Sinne Display: none, sondern halt einfach-
-
Sascha Nee, nee, einfach rausgeschoben, ne, aus'm, aus'm sichtbaren Bereich nach links, ja, ja.
-
Sylvia Genau. Und, das, das find ich eben so interessant an dem WCAG zwei, das geht jetzt hin und sagt: „Leute, ich weiß, dass ihr das seit Jahren gemacht habt.
Fragen wir uns eigentlich: Können wir die Standards in dieser Form dann nicht ein bisschen verknappen und sagen: Okay, wir müssen die Möglichkeit schaffen, ja, wenn du kein Label hast, aus irgendeinem Grund, weil du sagst: Gut, das ist so standardmäßig, es gibt immer 'n Suchfeld und es gibt immer 'n Button und ach komm, das Label brauchen wir in der Form nicht, weil du schreibst einfach in das Feld rein, in das Eingabefeld, Title oder so sagst du, Suchbegriff, ne?
Also ich mein, irgendwie wird ja klar, dass du in der Suche bist, ja. Das ist einfach so standardisiert, dass du sagst: Können wir jetzt hier auf das Label eventuell auch verzichten? Das muss man im Einzelfall entscheiden, weil zum Beispiel, das war, war 'n ganz gutes Beispiel, was ich gelesen hab, fand ich sehr lustig: Wenn daneben aber zum Beispiel steht „Hochhaus" zufällig, ja, weil es der letzte Punkt der Navigation ist, dann würde das Choice hingehen und Hochhaus zufällig-
-
Sascha Ja, sehr schön, ja, ja.
-
Sylvia -Hochhaus ins Eingabefeld.
-
Sascha Sehr hoch, ja.
-
Sylvia Genau. Also was hab ich immer mit dem Hochhaus? Weiß ich auch nicht.. Ich hab meine Kindheit in einem Hochhaus verbracht, wahrscheinlich deswegen. Und deswegen, das muss man testen, aber das fand ich eben sehr innovativ. Diese Sachen find ich in dem WCAG sehr, auch wenn das natürlich, auch diskussionswürdige Sachen sind. Er sagt zum Beispiel auch genau, der zweite Fall fand ich auch super: Wir haben eine Datentabelle.
Ich meine, bei mir kommt das auch relativ häufig vor, weil wir eben sehr lange Formularprozeduren haben, mehrstufige Geschichten, wo da dann wieder Formularfelder in den einzelnen TDs sind, ja. Da hat man dann immer überlegt: Oh, da muss ich an jedes T, Formularfeld in dieser ID, obwohl die eigentlich-
-
Sascha Oh ja, okay, jetzt weiß ich, worauf das hinausläuft. Ja, ja, okay. Na ja, ja.
-
Sylvia Obwohl die eindeutig verdrahtet ist, ne?
-
Sascha Ja, ja klar.
-
Sylvia Pack ich da wieder ein Label davor. Mist, ne? Dann muss ich das auch wieder verstecken und so weiter. Und, das sagt jetzt auch das WCAG 2.0: „Habt ihr das nicht auch alle Jahre gemacht?" Ne? Es reicht doch, wenn die eindeutig verdrahtet ist, ne. Testet es dann durch. Reicht das nicht, das Verständnis, dieser, dieses, ne, dieses Formularfeld in der, ne, durch die Verdrahtung dann zu haben?
Das muss man natürlich auch immer testen, aber ich finde gut, dass es eben solche Sachen jetzt tatsächlich in der Diskussion gibt. Ja, vielleicht kreuzigen mich jetzt schon wieder alle, aber ich finde das gut, ja, weil, weil das WCAG 2.0 tatsächlich jetzt in die Praxis reinreicht und sich einfach legt, ne. Deswegen habe ich mir das mit den Formularen jetzt ein bisschen angeguckt. Dann spannend ist die Fehlerbehandlung. Weil das gab’s vorher in der Form eigentlich auch nicht, ja.
Weil das ist ja eine Sache, die, die, wo wir immer sagen: „Ja, das ist so eine Usability-Sache und so, ne. Ja, müssen wir machen und so", wo ich auch gesagt habe, da gibt’s ja im Grunde, schon Standards, aber dann auch wieder viele gar nicht, ne. Und, da fand ich diese Level, also dass man auf Level A zumindest es erkennen muss: Es handelt sich hier um einen Fehler, ne? Es muss irgendwie durch Text, Farbe-
-
Sascha Macht Sinn, ja.
-
Sylvia Also, das ist absolute, ne, auf Level A muss das einfach erkennbar sein. Aber Level zwei ist dann 'ne Fehlererläuterung, ne? Zum Beispiel, so Hinweisgeschichten, die oft so mit, mit, mit so 'nem Rufzei, Ausrufezeichen oder so gekennzeichnet sind oder zusätzlich noch zum, ne, dass klar wird: Ja, der Fehler ist, weil... Ne? Also vielleicht auch mit einem Beispiel. Das ist Level AA, ne? Und, erst auf Level drei, ne, AAA, steht dann Fehlerprävention. Also das ist ähnlich wie-
-
Sascha Also, das wundert mich tatsächlich ein bisschen, muss ich sagen. Also,, Fehlerprävention kann ich noch so grade verstehen, aber dass quasi die Fehlererläuterung erst auf dem zweiten Level kommt, das überrascht mich doch ein bisschen, muss ich sagen. Also, hm, na gut.
-
Sylvia Ja, das ist auch so’n bisschen, hm, ah, wie soll ich sagen? Uneigentlich formuliert. Es kann, also es würde reichen auf Level A, auch wenn man, also... Wie soll ich sagen? Das ist ein bisschen schwierig, in den, in den, bei mir rauszulesen, aber stand so was wie, es, in, in Stufe A wäre zum Beispiel: Hier liegt ein Fehler vor.
-
Sascha Ja, ja, okay. Ja, ja, klar.
-
Sylvia Da weiß doch man noch nicht, was für ein Fehler. Level AA wäre dann ja dann so was wie: Bitte tragen Sie Vorname ein, ja. Oder-
-
Sascha Ja, oder es ist keine Zahl für Postleitzahlen oder so was. Ja, ja genau, ja.
-
Sylvia Und Level drei ist aber, die drei As sind dann interessant, weil das ist eigentlich nicht richtig, dass es erst auf drei kommt. Zum Beispiel, wenn man wirklich diese schrittweisen Vorgehen hat, ne?
Also, das hat man ja auch bei den Usability-Büchern, die beschrieben haben, so: Man muss irgendwie – ich glaube, das hat auch der Daniel mal gesagt – man muss ja wissen, man muss zwischenspeichern können, man muss quasi eben 'ne Möglichkeit haben, etwas abzubrechen oder, ne, also irgendwie am Schluss auch zu bestätigen: Aha, jetzt schicke ich diesen ganze, diese ganzen Formularseiten eigentlich tatsächlich ab, ja.
Und da schlägt ja dann das WCAG dann so merkwürdige Dinge vor wie, eine Bestätigungsseite mit Checkbox. Ich meine, so was habe ich ja, glaube ich, gesehen auch noch nie. Oder neben dem, das mit Bot, Checkbox, ne. Also, ich gehe jetzt auf die Suche und guck mal, ob das tatsächlich so gängig ist.
-
Sascha Aber das verstehe ich jetzt, also das verstehe ich überhaupt nicht. Also, was ist denn damit gemeint? Also Bestätigungsseite oder...
-
Sylvia Damit ist gemeint, das, ne, das, das, zum Beispiel so gemeint:, du hast jetzt ein Formular ausgefüllt, kriegst 'ne Bestätigungsseite. Das an sich würde für den Level drei nicht ausreichend sein, sondern es sollte auch noch eine Möglichkeit geben, dass der User explizit eine Checkbox anhakt und sagt: „Okay, es abschicken." Ne?
-
Sascha Okay, ja, okay. Okay, okay, verstehe. Ja.
-
Sylvia Es geht halt, ist halt sehr nutzersicherheitszentriert, ja.
-
Sascha Mhm, mhm.
-
Sylvia Also, ich, ich hab’s jetzt noch mal angeführt, weil ich spannend fand, was sie sich da vorstellen. Ich meine, ich würde sagen, 'ne Bestätigungsseite, wo alles noch mal aufgeführt ist, ist eigentlich, schon sehr gut, ne? Also ich meine, das findet man ja vielfach auch nicht, ja, sondern man hat irgendwas abgeschickt und steht oben: „Hallo, wir haben die E-Mail erhalten. Danke schön."
-
Sascha Genau, ja, ja genau. Wir melden uns so schnell, wie’s geht, ja.
-
Sylvia Genau, genau. Oder man ist auf der Startseite wieder gelandet oder irgendwas.
-
Sascha Ja, das, auch super, ja.
-
Sylvia Ja. Also insofern ist so 'ne Bestätigungsseite, finde ich, dann,, auch nicht drei A, sondern auch zwei A, weil es ist, wenn du einen schrittweisen Prozess hast oder wenn du etwas tatsächlich bestätigt haben musst, ist es nicht hinreichend, nur 'ne E-Mail zu erhalten, sondern schon die Seite auch noch mal zu sehen, die du da jetzt... Weil meistens sind’s ja, da steht ja auch dann finanzielle Transaktionen, ne? Oder rechtliche Geschichten. Da ist es einfach wichtig, noch mal irgendeine Form.
Deswegen glauben die das mit der Checkbox, glaube ich, dass man einfach noch mal anhakt und sagt: „Okay, ich will es jetzt tatsächlich bezahlen."
-
Sascha Mhm, ja, okay. Ja, ja, verstehe.
-
Sylvia Ich will das jetzt tatsächlich, bestellen oder abonnieren, ne? Und, ja, das fand ich halt, ich fand den ganzen Blog interessant. Mich hat das interessiert, dass die überhaupt so ein stufiges Vorgehen vorsehen und überhaupt sich diesem Fehler-, Behandlungsthema so stark angenähert haben. Da gibt’s wirklich einen ganzen eigenen Bereich dafür. Das fand ich schon ganz spannend. Und, -
-
Sascha Was ja tatsächlich auch jetzt mal abgesehen von, dem, was man so allgemein hin, leider immer noch unter so, Barrierefreiheit versteht, tatsächlich allgemein auch Gültigkeit hat.
Also, nein, dazu gehören halt spezielle Punkte sicherlich, aber das Beispiel, was du gerade genannt hast mit: Dann springt man irgendwie zur, zur Startseite und wenn man Glück hat, ist irgendwo irgendwie ganz oben über dem Header oder so ist irgendwie eine Zeile, wo dann steht: „Ja, wir haben, Ihr Form, die Form, das Formular wurde verschickt", oder so. Ich hatte jetzt gerade so einen Fall bei 'nem großen, Tele-, bei 'nem großen Telekommunikationsunternehmen, ja.
Da habe ich, mein Passwort vergessen und hab, und, und auch meinen Benutzernamen, ja, und hab das eingegeben und hab auf, „OK" geschickt, sodass ich dann halt 'ne E-Mail kriege, mit dem Benutzernamen und dem Passwort und ich bin auf die Startseite gekommen und da war nix. Und ich hab gedacht: Okay, ist, hab ich jetzt den falschen Benutzernamen eingegeben? Ist es okay, krieg ich demnächst dann 'ne E-Mail? Und das Geile war, die E-Mail hat dann halt auch eine halbe Stunde gedauert.
Ja und,, ich hab dann erst mal noch fünfzehn Mal rumprobiert, u-um mit anderen Benutzernamen und, und anderen E-Mail-Adressenkombinationen und es gab nie 'ne Fehlermeldung oder 'ne Bestätigung. Also ich bin einfach immer wieder auf der Startseite gelandet und irgendwann kriegte ich dann halt eine E-Mail, mit: „Ja, hier ist übrigens dein Benutzername.“ Und das ist deshalb, d-d-solche Sachen sind ja schon elementar, ja.
-
Sylvia Ja, vor allem, sind, da kann ja teilweise auch wirklich was dranhängen, ne. Also-
-
Sascha Ja, absolut.
-
Sylvia Ne, also das kann ja, da hat man vielleicht das Gefühl: Oh Gott, jetzt hab ich irgendwas ababonniert oder etwas abonniert oder ich hab jetzt irgendwas zu irgendwas irgendwie, was weiß ich. Hab ich das jetzt bestellt? Bin ich jetzt in 'nem Seminar, Webinar oder was auch immer, ne. Also, -
-
Sascha Deshalb ist es auch ganz spannend, dass du, dass, dass tatsächlich irgendwie dieser, dieser, diese Fehlerprävention bei, rechtlichen und finanziellen Transaktionen quasi schon auf Level zwei ist-
-
Sylvia Ja, ja. Genau
-
Sascha ... während sie sonst bei in Anführungsstrichen normalen,, Formularen erst auf Level drei quasi zum Einsatz kommen muss, ja.
-
Sylvia Ja, das ist wieder so 'ne typische Geschichte, dass halt dann, also manchmal hat dieses Level drei tatsächlich so was wie 'ne, wie so 'ne Letzte Kiste.
-
Sascha Ja, ja. Genau.
-
Sylvia Also wenn ihr dann noch Lust habt, ne, und viel Lust habt.
-
Sascha Genau und viel Zeit und Budget, ja.
-
Sylvia Find ich immer 'n bisschen schade, weil leider kommt's so an durch diese Stufigkeit.
-
Sascha Ja, ja.
-
Sylvia Ich find halt, jedes schrittweise Vorgehen sollte sogar zumindest 'ne Bestätigungsseite haben oder in anderer Form. Der Erkenntnis, dass man weiß, okay, man hat jetzt tatsächlich diesen Prozess abgeschlossen. Und, interessant fand ich auch, weil das ist ja auch immer so 'n, so 'n, so 'n, na ja, so 'n, so 'n, argumentatives Spiel in der Barrierefreiheit:, wie inwiefern setzt man diese clientseitige Validierung dann ein, die ja meistens doch durch JavaScript passiert.
Und da haben sie auch tatsächlich aufgeholt, ne. Sie sagen so was wie: „Ach, wenn, wenn das jetzt so ist, ne, wenn 'ne Fehlervalidierung kommt und der Fokus auf das erste Fehlerfeld springt und dann vielleicht wieder hin und zurück, egal wie das jetzt durch JavaScript oder durch HTML passiert oder was auch immer oder auch, ne, das wär auch nicht schlecht, ne. Also ich meine, sie sagen, das ist jetzt nicht immer das Schlechteste, ne.
Oder auch, dass man irgendwie, ne, also der Fallback soll natürlich immer noch die serverseitige Validierung sein, aber sie sagen halt so: Es ist nicht alles schlecht dran. Es muss auch Mechanismen geben, um den Benutzer einfach schneller oder besser zum Fehler oder durch das Formular zu führen. Das find ich auch, da sind sie auch wirklich 'n Schritt weitergegangen.
-
Sascha Ja, absolut.
-
Sylvia Okay, das wär jetzt eigentlich so der WCAG2-Teil. Habt ihr irgendwelche, Fragen?
-
Sascha Ich frag mal, den Daniel, der hat nämlich 'n Redeanteil von, minimal ein Prozent in dieser Sendung.
-
Daniel Ja, aber trotzdem hab ich dir keine Frage. Du hast das alles eben erklärt. Also. Ich frag nicht wirklich.
-
Sascha Was ich noch mal ganz kurz, ganz kurz, fragen möchte jetzt jenseits der Formulare:, hast du irgendwie im, im, bei deiner Recherche noch mal neue Einblicke bekommen, wie das, in, in der deutschen Gesetzgebung umgesetzt werden wird oder was, wann wir da was erwarten können? Weil, also, du, du hattest es ja am Anfang, Anfang kurz, kurz erwähnt.
Ich bin da jetzt die, die letzten anderthalb, zwei Monate nicht, ich hab das nicht mehr mitverfolgt, ob da jetzt, zeitnah irgendwie mal was kommt oder ob das-
-
Sylvia Nee, so, wird auch kein Silvestergeschenk werden.
-
Sascha Okay, ja.
-
Sylvia Also ich frag immer so in unregelmäßigen Zeit, Zeitabständen da mal nach, so, bei den Leuten, wo ich denke, dass die das vielleicht wüssten. Aber, das Problem ist, dass, dass die Schere halt mittlerweile echt groß wird, weil wir jetzt einfach schon über 'n Jahr versuchen, uns mit dem WCAG 2, das ist ja auch nicht das Schlechteste, man hat sich vorher auch mit dem WCAG 1 beschäftigt.
-
Sascha Ja, ja, total.
-
Sylvia Nur hat man sich, nur hat man halt natürlich immer, den, die Rückbindung auf das BITV machen müssen, ja. Und, weil das halt tatsächlich dann die Gesetzgebung ist und, angeblich, ist es, nimmer lang. Ja, und, ich mein, da gibt's auch einige Bereiche, die eben wohl dann anders sein werden, aber sie werden sich wohl doch einigermaßen an das WCAG 2 halten.
Ich find, es ist auch schwierig, weil das WCAG 2 ist so dann doch so offen strukturiert auf 'ne gewisse Art und Weise und anders strukturiert als das WCAG 1. Da muss die BITV schon irgendwie ziemlich, sich ranhalten, ne, um da 'ne ähnliche Offenheit zu erreichen, ja. Wo ich auch immer gesagt hab, es müsste so was wie auch 'n Rückkopplungsprinzip geben, was es dann wohl doch nicht geben wird. Ich möchte nichts Falsches sagen, aber, aber jedenfalls hab ich immer angefragt.
Eigentlich, was ich, was ich gut finde, dass, der BITV-Test zum Beispiel tatsächlich versucht, in Einzelschritten, das WCAG abzudaten in ihrem Test, ne, weil die haben ja auch das BITV als, als Vorlage und die sagen sich: Ja, bitte Rückmeldung aus der Community. Also insofern, die versuchen, einen offeneren Weg zu gehen und so, das ist der einzige Weg, ja. Weil nicht umsonst hat das WCAG das gemacht. Man merkt auch, es ist viel frischer. Man fühlt sich als Entwickler einfach besser aufgehoben.
Es ist natürlich offener auf 'ne Weise, dass halt dann vielleicht da fünf, hinreichende Techniken und dann noch irgendwie 15 andere Techniken sten, stehen, die vielleicht sich widersprechen oder wo man sich einfach im Einzelfall dann sagen muss: Nee, das ist, glaub ich, jetzt für mich nicht so zutreffend. Da, da muss man halt tatsächlich dann, mittlerweile eben sehr viel Erfahrung haben, um solche Sachen dann zu beurteilen, ne.
Das ist 'n bisschen schwieriger, aber das ist halt die Frage der Offenheit und das Problem der Offenheit, ne. Also je offener 'n System ist, desto schwieriger ist es immer, es zu beurteilen und es tatsächlich dann anzuwenden, ne. Also wenn jemand sagt: „Okay, mach A und B und dann hast du C", ne.
-
Sascha Ja, absolut.
-
Sylvia Ja, ist so. Aber ich, ich find's 'n spannendes Experiment und deswegen macht mir das einfach Spaß. Mir macht's Spaß, mit der WCAG 2 umzugehen, aber, es müssen andere dann für sich entscheiden. Es gibt sicher welche, die einfach schlicht auf die BITV 2 warten, ne. Aber ich kann nicht warten, weil ich tatsächlich eben von Kunden, eben dann, die sind teilweise schlauer als man glaubt, ja, dann sagen: „Aber wieso gibt es WCAG 2?
Ja, und was können wir da schon machen?" Ja, es ist tatsächlich so und, deswegen muss ich mich einfach damit beschäftigen und, -
-
Sascha Kannst du uns mal 'n paar von deinen Kunden abgeben? Das ist...
-
Sylvia Kann ich nicht.
-
Sascha War auch keine ernst gemeinte Frage.
-
Sylvia Ich möchte dazu nix sagen.
-
Sascha Okay. Ja. Okay, gut. Gehen wir anstattdessen vielleicht mehr auf HTML5 ein.
-
Sylvia Wir warten natürlich auch schon auf die Tonbeispiele, gell, aber, das ist halt jetzt 'n bisschen eher 'ne trockene Ecke. Die nächste wird noch trockener, weil, die Tonbeispiele eher weniger hergehen, hergeben würden. Also HTML5, ich hab mir einfach angeguckt, ich bin jetzt auch nicht so super,, beschlagen in HTML5. Ich hab halt so, nachgeguckt und, was in Formularen zu erwarten ist. Es ist auch sehr interessant, was da tatsächlich schon umgesetzt ist.
Also ich mein, wenn man Firefox aufmacht, sieht man natürlich nix, aber, Opera hat es eben implementiert. Da kann man, ungefähr zwei Drittel von, den HTML5, ich glaub Web Forms heißt das bei denen irgendwie, diese Elemente, kann man tatsächlich sehen, ne? Also dann... Und, bei Safari gibt's auch einige witzigerweise.
Also man kann, ich hab dann so 'ne, Adresse angegeben, die wir jetzt dann auch geben, wo man eben mit dem jeweiligen Browser hingehen kann und gucken, auf einfach auf den Tab, zu Web Forms gehen und gucken, was wird in meinem Browser tatsächlich unterstützt. Das find ich ganz lustig, weil dann hat man eben gesehen so: Na ja, da gibt's jetzt so 'n bisschen Kopf-an-Kopf-Rennen. Schade ist halt, dass bei Firefox da noch nicht viel da ist und beim IE sowieso nicht, ne.
Aber das ist jetzt prinzipiell nicht, dramatisch, weil, das ist ja quasi kompatibel nach unten. Du siehst das dann halt einfach nicht, aber es ist halt 'n ganz normales Formular, ne? Es gibt halt da so ganz spezielle Typen, ne? So E-Mail, das hatte ich schon erwähnt. Das sieht halt sehr lustig aus. Da ist so 'n kleines E-Mail-Icon davor dann im Formularfeld. Das, das heißt dann einfach Input type E-Mail, type URL, type, ne, Datumsfeld, Suchfeld.
Und, es gibt dann eben so, interessante Attribute, die wir später bei WAI-ARIA dann auch noch mal haben. Das ist auch so die Diskussion, dass sich Sachen natürlich dann jetzt 'n bisschen doppeln, wie Attribute wie required. Da steht dann nur required, ne? Das ist in HTML5 ja 'n bisschen anders als in XHTML oder AutoFocus.
Und da wären wir natürlich wieder bei der Sache, was jetzt ja mit den, mit dem Tabindex erreicht wird, dass eben, wenn du kannst ein Feld bestimmen, wenn die Seite sich lädt, geh sofort dahin. Damit hast du dann quasi diese Tabindex-Sache,, im Sack, ja.
Das Lustige ist, dass, da gab's bei Bruce Lawson, der sich ja auch immer mit diesen Sachen beschäftigt, 'ne lustige Diskussion, weil er da gesagt hat: „Um Gottes willen, dann les ich überhaupt nicht mehr, was auf der Seite sonst ist, sondern bin sofort Autofokus auf irgendeinem Formular, weiß gar nicht, um was es geht und dann geht's los", ne?
-
Sascha Ja, zumindest für Screenreader ist das ja schon so, ne? Also, also wenn, vielleicht für den, für den normal visuell Getakten, da, es sei denn, es ist jetzt ganz woanders auf der Seite, aber wenn das, wenn der, wenn der Fokus da ist, dann kann ich ja trotzdem die Seite noch erst mal wahrnehmen, während ich dann sofort, wenn es da sofort anfängt zu lesen, ist natürlich blöd.
-
Sylvia Ja, weil du dann einfach das echt nicht mitkriegst, weil meistens steht bei Formularen oben ja schon noch irgendwie 'ne Beschreibung oder so, ne?
-
Sascha Ja, ja, genau, ja.
-
Sylvia Aber es ist ja witzig. Also dieser Autofokus funktioniert auch in Opera schon und ich hab ihn, nee, das war dann was anderes. Ich hab ihn woanders nämlich auch gesehen. Das ist halt wirklich spannend. Einfach bist du da sofort im ersten Feld. Das ist halt 'ne, 'ne Hilfsfunktion, ne? Da muss man einfach gucken, wie kann man sie anwenden. Und, dazu komme ich später bei WAI-ARIA noch mal, was man dann eben macht, wie man den Inhalt dann reinholt.
Das find ich dann, das, diese, es hat fast was von 'ner Oper, dieses, okay, in HTML5 mach ich jetzt mal Autofokus, jetzt fehlt mir aber der Inhalt. Jetzt gehen wir wieder zu WAI-ARIA und holen den Inhalt von hinten quasi wieder rein, ne? Das fand ich alles so 'n bisschen, es ist alles spannend so, aber mir erscheint dann alles noch so 'n bisschen auf so 'nem, hakeligen Level.
-
Sascha Es ist ja auch alles tatsächlich dann doch so 'n bisschen experimentell in Anführungsstrichen, ne? Also, weil, weil man ja noch keine wirklich richtigen Erfahrungen sammeln kann im freien Feld so.
-
Sylvia Ja, also diese HTML-, fünf-Formulare, ich hab mir die klassischen Seiten angeguckt, die im HTML5 Doctype haben, ob die auch diese Formulargeschichten, aber zum Beispiel, ich glaub HTML Doctor verwendet die überhaupt gar nicht. Das Problem ist ja, jetzt das eine, das ist, es ist keine Darstellungsproblematik. Du siehst eh alles und es funktioniert eh alles. Nur die, die API, ne, für assistive Technologien wie Screenreader geben diese Sachen nicht aus.
Also wenn da required drinsteht, war's das halt, ne? Also die haben einfach jetzt mit WAI-ARIA zu tun, hab ich letztens gelesen. Die wollen diesen Standard durchsetzen, weil der halt tatsächlich auch, für diese assistiven Technologien wirklich auch, zwingender ist und auch spannender ist. Und, da haben die einfach keine Zeit wohl jetzt, sich tatsächlich auch noch mit der Ausgabe von HTML5-Attributen zu beschäftigen.
-
Sascha Ja klar.
-
Sylvia Keine Ahnung, wo das hingeht. Da muss man warten, ne? Screenreader brauchen eben 'ne gewisse Zeit, bis sie sich dann adaptiert haben. Also NVDA ist ja relativ flott. Da kriegt man durch Marco Zehe immer ganz, ganz gut mit, was sich da bewegt. Aber ich find das halt, ich glaub, der Bruce Lawson hat das auch mal ganz gut gesagt.
So, das kommt bei mir eigentlich erst am Schluss, aber das find ich halt, das Spannende dran: Es stimmt schon, ja, der Browser müsste sich eigentlich mit diesen Dingen beschäftigen, nicht wir, ne. Nicht wir müssen irgendwas einsetzen, damit das jetzt als required kommt, sondern, ne, also wir müssen eigentlich keine Pflichtfelder mit Sternchen setzen, sondern der Browser muss uns klarmachen, das ist ein Feld, das pflichtig ist. Das stimmt schon, diese Sachen fehlen uns.
Tatsächlich, das ist so ähnlich wie andere Dinge im Leben, im Webentwickler-Leben, die uns einfach schlicht fehlen. Und deswegen find ich diese, diese, Entwicklung sehr spannend. Er sagt, wir können fünfzehnmal irgendwelche Dinge mit JavaScript oder was auch immer nachstellen, aber eigentlich ist es die Aufgabe des Browser, Browserhersteller, unsere Formulare, die wichtigen Dinge einfach herzustellen, wie eben es gibt 'n Typ E-Mail, es gibt 'n Typ URL, ne? Es gibt 'n klassisches Suchfeld, ne?
Das auch entsprechend semantisch tatsächlich so, so dargestellt wird und funktioniert, ja. Da hat er schon recht. Ob Autofokus wichtig ist oder nicht, ist dann vielleicht-
-
Sascha Okay, das lassen wir mal hingestellt.
-
Sylvia Aber das find ich schon 'ne spannende Entwicklung. Nur ich weiß nicht, wie lange es dauert, dass der IE da tatsächlich nachzieht. Muss man sich einfach mal ansehen. Ich hab unten dann, also wir werden die Links hier reingeben. Ich hab dann auch einige, Beispiele, die man sich ansehen kann, wie die Dinge aussehen. Nur man braucht die entsprechenden Browser halt dafür. Aber ich glaube, ich hab den Placeholder noch, den fand ich ein bisschen interessant.
Da kann man eben quasi, wie das Title-Attribut, ne, das doppelt sich alles auch ein bisschen so, wo man im Input-Feld dann angeben kann: Placeholder ist gleich und dann kann man angeben, um was es in diesem, Input-Feld geht. Hab ich jetzt auch nicht so verstanden, weil Title haben wir, glaub ich, auch noch. Bin ich jetzt-
-
Daniel Der, der Placeholder, der wird ja dann noch direkt angezeigt. Der Title wird hin und da, ja, da, wenn du mit der Maus drüber hoverst, angezeigt.
-
Sylvia Ah, okay. Okay.
-
Daniel Placeholder ist dann, dann wirklich, steht dann im, im Feld drin.
-
Sascha Also der Placeholder ist quasi so wie 'ne Vorausfüllung, ohne dass es wirklich, -
Unmittelbar ist
... physisch ausgefüllt ist quasi, ja?
Genau, ja.
Ja, okay.
-
Sylvia Ist es wieder Value dann, oder? Ah, okay.
-
Daniel Also ausgekauter Value dann.
-
Sylvia Okay. Ich weiß nicht, wie viel ihr Erfahrung schon mit den HTML5-Formularen habt.
-
Sascha Ja, ich ehrlich gesagt gar nicht. Ich hab mich zwar mit HTML5 schon ein bisschen auseinandergesetzt, aber ich bin, gehör, glaub ich, zu denen, das ist so ähnlich wie vorher. Das Formulare hab ich leider verlernt, vernachlässige ich immer. Deshalb war für mich auch so 'n, so 'n, so 'n, ne, so 'n Thema: Lass uns mal mit Formularen auseinandersetzen.
Weil ich hab zum Beispiel, und ich scheue mich, das schon direkt das zu sagen, aber ich hab, da hab ich schon mit Webstandards gearbeitet, so, so überall und dann hab ich aber trotzdem Formulare in Tabellen gemacht, ja. So, weil, weil irgendwie so: Ah, ich krieg das nicht hin und, ah, ich muss das jetzt machen und dann, dann, ja, war das leider noch so. Ist aber auch schon mindestens, zwölf Jahre her oder so, ja. Aber das, und ähnlich geht's mir jetzt dabei.
Ich hab mich mit HTML5 im Allgemeinen behandelt, aber jetzt zum Beispiel mit Form, mit den formularspezifischen Dingen noch eigentlich gar nicht, ja. Das...
-
Daniel Ja, ich kann das Placeholder-Element, Attribut.
Das ist eigentlich so alles, was ich fakt von HTML5-Formularen kenne, aber die anderen tollen Neuerungen von HTML5, da, da hab ich mich schon, hab ich schon ein bisschen rumgespielt, aber HTML5 so richtig vom Browser-Support her so richtig, implementieren.
-
Sylvia Ja, aber interessant. Ich dacht halt immer, es sei eine Opera, aber mittlerweile findet man tatsächlich einige Dinge auch schon, bei Safari über WebKit, ne. Also ich denke, es wird sich auch da wahrscheinlich was bewegen und für die, Barrierefreiheit wär's schon auch wichtig, dass solche Sachen, wie jetzt bei WAI-ARIA bei Required, dass er da was ansagt, richtigen Satz und so.
Das wär ja gut, wenn das eben so, ne, 'ne API dann auslesen könnte: Aha, da steht jetzt HTML5 required, dann wird der entsprechende Satz angesagt, ne. Also, also ich denke, auf manche Dinge könnte man tatsächlich dann ja verzichten, weil sie vom Standard her dann tatsächlich auch, vorhanden sind. Und man muss nicht 'n zusätzliches WAI-ARIA-Attribut reinpacken, ne.
Also weil wir haben ja zuerst gesehen, dass diese, dass das Screenreader sehr stark auf den Standards, aufbauen, ne, dass etwas richtig verdrahtet ist, dass etwas richtig benannt ist und deswegen würde so 'n, so 'n Attribut required oder, was es ja dann bei WAI-ARIA gibt, invalid, ne, also quasi eben nicht richtig ausgefüllt, würde durchaus Sinn machen, ne, und wür, würde einfach helfen, weil dann musst du nicht hingehen und solche Sachen verdrahten, ne, zusätzlich reinzubauen.
Nicht, dass ich WAI-ARIA an sich jetzt schlecht finde. Ich meine, du musst nur, es ist halt immer die Frage, welche Schlaglichter man da in der Argumentation eben sieht
-
Sascha Jetzt bist du wieder gerade total alien, alienhaft.
-
Sylvia Alien, alien.
-
Sascha Genau, aber wenn du jetzt 'n bisschen weiterredest, hat sich ja mittlerweile rausges-- Jetzt, glaub ich, jetzt klingt's langsam schon so 'n bisschen aus. Ja.
-
Sylvia Oh. Nee, aber ich denk halt-
-
Sascha Jetzt geht's wieder.
-
Sylvia Als, als Webstandard-Leute müssen halt immer gucken, den Blick noch 'n Stück weiter zu haben als das, was da ist, ne.
-
Sascha Ja, absolut.
-
Sylvia Also einfach gucken, die Entwicklung wär schon gut, wenn sich die Formulare tatsächlich in die Richtung entwickeln würden. Ob die, ob man die Icons jetzt gut findet oder schlecht, find ich dann immer so 'ne Seitenastdiskussion, ne. Aber gut, da ergeben sich dann wahrscheinlich wieder andere Fragen, wenn's tatsächlich unterstützt wird. Ja, wollen wir's zu WAI-ARIA uns vorwagen?
-
Sascha Gerne.
-
Sylvia Oh Mann. Ja, ich hab mich da auch das erste Mal so richtig reinbegeben, vor allem was die Formulare betrifft. Ich hab ja einige Vorträge besucht so und da hieß es halt immer: Okay, Pflichtfelderkennzeichen. Ich glaub, das hat sich vielleicht sogar 'n bisschen rumgespr..., gesprochen, dass es das gibt.
-
Sascha Kannst du ganz kurz noch mal, ganz kurz zumindest kurz sagen für die, die jetzt noch gar nicht wissen, was, was es ist, was WAI, WAI-ARIA ist eigentlich?
-
Sylvia Das möchte ich nicht sagen. Das setz ich dir ganz voraus. Na ja, ja, ich musste das schon mal erklären und bin, glaub ich, kläglich gescheitert. Deswegen will ich nicht immer... Na ja, ich mein, vielleicht erklär ich's so. Also für was man es irgendwie braucht, ne. Es ist halt 'ne Spezifikation. Interessanterweise kam heute gerade durch, also von der WAI, vom W3C, ne, für assistive Technologien, kann man entsprechende Attribute, mitgeben, ne.
Und, jetzt, jetzt für Formulare eben zum Beispiel 'n Attribut ARIA required ist true. Dadurch erhält dann, die, der Screenreader die Nachricht: Aha, dieses Feld ist eben required und, er wird dann entsprechend da 'ne Information dazu geben. Da gibt's natürlich, die Spezifikation ist aber riesig, wenn man sich da wirklich bei reinbegibt.
Im Grunde ist es eher für Dinge gedacht, die komplexer sind, nicht unbedingt für Formulare, sondern für Widgets, für Sliders und so weiter, ne, die eben schon 'ne ganz andere Komplexität haben als so 'n Formular. Das hat dann auch sehr viel mit JavaScript zu tun. Da muss ich dann irgendwie immer passen, weil ich diese Dinge dann in der Form dann,, nur bedingt nachvollziehen kann natürlich.
Und jetzt, glaub ich, war gerade so, eigentlich war das Last Call oder so und jetzt haben sie's wohl wieder auf 'n Working Draft zurückgestuft. Das war, glaub ich, heute oder gestern, weil eben doch zu viel Rückmeldung kam, ne, zu dieser Spezifikation. Sie liest sich jetzt nicht super easy. Also es ist schon, man muss sich da schon 'n bisschen hineinbegeben.
Ich hab das ja schon erzählt, dass die eben auch sehr stark auf Metaebenen argumentieren mit den Inputfeldern oder auch, mit Auswahlgeschichten. Select ist dann nicht 'n Select, sondern ist eben 'ne Gruppe von möglichen Auswahlgeschichten und so weiter. Das fand ich sehr spannend.
Hab ich mir auch alles irgendwie notiert, weil ich solche Sachen eigentlich auch immer mag, wenn man so quasi eben, so ähnlich wie bei, wie eben, WCAG 2 versucht ja auch möglichst neutraler dann zu argumentieren, dass die halt auch sich, die Sachen offenhalten für die Zukunft Ich hab mich jetzt nur speziell, auf dieses Formular fokussiert, weil wir gesagt haben, wir machen Formulare und weil ich mich auch beschränken musste selbst, weil das war dann diese ganze Spezifikation war halt sehr viel dann auch.
Also ich war wirklich überrascht. Ich dachte immer so, man hat ja diese Vorträge, da gab's immer nur so ein paar Demos und so und dachte ich: „Ach, so ein paar Attribute reinsetzen und so, ne? Und dann ein bisschen Slider sehen." Aber wenn man sich da wirklich reinbegeben und so: „Oh, da steht ja wirklich viel dahinter. Da gibt's viele Attribute, da gibt's viele Möglichkeiten", ne?
Also, ich denke, da kann man sich wirklich, ich meine, ich werd mich jetzt auch ausführlich auch damit beschäftigen, weil ich das spannend finde, aber das ist schon mächtig, ja. Also ich musste mir im Kopf ein bisschen was geraderücken, was WAI-ARIA betroffen hat.
-
Sascha Also als ich mich, als ich mich kurz damit auseinandergesetzt hab, ich hab halt für mich im Kopf immer so ein bisschen gehabt und jetzt, ich kassier gerne dann die Prügel, ja. Also, ist, war für mich so: Okay, das ist halt 'n, 'n Weg, so Ajax barrierefrei zu machen, ja, oder Ajax oder wie auch immer es heißt. Das, das war so: Ja, klingt interessant, kann ja jetzt nicht so schwierig sein, ja.
Und dann hab ich mir das halt mal angeguckt und ich muss sagen, dass das halt tatsächlich einen Umfang hat, wo ich merke, also ich, ich kann, ich kann das fast ab einer gewissen Dimension vom Projekt kann ich das nicht mehr alleine liefern. Also da, da braucht man halt Leute, die sich dann wirklich damit auseinandersetzen und, und da quasi so als, als, Spezialisten so ein bisschen dranhängen, ja, weil, weil das dann einfach, das wird halt wirklich zu mächtig.
-
Daniel Ja, auf jeden Fall. Also, also für, für-- Das ist ja eigentlich, ich glaube, ich hab da jetzt auch nicht so richtig die Ahnung, aber ich glaube, das ist ja mal so auch entwickelt worden, um unter anderem, um halt auch Webanwendungen, zugänglich zu machen. Und, das ist schon ein sehr, sehr komplexes Thema und dann muss man eigentlich in ein, Spezialist sein oder man muss ein Store Framework haben, das halt gleich, ARIA-kompatibel ist.
Das, ist leider noch kein Framework, also kein JavaScript-Framework, oder? Das, das, -
-
Sascha Also ich wüsste, ich wüsste nichts davon, nee.
-
Sylvia Ja, also die JavaScript-Frameworks ziehen ja nach, ne? Also ich weiß, ich weiß gar nicht, also jQuery, ob das, schon WAI-ARIA bestückt ist. Also man liest immer mal wieder, dass sie alle an, an dem arbeiten, an der Integration, find ich auch super, ne? Aber man muss auch, wieder jetzt einen Schritt zurückgehen, weil was wir hier machen, ist ja nicht komplexe Anwendungen besprechen.
-
Sascha Nee, nee, klar, aber, genau, bei Formularen sieht das sicherlich noch mal ein bisschen anders aus. Deshalb, ich hoffe, dass es einigermaßen übersichtlich ist.
-
Sylvia Nur die einfachen Formulare, ne? Mit denen beschäftigen wir uns jetzt.
-
Sascha Genau, ein-einzeilige Suchfelder.
-
Sylvia Und deswegen sage ich, es gibt auch so was, zum Beispiel wenn man sich eben interessiert, wie man schnell diese Attribute einfach für sich adaptieren kann und einsetzen. Zum Beispiel bei Marco Zehe, der macht immer diese Easy ARIA Tipps. Da geht man einfach hin und sieht man: Ah, so kann ich dieses ARIA required einsetzen oder so kann ich diese Sache einsetzen. Ach, das kann ich vielleicht bei mir irgendwie einbauen.
Oder auch die Landmark Rolls, die haben sich ja quasi am meisten rumgesprochen, dass man eben, da widerspricht sich auch ein bisschen wieder mit der HTML5-Geschichte, ne? Dass es ja auch so, verschiedene semantische Bereiche gibt und die kann man halt mit WAI-ARIA dann auch entsprechend kennzeichnen. Und Martin Kliem hat sich auch ausführlich damit ges-beschäftigt. Der hat dann auch, ich glaub, auf Flickr so kleinere Demos, da gibt's dann auch den Link dazu.
Da kann man einfach sich das mal anhören und da sieht man halt so die kleineren bis mittleren Anwendungen, ne? Also man kann sich da ein bisschen steigern, ne? Also ich denk, man, man soll jetzt nicht das Gefühl: „Oh, das ist nix für mich, das ist zu komplex", ne? Sondern man kann da tatsächlich hingehen und sagen: „Ach, die paar Sachen kann ich jetzt eigentlich schon einbauen. Das ist nicht so tragisch, ne?
Das krieg ich hin." Und ich denk, das, das ist eher so der Ansatz, den ich jetzt irgendwie gewählt hab. Und, wir haben jetzt gesagt, Pflichtfelder können wir mit ARIA required irgendwie kennzeichnen, ne? True, true. Also wenn's falsch ist, braucht man's eh nicht reinpacken. Dann kann man eben Fehlermeldung, JavaScript, wo dann quasi ein Feld, wenn's nicht richtig, oder nicht ausgefüllt wird, kann man, wird das Attribut ARIA invalid, ne, als 'n Statusfeld reingepackt.
Da gibt's auch verschiedene Optionen. Das kennt man so ein bisschen von Regex, ne, Grammar, Spelling und so, ne? Kann man dann auch machen. Da sehen wir jetzt mal Choose Error. Ich glaub-
Ich spiel das mal an hier.
Ja, genau. Wir hören.
Funkszeichen. Tab. Tab. Tab. E-Mail Stern Eingabefeld erforderlich, ungültiger Eintrag. Fünf von sechs. Geben Sie T... 100 %. Hinweis, Ausrufungszeichen. Keine richtige E-Mail-Adresse. Vorname, Eingabefeld erforderlich, ungültiger Eintrag. Tab. Tab. Tab. Vorname ein. Tab. Tab. Tab. E-Mail Stern Eingabefeld erforderlich. Fünf von sechs. Geben Sie Text ein, Punkt. E G. Hinweis, Ausrufungszeichen. Keine richtige E-Mail-Adresse. Kommentar, Eingabefeld.
-
Sascha Ja, ja.
-
Sylvia Also ich glaub, das war sogar das,, Beispiel von Felix Nagel, der halt, mit WAI-ARIA so 'n ganzes Formular ausgestattet hat, mit JavaScript-Validierung und, da wird dann halt bei jedem Feld, halt angegeben zusätzlich, noch extern 'n Satz, der, der verbunden ist halt mit WAI-ARIA, was jetzt an diesem Feld tatsächlich, invalid ist, ne? Weil invalid ist natürlich jetzt nicht unbedingt, 'ne sonderlich tolle Aussage, ne? Das ist noch nicht so wirklich hinreichend, ne?
Und es gibt dann halt auch so wie Checkbox und Radios gibt's dann Aria Checked. Da können auch true oder false, ne? Das hatten wir bei der Anrede, ne. Ist es jetzt, ausgewählt oder nicht ausgewählt? Und es gibt halt auch so was wie mixed. Das ist, wird dann nur für Checkboxen, weil Checkboxen können ja mal, angewählt und nicht, da können ja mehr angewählt sein und so, ne. Und bei Select wär dann das Aria Selected als Zustand, wenn man etwas auswählt.
Und, mich hat dann eher so Sachen interessiert wie, wie kann man eindeutig ein Label zuordnen? Das ist dann eher für komplexe Strukturen. Der, Marco CR hat da auch so eins aufgezeigt. Zum Beispiel, man hätte ein Label, dann hat man ein Feld, dann hat man noch mal ein Label und noch ein Feld, ne. Also quasi eben so lange Formularstrukturen. Da ist ja manchmal etwas schwierig, die Labels zuzuordnen, auch für den Screenreader, wenn das nicht eindeutig verkoppelbar ist mit ID und, so.
Dann kann man das mit WAI-ARIA tatsächlich mit Aria labeledby, im Feld schreibt man dann Aria labeledby und dann nimmt man genau die ID des Feldes. Ne? Es funktioniert leider nur mit IDs. Also was weiß ich, da hat man halt ein Feld, das muss nicht mal ein Label sein, das enthält den Text, für dieses Feld und dann kann man das verbinden mit diesem Attribut.
Das ist zumindest eine spannende Variante, wenn man etwas sehr Komplexes hat oder wie wir das vorher hatten, wenn dieses Suchfeld tatsächlich kein Label hat. Ja?
-
Sascha Mhm. Mhm.
-
Sylvia Dann könnte man irgendwo einen Text hinpacken und, jetzt erzähl mir was zu diesem Suchfeld. Ja? Und der Screenreader macht das dann automatisch. Da kann man auch mehrere IDs ne, aneinanderschachteln, ne. Zum Beispiel, was weiß ich, diese ganzen drei Labels müssen eigentlich für das erste Feld gelesen werden. Ist jetzt ein komischer Fall, aber könnte ja sein.
Dann macht, muss man alle drei IDs mit Leerzeichen aneinanderhängen und dann würde der das einfach vorlesen im Zusammenhang und dann in das Feld gehen. Also das sind schon, schon wilde Geschichten, ne, find ich aber ganz spannend. Das können wir uns anhören. Zuerst JAWS, Aria labeledby. Würdest du das wieder einspielen?
-
Sascha Yo.
-
Einspieler Tab Anrede Herr, Auswahlschalter nicht aktiviert. Tab Anrede Frau, Auswahlschalter nicht aktiviert.
-
Sylvia Und da hab ich jetzt quasi gemacht, diese Anrede, die davor ist, ja, da haben wir wieder diese typische Konstruktion, zwei, Radios, ne, mit den jeweiligen Labels und vorne haben wir dieses Anrede. Und, das hab ich jetzt mit Aria labeledby tatsächlich verbunden. Ja? So dass ich einfach, dieses, diese, diese Radio dann einfach Aria labeledby mit dieser ID von dieser Anrede. Deswegen liest er vor: Anrede, ne, und dann eben, ne, Radio Herr oder Frau. Also so kann man das dann verbinden.
Und bei NVDA können wir uns das auch noch mal anhören.
-
Sascha Ja, ich mache das an.
Liste Anrede Herr, Auswahlschalter nicht aktiviert. Anrede Frau, Auswahlschalter nicht aktiviert. Zwei von zwei.
-
Sylvia Also, das, da hört sich jemand doch ein bisschen lächerlich an. Wahrscheinlich kann man die Sprachen, das sicher da modifizieren. Hier funktioniert das auch. Also solche Sachen funktionieren einfach schon. Das find ich eigentlich ganz schön. Eben wie wir gesagt haben, nein, der nächste Fall ist eben, wenn kein Label möglich ist, dann könnte man, wie im, Title könnte man Aria Label reinsetzen. Dass man das Feld erklärt, ne? Das wär dann quasi, das Feld hat dann das Label, das Aria Label.
Und, für Hilfetexte, das ist auch oft so 'ne Sache, das hatten wir auch gehabt, so wenn im Form-Modus, wo krieg ich diese ganzen Informationen her, ne? Die Zusatzinfos, die neben den Feldern stehen, das kann man mit Aria describedby. Da gibt man halt auch diese Information in einem P-Tag oder was auch immer, gibt man eine ID, ja, und die kann man in dem Feld dann aufrufen mit Aria describedby und der liest dann diese Zusatzinformation, sofort ein. Das können wir uns jetzt auch anhören bei JAWS.
-
Einspieler Tab Anrede Herr, Auswahlschalter nicht aktiviert. Tab Anrede Frau, Auswahlschalter nicht aktiviert. Weitere Anredeformen werden noch ergänzt. Punkt.
-
Sylvia Ich mein, das ist jetzt
-
Sascha Okay, das, schön vom, vom Webdesigner noch,, drin stehen gelassen. Ja, ja.
-
Sylvia Das hab ja nur ich gemacht.
Mir ist grad kein anderer Text eingefallen.
-
Sascha Ja, klar. Ja.
-
Sylvia Aber, da sieht man eben, das wird dann einfach reingeholt, ne? Weil das ist einfach,, ein P, Element, das einfach außerhalb steht und das würde jetzt nicht vorgelesen werden und das holt er jetzt mit diesem Attribut rein.
-
Sascha Das wäre dann auch was, was tatsächlich an dem Beispiel Manufactum, wo, ne, wo, wo teilweise Sachen nicht mitgelesen wurden, wie zum Beispiel Post,, Post, was weiß, Postfach nicht möglich oder so. Solche Sachen, wären dann halt, könnte man mit reinziehen dann, ja?
-
Sylvia Genau, das war eben mein letzter, mein letzter Punkt, wo ich dann quasi wieder aufs Manufactum-Formular zurückgehen wollte.
-
Sascha Oh, Ent-entschuldige.
-
Sylvia Ist ja gut, dann hast du das schon formuliert. Das ist ja, das ist ja super, ne? Und, da war eben ein Punkt, ne, dass man die zusätzlichen Infos, die im Form-Modus halt nicht gelesen werden, dass man die durch dieses, kleine Attribut, weil es wird halt tatsächlich von JAWS und von NVDA schon unterstützt, einfach, mit dem, mit dem kleinen Attribut verseht. Das ist ja eigentlich minimal, ne? Und IDs hat man meistens ja eh irgendwie.
Das Problem ist halt immer noch, also es gibt wohl irgendwie 'ne, 'n Ansatz, dass man sagt, es würden, sollten auch irgendwie Klassen oder so, aber ich glaub, das wird noch dauern. Also die beziehen sich schon eindeutig auf IDs, ne. Und ich sag ja nicht immer so, man hat diesen ID-Raubbau irgendwann, ne, wenn alles irgendwie mit IDs vollgepflastert ist, ne.
-
Sascha Ist richtig, aber wahrscheinlich wird's da ähnlich sein, wie es dann zum Beispiel mit, mit so Frameworks wie jQuery oder so ging, dass man dann halt schon einfach, quasi wie CSS auf bestimmte Elemente referenzieren kann oder so. Das kann ja auch sein.
-
Sylvia Genau. Genau. Und, ja, was man auch ganz einfach bei Manufactum ergänzen könnte, Aria required, ne? Einfach bei den Feldern, die tatsächlich auch als pflichtig eh schon gekennzeichnet sind, packt man das noch zusätzlich rein. Ne? Dann wird das einfach noch mal zusätzlich, klar. Und, die haben ja, was ja im Grunde eine nette Konstruktion ist, das merkst du, wenn du bei diesem Manufactum-Formular guckst, Postleitzahl und Ort.
Diese Variante ist mir auch noch nie irgendwie, dass man auch irgendwie dachte: Mein Gott, dass das mir noch nie eingefallen ist. Die haben Postleitzahl und Ort, obwohl das nebeneinander steht, sind jetzt zwei Labels, ja? Die haben wahrscheinlich inline zusammengepackt. Und wenn du auf Postleitzahl und auf Ort gehst, klickst du jeweils, immer springst du ins Feld, ne? Das ist ja auch so eine Funktion der Labels.
Wenn man drauf klickt, ist man direkt im Feld, wenn das eindeutig mit, verbunden ist, ne?
-
Sascha Das war mir ehrlich gesagt noch, also beziehungsweise das klar, doch, das war mir klar. Nur so gelöst hab ich das, ist mir das, hab ich, bin ich noch gar nicht drauf gekommen. Also für die, die es jetzt nicht lesen, für die, die es jetzt nicht sehen können, die es parallel nicht aufmachen, ganz, also zur Info: Da steht quasi, also in einer Zeile steht Postleitzahl und Ort als L-- Das sind Quasi innen drin zwei Labels, aber es ist, sieht halt aus wie eins, ja.
Und dann kommen quasi rechts daneben zwei Eingabefelder und wenn ich jetzt mit der, mit dem Mauszeiger auf Postleitzahl klicke, springt der Fokus quasi in das Postleitzahlfeld und wenn ich auf Ort klicke, dann springt's halt quasi hinten in das Ortfeld.
-
Sylvia Das fand ich irgendwie ziemlich-- Ich bin auch noch zufällig drauf gekommen, ganz ehrlich. Und war, dachte ich: Ach, das hätte ich auch selber mal können.
-
Sascha Ja, absolut.
-
Sylvia Fand ich ganz schön. Und da kann man halt auch hingehen und kann sagen: Gut, man kann jetzt mit Wa-Wa-WAI-ARIA noch das irgendwie aufhübschen oder noch mehr verbinden, dass man eben sagt, die beiden Felder, die ja so einsam da stehen hintereinander, dass man die mit aria labeledby eindeutig mit der ID, dieses, Labels noch mal verbindet, ne? Dass das auch noch mal explizit verbunden ist. Ich mein, das ist halt-
-
Sascha Jetzt kommt wieder deine Alien-Stimme, ja. Also-
-
Sylvia Ja, weil ich schon wieder gestikuliere.
-
Sascha Ja, aber ich, ja, ich glaub, das kommt so in unregelmäßigen Abständen einfach, ja.
-
Sylvia Ehrenfrei, Ehren, Ehren.
-
Sascha So, und jetzt kommt nämlich gleich der Moment, glaub ich, wo du wieder da bist, ne. So. Sag mal was.
-
Sylvia Ja, ja, ja, ja.
-
Sascha Ja, jetzt wird's wieder besser.
-
Sylvia Okay, okay. Ja, im Grunde sind wir dann eigentlich durch, ne? Das war eigentlich so. Ich wollte nur am Schluss noch bei dem Faktor eben zeigen, dass man das noch quasi smoother alles machen kann. Ach so, das Smoothest habe ich ja gar nicht erzählt, weil ich das, tontechnisch nicht hingekriegt habe, das wirklich aufzunehmen, weil immer wenn der Ton aus war, hat's funktioniert. Das ist auch so 'ne Sache, ne? Man muss immer gucken, mit welchem, Screenreader funktioniert was und so.
- Das ist schon 'n bisschen, teilweise eben noch experimentell, vor allem weil ich das halt einfach auch informietechnisch noch nicht alles so gebacken kriege, dass ich das sofort weiß. Und, es gab halt so 'ne Sache, ich weiß gar nicht mehr, welches Attribut das war. Das hat dann wirklich so schön bei dieser Anredegeschichte angesagt, so, ich glaube, es war irgendwie dieses aria checked oder aria selected, ich bin nicht sicher. Dann so:, Anrede.
-
Herr ist nicht ausgewählt, aber Sie können jetzt mit der Pfeiltaste die andere Auswahl anwählen. Also das übertreibe ich jetzt 'n bisschen, ne?
-
Sascha Ja, ja.
-
Sylvia Es wirkte wirklich wie so auf einem, wie so 'n Avator, so 'n Avator, der dich jetzt quasi durch,, navigiert. Und das fand ich so, so toll, weil daran sieht man, dass, das eben, auch wenn die Stimmen noch nicht so toll sind, aber man hat das Gefühl gehabt: Mensch, das ist ja echt mal hier Service, ja. WAI-ARIA ist tatsächlich 'ne Serviceleistung und, das fand ich total spannend.
-
Sascha Ja, ja. Ja, schön. Also ich muss sagen, du hast jetzt, ich hoff, ich hoffe, du hast zwischendurch irgendwie 'n Schluck Wasser nehmen können, weil du hast ja jetzt wirklich sehr, sehr viel geredet. Es hat mir aber auf jeden Fall sehr viel gebracht. Also das ging, doch schon sehr in die Tiefe, find ich..
-
Sylvia Ich hoffe.
-
Sascha Danke.
-
Daniel Am, am Schluss dann die WAI-ARIA-Tipps. Also das, da sind auch wirklich einige dabei, die man jetzt auch sofort umsetzen kann.
-
Sylvia Mhm. Genau.
-
Daniel Also kommen jetzt sofort, jetzt, noch heute Nacht
-
Sylvia Genau. Wir könnten natürlich auch sagen, wir, wir, wir, wir, wir verlosen die Bücher nur an diejenigen, die sofort WAI-ARIA einsetzen und das auch noch dokumentieren.
-
Sascha Ich fürchte fast, dass quasi dadurch, dass wir, dass für uns zwar, nur, wenige Stunden vergangen sind, aber für alle anderen eine Woche, dass die Bücher schon weg sind von der letzten Sendung.
Aber, wir, das wär-- Ich, ich würd mal sagen, wenn wir vielleicht noch mal, 'n, 'n WAI-ARIA Spezial oder WAI-ARIA Total, wie ja unsere, unsere spei..., unsere themenfokussierten Sendungen mittlerweile heißen, machen, fin-- dann, wäre vielleicht 'ne gute Idee, ne, wenn wir dann was zu verlosen hätten, quasi das, mit dem, verpflichtenden Einsatz zu verbinden.
-
Sylvia Genau. Die, die WAI-ARIA-Bewegung, die die Technikwürze auslöst.
-
Sascha Ganz genau.
-
Sylvia Wir erinnern uns noch Jahre danach.
-
Sascha Genau, da kam der Stein ins Rollen. Also wir haben, dank deiner, Recherche ja quasi hier noch 'ne Menge Linktipps, die wir euch gerne als Hörer auch zur Verfügung stellen werden. Wenn ihr dann vom langen, von der langen Autofahrt, wir haben's immerhin über 'ne Stunde jetzt gezogen, wieder nach Hause kommt, könnt ihr euch da mal durchklicken. Da sind einige, einige Demos und einige Hinweise dabei. Sonst freuen wir uns natürlich wie immer auch über, über Feedback in den, vom, in den Kommentaren.
Und, wir danken ganz besonders dir, Silvia, weil du hast, das nicht nur exzellent vorbereitet, sondern auch sehr kurzweilig, beschrieben.
-
Sylvia Ja, ich bin immer der absolute Praktiker. Obwohl ich Metaebenen sehr gerne mag, ne.
Merkwürdige Konstellation. Ja, ich bedanke mich.
-
Sascha Ja, also, danke für die Sendung und, dieses Mal bleibt uns quasi nichts anderes, als allen Technikwürze-Hörern im Namen aller Technikwürze-Moderatoren und Machern einen guten Rutsch ins neue Jahr zu wünschen. Rutscht rein, rutscht nicht aus und, wir hören uns quasi im Jahr 2010 mit ganz frischen Technikwürze-Folgen wieder. Bis dann und, feiert 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.
Wir entschuldigen uns für die unregelmäßigen Tonstörungen in Sylvias Audiostream, leider haben wir die Quelle der Störung nicht ausmachen können!
Klassische barrierefreie Formulare
Startpunkt: BIENE 2009 manufactum.de
Wir sehen uns ein klassisches barrierefreies Formular an - ein Formular, um einen Newsletter zu bestellen 1
.
(Soundbeispiel: JAWS 1
)
Screenreader:Â JAWS NVDA
- setzt man Webstandards in Formularen ein, ist das die beste Voraussetzung für ein barrierefreies Formular
- Verwendung von FIELDSET und LEGEND für inhaltlich abgrenzbare Bereiche des Formulars (Spezial: verschachtelte FIELDSETS)
- Buttons - Bei type="image" immer darauf achten, das ALT-, name, und value-Attribut zu befüllen (optional title-Attribut) - Probleme mit Schriftgrafiken
- das Formular muss komplett mit der Tastatur bedienbar sein
- Wichtig, weil wird immer wieder vergessen: der Fokus des aktuellen angetabbten Feldes soll erkennbar sein - den Fokus per CSS hervorheben
- Fehlerbehandlung und -kennzeichnung ist wichtig
- fehlerhaftes Feld markieren, nicht nur mit Farbe
- am Anfang des Formulars eine Hinweis auf Fehler anbringen und eine Möglichkeit zu einem oder zu allen Fehlern zu springen
- man muss Fehler schnell erkennen und auch erreichen können
- Wichtig: immer auch einen serverseitigen Fallback vorsehen in der Validierung des Formulars
- Strittige Punkte (historisch gewachsen)
- Tabindex nicht mehr nötig
- Accesskeys nicht mehr nötig
- Felder nicht mehr vorbelegen
- Umsichtig mit dem TITLE-Attribut umgehen
- Screenreader Formmodus: Es werden Informationen ausserhalb von Formularelementen nicht immer vorgelesen
Links
- >>Reine Formsache<< Formularserie auf Einfach für Alle (2007)
- Formulare sind Gespräche: Mitmachbarrieren im Web 2.0 abbauen - Timo Wirth (Vortrag auf dem Best of Accessibility Symposium 2009 PDF-Datei)
WCAG 2 und Formulare
Die WCAG 2 (Web Content Accessibility Guidelines 2.0) bieten ein dreistufiges Verfahren an, für welche Stufe - der barrierefreie Konformitätsgrad ist ansteigend - AAA ist die höchste Stufe, die zu erreichen ist - was erreicht werden soll.
- Der oben angesprochene Einsatz von LABEL (for/id), FIELDSET und LABEL ist zwingend (Level A)
- Verknappung von standardisierten Elementen wie Suchfeldern (TITLE-Attribut nutzen) und Formularfeldern in Datentabellen ist erlaubt, LABEL kann man weglassen.
- clienseitige Validierung ist sogar erwünscht, wenngleich der serverseitige Fallback zwingend ist.
- Fokus auf das erste fehlerhafte Formularfeld und auch wieder zurück zur Fehlerliste
- Es soll ein Mechanismus angeboten werden, dass der Nutzer auf die Fehler direkt zugreifen kann
- Fehlerbehandlung als stufiger Prozess
- Fehlererkennung (Level A) - es muss ein Fehler erkennbar sein ( mit Hilfe von Text, Farbe, Semantik)
- Fehlererläuterung (Level AA) - Fehler sollten erläutert werden mit Beispielen oder Hilfen (Hinweise nah am Formularfeld)
- Fehlerprävention (rechtliche/finanzielle Transaktionen Level AA, sonst Level AAA)
- Formulare in Schritten genau kennzeichnen
- Bestätigungsseiten anbieten (mit Checkbox zum letztmaligen Bestätigen am Ende)
Links
- WCAG 2.0, deutsche Übersetzung: Richtlinien für barrierefreie Webinhalte (WCAG) 2.0
- Accessible Forms using WCAG 2.0 1 (2008)
HTML 5 Formulare
HTML 5 bietet auch viele neue Elemente und Attribut für Fomulare an, die Browserunterstützung ist noch nicht hoch (Opera, Safari). Mit www.findmebyip.com/ kann man auswählen, welche Formelemente schon im genutzten Browser unterstützt werden.
- neu Typen: Email, URL, Datums-Feld, Suchfeld etc.
- neu Attribute: required, autofocus, placeholder z.B.
- autofocus: Fokus springt sofort in das Feld mit dem autofocus-Attribut
- Screenreader im Formmodus liest dann nicht mehr den Text, der vor dem Formular steht
- placeholder: Vorbelegung von Formularfeldern (funktioniert schon in Chrome und Safari)
- autofocus: Fokus springt sofort in das Feld mit dem autofocus-Attribut
- Problem: assistive Technologien lesen das alles noch nicht aus, die haben noch mit der Implementierung von WAI-ARIA zu tun ...
Links
- HTML 5 Forms W3C
- The accessibility of HTML 5 autofocus – Bruce Lawson
- HTML 5 Serie: Tipphilfen 1 – Stefanie Rückert Webkrauts
- A Form of Madness 1
- Have a Field Day with HTML5 Forms – 24 ways
- HTML5: Tool of Satan, or Yule of Santa? - Bruce Lawson  24 ways
- Beispiele
- bei CSS-Gallery 1
- aus dem 24 ways Artikel
- von Bruce Lawson
WAI-ARIA (Accessible Rich Internet Applications Suite) und Formulare
"WAI-ARIA ist eine Spezifikation, die Hilfen anbietet Rollen, Zustände und Eigenschaften von selbst entwickelten Widgets zu beschreiben, um sie so für Nutzer assistiver Technologien erkenn- und benutzbar zu machen." (Quelle: Einführung in WAI-ARIA)
Wir bieten nur einen knappen Einblick, wie man WAI-ARIA in Formularen nutzen kann. Screenreader-Anwender erhalten dann viele Zusatzinformationen, die das Ausfüllen eines Formulars wirklich smooth macht. :)
Folgende Attribute lassen sich schnell und einfach einsetzen:
- Pflichtfelder kennzeichnen mit aria-required="true"
- Fehlermeldung: Statusänderungen mit aria-invalid="true" (Sound JAWS 1 )
- weitere Statusänderungen: aria-checked (u.a. für Checkboxen, Radios), aria-selected (u.a. für Selects)
- Formularfelder eindeutig zu einem Label zuordnen (u.a. für komplexe Formularstrukturen): aria-labelledby
- Wenn kein Label möglich ist, kann man mit aria-label="Inhalt des Labels" im Formularfeld ein Beschreibung hinzufügen (vgl. TITLE-Attribut)
- Um zusätzliche Infos oder Hilfen in Formularen für Screenreader zum Formularfeld vorlesbar zu machen: aria-describedby:
- Der Wert ist eine ID, der Screenreader holt sich dann sofort die Inhalte des Elements mit dieser ID und liest die direkt im Formularfeld ein. (Sound JAWS 1 )
Links
- WAI-ARIA Spezifikation
- Einführung in WAI-ARIA - Stefan Walter
- Marco Zehes Easy ARIA Tips 1
- Martin Kliems Artikel und Demos of Flickr
Erwähnungen 23
Kommentare 15
-
Wieder einmal eine sehr informativer Podcast. Vorallem ist mir heute mal wieder bewusst geworden, dass ich trotz Beschäftigung mit Webstandards und Barrierefreiheit noch das ein oder andere besser machen kann.
Die MP3 im RSS-Feed ist übrigens nicht korrekt. Ist ein Screenreader-Beispiel.
-
@David: Wir wollten die Beispiele im Textverlinken und da hat Wordpress die Links irgendwie in den Feed geschoben. Der Feed sollte bereits gefixt sein. Trotzdem Danke für den Hinweis!
-
-
Öhh - das was ich per iTunes runtergeladen habe, war nicht wirklich informativ…. "Tab Eingabeliste, Tab"
-
Wie erwähnt gab es heute morgen ein Problem mit dem RSS-Feed, mittlerweile sollte aber alles wieder im Lot sein. Sorry für die Schwierigkeiten...
-
-
Die Tonstörungen hören sich nach kaputten Headset an. Das headset ist neu soweit ich weiss tja... defektes Kabel, Wackelkontakt löst gerne die Geräusche aus. Ich will ja nicht pingelig sein aber erst Geld einsammeln für Audioequip und dann so eine Folge raushauen....
Guten Rutsch...
-
@ts
Ich habe den Ton bei der Aufnahme nicht gehört, das hatten mir nur die anderen rückgemeldet. Das Headset ist neu und ich hatte das angetestet und es schien in Ordnung. Ich werde der Ursache auf den Grund gehen. Das tut mir leid. Wenn es so stört, muss die Sendung halt rausgenommen werden.
Aber dem Team das vorzuwerfen, ist nicht wirklich fair, weil das eben live ist und ich das nicht nachvollziehen konnte und das ja über verschiedene Stationen zusammengeführt wird. Wie gesagt, ich bin dafür, die Sendung rauszunehmen. Kein Problem.
-
@ts: Es gibt sicherlich einige Dinge die diese Störungen ausgelöst haben könnten. Leider ließ sich das auf die Schnelle nicht beheben. An dieser Stelle aber die Spendenaktion einzubeziehen ist vielleicht etwas "unüberlegt".
Zum einen handelt es sich wie du ja selbst erwähnt hast um ein neues Gerät, das einfach a priori defekt war. Zum anderen handelt es sich bei dem Equipment der meisten Co-Moderatoren nun einmal um Eigenmaterial.
-
-
(Sorry, das wird etwas länger)
Hurra, hurra! Das TW-Team füttert einen Troll.
Hallo??? Da stellt ihr eine zweiteilige, hochinformative Sendung über ein wichtiges Thema kostenfrei ins Netz, in der es zugegeben kurze unschöne Störungen gab, die ihr im Vorfeld schon entschuldigt habt. Aber kaum nörgelt irgendein Heini rum, wird sofort alles in Frage gestellt und ihr haltet es für nötig, euch ggü. ts (= trübe schüssel?) zu rechtfertigen ...Bitte einfach mal mehr Standing entwickeln :-) 158 Technikwürzen belegen, daß dieser Podcast wichtig ist. Ich will jetzt nicht mit anderen Podcasts kommen, deren Audioqualität z.T. unterirdisch ist (einige sehr renommierte US-Sendungen sind akustisch eher heftig), aber das nimmt man halt in Kauf (bzw. eben nicht in Kauf, weil ja kostenfrei).
Merksatz für die deutschsprachige Öffentlichkeitsarbeit: "Willst Du Trolle: Spendenrolle." Kaum drückt mal jemand Geld ab - oder noch besser: Wird nur mal um Spenden angefragt -, kommt mit 150%iger Sicherheit irgendein Dödel daher, der einfach nur rumpampt, weil er vielleicht 2 EUR gespendet hat. Ätzend. Ich will hier auch gar nicht wirklich auf die "Chris-Heilmann-Affaire" eingehen. Aber wenn sich da in der dt. Szene nicht bald der Wille zum Kommentarlöschen einstellt und zum freundlicheren Umgangston einstellt, sehe ich für die Stimmung auf Seiten der Macher schwarz. Ab und an ein herzliches "Geh sterben!" an solche Schlechtelauneverbreiter wäre sicher gut für euch und die gesamte Kommunikationskultur. Wer mir in meiner Wohnung in die Ecke speibt, fliegt halt raus. Zumal diese Art von Speiben nichts, aber auch gar nichts bringt.
Viele weitere TWs wünscht sich
mischa- und euch ein tolles 2010!
-
Schön gesagt und ich musst beim lesen mehrfach grinsen! :) Du hast sicherlich größtenteils recht. Bei mir ist der Frustfaktor allerdings nicht noch nicht sonderlich hoch und IMHO ist eine freundliche und trotzdem bestimmte Antwort letztlich besser als einen Kommentar kommentarlos zu löschen! ;)
Dir auf jeden Fall Danke für das positive, ausführliche und dadurch beflügelnde Feedback!
-
Ich denke auch, dass Inhalt hier im Vordergrund stehen sollte. Dennoch: Das neue Equipment, welches wir über die Spenden finanziert haben, steht in unserem Hauptstudio in Hannover. Nur halten sich dort Marcel und ich auf. Alle anderen TW-Moderatoren erstellen Ihre Beiträge weiterhin von ihren Heimatorten aus und die sind weit verstreut.
-
Hallo, Macx,
wenn es vorproduzierte Beiträge der TW-Moderatoren wären, die ständig mit solchen Störungen ins Netz gestellt würden, dann würde ich das Motzen ja verstehen (Verständnis hätte ich dann wahrscheinlich immer noch nicht, hihi). Aber das war eine Liveaufzeichnung per Skype, mit einem Soundfehler den ich so noch nie gehört habe (ich arbeite zeitweise als Tonmann für EB-Teams). Dessen Fehlerquelle sollte sicher noch mal mit Sylvia in einem Testlauf untersucht werden.Ich habe schon für einige Projekte gespendet, aber nie für mich in Anspruch genommen, daß die jetzt aber mal sofort alles so machen sollen, wie ich das will. Und man höre und staune: Ich zahle sogar freiwillig GEZ (und finde vielleicht 20% im TV gut - aber das Radio! Oh, ich schweife ab ...). Und wenn einem nach so einer Sendung, für dessen Intensität ich euch noch mal loben möchte, nur einfällt, über den Tonfehler zu meckern, dann weiß ich auch nicht.
Daß anderen sonst nicht viel einfällt, wundert mich aber auch nicht :-) Das war für mich fast ein Webinar, das ich erst mal verdauen muß. Aber die doch zahlreichen Tweets zeigen, daß es keine schlechte Sendung gewesen sein kann (um jetzt mal typisch dt. tiefzustapeln - in den US würde wahrscheinlich "awesome" benutzt, hihi)
Viele Grüße,
mischa- der natürlich nicht den ersten, lobenden Kommentar von David übersehen hat.
-
Erstmal frohes neues Jahr 2010. Ich wollt mich nochmal für mein unüberlegten Kommentar entschuldigen. Genervt sollte man nicht kommentieren. Den Content wollte ich nicht in Zweifel ziehen.
Vielen Dank für die vielen informativen Podcasts die ihr produziert habt.
-
@ts: Na dann ist ja alles geklärt.
Frohes Neues!@tw-team: Gute Arbeit. Freue mich schon auf die nächste Ausgabe.
-
-
Danke für diese informative Sendung. Ich bin der Meinung, gerade bei den Formularen wachsen Barrierefreiheit und Usability für gesunde Menschen zusammen.
Es gibt immer noch genügend Formulare, bei denen man wegen einer falschen Eingabe gleich den Formularinhalt gelöscht bekommt.
Unklare Anforderungen für Passwörter usw sind schon fast die Regel.
Gruß rp -
Danke für die Soundbeispiele der Screenreader (ist ja furchtbar, was man hören müsste, wenn man manche Formulare im Netz sieht). Ich hab grad noch Links zum Thema entdeckt: http://www.bbc.co.uk/blogs/webdeveloper/2010/01/always-read-the-label.shtml und http://wiki.github.com/fnagel/jQuery-Accessible-RIA zum Thema WAI-ARIA mit jQuery