Ausgewählter Vortrag:
WAI ARIA in der Praxis
-
21.11.2008, 14:45–15:30 Uhr, Raum 2
Der W3C-Entwurf zu Accessible Rich Internet Applications (ARIA) hat seit seiner Veröffentlichung starke Unterstützung von vielfältigen Seiten bekommen. Alle wichtigen Browser sind dabei, viele Screenreader und sehr viele JavaScript-Frameworks. Es geht dabei um ein barrierefreies Web 2.0, und die Techniken können heute schon eingesetzt werden. In diesem Vortrag werden Sie erfahren, was ARIA ist und einige Praxisbeispiele sehen und hören.
Unterlagen
Transkription:
Alle Screenreader-Demos finden Sie in diesem Flickr-Set.
Moderation Martin Ladstätter:
Ich möchte Sie zum Nachmittagsprogramm begrüßen unserer Veranstaltung. Es ist uns eine Freude, dass wir dermaßen tolle Referentinnen und Referenten heuer bekommen haben und wir starten mit Martin Kliehm, seit zehn Jahren im Bereich Barrierefreiheit beschäftigt, aber auch Einhaltung der Standards und auch Webkrauts und das soll auch in diesem Zusammenhang erwähnt sein. Wie heißt es so schön? „Accessible reach Internet applications“. Da könnte sich die Frage aufdrängen, was ist das überhaupt und falls das beantwortet wird, was macht man dann damit und ich glaube, das kann uns der Martin Kliehm erzählen und ich geb dir gleich das Mikrofon.
Vortrag Martin Kliehm:
Ja herzlichen Dank erstmal! Ich hab’ für ARIA gesucht, ob ich dort ein Bild finde bei Flickr und das ist so das, was am Passendsten in meine Ansicht war. Also immerhin spielt da jemand Klavier. Also auch wenn ARIA jetzt nichts mit Arie zu tun hat direkt und dort sind zwei gleich gesinnte im Dialog. Man sieht irgendwie diese beiden Cowboys, der eine sitzt halt auf einem Fahrrad, der andere sitzt im Rollstuhl, aber genau genommen ist es ein Gespräch unter gleich gesinnten. Und bei ARIA geht es letztlich auch um Kommunikation. Es geht um barrierefreies Web 2.0 ganz einfach gesagt. Und interessant ist, dass das W3C dort unheimlich schnell war. Im Februar 2005 hat Jesse James Garrett den Begriff Ajax geprägt. Wird jeder schon einmal gehört haben, wobei Ajax mit Web 2.0 ja nicht unbedingt gleich zu setzen ist, aber es bedeutet asynchrone Kommunikation und auf diese Art und Weise sind einige der Dinge überhaupt erst möglich geworden. Elemente auf der Seite rumschieben gab es schon früher, Ende der 90er Jahre, aber jetzt hat das ganze noch mal so ein bisschen Drive dadurch bekommen. Und einen Monat später schon, vermutlich ohne die Arbeit von Jesse James Garrett schon zu kennen, haben Richard Schwertfeger und Becky Gibson ARIA oder einen Vorläufer von ARIA auf CZone vorgestellt, das ist so mit einer der größten Barrierefreiheitskonferenzen und –messen in den USA. Die arbeiten beide für IBM. Becky Gibson programmiert inzwischen bei DoJo recht viel mit im Auftrag von IBM. IBM sponsert das so. Und genau so andere Mitarbeiter von IBM wie Aaron Leventhal z.B. arbeiten dann am Mozilla-Projekt mit. Ja und dann verwundert es kaum, ein paar Monate später hat IBM schon jede Menge Quellcode gespendet. Ich hab das der Kontrast der bei dem Link ist ein bisschen unzureichend. Ich hab es ehrlich gesagt noch nicht hingekriegt mit diesen Präsentationsvorlagen von unserer Firma, die Kontrastfarbe die Linkfarbe zu ändern, dass es kontrastreicher würde. Irgendwie die Formatvorlagen gehen da immer drüber.
Also es sind nur die von den Links, muss ich dazu sagen. Also August 2005 haben sie Quellcode an Mozilla gespendet und im gleichen Monat gab es dann auch die ersten Standardentwürfe. 2006 hat eine andere Arbeitsgruppe vom W3C dann das Role-Attribut für XHTML veröffentlicht als XHTML-Modul, denn, wie wir alle wissen, ist XHTML 1.1 sehr modular aufgebaut. D.h. also man kann zusätzlich Module oder das was jetzt nicht so originär bei XHTML dabei ist, kann man einfach dran dübeln. Naja so einfach nicht, aber man kann es drandübeln. Lassen wir das einmal stehen. Seit 2006 haben sie jetzt eine ganze Weile gearbeitet und es gab irgendwie so verschiedene Revisionen. Da lagen dann auch mal ruhig ein dreiviertel Jahr oder ein Jahr dazwischen. Und der Stand jetzt 2008 ist, dass außer Mozilla eben auch Opera, Apple und Microsoft ARIA unterstützen. Microsoft erst im Internet Explorer 8, Opera und Apple, Apple auf jeden Fall im Safari 3 Opera seit Opera 9.5, aber die Nutzer von Mozilla, Safari und Opera updaten ja sowieso recht häufig, weil das automatisch geschieht, also um die muss man sich keine Sorgen machen. Und das Gute ist, Microsoft hat das zwar erst im Internet Explorer 8 eingebaut, aber es gibt zwei Dinge, die man dazu wissen muss. Und zwar einmal ARIA ist rückwärts kompatibel in dem Sinne, dass es eine Verbesserung darstellt und wenn jetzt jemand einen Internet Explorer 6 hat, der kriegt halt diese Verbesserung nicht mit, aber er hat auch keine Nachteile damit. Es ist genau so schlecht wie sonst auch immer, aber alle anderen haben eine Verbesserung. Und das andere, wo noch Hoffnung besteht ist, es gibt Google Gears oder jetzt nur noch Gears als Open Source Projekt. Und Google Gears ist quasi ein Browser-Plug-In, das eigentlich dazu gedacht war, dass man dann auch Inhalte wie GMail oder so was auch offline benutzen kann, aber wie wir ja wissen hat Google auch einen Browser und das heißt also Google Gears ist dabei, durch die Hintertür so einige Features, die es bisher noch nicht gab, dann auch im Internet Explorer einzubauen. Also von da her besteht da auch für die alten Internet Explorer ein bisschen Hoffnung. [Lachen]
Kommentar aus dem Publikum: [nicht verständlich]
Sie arbeiten aber mit Canvas und dergleichen z.B. und sie arbeiten auch an ARIA also definitiv also, ein G ist drin. Gut, das Problem ist, Christian, zu dir kommen wir gleich noch, [Lachen] nein, das Problem ist, weswegen man ARIA überhaupt braucht und was so das Problem ist bei Web 2.0 Anwendungen ist, wo bin ich überhaupt. Assistive Technologien, Screen-Reader müssen wissen, mit was sie gerade arbeiten. Und bisher war es so, dass man nur Links oder Texteingabefelder, Formularfelder, dass die überhaupt den Fokus bekommen konnten, alles andere nicht. Also hier haben wir z.B. ein Beispiel von Flickr, ist jetzt Zufall. [Lachen] Also hier haben wir ein Beispiel von Flickr. Da habe ich eine Überschrift von einem Bild und wenn ich da mit der Maus drüberfahre, dann kommt auf einmal: „click to add it“. Das heißt also als sehender Nutzer weiß ich, ich kann auf diese Überschrift draufklicken und diese Überschrift verwandelt sich in ein Texteingabefeld und ich kann dann auf einmal drauf editieren. Jetzt ist das Problem, dass ich, wenn ich Tastaturnutzer bin, niemals auf die Überschrift draufkommen kann, weil sie ist kein Link, es ist halt eine Überschrift. Sieht also so aus und die Lösung ist das Tabindexattribut, das wir schon von Links kennen. Und Tabindex mit ARIA wird jetzt an alle Elemente drangepflantscht. Man kann das überall verwenden. Es gab ursprünglich mal so eine Einschränkung, dass man das nur bei einer handvoll Elementen zusätzlich verwenden durfte, aber jetzt darf man es an alle dransetzen. D.h. also ich kann jetzt mit H1 Tabindex 0 sagen, dass diese Überschrift jetzt auf einmal mit der Tastatur erreichbar ist. Und Sie können den Fokus kriegen per Tastatur. Tabindex 0 sagt vielleicht nicht allen Leuten was. Deswegen noch mal so als kleine Referenz, was das so bedeutet.
Wenn etwas keinen Tabindex hat, dann ist es in der natürlichen Tabreihenfolge drin wie es im Code drin steht. Das heißt also in der Reihenfolge, wie es im Code kommt, kann ich im Browser durchtabben. Wenn es einen negativen Wert hat, dann ist es durch durchtabben nicht erreichbar, dann kann ich es nur mit JavaScript anspringen. Ein negativer Wert war in der ursprünglichen Definition von Tabindex nicht drin, weswegen dann 2006 ein Aufschrei erging, oh das ist proporietärer Microsoft-Kram, aber es ist sehr nutzvoll eigentlich, dass man so einen negativen Tabindex setzen kann. Manchmal möchte man nämlich, dass Elemente speziell nicht angesprungen werden. Tabindex 0 ist, ich reihe dieses Element jetzt in die natürliche Tabreihenfolge ein. Das ist so, wie wenn ein Link keinen Tabindex hätte, Tabindex 0 ist genau das gleiche, es ist in der Reihenfolge, wie es im Code ist. Und wenn ich eine positive Zahl dort stehen habe, dann geht der Tabindex in der Reihenfolge durch, wie die Zahlen sind, also erst 1, 2, 3, 100, 1.000, 10.000. Nach oben gibt es irgendwann eine Begrenzung, aber die ist sehr hoch. Das also zu dem Tabindex und das heißt also ich brauche für ARIA am häufigsten Tabindex 0, um den Fokus auf etwas setzen zu können und Tabindex -1 oder das Tabindex-Attribut rauszuschmeißen, um den Fokus wieder oder die Fokussierbarkeit nehmen zu können. So und dann das nächste Problem ist allerdings, dann habe ich die Möglichkeit, dort mit der Tastatur hinzugelangen, aber dann weiß ein Screen-Reader-Nutzer noch lange nicht, dass er jetzt auf einmal auf so einer Überschriftebene auch dann was machen kann, dass diese Überschrift eigentlich ein Texteingabefeld ist.
Und da kommt die zweite Komponente rein und zwar gibt’s Roles, Rollen im in ARIA. Das hat Richard Schwertfeger von IBM als semantischen Zuckerguss bezeichnet. D.h. also ich habe dort Elemente, die haben schon eine Bedeutung. Die können auch eine klarere Bedeutung haben als jetzt hier diese komplexe die komplette Bedeutungsverschiebung, sehen wir gleich, wie man das noch ergänzen kann. Und ich kann jetzt durch die Rolle sagen, das hat ja eine ganz andere Bedeutung oder kann diese Rolle noch mehr spezifizieren. Und dann kann ich jetzt hier sagen, das ist eine Überschrift Level 1 mit der Rolle Textfield. Damit gleichzeitig auch klar ist, dass es eine Überschrift ist und nicht einfach ein Input-Feld, kann ich noch eine zweite Rolle hinzugeben, Heading, ja und mit Tabindex 0 kann ich das Ganze anspringen. Und somit ist also dann kommuniziert, dass ist eine Überschrift, die gleichzeitig auch als Textfeld als Texteingabefeld bedienbar ist. D.h. also ich habe verschiedene Vorzüge davon. Ich kann mit der Rolle kann ich eine maschinenlesbare semantische Information einbauen, was das Ganze ist. Und mit dieser Rolle geschieht dann Folgendes: der Browser mapt die Rolle auf die dem Betriebssystem zugrunde liegende Accessibility-API. Das ist z.B. MSAA und das kann ich mir z.B. ansehen mit hier diesem MSAA Verify, sehen wir gleich, wie das funktioniert. Das heißt also auf dieser Betriebssystemebene wird dann gesagt, das ist die und die Rolle und das ist ein Texteingabefeld und die Screen-Reader greifen auf diese Ebene zu und erkennen dann aha, das ist ein Texteingabefeld und können damit dann umgehen. D.h. also diese Accessibility-API die vermittelt dabei. Das gibt’s nicht nur von Microsoft, das gibt’s auch bei Linux und bei Mac. Hier ist mal so ein Beispiel ohne Ton, das ist dieses MSAA Verify.
Da zieht man dann diesen Cursor drauf und man sieht da unten, da steht dann Registerkarte. D.h. also so kann ich verifizieren, dass die Rolle, die ich hier eingebaut habe auch tatsächlich da drin ist. Dieses MSAA Verify finde ich extrem handlich. Es ist zum Einen kostenlos und zum Anderen finde ich es aber sehr handlich, weil ich diese weil ich hier einfach den Fokus auf ein Element ziehen kann und der mir dann sagt, was für eine Rolle das auf Betriebssystemebene hat. Es gibt andere Werkzeuge, wo ich quasi so den Strukturbaum im Betriebssystem sehe und das unheimlich viele Ebenen und da muss man dann erst ganz viel aufklappen und sich da runter hangeln, bis man dann letztlich sieht, was das eigentlich ist und hier kann ich das einfach so sehen, indem ich da diesen diesen Cursor da rüber ziehe. Das müssen Sie nicht alles lesen, ich wollte die nur mal auf einer Seite haben. Es gibt auch noch eine handvoll mehr. Im Wesentlichen ist, dass es verschiedene Arten von Rollen gibt. Es gibt einmal so genannte Landmark Roles. Landmarks sagen einfach, es sind Teile einer Seite, die die eine bestimmte Gruppierung haben. D.h. also ich habe Banner, das wäre so der, sie haben es Banner genannt, das ist so der Header-Bereich eigentlich, die Kopfzeile, die ich in einer Seite habe. Dann habe ich einen Bereich Main, das ist normalerweise dann mein Textinhalt. Ich habe einen Bereich Navigation, also Role Navigation oder ein Role = Search oder Role Secondary wäre so eine Seitenspalte z.B. Das heißt also das sind diese Landmark Roles. Dann gibt es Sachen, die noch weiter strukturieren. Dort haben wir also z.B. eine Region, eine Section, eine Group oder auch einen Separator, nur um mal so ein paar Beispiele rauszunehmen. Dann gibt es welche, die vorhandene User-Eingabesachen noch mal simulieren.
D.h. also ich kann sagen, etwas ist ein Input, ein Select-Feld oder eine Option oder eine Checkbox oder ein Radiobutton oder so was. Das sind eigentlich dann Sachen, die es im Browser sowieso schon gibt und die ich dort dann noch anderen zuweisen kann. Genauso das nächste User Interface Elements sind dann so was wie ein Button oder auch kompliziertere wie z.B. ein Slider, sehen wir nachher ein Beispiel oder ein Menübaum, sehen wir nachher auch noch ein Beispiel. Und dann eben spezialisierte Sachen und da kommen wir schon relativ in so Web 2.0 Geschichten rein, also wo eine Dialogbox oder ein Alert oder ein Fortschrittsbalken können eben auch Rollen sein und ich kann auf die Art und Weise das Semantische auszeichnen. Da gibt es dann hier haben wir noch so ein paar Beispiele dazu. Oben haben wir das, was wir schon gesehen haben. Also wir haben ein H1, das gleichzeitig auch ein Texteingabefeld ist. Danach haben wir eine Aufzählungsliste, die normalerweise ja für Navigationen benutzt wird und ich kann aber dort zusätzlich die Semantik noch erhöhen und ich kann sagen, das ist eine Aufzählungsliste, die eine Navigation ist, indem ich sage, Role equals navigation. Es könnte ja auch eine Aufzählungsliste sein, die ein Brotkrumenpfad ist oder so was. Und vielleicht sollte man das den Designern nicht verraten, ich kann auch, wenn ich jetzt eine Checkbox haben möchte, die kleine blaue Häkchen drin hat, kann ich eigentlich auch ein Bild nehmen und ich kann sagen, dieses Bild Checkbox with rounded Corners und Drop Shadow.gif hat eigentlich die Rolle Checkbox. Und der Browser und der Screen-Reader würde dieses perverse Bild genau so behandeln wie eine gewöhnliche Checkbox.
Das ist so die Zugänglichkeit dabei. Hier habe ich noch einmal Beispiele von Xing. Dort das ist so ein häufiges Ding eigentlich diese üblichen JavaScript-Allerts sind Designern zurecht meistens zu hässlich und das heißt also dort verwendet man Layer und der Hintergrund wird so ein bisschen ausgegraut, aber ein Layer ist im Prinzip nur ein Diff mit irgend welchem Inhalt drin. Woher soll der Browser wissen, dass das eigentlich eine Dialogbox ist. So der Witz bei dieser Folie ist eigentlich, dass Matthias Röhnges Dr. Motte und im früheren Leben habe ich eine Gegendemonstration zu seiner Love-Parade veranstaltet, aber ich habe ihn trotzdem nicht gelöscht bei Xing. D.h. ich kann so auch eine Rolle Dialog sagen. Hier noch mal ein anderer Dialog. Das ist von einer prima Konferenz in Paris gewesen, die ich wirklich sehr inspirierend fand auch zu Barrierefreiheit. Und dort ist dann im Prinzip auch wieder ein Layer mit runden Ecken und zwei Eingabefeldern und ist eigentlich eine Dialogbox. Und auf die Art und Weise mit Role Dialog könnte ich sagen, was das eigentlich ist. Und dann haben wir aber was ich eben gezeigt habe diese Checkbox mit runden Ecken und Platten. Eine Checkbox hat ja bekanntlich mehrere Zustände. Also sie kann angehakt sein oder auch nicht und das gibt es dann über das Attribut ARIA-checked. Es gibt bei ARIA also neben den Rollen gibt es noch States und Properties, also momentane Eigenschaften und Zustände von etwas. Und die haben immer dieses ARIA-prefix, also es fängt immer an mit ARIA-irgendwas. Es war vor einem Jahr noch in der Diskussion, das anders zu machen, da Name Spaces zu verwenden. Das ist jetzt Passé. Man verwendet keine Name Spaces mehr, damit das auch kompatibel ist mit HTML 5, wenn es denn dann irgendwann kommt. Aber damit die nicht sagen können, wir verwenden das nicht, weil da Name Spaces drin sind, deswegen also die fangen alle an mit ARIA- und dann checked z.B. checked = true. Hier was anderes, also wo da sehen wir gleich auch noch ein Beispiel. Das ist ein Eingabefeld und ich kann darüber dann sagen, das ist ein erforderliches Eingabefeld, ein Pflichtfeld mit ARIA-required = true. Und ein Screen-Reader liest das dann auch vor, dass das Ganze erforderlich ist. Oder ich kann auch Beziehungen herstellen. Wir haben hier einen Button, da steht noch WAI-Role-Button drin. Ich kann auch einfach nur Button schreiben.
Wir haben einen Button und dieser Button kontrolliert z.B. eine Tabelle, wie sie sortiert wird und da habe ich ein ARIA-controls, was auf eine ID verweist und ich kann auf diese Art und Weise zwischen zwei Elementen eine Beziehung herstellen. Genau so eine Beziehung kann ich machen mit labeled by und described by. Hier das ist ein Beispiel von dem Marco Zehe. Man kann zu Recht einwenden, man könnte das auch anders rum machen. Also hier ist ein Label und ein Input-Feld und dann noch mal ein Span. Labels müssen nicht unbedingt vor dem Input-Feld stehen. Es kann auch Sie können das Input-Feld auch umschließen und damit hätte ich dieses Problem auch gelöst, aber ich wollte mal zeigen, was da noch alles mit möglich ist. Und zwar ich habe dieses Label und ich habe das Eingabefeld, und das Eingabefeld hat ein ARIA-labeled by und dann stehen da auf einmal zwei IDs drin, SD Label und SD Unit. SD Unit ist da unten etwas und d.h. also auf diese Art und Weise kann ich sagen, nicht nur dieses eine Label beschreib das Ganze sondern zwei oder drei oder vier. Und noch eine Description kann ich auch hinzufügen und dann würde, wenn ich auf das Eingabefeld gehe der Screen-Reader vorlesen herunterfahren nach, dann die Zahl, die in dem Feld steht Minuten, herunterfahren nach 5 Minuten. Auf die Art und Weise kann man also Beziehungen herstellen. Das ist eine ganz hervorragende Sache. Und als letzte Variante von ARIA gibt es eigentlich dann noch Support für Ajax. Und zwar also das Problem ist hier ist ein Beispiel von Remember the Milk. Dort habe ich Eingabefelder, wo zur Laufzeit während ich das eingebe, wenn ich auf das nächste Feld drauf gehe schon geprüft wird, ob das Ganze valide ist. Und jetzt habe ich hier ein Nachname-Feld, das leer ist und wenn ich jetzt zum nächsten Feld springe, überprüft er, macht eine Server-Anfrage per Ajax und kriegt zurück, hallo, das Nachnamefeld ist leer, du musst das ausfüllen. Und dann für die Sehenden erscheint dort dann auf der rechten Seite dieses rote X und Nachname ist erforderlich, aber ein Screen-Reader-Nutzer bekommt das natürlich nicht mit. Und dann haben sich in der Vergangenheit Leute Gedanken gemacht, ja aber da könnte man doch dann den Fokus von dem Formular auf diese Nachricht setzen.
Das hat zwei Probleme, nämlich zum Einen ist der Screen-Reader wahrscheinlich in dem Formular-Modus und könnte diese Nachricht gar nicht vorlesen, weil er im falschen Modus ist und zum Anderen, wenn ich den Fokus quasi jetzt kidnappe und schieb den auf einmal wo ganz anders hin, das ist eine hervorragende Art und Weise, um den User komplett zu verwirren. Und was es da gibt sind dann die so genannte Life Regions und die haben ein ARIA-Live Attribut dabei mit einem Höflichkeitsfaktor. D.h. also ich kann sagen hier ist eine Gegend und die wird jetzt dynamisch, aktualisiert. Und ich kann vier, drei oder vier verschiedene Höflichkeitslevels einstellen. Also wenn ich mir vorstelle ich habe z.B. eine Webseite, wo alle fünf Minuten sich der Börsenkurs einer Firma aktualisiert, dann ist das eigentlich eher nebensächlich, dann kann ich das so sagen, es ist polite, der Scrren-Reader darf jetzt das zu Ende lesen, was er gerade macht, darf den Absatz fertig lesen und wenn er dann damit irgendwann fertig ist, dann darf er jetzt sagen, hallo, da hat sich auch der Börsenkurs aktualisiert. Ich kann das auch ein bisschen dringlicher machen, so in der Art, Ihr Batterie-Level reicht noch für fünf Minuten, das wäre dann etwas höher und so „Achtung, ein Amok-Schütze auf dem Kampus“ wäre dann ein sehr hoher Level und der würde einen Screen-Reader sofort unterbrechen. Das sind also diese Live-Regions.
Zur Implementierung habe ich in früheren Artikeln ganz, ganz viel geschrieben. Es gibt verschiedene Arten und Weisen, wie man das anflanschen kann, wenn man es mit HTML 4 validieren möchte, kann man die Klassen kann man in CSS-Klassen quasi verschiedene Klassen-Attribute reinschreiben, kann eine JavaScript-Library nehmen, die das dann umparst in ARIA. Das wäre die HTML 4 rückwärts kompatible Variante, da gibt es auch Skripte von IBM oder so. Das kann man sich aber eigentlich auch schenken. Man könnte XML Name Spaces bilden und das auf diese Art und Weise dranflanschen und es validiert auch nicht und dann. Die einfachste Art und Weise wäre halt die DTD zu nehmen und das validiert auch nicht. Das ist ein echtes Problem momentan. Wir haben tolle Screen-Reader. Wir haben eine Menge Screen-Reader, die das unterstützen. Wir haben vorhin glaub ich auf der einen Folie gesehen, das sind Jaws und Window-Eyes und Orca und NVDA, eine Menge Screen-Reader, die das unterstützen. Wir haben alle großen Browser, die das unterstützen oder in Zukunft unterstützen, aber ich kann es nicht validieren. Theoretisch könnte ich das so einbinden, also mit einer DTD-XHTML + ARIA und diese Beispiel-DTD wird auch vom W3C in so einem Beispiel in ihrer ARIA-Definition angegeben, aber das Ganze kann ich validieren, weil diese DTD nicht auf dem Server liegt. Das heißt also, wenn ich probiere, das zu validieren, kriegt der Validator einen 404-Fehler und damit funktioniert das nicht. Sie haben in der ARIA-Spezifikation auch so eine DTD aufgeschrieben. Die könnte ich mir jetzt kopieren, könnte die auf meinen Server legen und sie validiert auch nicht, weil dort die Hauptkomponente ARIA das ARIA-Modul ist dort eingebunden und auch die liegt noch nicht auf dem Server oder die URL ist veraltet. D.h. es gibt wieder einen 404 und es validiert nicht.
Aber die sind die Working-Group, die da dran arbeitet, die Protocolls and Formance Working-Groups sind sehr, sehr reagieren auf Eingaben und also ich habe vor einer Woche, als ich diesen Vortrag vorbereitet habe, habe ich das noch mal überprüft, ob das jetzt inzwischen validiert oder nicht und habe dann also eine Mail geschrieben an diese Working-Group und sie haben inzwischen geantwortet und gesagt, ja also a) möchten sie das Ganze auf den Server legen unter Vorbehalt, weil es ist halt noch Work in Progress und es kann sich jederzeit ändern und b) sind sie grade sowieso dabei, auch noch mal so ein bisschen Qualitätskontrolle zu machen und Rechtschreibfehler und eben so nicht verlinkte URLs und so auch auszumerzen. Aber in naher Zukunft kann man das so machen. Jetzt haben wir das Problem, dass wir das einbinden können und alle unterstützen es aber die Seiten validieren nicht, d.h. also in den Projekten, wo wir das jetzt für Kunden eingebunden haben, haben wir immer so acht, neun Validierungsfehler ungefähr. Damit kann ich aber sehr gut leben, wenn es nur die sind.
Bei in den Barrierefreiheitsrichtlinien wird immer gesagt, eine Seite muss validieren, damit sie barrierefrei ist, aber das ist ja, um Tag-Suppe zu vermeiden. D.h. also das ist eine Richtlinie, die dazu geschaffen wurde, dafür zu sorgen, wenn eine Seite validiert, dass die Barrierefreiheit relativ hoch ist, weil der Code zumindest schon mal nicht vermurkst ist. Wenn der Code aber im Prinzip sauber ist, die Seite nicht validiert, ich dadurch aber eine höhere Barrierefreiheit habe, dann habe ich doch im Prinzip das erreicht, was in der Richtlinie gefordert ist und deswegen kann ich da auch damit leben, dass ich dann acht, neun Validierungsfehler habe, gleichzeitig aber eine höhere Zugänglichkeit von diesen Seiten. So und dann noch so ein paar Beispiele. Das finde ich ganz toll, das ist so angewandte Barrierefreiheit auf einer Weinflasche, zusätzlich mit Braille, sieht man immer öfter eigentlich und ich denke, man wird das auch immer öfter auf Webseiten vielleicht nicht sehen aber merken, wenn man es braucht. Hier ist das, was ich vorhin gesagt habe, das ist relativ einfach. Das ist nur XHTML + ARIA und nichts Anderes. Wir sehen nachher braucht man noch ein bisschen JavaScript, aber hier gar nicht, da habe ich einfach einen ARIA-Required = true.
Sprachausgabe: Vorname Eingabefeld erforderlich, Nachname Eingabefeld erforderlich, Adresse Eingabefeld
Fortsetzung Vortrag: So das heißt wir haben hier diese klassischen Sternchen hinter den hinter den Labels von den Eingabefeldern und zusätzlich habe ich dann dieses ARIA-Required = true und der Screen-Reader, hier in dem Fall ist das Window-Eyes 6.1 gewesen, es gibt inzwischen den 7er auch, liest dann vor: Eingabefeld erforderlich. Damit kann ich mir diese ganzen Sternchen, die sowieso nicht vorgelesen werden kann ich mir dann sparen für die Screen-Reader, weil die Screen-Reader wissen, aha, hier das ist erforderlich, können prima darauf reagieren und das ist total low tech. Ich muss nur dieses Attribut reinschreiben. Das wäre was mit einem Fehler, also wo wir haben wieder erforderliche Eingabefelder und zusätzlich habe ich aber jetzt bei der Email das @ vergessen und überhaupt also die Email ist nicht valide. Das ist Fo bar, das ist einfach keine valide Emailadresse und was der Screen-Reader dann macht ist das: Name Martin Kliehm Eingabefeld erforderlich, Email fo bar Eingabefeld ungültig. Ja, das heißt also er sagt mir, das ist ungültig. Ich habe mir jetzt diesen Prozess gespart. Normalerweise habe ich da natürlich ein Formular mit erforderlichen Eingabefeldern, dann sende ich das ab, dann generiert mir der Server die Seite neu und dann fügt der Server seitig dieses ARIA-Invalid = true ein. Ist ein ich finde das immer ein bisschen um die Ecke gedacht, invalid = true, da könnte man auch gleich sagen valid = false, aber so ist es halt nun mal und da muss man dann drauf achten. Hier haben wir ein Beispiel für eine Reiternavigation, die wir jetzt auch im Kundenprojekt so eingebunden haben. Und da wird es schon ein bisschen komplizierter. Also vom Code her ist es erstmal noch ganz einfach, wir haben eine Aufzählungsliste mit Role Tab List. Dann haben wir LIs da drin mit Role Tab und damit ist klar, das sind also Reiter in einer Reiternavigation.
Diese LIs haben außerdem noch eine ID, die brauche ich später im JavaScript und sie haben ein ARIA-Controls-Panel 1. Das heißt also zu einem Tab gehört auch immer ein dazugehöriges Tab-Panel, also wo der der Block, wo dann die eigentliche Information drin ist und das ist da unten ein Diff mit role = tab panel, wer hätte das gedacht und eben der ID, die mit diesem Controls hinzukommt. Ich habe jetzt, damit das so auf die Folie passt mir gespart bei dem Tab Panel noch ein labeled by hinzuzufügen, hätte man auch machen können. So und was damit dann geschieht ist, dies: aktuelles eins von vier Registerkarte Projekte Produkte zwei von vier, Ansprechpartner drei von vier, Institute/Einrichtungen vier von vier, aktuelles eins von vier, Institute/Einrichtungen vier von vier. So, keine Sorge, das geht jetzt nicht noch die nächste halbe Stunde so weiter. Also wir haben gesehen bei dem ersten Sprung auf so eine Registerkarte sagt er: aktuelles eins von vier Registerkarte. Er sagt also diesen Typ, den wir vorhin schon in diesem MSAA Verify gesehen haben und sagt also Registerkarte. Und bei den anderen sagt er dann eben zwei von vier, drei von vier, vier von vier, finde ich extrem hilfreich.
Aber, jetzt gibt es natürlich zwei Möglichkeiten, wie ich so eine Reiternavigation mache und das eine ist zugänglich mit der Maus, das Andere mit der Tastatur. Was wollte ich damit sagen? Ach so, ok, das mit der Maus und Tastatur kommt auf der nächsten Folie. Damit wollte ich sagen, manchmal ist es aber auch noch ein bisschen komplizierter. Also jetzt in dem vorher gehenden Beispiel hatten wir einfach so eine Reiternavigation, die nur mit JavaScript funktioniert, weil also ohne JavaScript kein Mausklick und auch keine Tastatureingabe und da haben wir uns das relativ einfach gemacht. Wenn jemand kein JavaScript hat, dann sind diese Reiter alle weg und die Tab Panels die Informationsfelder sind einfach alle offen untereinander dargestellt, alle vier Stück. Jetzt kann es aber auch komplizierter sein, wenn ich also etwas habe, was auch ohne JavaScript funktionieren sollte, was aber aussehen soll wie eine Reiternavigation. Dann brauche ich einen Fallback ohne JavaScript, das heißt ich muss einen Link haben und dieser Link muss einen Serverroundtrip bewerkstelligen, muss Parameter übergeben und der Server, wenn er die Seite neu rendert, sagt dann, ok jetzt ist Tab 2 offen, fügt also Serverseitig die entsprechenden Styles ein, damit dann der zweite Tab angezeigt wird. Und das heißt also da brauche ich einen Link, ich habe jetzt hier einen Anchor mit Role Tab und wo ich das das erste Mal dann einen Screen-Reader ausprobiert habe, hat es einfach nicht funktioniert, weil der Browser und der Screen-Reader warten, dass unmittelbar unter eine Tablist ein Tab kommt. Und da habe ich jetzt noch ein Element dazwischen und dieses Zwischenelement kann ich mit Role equals presentation überspringen.
Präsentationselemente das sind normalerweise irgend welche Zierbilder, wo ich auch keinen Alternativtext brauche und wenn ich zu einem LI ein Role presentation gebe, wird das übersprungen und er sagt mir jetzt wieder: aktuelles eins von vier Reiternavigation oder Registerkarte war das. So ich hab hier mal ich wollte Sie euch nicht mit ewig langem JavaScript-Code langweilen, deswegen habe ich einfach mal die Schritte aufgeschrieben, die dieses JavaScript erforderlich macht, um so eine Registerkarte benutzen zu können. Im Detail den JavaScript-Code werde ich in meinem Webkrauts-Artikel für den Webkrauts-Adventskalender reinschreiben müssen. Also da kann man den dann auch runterladen, muss ich noch bis zum 1. Dezember erledigen. Bei so einer Reiternavigation muss ich zuerst mal definieren, wenn ich das Tastatur bedienbar mache, mit welchen Tasten soll das gehen. Ich muss also die Tasten erstmal definieren und ihren Tastenwert feststellen. Also für Tab ist das der Wert 13, für Enter 32 nein für Space 32, für Enter 13, für Tab 9, für Pfeiltasten so 37-41 sind die entsprechenden Werte und Bild rauf, Bild runter könnte ich auch noch verwenden. Diese Tastenzahlen muss ich erstmal wissen. Dann der aktive Reiter bekommt einen Tabindex 0, damit dieses Listenelement anspringbar ist. Die inaktiven bekommen einen Tabindex -1, die sollen nämlich nicht anspringbar sein. Dann muss ich Eventlisten ersetzen, einmal für den Clickevent, für die Mausbenutzung, für ein OnKeydown und OnKeypress. OnKeydown funktioniert auf sehr vielen Browsern, OnKeypress nicht. Ich muss aber trotzdem OnKeypress manchmal capuren, um, wenn ich mit der Pfeiltaste etwas bediene, zu vermeiden, dass die Seite scrollt gleichzeitig. Also ich will die Pfeiltaste abfangen, aber ich will nicht, dass dann gleichzeitig die Seite nach unten geht. Dann muss ich die Tastaturbedienbarkeit einarbeiten. Das heißt also ich habe diese Events gecaptured, ich muss dann sehen, welche Tasten wurden jetzt grade gedrückt.
Das heißt also das können die Pfeiltasten sein, in so einer Reiternavigation wäre das links, rechts, oben, unten. Oben, unten also unten ist dann das gleiche wie rechts und oben das gleiche wie links. Ich muss dafür sorgen, dass das Ganze im Karussell geht. Das heißt also wenn ich bei Listenelement 4 angekommen bin und drücke nach rechts, dann stoppt das dann nicht, sondern es geht wieder auf das erste. Und ich muss auch so was wie STRG+Tab oder STRG+SHIFT+Tab bedenken, denn das ist die Art und Weise, wie ich im Browser normalerweise die Tabs wechsle. Das heißt also da orientiert man sich sehr stark da dran, was das Betriebssystem vorgibt und das Betriebssystem sagt halt, ich kann zwischen Tabs wechseln mit STRG+Tab oder STRG+SHIFT+Tab. Wenn ich dann auf einen aktiven Reiter draufgeklickt habe oder die entsprechende Taste gedrückt hab, kriegt er eine Klasse, damit er schön weiß wird und die anderen halt eher zurückgehalten. Der aktive hat immer den Tabindex 0, damit ich da drauf tauben kann und die inaktiven dann eben einen negativen Tabindex, dann wird das Tab Panel dazu eingeblendet. Und ich muss noch den Screen-Reader dafür aktualisieren. Das haben wir im Vortrag vorhin gehört. Das heißt also der Screen-Reader arbeitet ja mit einer Kopie der Seite und nicht mit der Live-Seite quasi. Das heißt also wenn ich erst ein Element ausgeblendet hatte bei Display None, ist das nicht im Screen-Reader-Buffer und dann aktualisiere ich etwas, blende es ein, und muss damit dem Screen-Reader-Buffer wieder sagen, hallo, hier aufwachen und ja hier hat sich etwas geändert und du darfst das jetzt bitte vorlesen. Mit dem Screen-Reader-Buffer das ist relativ trivial. Das kann man triggern, indem man einen Hidden-Eingabefeld aktualisiert. Das heißt also ein Screen-Reader ist so gestrickt, dass wenn sich in einem Eingabefeld etwas ändert, dass er weiß, er muss da ist jetzt was dynamisch verändert und er muss die Seite irgendwie wieder anders vorlesen. Das heißt also ich kann jedes Mal, wenn ich dieses ganze Zeug durchgelaufen habe, einen Zufallswert in ein Hidden-Input-Feld reinschreiben und der Screen-Reader-Buffer ist damit aktualisiert. So jetzt haben wir mal gesehen an so einer Reiternavigation, das kann relativ komplex sein. Andere Beispiele, wo ich jetzt nicht ins Detail eingehe, ist z.B. hier so eine Progress-Bar, so eine Fortschrittsleiste.
Das ist jetzt nicht mit Window-Eyes, sondern mit NVDA, der hat das schon eingebaut. [Screen-Reader spricht, aber unverständlich] Und der macht das so, dass er so einen Fortschritt immer durch veränderte Töne darstellt. Hier noch ein Beispiel ist ein Schieberegler. Da habe ich absichtlich den Code nicht dazugeschrieben, weil der Code relativ der HTML-Code simpel ist und dann ewig lang JavaScript dabei. Also das würde uns jetzt nicht helfen. Aber wir können sehen, wie so was funktioniert.
Sprachausgabe: blue 0 Eingabefeld blue 0 Schieberegler blue 0 of 255.
Fortsetzung im Vortrag: Also er sagt Schieberegler.
Sprachausgabe: zwei drei
Fortsetzung Vortrag: Das wäre jetzt die Bedienung mit den Pfeiltasten.
Sprachausgabe: 0 54 128 192 255
Das wäre die Bedienung also das ist dann die Bedienung mit den mit dem Bild-rauf-, Bild-runter-Tasten und mit der Pos1- und Ende-Taste. Das heißt also an so was muss man da auch denken. Gott sei Dank gibt es da ein Dokument von W3C, „ARIA best practices“, was diese Keyboard die Tasten, die man bedenken muss und wie das in den Betriebssystemen funktioniert, auch genau auflistet. Sonst hätte ich bestimmt auch einige Sachen vergessen. Und hier haben wir schließlich dann noch mal
Sprachausgabe: erweitert eins von drei Raumansicht green erweitert eins von drei Tiefe 2 Asparagus eins von vier Tiefe 3 Kale zwei von vier leavy erweitert drei von vier leavy geschlossen drei von vier leavy erweitert drei von vier eins von vier Tiefe vier
Fortsetzung Vortrag: So, im Prinzip, ja das glauben wir jetzt [Sprachausgabe spricht, aber schwer verständlich]. Also ich muss die mich bei den professionellen Screen-Reader-Nutzern hier im Saal entschuldigen, weil ich bin halt nur so ein Amateur. Ich verwende Screen-Reader nicht in so einer affenartigen Geschwindigkeit und ich hab auch noch nicht rausgekriegt, wie ich Window-Eyes so einstelle, dass es automatisch von Deutsch auf Englisch wechselt. Aber, was wir hier an diesem Menübaum gesehen haben, er sagt einmal die Struktur, er sagt die in der wievielten Ebene er ist und er sagt, ob ein Punkt aufgeklappt ist oder nicht. Ja, hier sind noch so ein paar Links. Da ist z.B. dann diese WAI-ARIA „best practices“, die Folien werden dann online gestellt und ich habe jetzt noch 24 Sekunden Zeit. Da kann ich noch kurz sagen zeigen, dass auch tatsächlich ein Browser funktioniert. Das ist eine Seite, die wir für die Bahn gebaut haben. Ich hab jetzt hier den Screen-Reader ausgeschaltet, aber man kann hier mit den Pfeil rauf und runter-Tasten z.B. drauf gehen und man kann dann zusätzlich noch durchtabben. Bei der Bahn, wir haben das gebaut, da kamen einen Monat vorher kamen diese „best practices“ raus und wir kannten sie noch nicht. Also das ist in der momentanen Version noch nicht optimal in der Tastaturbedienung. Ich bitte, es zu verzeihen. Wir haben es der Bahn gesagt. Sie werden es aber bis zum Relaunch am 18. Dezember wahrscheinlich nicht mehr schaffen, aber sie haben es auf dem Schirm. Und das ist was, wo wir grade dran arbeiten. Hier kann ich also auch dann drauftabben. Wenn ich jetzt noch mal die Tabtaste drücke, lande ich eben auf dem Link dort in diesem Tab Panel und so soll es eben auch sein. Ich kann aber dann mit SHIFT+TAB auch wieder zurückgehen und kann jetzt mit den Pfeiltasten hier durchgehen oder eben auch mit aso, mit CTRL+TAB, nicht SHIFT+TAB. So also mit STRG+TAB kann ich hier durchgehen. Und das ist auch ein bisschen tricky, das werden Sie dann im Script sehen. Mit STRG+TAB wechsle ich normalerweise die Tabs im Mozilla und ich muss das wiederum unterdrücken. Deswegen muss ich da dieses OnKeypress capturen und nicht nur OnKeydown. Ja, im Wesentlichen war es das, das ist das, was man mit ARIA machen kann. Manche Sachen sind sehr einfach, andere Sachen sind komplexer und man braucht JavaScript-Kenntnisse dazu, aber es ist eine sehr große Hilfe und es funktioniert heute schon und man kann es im Prinzip sofort einsetzen. Danke schön! [Applaus]
Moderation Martin Ladstätter:
Danke für deinen sehr interessanten Vortrag und falls Sie nicht den gesamten Code mitgeschrieben haben wie ich z.B., wir hoffen, dass wir den Code dann auch online stellen können. Und eine Information, wir haben vor, alle Vorträge per Audio aufzuzeichnen und dann transkribieren zu lassen. Ich bedanke mich auch für die Einhaltung der Zeit. Ich muss das überhaupt sagen, unsere Vortragenden bis jetzt haben sich alle wunderbar an die Zeitvorgaben gehalten. Trotzdem haben wir jetzt noch zehn Minuten Zeit, Fragen zu stellen. Wer möchte eine Frage stellen? Chris, willst du anfangen? Bitte immer ins Mikrofon sprechen, damit wir es aufzeichnen!
Christian Heilmann: Keine Frage aber nur man sieht das sieht ziemlich komplex aus, aber wenn man ich bin jetzt gerade von Boston zurückgekommen und da haben sich alle JavaScript-Frameworker getroffen. Und im YUI 3, in DoJo, jQuery UI, in den ganzen Frameworks, die jetzt rauskommen, wird das ARIA eingebunden sein. Also man muss nicht selbst den Code die ganze Zeit schreiben, sondern wenn man die Widgets aus der Box verwendet wie das Menü von YUI oder die Tabbox von YUI, dann sind diese Sachen schon mit drin. Und es funktioniert wunderbar mit Screen-Readern und ist die einzige Sache, die man auch machen kann. Was auch sehr wichtig ist mit ARIA, was viele Leute vergessen, ist, dass es automatisch einem die Internationalisierung gibt. Wenn ich jetzt ein Formular mache und ich hab ein hab ein Feld drin, dass eingegeben werden muss, ich muss das in die 20 Sprachen übersetzen, die ich habe. In ARIA wird das automatisch für mich gemacht, weil der Screen-Reader dann in diese Sprache eingestellt ist. Also ich muss es nicht simulieren, sondern der Screen-Reader macht das für mich. Und das ist ganz, ganz wichtig, um sich halt Zeit zu sparen. Also ARIA funktioniert heutzutage, wenn man nicht sich selbst durchhangeln muss. Die meisten Frameworks werden es unterstützen. YUI 3 kommt jetzt raus im Januar und einfach mal benutzen, weil das macht um einiges Sinn.
Martin Ladstätter: Danke für die Ergänzung! Weitere Fragen? Nein, das ist nicht der Fall. Michael? Warte, bitte nicht, bitte nicht sprechen ohne Mikrofon, sonst können wir es nicht aufzeichnen.
Frage: Welche Browser-Versionen unterstützen das noch nicht?
Antwort Martin Kliehm: Also außer dem Internet Explorer 6 und 7, GoogleChrome hat es noch nicht eingebaut. Ich hab es ausprobiert. Chrome. Nein, Internet Explorer 6 und 7 geht gar nicht, außer vielleicht über Gears. Aber das macht ja auch nichts, weil wie gesagt, es wird ja nicht schlimmer. Es kann nur besser werden. Von den aktuellen Browsern also dann eigentlich momentan nur Chrome noch nicht, aber ich denke, das wird sehr bald kommen. Die hatten jetzt erstmal andere Sorgen. Ja, danke übrigens noch mal für die Anmerkung. Ich hatte es vergessen. Natürlich ist es in wahnsinnig vielen Frameworks eingebaut und das sind auch ganz viele Sachen, die das jetzt schon nativ unterstützen. Also das hat einen wahnsinnigen Drive eigentlich.
Christian Heilmann: Es gibt auch eine Sache von Google, die heißt AccessTracks und das ist eine Sammlung von Scripts für GreaseMonkey, die eben diese WAI-ARIA-Roles in Seiten reinschreiben, die diese Seiten nicht haben. Das heißt das ist eine Gruppe von Blinden auf der Google Accessibility-Group, die mit Developpern zusammenarbeitet, um eben Seiten, die nicht funktionieren mit dem Screen-Reader durch das Injizieren von WAIARIA-Roles eben diese Seiten zugänglich zu machen. Da gibt es Skripte für FaceBook, für GoogleReader, für alle möglichen Seiten. Das ist auch ziemlich witzig, dass Leute Seiten reparieren können, ohne diese Seiten zu benutzen oder diese Seiten wirklich benutzen zu dürfen oder verändern zu dürfen. Also AccessTracks ist die Library nennt sich das und jeder, der JavaScript kann, kann auch eigene Scripts dafür schreiben. Also Crowd-sourcing von Seiten reparieren ist ziemlich genial gemacht.
Martin Ladstätter: Danke schön! Wir sind super im Zeitplan und wenn es für alle Recht ist, leiten wir zum zweiten Vortrag über. Für all jene, die am Gang draußen stehen. Von hier aus sieht man noch ein paar freie Sitzplätze.
Martin Kliehm