Entries tagged as javascript

2009-02-07 jQuery Accessible Tabs - Wie man Tabs WIRKLICH zugänglich macht

Während viele Tabs-Scripts behaupten zugänglich zu sein sind es die meisten leider weit davon entfernt. Während ich dieses jQuery Plugin zusammen mit meinem Kollegen Artur Ortega entwickelte, suchten wir nach existierenden Javascript Tabs die Artur mit seinem Screenreader tatsächlich bedienen kann. Wir gaben die Suche irgendwann auf.

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.


    <div class="tabs">
        <h2>eine Beispielüberschrift</h2>
        <div class="tabbody">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <h3>Lorem ipsum</h3>
            <p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius</p>
        </div>
        <h2>noch eine Beispielüberschrift</h2>
        <div class="tabbody">
            <p>Integer tincidunt. Cras dapibus. Vivamus elementum nisi.</p>
            <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel.</p>
        </div>
        <h2>alles andere</h2>
        <div class="tabbody">
            <p>Hier könnte Ihr Inhalt stehen</p>
        </div>
    </div>
 

Ein einfacher jQuery Aufruf transformiert das Markup in accessible Tabs:


    $(document).ready(function(){
        $('.tabs').accessibleTabs();
    });
 

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


$('.tabs').accessibleTabs({
    // Der Name der Klasse die dem Div zugewiesen
    // welche um das Markup herumgeschrieben wird
    wrapperClass: 'content',
    // Der Name der Klasse die das aktuelle Tab markiert
    currentClass: 'current',
    // Tag oder valider Query Selector der Elemente 
    // aus denen die Tabs Navigation erzeugt wird
    // (die Originale werden entfernt)
    tabhead: 'h4',
    // Tag oder valider Query Selector der Elemente die
    // als Inhalte der Tabs genutzt werden sollen
    tabbody: '.tabbody',
    // Anzeigeeffekte:  'fadeIn', 'slideDown' oder 'show'
    fx:'show',
    // Geschwindigkeit (String|Number): 'slow', 'normal', oder 'fast')
    // oder die Milisekunden die die Anzeigeeffekte dauern sollen
    fxspeed: 'normal',
    // Text um Screenreadern anzuzeigen welches der ausgewählte Tab ist
    currentInfoText: 'current tab: ',
    // Definition wo der Text eingefügt wird
    // Entwender 'prepend' oder 'append'
    currentInfoPosition: 'prepend',
    // Klasse des span mit dem Infotext
    currentInfoClass: 'current-info'
});
 

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.


<h4>
    <a id="accessibletabscontent" name="accessibletabscontent" class="accessibletabsanchor" tabindex="0">
        Eine Beispielüberschrift
    </a>
</h4>
 

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.

2008-12-17 Yahoo! Currency Converter - my favorite project is now live

About 9 months ago my fellow co-worker, the User Experience Designer Graham Beale, and I started developing ideas for a prototype of a new Currency Converter for the worldwide relaunch of Yahoo! Finance.

We wanted Features we haven't seen like this in the Internet so far. We wanted conversion without a page reload, searching for currencies like in the Firefox 3 "awesome bar", total accessibility, much more and of course everything in realtime.

About a year, many user tests, many new ideas, a lot of Screenreader testing with my fellow co-worker Artur Ortega and even more time developing, the result went online yesterday night!

I need to blog about the many Screenreader specific tricks, we used and for a large part also created for this, separately. Until then I wish you lots of fun with the brand new Yahoo! Currency Converter and suggest to use the App at one point only using the Keyboard, switch of Javascript or just play with the neat Currency Search :-).

Update:

My article about Making the new Yahoo! Currency Converter accessible is now online on the YDN Blog!

2008-12-17 Yahoo! Currency Converter - mein Lieblingsprojekt ist live

Vor ca. einem 3/4 Jahr entwickelten mein Kollege, der User Experience Designer Graham Beale, und ich Ideen für einen Prototype eines neuen Währungsumrechners für den weltweiten Relaunch von Yahoo! Finance. Wir wollten Features die wir so noch nirgends im Internet gesehen hatten. Wir wollten Konvertierung ohne Reload, eine Suche nach Währungsnamen wie in der Firefox 3 "awesome bar", totale Barrierefreiheit, noch viel mehr und das alles natürlich in Echtzeit.

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!

2008-12-13 Der Webkrauts Adventskalender öffnet mein erstes Türchen

Heute ist es soweit! Der erste Teil meines Website Performance Artikels mit dem Titel "Sehr sehr schnelle Seiten" ist aus dem heutigen Webkrauts Adventskalender Türchen gefallen. Viel Spass damit und freut euch auf morgen denn da kommt schon der zweite Teil :-)

Banner: Best Practice im Web