Nach dem positiven Eindruck vom letzten Jahr war es überhaupt keine Frage für mich. Ausserdem hatten mich meine kürzlichen Experimente mit dem neuen Spielzeug node.js auch so begeistert dass ich es kaum erwarten konnte diese Begeisterung zu teilen.

Ich freute mich auch dementsprechend riesig als ich sehen konnte dass das Publikum sich genauso begeistern konnte wie ich. Hier sind also die Slides meiner beiden Vorträge:

Der Mindgarden Podcast ist übrigends generell eine Emfehlung wert. Die tolle Mischung von Web Dev Themen, Humor und Musik ist klasse und daher erlasse ich hiermit Subscribe-Befehl

Das Problem, dass selbst die besseren Scripts haben, ist die Fehlende Rückmeldung an den Nutzer, dass tatsächlich etwas Passiert. Die meisten Tabs Scripts ändern das Aussehen der Tabs und die Sichtbarkeit der zugehörigen Inhalte aber lassen den Nutzer da zurück wo er war - auf dem Tab auf den geklickt wurde - ohne Ahnung was gerade passiert ist (vergleichbar mit einem Klick auf die immer noch viel zu beliebten "Blinden Links" (a href="#")).

Das ist auch genau der große Unterschied den dieses Script macht. Während das Verhalten für Nutzer ohne Sehbehinderung exakt die gleiche ist passiert sehr viel unter der Haube. Aber erstmal zurück zum Anfang.

jQuery Accessible Tabs benutzt ein sehr einfaches und flexibles HTML Markup als Basis. Alles was es braucht ist ein Wrapper mit Headlines und Inhalts-Elementen nacheinander. Die einfachste und bestmöglichste Alternative ohne Javascript ohne Auszusehen als würde etwas fehlen oder etwas währe kaputt.

Ein einfacher jQuery Aufruf transformiert das Markup in accessible Tabs:

Um nicht nur so zugänglich sondern auch so flexibel wie möglich zu sein, kann das Script mit verschiedensten Einstellmöglichkeiten konfiguriert werden.

Also gut, warum ist dieses Script zugänglicher als andere?

Das, was dieses Script hauptsächlich besser macht als die anderen ist ein Feedback für Nutzer von Screenreadern nach dem Klick. Wenn der Nutzer auf einen der Tabs klickt wird tatsächlich auf der Seite navigiert.

Jeder Link in den Tabs führt tatsächlich zu einem fokusierbaren Inhalt. Um dies zu ermöglichen, erzeugen wir einen benannten Anker in dem zugehörigen Inhalt des Tabs. Dieser Anker, da er keine href-Egenschaft hat, kann von Haus aus aber keinen Fokus erhalten. Um dies zu ermöglichen wird ihm die Eigenschaft tabindex="0" zugewiesen. Warum 0? Weil ein Tabindex von 0 nicht die natürliche Tabordnung des Dokumentes verändert aber dem zugewiesenen Element trotzdem ermöglicht Tab-Fokus zu bekommen.

In dem benannten Anker wird der selbe Text wie im Tab eingefügt welches gerade geklickt wurde und das ganze mit einer Headline umklammert. Dies stellt eine sehr angenehme Erfahrung für die Nutzer von Screenreadern dar, da es auf nette Art und Weise bestätigt, dass man gerade zu einem anderen Inhalt auf der Seite gesprungen ist.

Ein weiteres Zusatzfeature für Screenreader Nutzer ist ein kleiner Text der auf den aktuell ausgewählten Tab kennzeichnet. Standardmäßig lautet dieser Text "current tab: " gefolgt von dem Standardtext des Tabs. Dieser Text, ebenso wie seine Position (entweder davor oder danach) ist aber sehr leicht internationalisierbar.

Problem: Das Fokussieren von versteckten oder eben noch versteckt gewesenen Elementen

Während dem Testen der Tabs stießen wir auf ein sehr interessantes und ebenso störendes Verhalten des Screenreaders Jaws (und sehr wahrscheinlich auch von anderen). Wir wollten auf die Headline in dem Inhaltselement eines Tabs fokussieren nachdem es eingeblendet wurde. Bei jedem Test war der Screenreader nicht in der Lage das entsprechende Element zu finden und sprach statt dessen um Ende des Dokumentes oder einer anderen zufälligen Position. Dieses Phänomen wird durch den virtuellen Buffer des Screenreaders verursacht, einer internen Kopie des DOMs in dem der Screenreader navigiert. Der virtuelle Buffer gleicht seinen Inhalt regelmäßig mit dem DOM des Browsers ab aber dies ist stets erst nach einer Verzögerung.

Um um dieses Problem herum zu arbeiten nutzen wir einen anderen Lösungsansatz. Der benannte Anker auf den wir verlinken ist tatsächlich nicht in dem versteckten Inhaltselement sondern im DOM davor und "offscreen" (position:absolute;left:-999em) versteckt. Tatsächlich zeigt jeder Tab auf den exakt selben Anker. Wir schreiben den Inhalt des Headline-Elementes einfach jedes mal neu und blenden das zugehörige Inhaltselement entsprechend ein oder aus. Das empfundene Verhalten ist genau das gleiche. Der Screenreader Nutzer klickt auf den Tab, folgt dem Link und findet den verlinkten Inhalt mit der entsprechenden Headline.

Man kann sich das Script hier in in vielen verschiedenen Beispielen in Aktion ansehen. Das jQuery Plugin ist ebenfalls seit der Version 3.1.1 Teil des CSS Framework Yaml.

Man kann das script zusammen mit den demos hier herunterladen. Der gesamte Code ist ebenfalls auf github.

... aber manchmal gibt es einfach keinen anderen weg - und dann verkauft man seine Seele an den Hack-Teufel...

Seit ich angefangen habe bei Yahoo! zu arbeiten habe ich aus Performance Gründen (weniger HTTP Abfragen) aufgehört Conditional Comments zu benutzen. Ich musste mich also plötzlich wieder mit den üblichen Hacks für Internet Explorer vertraut machen die ich schon völlig vergessen hatte.

Seither bin ich fast nie in Situationen geraten in denen sich auch andere Browser schlecht benommen hätten - aber es kam vor (immerhin sind sie alle nur Software und, wie wir alle wissen, gibt es keine Software ohne Bugs...).

Es folgt der aktuelle Stand meiner CSS Hack Sammlung. Man kann sich eine funktionierende Demo auf meiner CSS Hacks Beispielseite anschauen. Bitte nur mit besonderer Vorsicht benutzen und tu dir selbst den Gefallen und probier ALLES ERDENKLICHE BEVOR du aufgibst und sie selber benutzt.

In meiner Demo habe ich Absätze, die den Namen der Browser enthalten, die mit den Hacks angesprochen werden können, standardmäßig ausgeblendet.

Dann benutze ich die Browser spezifischen Hacks um die jeweiligen Browsernamen wieder sichtbar zu machen:

Internet Explorer

Firefox

Safari

Opera

So - jetzt fühle ich mich schmutzig und gehe duschen...

update 2010-07-23 jetzt Support für Firefox 3.5+

update 2010-08-27 jetzt Support für Internet Explorer 9+

Die neuest Version is immer auf github

Zusammen mit einigen anderen der üblichen Barcamp-Verdächtigen habe ich das kommende Barcamp London 6 organisiert.

Nachdem wir gestern endlich die finale Zusage von the Guardian als location bekommen haben gibt es jetzt endlich die offizielle Ankündigung:

Vom 28. - 29. März 2009 findet in den schicken neuen Räumen der Zeitung the Guardian das sechste Londonder Barcamp statt.

In 2 Wochen werden schon die ersten Tickets vergeben (genauer Tag und Uhrzeit werden noch bekannt gegeben). Damit Ihr diesen wichtigen Termin nicht verpasst, folgt uns auf twitter, tragt euch in den Reminder auf der Website ein, macht euer Häkchen bei Upcoming und und und...

Knapp ein Jahr, viele Usertests, viele neue Ideen, viel Screenreader testing mit meinem Kollegen Artur Ortega und sehr viel Entwicklungszeit später ist gestern nacht das Ergebnis online gegangen!

Über die vielen Screenreader spezifischen Tricks die wir hierfür angewand und zum grossen Teil neu entwickelt haben muss ich unbedingt noch gesondert Bloggen. Bis dahin wünsche ich viel Spaß mit dem neuen Yahoo! Currency Converter und empfehle einfach mal die Anwendung nur mit der Tastatur zu bedienen, Javascript mal ganz auszuschalten oder natürlich einfach mit der tollen Währungs-Suchfunktion zu spielen .

Update:

Mein versprochener (englischer) Artikel mit dem Titel "Making the new Yahoo! Currency Converter accessible" ist jetzt auf dem YDN Blog verfügbar!

]]> Wed, 17 Dec 2008 10:58:55 +0100 http://blog.ginader.de/archives/2008/12/17/250.php accessibility de javascript launch me webdev yahoo http://blog.ginader.de/archives/2008/12/16/Technikwuerze-feiert-3-Jahre-Pfeffer-im-Ohr-ich-feiere-mit.php deutsch http://blog.ginader.de/archives/2008/12/16/Technikwuerze-feiert-3-Jahre-Pfeffer-im-Ohr-ich-feiere-mit.php#comments http://blog.ginader.de/wfwcomment.php?cid=249 1 http://blog.ginader.de/rss.php?version=2.0&type=comments&cid=249 dirk@ginader.de (Dirk Ginader) Gestern feierten David Maciejewski Stefan Nitzsche, Sascha Postner und ich das 3-jährige Jubiläum des wichtigsten deutschen Webstandards Podcasts Technikwürze.

Die Sendung schaffte es schon in den ersten Minuten das humoristische Niveau der folgenden 82:57 Minuten gnadenlos festzulegen sodass ich, als ich heute morgen in der Tube saß, immer wieder von meinen Mitfahrern schräg angeschaut wurde, da ich konstant kichernd und grinsend meinem iPod lauschte

Meine Tonqualität war zwar leider sehr bescheiden (man hört quasi den Ärmelkanal rauschen... ) aber Spaß hat es trotzdem gemacht.

Reinhören!

Schon vor über einem Jahr hatte ich eine Design Idee und diese Fireworks gelayoutet. Ein erster HTML-Dummy war schnell gebastelt. Dann schaute ich mir zum ersten mal an wie man in Serendipity (der hier verwendeten Blog-Engine) Templates baut und habe augenblicklich die Lust verloren.

Glücklicherweise war das alte Design so hässlich und der Code noch viel schlimmer als das Design daß mich der regelmäßige Anblick dann doch irgendwann so geschämt hat, daß ich mir den heutigen Sonntag mit Smarty (der Template Engine in Serendipity) vertrieben habe und tadaaaaaaaaaaa:

Das neue Design ist tatsächlich gerade eben online gegangen!

Als Tomas Caspers in seinem gestrigen "EfA-Laborbericht, Teil 7" auf die Skip-Links der frisch relaunchten Website der Stadt Stockholm verwies war mir klar, daß ich diese einfache und einfach Sinnvolle Technik zukünftig unbedingt ebenfalls nutzen möchte.

Um ein "Springen" der markierten Container zu vermeiden setzten die Entwickler der Webseite auf die CSS2 Eigenschaft: outline die das umrandete Element nicht verbreitert wie es border machen würde. Leider ist diese Eigenschaft nur in der neuesten Browser Generation verfügbar, was das Feature in den Internet Explorern vollständig verschwinden lässt.

Um diesen Makel zu umschiffen habe ich einen anderen Lösungsweg eingeschlagen. Mein kleines jQuery Plugin "skipnavHighlight" erzeugt ein leeres DIV und malt damit einen Rahmen um zu markierende Linkziel.

Eine funktionierende Demo gibt es hier und herunterladen kann man den Code von skipnavHighlight.jquery hier.