Kategorien
NVDA WordPress Zugänglichkeit

Tipp: Mit einem Screen Reader mit den dynamischen Menüs des WordPress-3.3-Adminbereiches umgehen

WordPress 3.3 führt neue, dynamische Menüs im Administrationsbereich ein. Dieser einfache Tipp soll zeigen, wie man als Blinder mit einem Screen Reader diese dynamischen Menüs bedienen kann. Hierfür verwende ich NVDA 2011.3RC und Firefox, es geht aber auch mit anderen Screen-Reader- und Browser-Kombinationen.

Diese Untermenüs ermöglichen einen schnelleren Zugriff auf die Untermenüpunkte. Man muss nicht erst einen Hauptmenüpunkt anklicken, auf das erneute Laden der Seite warten und dann auf die aufgeklappten Menüs zugreifen. Stattdessen werden die Untermenüpunkte sichtbar, indem man mit der Maus drüberfährt, sogenanntes Hovern, oder mit tab auf den jeweiligen Link springt und Enter drückt.

Das Problem für Screen-Reader-Benutzer ist, dass die Enter-Taste in der Regel vom Screen Reader abgefangen und für eine Funktion innerhalb des sogenannten virtuellen Dokuments oder Browse-Modus verwendet wird. Normalerweise wird durch Druck auf Enter ein Link aktiviert.

Genau das wollen wir ja aber nicht, denn das Aktivieren eines Links erzeugt ein Neuladen der Seite, und sämtliche Vorteile des schnelleren Zugriffs auf die dynamischen Menüs wären dahin.

Stattdessen tun wir folgendes:

  1. Mit dem virtuellen Cursor auf einen dieser „Untermenü Link“-Elemente wandern.
  2. NVDA-Taste+F2 drücken, um NVDA anzuweisen, den nächsten Tastendruck ungefiltert an den Browser weiterzugeben.
  3. Enter drücken.
  4. Mit dem virtuellen Cursor nach unten wandern und ein aufgeklapptes Menü vorfinden.

Diese Methode funktioniert analog mit anderen Screen Readern. Manche Screen Reader fokussieren jedoch nicht automatisch das unter dem virtuellen Cursor befindliche Element. Vor dem obigen Schritt 2 muss also eventuell noch eine Tastenkombination gedrückt werden, mit der der System-Fokus oder PC Cursor zum virtuellen Cursor gezogen wird.

Die oben beschriebene Methode ist ein Tastendruck mehr. Das stimmt, aber diese Vorgehensweise ist immer noch schneller als auf das erneute Laden einer Seite zu warten und dann die aufgeklappten Menüs wieder vom Anfang des virtuellen Dokuments an suchen zu müssen.

Viel Spaß beim Bloggen!

Werbeanzeigen
Kategorien
ARIA Zugänglichkeit

Von WAI-ARIA nach HTML5 und zurück, oder doch nicht?

Auf dem Multimediatreff 28 in Köln am 3. Dezember hielt ich einen Vortrag über Barrierefreiheit mit WAI-ARIA und HTML5. Als Beispiel zog ich hierfür meinen einfachen ARIA-Tip #2 heran und entwickelte diesen weiter. HTML5 bietet inzwischen viele der Fähigkeiten, die WAI-ARIA mitbringt, nativ, und viele davon sogar besser.

Von WAI-ARIA nach HTML5

Wer das im obigen verlinkten Artikel entwickelte Formular nicht mehr ganz parat hat, dem empfehle ich einen erneuten Blick darauf zu werfen. Die folgenden Änderungen habe ich vorgenommen, um das Formular von WAI-ARIA und HTML 4.01 auf HTML5 zu bringen:

  1. Allen JavaScript-Code rausschmeißen. Die Formularvalidierung von HTML5 nimmt uns viel Arbeit ab. Da bauen wir lieber wieder was ein, wenn wir merken, dass das Formular zu wenige Features hat.
  2. aria-required ändern in required. Sämtliche erforderlichen Formularfelder bekommen das WAI-ARIA-Attribut inklusive Wert gestrichen und einfach das HTML5-Formularelementattribut required verpasst.
  3. Das Feld „name“ bekommt ein pattern-Attribut mit einem regulären Ausdruck verpasst, der besagt, dass das Feld nur dann gültig ausgefüllt ist, wenn der eingegebene Name aus beliebigen Zeichen, einem Leerzeichen und weiteren beliebigen Zeichen besteht. Ein Name ist in unseren Breiten üblicherweise aus Vor- und Nachname zusammengesetzt, und das sollte das Formular wissen.
  4. Das Feld „email“ bekommt als type den Wert „email“, das Feld „website“ den type „url“ gesetzt. Dadurch weiß der Browser, dass er eine E-Mail- bzw. Webseiten-Adresse zu erwarten hat. Weiterhin hat dies den positiven Nebeneffekt, dass auf mobilen Geräten gleich die entsprechend verbesserten virtuellen Tastaturen eingeblendet werden. Mir ist bewusst, dass die meisten Browser zur Zeit noch nichts mit internationalen Domains anfangen können bzw. Felder mit solchem Inhalt noch nicht validieren. Wir decken der Einfachheit halber aber mal den großen Teil der allgemeinen Fälle ab.
  5. Im Feld Name fügen wir noch ein Attribut x-moz-errormessage hinzu. Das Präfix besagt, dass dies kein Standard-Attribut für HTML5 ist. Mozilla-basierte Browser können aber eine bessere Fehlermeldung ausgeben. Achtung, die ist natürlich dann nicht lokalisiert, erscheint also auch in einem englischen Firefox auf deutsch!

Mit diesen Änderungen kann unser Formular jetzt folgendes:

  1. Namen, E-mail-Adresse und Webseitenadresse automatisch validieren und den Status auf „ungültig“ setzen, wenn ein Feld die Anforderungen nicht erfüllt.
  2. Der Firefox schickt bei mindestens einem ungültig ausgefüllten Formular dieses beim Klick auf den Button nicht ab, sondern gibt eine Fehlermeldung aus und setzt den Fokus auf das Eingabeelement, in dem noch ein Problem besteht. Bei Tests im Safari in Mac OS X Lion zeigte sich, dass dieser das Formular dennoch abschickt, obwohl ungültige Eingaben vorhanden sind. Hier weichen die Implementierungen also voneinander ab

Und zurück zu WAI-ARIA

Und was kann unser Formular noch nicht wieder? Richtig: Die Ausgabe einer Fehlermeldung bei Verlassen eines Eingabefeldes. Dies unterstützen Browser bisher nicht standardmäßig, eine Validierung bei Fokusverlust, die sofort per Fehlermeldung bescheid sagt, wenn etwas nicht in Ordnung ist. Also müssen wir das JavaScript aus dem ursprünglichen Formular wieder einbauen und wie folgt abändern:

  1. Den Namen der function „checkEntryValidity“ in „testIfEntryIsValid“ ändern, weil der ursprüngliche Name im HTML5-Kontext mit einem reservierten Bezeichner kollidiert.
    Die Parameterliste verschlanken. Die Funktion braucht nur noch die ID des zu überprüfenden Elements, weil alles andere von HTML5 erledigt bzw. bereitgestellt wird.
    Die Funktion so abändern, dass:

    1. Keine aria-invalid-Attribute mehr gesetzt werden.
    2. Keine zeichenvergleiche mehr angestellt werden, sondern lediglich das Ergebnis des Funktionsaufrufs checkValidity() ausgewertet wird. checkValidity() gibt true zurück, wenn das Feld einen gültigen Eintrag enthält, sonst false.
    3. Den bisherigen Parameter aMsg ersetzen durch einen Aufruf der Eigenschaft validationMessage des jeweiligen Elements. Diese enthält die Fehlermeldung, die Firefox auch beim Absenden des Formulars generiert und die beim Drüberfahren mit der Maus als Tooltip angezeigt wird. Enthält das Element ein title-Attribut, wird dessen Wert an diese Fehlermeldung angehängt. Ist x-moz-errormessage angegeben, enthält der erste teil von validationMessage diesen Text.

    </li

  1. Den Feldern „name“ und „email“ wieder onBlur-Handler geben, die die Funktion testIfIsEntryValid aufruft und die ID des zu prüfenden Feldes übergibt, damit bei Fokusverlust des Feldes eine Prüfung erfolgt und ggf. ein Alert generiert wird.

Mit diesen Änderungen ist unser Formular nun wieder voll funktionsfähig, besitzt jedoch verbesserte Validierungseigenschaften als vorher. Auf mobilen Geräten werden entsprechende Tastaturen eingeblendet, wenn man die E-Mail- und Webseiten-Adressen ausfüllt.

Zusammenfassung

HTML5 bietet uns also viele Funktionen frei haus, die wir früher mit eigenem JavaScript nachbauen mussten. Der Code wird schlanker. Die Lücke, die HTML5 nicht schließt, ist die Validierung bei Fokusverlust und die Ausgabe der Fehlermeldung. Diese müssen wir weiterhin durch WAI-ARIA realisieren. Wir gehen also zu einem guten Stück von WAI-ARIA-Attributen weg, und das ist auch gut so! Dort, wo es sinnvoll ist und es eine Ergänzung darstellt, nutzen wir es aber weiterhin, um unser einfaches Formular noch benutzerfreundlicher zu gestalten. Wo man kann, sollte man WAI-ARIA also durch HTML5 ersetzen, wenn man moderne Webseiten und -applikationen entwickelt. Dort, wo es Sinn macht oder HTML5 noch Lücken lässt, sollte man WAI-ARIA aber nach wie vor einsetzen!

Sämtliche drei Beispiele sind von dieser Seite verlinkt. Viel Spaß beim Spielen und Nachbauen!

Ich freue mich selbstverständlich über Feedback! Das JS hier ist jedoch absichtlich sehr einfach gehalten, weil es nur das Konzept verdeutlichen soll und keine fertige Lösung darstellt.

Kategorien
Zugänglichkeit

Mehrere nicht barrierefreie Relaunches in dieser Woche, die Wut ist groß

In dieser Woche gab es gleich mehrere Anlässe, weswegen ich das Gefühl hatte, mal einmal gepflegt über den Tisch kotzen zu wollen. Entschuldigt die derbe Ausdrucksweise, aber was anderes fällt mir zu den Relaunches des Bayerischen Rundfunks und von Der Westen nicht mehr ein.

Bayerischer Rundfunk

Fangen wir mal mit dem Bayerischen Rundfunk an. Aufmerksam wurde ich durch einen Tweet von Eric Eggert. Als Nordlicht ist der BR nicht unbedingt jeden Tag Ziel meiner Surfaktivitäten. Nach den ersten Hinweisen von Eric habe ich mir die Seite dann selbst angeschaut und bin doch ziemlich entsetzt. Folgende Dinge fallen sofort ins Auge bzw. für den Screen-Reader-Benutzer ins Ohr:

  • Zumindest für Firefox-Nutzer gibt es Sprunglinks, die auch zu halbwegs vernünftigen Zielen auf der Seite (und ich rede erst einmal nur von der Startseite) führen. Für Tastaturbenutzer von Webkit-Browsern (Safari, Chrome) scheint dies noch problematischer zu sein, wie dieser Tweet zeigt.
  • Die Überschriftenhierarchie lässt jegliche Konsistenz oder Konsequenz vermissen. So liegen die Hauptüberschrift „Bayerischer Rundfunk“ und die Überschrift zur Breadcrumb-Darstellung auf Ebene 1, die Überschrift „Inhalt“ sowie ein einzelner Artikel auf Ebene 2, die restlichen Artikelteaser auf Ebene 3. Die Überschrift „Hilfe und Kontakt“ liegt wieder auf Ebene 2.
  • Die Artikelteaser selbst bestehen aus einem Kuddelmuddel aus Text und Grafiken, eingefasst in Überschriften. Ein Beispiel, abgerufen am 28.10.2011:
    <h3>
    <a href="/themen/aktuell/inhalt/bundeswehr-standortschliessungen-bayern100.html" class="link_article contenttype_standard bundeswehr-standortschliessungen-bayern100" title="zum Artikel | Aktuell">
    <span class="teaser_picture">
    <img width="256" height="144" alt="Hinter wuchernden Pflanzen ist vor der Artillerie-Kaserne in Kempten das Wort Kaserne zu lesen. | Bild: picture-alliance/dpa" title="Hinter wuchernden Pflanzen ist vor der Artillerie-Kaserne in Kempten das Wort Kaserne zu lesen. | Bild: picture-alliance/dpa" src="/themen/aktuell/inhalt/kasernenschild100~_v-image256_-a42a29b6703dc477fd0848bc845b8be5c48c1667.jpg?version=1319722326985"/>
    <span class="teaser_icon">
    <span class="link_target"> zum Artikel </span>
    </span>
    </span>
    <span class="teaser_headline">
    <span class="teaser_overline">Bundeswehrreform</span>
    <span class="teaser_title">Suche nach einer neuen Zukunft</span>
    </span>
    </a>
    </h3>

    • Zum einen ist die Verdoppelung des Title zum Alternativtext des Images völlig unnötiger Ballast.
    • Das ganze in einen Link zu packen macht zwar alle Bestandteile klickbar, und man kommt zum Artikel, macht den Linktext für Screen Reader aber auch so behäbig lesbar, dass das spätestens beim dritten Artikel tierisch zu nerven anfängt.
    • Und nein, der Title für den Link wird nur in den wenigsten Fällen als Ersatz für vorhandenen Linktext für Screen Reader herangezogen.
    • Dass das ganze in ein H3 gepackt wurde, erlaubt wenigstens noch die Ansteuerung per Schnellnavigation, das H3 erfüllt sonst aber, glaube ich, so gut wie keine Funktion.

    Für Screen Reader hört sich dieser Teil der Seite dann übrigens so an:

    Hinter wuchernden Pflanzen ist vor der Artillerie-Kaserne in Kempten das Wort Kaserne zu lesen. | Bild: picture-alliance/dpa Grafik
    zum Artikel
    Bundeswehrreform
    Suche nach einer neuen Zukunft Überschrift Ebene 3

Öffnet man nun den oben auseinandergenommenen Artikel, offenbart sich wieder eine in teilen inkonsistente, aber doch etwas besser gelungene Überschriftenhierarchie. Auch hier wird wieder auf einen Artikel, in diesem Fall auf ein Interview, verlinkt, und das „Ungetüm“ liest sich genauso behäbig wie die Verlinkungen auf der Startseite.

Hier wurden zwar semantisch durchaus korrekte, von der usability her aber sehr unhandliche Strukturen geschaffen. Da hat offensichtlich niemand mit einem Screen Reader für Blinde mal drübergelesen, um sich anzuhören, was da eigentlich entsteht.

Es gibt auch hier und da noch auf Pfeilen fehlende Alternativtexte, die habe ich im einzelnen jetzt aber nicht rausgesucht. Es gibt jedenfalls an diesem Relaunch von der Usability her, von der Tastaturnavigation und von den Überschriftenstrukturen genug anzumerken um festzustellen, dass hier keine wirklichen Experten am Werk waren und das Ergebnis auch nicht von fachkundiger Seite geprüft wurde. Für eine Institution der ARD, die mit staatlichen Mitteln und GEZ-Gebühren gefördert wird und somit der BITV unterliegen dürfte, ein absolut erbärmliches und nicht schönzuredendes Ergebnis!

Der Westen

Gegen das, was derwesten.de aber in dieser Woche als Relaunch abgeliefert hat, muss man zwangsläufig beim BR noch von Luxus sprechen, vorausgesetzt man würde das als Maßstab betrachten. Denn:

  • Keine Skip-Links.
  • Keine Überschriften, stattdessen so Monstren aus den 1990ern wie
    A 40 in Duisburg wird am Wochenende zum Nadelöhr

    . „hl“ steht dabei vermutlich für „Header large“ oder so.

  • Auch entsetzlich und von Eric Eggert auf Twitter gepostet:

    . Naja vielleicht sollten wir wenigstens dafür dankbar sein, dass nicht tatsächlich eine Layouttabelle verwendet wurde, oder wie?

Bei soviel Dilettantismus allein schon auf der Startseite erübrigt sich das Anschauen jeder weiteren Seite dieses im Oktober 2011 relaunchten Webauftritts. Die Note 6 steht jetzt schon fest.

Warum?

Die große Frage, die ich mir beim Lesen solcher Webauftritte stelle, ist, WARUM? Warum wird für so einen Mist so viel Geld verschwendet? Warum beherrscht nicht inzwischen jede halbwegs seriöse Webagentur in Deutschland wenigstens die Grundregeln modernen Webdesigns und warum rotzen uns immer noch so viele deutsche Webagenturen einen solchen 90er-Jahre-Dreck vor die Füße? Müssen wir uns das gefallen lassen? Denkt wirklich niemand in den Entscheidungsgremien mal daran, dass sie selbst in nicht allzu ferner Zukunft älter sein werden, Sehfehler bekommen, vielleicht eine Maus nicht mehr richtig halten werden können? Barrierefreies Webdesign ist nicht primär was für Blinde, sondern geht primär jeden etwas an, denn wir werden alle älter und nicht jünger, und wir wollen auch im Alter unsere Webauftritte bedienen können. Dazu braucht es ein weitsichtigeres Denken als das, was hier demonstriert wird. Nachhaltigkeit ist das Stichwort, und davon ist hier nichts zu spüren. Und da möchte man als jemand, der seit 15 Jahren für mehr Barrierefreiheit im Web eintritt, manchmal echt fragen, ob man nur für die Luft um einen herum aufklärt. Ich weiß zum Glück, dass es auch und gerade im Pott eine ganze Menge sehr fähiger Webagenturen gibt, die sich das Thema Barrierefreiheit zu einem Grundprinzip gemacht haben und dies all-inclusive in ihre Webauftritte mit einbauen und dass die Arbeit daher definitiv nicht um sonst ist. Es entsetzt mich jedoch, dass nach 15 Jahren bei so vielen großen und teuren Webagenturen davon anscheinend immer noch nichts angekommen ist!

Kategorien
Apple ARIA Zugänglichkeit

Mac OS X Lion ist da, Eindrücke von den neuen Barrierefreiheitsfunktionen

Apple hat soeben die neueste Version seines Betriebssystems Mac OS X, Lion, veröffentlicht. Eine gute Gelegenheit, einen Blick auf die neuen Barrierefreiheitsmerkmale der jüngsten Raubkatze zu werfen!

Neue Stimmen in vielen Sprachen

Apple bietet für Lion Stimmen in niedriger und hoher Qualität in über 40 Sprachen und Dialekten an. Diese sind in kompakter Version für viele Sprachen bereits vorinstalliert. So kommt die deutsche Variante mit der Stimme Yannick daher, die bereits aus aktuellen iOS-Veröffentlichungen vom iPhone/iPod Touch und iPad bekannt ist. Eine höherwertige Version dieser Stimme sowie die Stimmen Steffi und Anna können nachgeladen werden. All diese Stimmen, also auch die ausländischen, werden von Apple kostenlos zur Verfügung gestellt. Man wählt sie einfach im VoiceOver-Dienstprogramm unter Sprachausgabe, Standard-Stimme, Menüpunkt „Anpassen“… aus und lädt sie dann über die automatisch sich öffnende Softwareaktualisierung herunter.

Aber auch für die Freunde der bereits für Leopard und Snow Leopard verfügbaren Stimmen der á Capella Group, die über AssistiveWare heruntergeladen und käuflich erworben werden können, gibt es Entwarnung: Diese funktionieren weiterhin, bei mir nach einem Upgrade von Snow Leopard auf Lion sogar ohne neuinstallation oder erneute Aktivierung. Wem also die Nuance-Stimmen nicht gefallen, der kann weiterhin Infovox iVox nutzen. AssistiveWare sagen selbst, dass sie bis Ende des Monats ihre Produkte auf mit Lion kompatible Versionen aktualisieren wollen, meine Tests mit den Stimmen haben allerdings gezeigt, dass die reinen Stimmenpakete anscheinend weiterhin problemlos funktionieren.

Die Tatsache, dass Stimmen u. a. für Deutsch vorinstalliert sind, bedeutet, dass man jetzt in einem Apple oder Gravis Store nicht nur iPhones und iPads in seiner Muttersprache ausprobieren kann, sondern auch alle Varianten des Macs. Bei einer frischen Installation von Lion auf deutsch wird automatisch mit Yannick Compact gesprochen, so dass VoiceOver ohne Installation einer externen Sprachausgabe sofort in deutsch zu sprechen beginnt.

Einziger Wermutstropfen: Während der Installation wird diese Stimme noch nicht verwendet, hier quatscht immer noch die Decktalk-Variante „Fred“ in allen Sprachen. Dies gilt aber nur für den Installationsvorgang von der Recovery-Partition, nicht für das Setup nach der allerersten Installation. Der Assistent, bei dem man u. a. nach seiner Apple-ID gefragt wird, wird bereits mit einer deutschen Stimme begleitet.

Neue Braille-Funktionen

VoiceOver liefert jetzt Brailletabellen in verschiedenen Sprachen mit, unter anderem deutsch. Auch die Kurzschriftübersetzung ist für deutsch und weitere unterstützte Sprachen verfügbar. Leider gibt es zur Zeit keine Möglichkeit, bei der Kurzschriftübersetzung die Anzeige von Großbuchstaben abzuschalten, so dass die Kurzschriftdarstellung nicht ganz der eines Standard-Buches entspricht, in der es ja keine Anzeige von Großbuchstaben gibt.

Durch Brailleausführlichkeit kann man jetzt angeben, was in verschiedenen Situationen angezeigt werden soll und somit gerade auf kleineren Displays den Platz effizienter nutzen.

Aktivitäten

VoiceOver-Aktivitäten sind Sätze von Einstellungen, auf Wunsch alle, die das VoiceOver-Dienstprogramm zur Verfügung stellt, die für bestimmte Situationen oder bestimmte Anwendungen angepasst werden können. So kann man z. B. eine Aktivität für eine Anwendung einstellen, oder man öffnet mit VO+X ein Menü aller verfügbaren Aktivitäten, weil man im Web zum Einkaufen vielleicht eine schnellere Sprechgeschwindigkeit und andere Stimme verwendet als zum Lesen von Artikeln, Blogs usw. Eine Aktivität kann hierbei durchaus auch auf mehrere Anwendungen automatisch angewendet werden.

Ziehen und Ablegen (Drag and Drop)

VoiceOver unterstützt jetzt das automatisierte Drag and Drop. Dies war bisher durch eine Kombination mehrerer Befehle bereits möglich, wurde jetzt jedoch erheblich vereinfacht.

  1. Man wählt mit den VoiceOver-navigationsbefehlen oder der Tastatur das zu ziehende Objekt an und drückt VO+Komma.
  2. Man navigiert mit dem VoiceOver-Cursor an die gewünschte Zielstelle am Bildschirm und drückt eine der folgenden Tasten:
    1. VO+Punkt zum Fallenlassen auf dem Objekt, auf dem sich der VoiceOver-Cursor gerade befindet. Das Resultat hängt von der Anwendung ab.
    2. VO+< (Kleiner als Das Objekt auf dem Objekt, das dem Objekt, auf dem der VoiceOver-Cursor steht, voransteht. Hierbei ist die Navigationsreihenfolge gemeint, nicht die visuelle Anordnung auf dem Bildschirm.
    3. VO+> (Größer als zum Fallenlassen auf dem Objekt, das dem Objekt unterm VoiceOver-Cursor navigationsmäßig nachfolgt.

Hierbei unterliegt der Vorgang denselben Beschränkungen wie von Windows-Screen-Readern her gewohnt: Sind nicht mehr beide Objekte visuell am Bildschirm sichtbar, weil eines in der Zwischenzeit verdeckt wurde oder weggescrollt ist, schlägt der Vorgang fehl. Auch sind nicht alle Objekte von VoiceOver zum Ziehen freigegeben: Auf den meisten Webelementen erlaubt es schon das Markieren als zu ziehendes Objekt nicht. So kann man z.B. nicht wie der Sehende in Google Plus einen Kontakt auf einen Kreis ziehen, um ihn diesem Kreis hinzuzufügen.

Schnelle Navigation mit einzelnen Buchstaben auf Webseiten

Ähnlich dem Modell von Windows-Screen-Readern kann man in VoiceOver jetzt optional einstellen, dass man durch das Tippen einzelner Buchstaben ohne Umschalttasten wie Befehlstaste zu bestimmten Elementen navigieren kann. Dies sollte Umsteigern den Umstieg noch weiter erleichtern.

Aufgeräumteres VoiceOver-Dienstprogramm

Die Benutzeroberfläche des Dienstprogrammes für VoiceOver wurde an einigen Stellen überarbeitet, um neue Funktionen elegant zu integrieren und einige Tabs übersichtlicher zu gestalten. Weiterhin gibt es jetzt eine Suchfunktion, mit der eine bestimmte Funktion leicht aufgefunden werden kann, wenn man vergessen hat, wo genau sie sich verbirgt.

Unterstützung von Anwendungen

Kalender

Die Navigation und Interaktion mit Kalenderobjekten wurde stark verbessert, auch die Überarbeitung des Kalenders selbst bringt für VoiceOver eine weitere Verbesserung der Zugänglichkeit des ohnehin schon sehr zugänglichen Kalenders.

Mail

Das neue, für meine Begriffe sehr gelungene, mail wird von VoiceOver unterstützt. Es ist also nicht nötig, außer man möchte es aus Gewohnheit tun, auf die klassische Darstellung, die man aus Snow Leopard gewohnt ist, umzuschalten. Die neue, konversationsorientierte, darstellung ist mit VoiceOver genauso nutzbar. Nach wenigen Minuten des Eingewöhnens möchte ich diese Darstellung, die auch schon vom iPad und iPhone bekannt ist, nicht mehr missen. Die Vorschau der einzelnen Mails wird automatisch vorgelesen und gibt so einen schnellen Überblick über den wichtigsten Inhalt der Mail.

Safari

Es werden jetzt Navigationspunkte (WAI-ARIA Landmarks) erkannt. Die deutsche Übersetzung ist etwas hakelig geworden, so sagt VoiceOver beim Erreichen eines Orientierungspunkts z. B. „Banner eingeben“. Warum man nicht einfach die gut funktionierende Übersetzung von iOS genommen hat, erschließt sich mir nicht.

VoiceOver sagt jetzt erforderliche und ungültige Einträge an, wenn diese mit HTML5 oder WAI-ARIA ausgezeichnet sind. Auch werden WAI-ARIA Dialoge und Live Regions unterstützt.

Die Interaktion mit formatierbarem Text, z. B. beim Verfassen einer Mail in GoogleMail, wurde verbessert.

VoiceOver kommt spürbar besser und schneller mit sich dynamisch aktualisierenden Seiten wie Facebook zurecht.

LaunchPad und Mission Control

Auch die neuen Funktionen LaunchPad und Mission Control sind mit VoiceOver bedienbar. Der wirkliche Nutzen erschließt sich mir aber nur, wenn ich die Trackpad-Steuerung aktiviert habe und somit die Objekte tatsächlich berühre. Die Navigation im Gitter mit der Tastatur ist nicht effizienter als das Wählen einer Anwendung aus dem Dock oder dem Programme-Ordner im Finder, sondern eher langsamer, weil man hier keine Möglichkeit der Eingabe von Buchstaben hat, um ein Programm gezielt anzuspringen.

Die neue Rechtschreibkorrektur und Autovervollständigung

Die neue Autovervollständigung wird von VoiceOver unterstützt. Ertönt der auch vom iPhone bekannte Blubberton, kann man mit Pfeil runter die Rechtschreibvorschläge ansteuern, mit rechts und links die einzelnen Vorschläge auswählen und mit Eingabe von z. B. Leerzeichen oder einem Satzzeichen übernehmen, oder man drückt Pfeil rauf, um keinen der Vorschläge zu akzeptieren.

Kleine Detailverbesserungen

Es sind aber auch die Detailverbesserungen, die das Arbeiten unter Lion mit VoiceOver zu einem schönen Erlebnis machen. So werden bei Tabellen, denen von einem programm Zeilen hinzugefügt werden, die gewählten Zeilen nicht automatisch erneut vorgelesen, nur weil neue Inhalte dazugekommen sind. Gerade bei einem Programm wie dem Twitter-Client Syrinx ist dies eine angenehme Reduzierung der Geschwätzigkeit.

Das Vorlesen im Web geht meines Erachtens nach etwas flüssiger vonstatten als unter Snow Leopard. In manchen Situationen (ich habe noch nicht genau herausgefunden, welche) kann man sogar während des Vorlesens eines Absatzes VO+A drücken, und das Vorlesen wird nicht unterbrochen, sondern das Objekt wird zu Ende gelesen und dann mit dem nächsten weitergemacht.

Fazit

Von vielen wird bemängelt, dass Lion kein großer Fortschritt sei. In Bezug auf die Zugänglichkeit dynamischer und mit neuen Technologien wie HTML5 und WAI-ARIA zugänglich gemachter Webinhalte ist VoiceOver in Lion hingegen doch ein sehr großer Fortschritt, da die Menge an unterstützten Widgets dramatisch zugenommen hat.

Auch die neuen Oberflächen von Mail und Kalender sind, wenn man viel mit diesen Programmen arbeitet, das Upgrade definitiv wert.

Etwas weniger sinnvoll ist LaunchPad für VoiceOver-Benutzer, die die Trackpad-Steuerung nicht benutzen.

Die eingebauten und kostenlos herunterladbaren Stimmen sind ein echter Zugewinn! Man ist nicht mehr zwangsweise auf den Erwerb von Stimmen eines Drittanbieters angewiesen, sondern bekommt schön klingende und dennoch sehr reaktionsschnelle Stimmen frei haus mitgeliefert, man muss lediglich ein bisschen Zeit aufwenden, sie per Softwareaktualisierung herunterzuladen.

Für €23,99 bekommt man hier definitiv eine ganze Menge Neues fürs Geld geboten, und ich kann das Upgrade nur wärmstens empfehlen!

Kategorien
Zugänglichkeit

Positive Überraschung: Privatwirtschaftliches Unternehmen mit barrierefreiem Webauftritt

Bei meiner aktuell laufenden Wohnungssuche bin ich auf das Angebot des Wohnquartiers am osterbekkanal in Hamburg gestoßen. Beim ersten Aufruf der Seite fiel mir auf, dass es Skip-Links gibt, die Seite eine Überschriftenstruktur hat und auch ansonsten sehr übersichtlich gegliedert ist.

Die wahre Überraschung erlebte ich, als ich neugierig auf einzelne Wohnungen wurde und wissen wollte, ob die hinterlegten PDFs eventuell noch mehr Informationen als nur den bloßen Grundriss enthalten. Als das PDF herunterlud und sich öffnete, begann mein Screen Reader sofort mit dem Lesen der PDF-Datei! Kein lästiges Dialogfeld des Adobe Readers „Lesen eines Dokuments ohne Tags“, kein „Dokument wird verarbeitet“-Fortschrittsbalken nach Bestätigung des vorigen Dialogs. Nein, die PDF-Datei öffnete sich ohne weiteres Murren, was bedeutet, dass sich jemand die Mühe gemacht hat, sie zu taggen und somit barrierefreier zu gestalten! Das erschloss mir nicht den Grundriss selber, aber einige weitere Informationen. Und allein die Tatsache, dass hier mit Barrierefreiheits-Tags versehene (AKA „durchsuchbare“) PDFs hinterlegt sind, ist eine große Überraschung, die es positiv hervorzuheben gilt! 99,9% aller im Netz befindlicher PDFs sind nicht getaggt, und das schließt viele von Behörden und anderen Regierungsorganisationen zur Verfügung gestellte PDFs mit ein! Das Tagging selbst verlangt (bewusst überspitzt formuliert) fast einen eigenen Studienabschluss. 😉

Und hier ist ein privatwirtschaftliches Unternehmen, das für den Auftritt für dieses Wohnquartier nicht nur diese, sondern auch noch einige weitere Richtlinien zur barrierefreien Webgestaltung erfüllt:

  • Es gibt mit der Tastatur navigierbare und sichtbar werdende Skip-Links.
  • Verschiedene Sektionen wie die Navigation werden mit versteckten Überschriften für Screen Reader eingeleitet.
  • Der zur Zeit hervorgehobene Menüpunkt ist zwar nicht optisch hervorgehoben, wird aber in der Hauptüberschrift deutlich sichtbar wiederholt.
  • Die Schriften sind skalierbar.
  • Die Kontraste sind ausreichend.
  • Die Seite macht auch ohne Farben eine gute Figur.

Vielen Dank an Kerstin für die visuell feststellbaren Punkte, die ich oben aufgeführt habe!

Ich möchte einfach mal hervorheben, dass ich sehr positiv angetan bin vom Webauftritt für dieses Wohnquartier! Es geht also, man kann eigeninitiativ barrierefreie Webinhalte auch als privatwirtschaftliches Unternehmen gestalten, ohne zwangsweise der BITV zu unterliegen!

Ich hoffe, dass sich an diesem Vorbild so manches andere Unternehmen jeder Branche ein Beispiel nimmt!

Super gemacht, weiter so!

Kategorien
Allgemein Apple Zugänglichkeit

Neues Bezahlsystem mit Bezahlcode ein Gewinn für die Barrierefreiheit

Ich bin seit einiger Zeit Betatester für die iPhone- und iPad-Anwendung iOutBank. Das folgende ist ein Ausblick auf die kommende Version von iOutbank, speziell für das iPhone, die einen riesigen Schritt für mehr Barrierefreiheit beim Bezahlen per Überweisung darstellen kann, wenn entsprechend die Firmen mitziehen. Ich habe von der Stöger IT GmbH die Genehmigung, über dieses noch nicht veröffentlichte Feature zu bloggen.

Zunächst einmal folgt ein kleiner Einblick darin, wie ich als Blinder heute eine Überweisung tätige:

  1. Rechnung kommt mit der Post oder als PDF.
  2. Rechnung wird auf Scanner gepackt bzw. das PDF wird geöffnet.
  3. Wenn das PDF ordentlich ausgezeichnet ist, was die wenigsten sind, kann ich die Rechnung sofort verarbeiten. In den meisten Fällen muss ich aber die PDF-Rechnung durch eine Texterkennung jagen, um den Text überhaupt lesen zu können. Mit der Papierrechnung muss ich das auf jeden Fall tun.
  4. Die generierte Textdatei durchsuche ich nun nach den Daten wie Kontonummer, BLZ, genauen Namen der Firma, Rechnungsbetrag und Rechnungsnummer.
  5. Jetzt logge ich mich in mein Online-Banking-Portal ein und wähle „Überweisung“.
  6. Wenn ich Glück habe, kann ich mit Copy & Paste die Daten in die einzelnen Felder übernehmen. Wenn ich Pech habe, muss ich Dinge wie Bankleitzahl oder Kontonummer in kleineren Portionen kopieren oder im Kopf behalten, nämlich immer dann, wenn aus Gründen der optischen Verschönerung und besseren Lesbarkeit mit den Augen Leerzeichen in den Ziffernfolgen stehen. Und ich kenne bisher kein Onlinebanking-Portal, das so klug wäre, die Leerzeichen beim Einfügen rauszufiltern oder ggf. für übliche Ziffernaufteilungen in den Eingabefeldern genug Platz zu lassen. Die Folge sind abgeschnittene Kontonummern oder Bankleitzahlen, die ich erst noch mühsam nachbearbeiten und vervollständigen muss.
  7. Ist alles ausgefüllt, dann noch die indizierte TAN eingeben und die Überweisung absenden. Bei Firmen, mit denen ich öfters Zahlungsverkehr habe, kann ich die Empfängerdaten speichern und mir in Zukunft vielleicht einige Tipparbeit sparen.

Vor einigen Wochen nun sprach mich der Inhaber der Stöger IT GmbH an, dass da eine neue Funktion in IOutbank käme namens Bezahlcode-Unterstützung. Er verwies mich dann auch auf die Webseite bezahlcode.de, auf der das Verfahren näher erklärt wird und sogar ein Bezahlcode-Generator zum Ausprobieren vorhanden ist.

Ich habe dann mal einen Test gemacht und mir selbst eine Rechnung gestellt. Der Bezahlcode war auf der Seite schnell generiert, die entsprechende Grafik in die Zwischenablage kopiert und in ein Word-Dokument eingefügt.

Als nächstes die neueste Beta von iOutbank gestartet, die entsprechenden Knöpfe betätigt und die Kamera ca. 10-20 cm über das ausgedruckte Blatt Papier gehalten. Ein bisschen hin und her bewegt, und nach wenigen Sekunden ertönte ein Signal, und iOutbank teilte mir mit, dass es einen Bezahlcode identifiziert hat. Nach dem Bestätigen wurde automatisch ein Überweisungsfenster geöffnet und die Daten eingetragen. Es war alles da: Name, Kontonummer, Bankleitzahl, Betrag und Verwendungszweck! Kein Abtippen, keine Gefahr von zahlen- oder Buchstabendrehern. Ich hätte die Überweisung jetzt einfach absenden, eine i-Tan eingeben und die Überweisung tätigen können.

Einen Audioeindruck (ganz bewusst kein Video!) gibt es in diesem AudioBoo von mir.

Ich hoffe sehr, dass sich dieser Bezahlcode durchsetzt und in Zukunft auf jeder Rechnung zu finden sein wird! Dies wird blinden und sehenden Anwendern das Bezahlen von Rechnungen ganz erheblich erleichtern und gerade Blinden viel viel Arbeit, Frust und evtl. doppelt auszuführende Überweisungen ersparen (weil eine z. B. wegen Zifferndrehern oder unvollständiger Kontonummer zurückgebucht wird).

Und hiermit möchte ich einen Aufruf an alle Firmenmitentscheider, die diesen Blog lesen, starten, diesen Bezahlcode in Zukunft zu unterstützen! Es wird weitere Anwendungen geben, die diese Bezahlcodes werden auswerten können, nicht nur die iPhone-Anwendung, und Sie werden Ihren Kunden damit einen sehr großen Dienst erweisen, egal ob diese blind sind oder nicht!

Kategorien
Zugänglichkeit

Barrierefreiheits-Supergau beim Online-Banking der Sparda-Bank

[Update vom 26.11.2013: Die Umstellung auf das SEPA-System hat die Rechenzentren von Sparda- und Netbank am 23.10.2013 dazu veranlasst, das Classic Banking nun doch endgültig abzuschalten, ohne einen barrierefreien Ersatz zu schaffen. Stattdessen sollen blinde Anwender eine zugängliche Windows-Online-Banking-App nutzen. Dies ist natürlich eine völlig unzulängliche Forderung, da a) nicht alle Blinden willens oder bereit sind, unter Windows zu arbeiten und b) dies mal wieder eine Insellösung ist, die im Jahr 2013 schlicht inakzeptabel ist. Daher gibt es jetzt eine Petition, die die Sparda-Banken auffordert, endlich eine barrierefreie Web-Lösung zu schaffen, an der alle teilhaben können. Ich möchte alle Leser dieses Blogs bitten, diese Petition mitzuzeichnen und sie auch weiterzuverbreiten, damit bei Übergabe der Unterschriften eine möglichst große Zahl präsentiert werden kann! Danke für eure Unterstützung!

Die Sparda-Bank Hamburg hat ein neues Online-Banking bekommen. Als ich mich dort heute morgen einloggen wollte, erlebte ich eine böse Überraschung.

Das erste, was ich bemerkte, war, dass der Login-Button auf der neuen Startseite des Online-Banking mir als „/portalstatic/spm/gfx/style/buttons/buttonFlach_Jetzt_einloggen.png [Schalter]“ vorgelesen wurde. Sämtliche Labels waren den Eingabefeldern aber weiterhin korrekt zugeordnet, und sogar das Audio-Captcha zur Eingabe des Sicherheitscodes war weiterhin vorhanden.

Nachdem ich das Login durchgeführt hatte, erwartete mich dann aber die richtig böse Überraschung. Die ganze Seite ist gepflastert mit grafischen Links, die sich so oder ähnlich anhören: „04_SB8K8xLLM9MSSzPy8xBz9CP0os3gDU3cvAw93IwP3EFMTA08LH0NzC19jAwNfI_2CbEdFAH8_-FQ! [Grafik Link]“. Wenn mir daraus jemand ableiten kann, was dieser spezielle Link tut, ist er/sie gut! 🙂

Ich schrieb daraufhin eine Mail an das Service-Team.

Nachdem ich dann auf Twitter mehrere Beobachtungen mitgeteilt hatte und auch unverholen mein Entsetzen über dieses Bremsen von 100% auf 0% Barrierefreiheit zum Ausdruck gebracht hatte, erhielt ich diesen Hinweis von der Sparda-Bank Nürnberg:

@MarcoZehe den barrierefreien Zugang zum SpardaNet-Banking gibt es bei Bedarf weiterhin. Kurze Mail an den Support dann gibt es den Link.

Es stellte sich heraus, dass die Mail an den Support nicht notwendig war. Auf der oben bereits erwähnten neuen Startseite des „modernen“ Sparda Banking gibt es folgenden Absatz: „Hier melden Sie sich für kurze Zeit noch im Classic Banking an.“ Es folgt ein grafisch nicht korrekt ausgezeichneter Link zum bisher gewohnten Banking.

Wer aufmerksam gelesen hat, dem ist das „für kurze Zeit“ in dem obigen Zitat nicht entgangen! Wie lang wird diese Zeit sein? Ein Monat? Sechs Monate? Ein Jahr? Eine Woche?

Und nun kommen wir zum eigentlichen Grund, warum dieser Relaunch des Online-Bankings ein technischer und PR-mäßiger Super-Gau ist.

Wir schreiben das Jahr 2010. Seit über 10 Jahren predigen Organisationen wie von der Aktion Mensch und viele engagierte und technisch sehr gute Webentwickler und -agenturen die Standards der Barrierefreiheit im Webdesign und der Webprogrammierung. Seit 1999 gibt es die WCAG 1.0 des W3C, die im Dezember 2008 durch die WCAG 2.0 ersetzt wurden. Die BITV 1.0 soll noch in diesem Jahr durch die BITV 2.0 ersetzt werden. Unternehmen wie Amazon.de haben es seit Jahren nicht mehr nötig, alternative Textversionen für ihre Angebote anzubieten.

Und hier kommt ein Relaunch, der eine 100%ige Rückwärtsrolle von einem vorbildlichen(!) Online-Banking hin zu einem tut, der für Anwender assistiver Technologien überhaupt nicht mehr bedienbar ist. Und ein Verweis auf eine Alternativfersion, die der vorbildlichen Vorversion entspricht, von der aber nicht klar ist, wie lange diese tatsächlich noch weiter existieren bzw. gepflegt werden wird.

Zum einen ist es schon immer betriebswirtschaftlich und organisatorisch sehr unklug gewesen, Alternativversionen für bestimmte Personenkreise zur Verfügung zu stellen. Die Erfahrung zeigt, dass diese alternativen Angebote gern bei Aktualisierungen vergessen werden. Nun ist diese Aktualisierung bei einem Onlinebanking-Portal vielleicht nicht ganz so häufig wie z. B. auf einer Seite wie Amazon oder irgendeinem Newsportal. Aber es bleibt das Gefühl, man könnte was verpassen. Den größten Gau in diesem Bereich leistet sich GoogleMail, wo nämlich die für Blinde konzipierte HTML-Version viele(!) der Features des Standard-Interface komplett nicht zur Verfügung stellt.

Zweitens ist es betriebswirtschaftlich schlicht unvernünftig, im Jahr 2010 die Barrierefreiheit nicht gleich ins Grundkonzept mit aufzunehmen. Die Gesellschaft wird immer älter, und die Barrierefreiheit betrifft nicht nur Blinde, sondern Menschen mit allen möglichen Einschränkungen, von denen viele mit zunehmendem Alter auftreten. Weiterhin kommen immer mehr Senioren ins Netz, die darauf angewiesen sind, dass sie mit ihren Möglichkeiten der Maus- und Tastaturbedienung die Angebote bedienen können. Und auch Pensionäre machen Online-Banking! Und ich wage mal die Behauptung, dass die Damen und Herren im Management, die diese Entscheidungen die Sparda-Bank betreffend zu fällen haben, entweder schon selbst in einem Alter sind, wo diese Aussagen bald zutreffen könnten, oder Eltern haben, bei denen sie diese Notwendigkeit beobachten können. Man muss keine Menschen mit Behinderungen kennen, man braucht sich nur in der eigenen Familie oder Verwandtschaft umschauen!

Eine Agentur mit entsprechendem Know-How hätte das neue Online-Banking von vornherein barrierefrei gestalten können, und es hätte trotzdem „chic“ ausgesehen. Diese Agenturen gibt es in Deutschland. Hier wurde jedoch offensichtlich eine Agentur gewählt, die dieses Know-How entweder nicht besitzt oder die Wichtigkeit einer inklusiven Vorgehensweise nicht herausgestellt hat. Initial wäre das Angebot vielleicht etwas teurer geworden. Aber das, was da jetzt betrieben werden muss, ist auf lange Sicht teurer:

Entweder lässt man den barrierefreien Zugang unbegrenzt(!) weiterlaufen und muss so immer zwei Angebote auf dem aktuellen Stand halten.

Oder man muss die Barrierefreiheit jetzt per Flickschusterei nachrüsten, also eine des Projektes einleiten, um irgendwann den barrierefreien Zugang abschalten und die Phase 2 des neuen, dann barrierefreien Zugangs, ersetzen zu können. Eine Phase 2 kostet immer mehr Geld als eine inkludierende Vorgehensweise gekostet hätte.

Bis zum Tag diesses Relaunches war die Sparda-Bank ein Vorbild an Barrierefreiheit, von dem sich so manch andere Bank in Deutschland mindestens eine dicke Scheibe hätte abschneiden können. Unter anderem deshalb habe ich die Sparda auch zu meiner hausbank erklärt.

Ich fordere die Verantwortlichen hiermit auf, zu dieser Vorbildfunktion zurückzukehren und dieses Onlinebanking-Portal barrierefrei gestalten zu lassen. Denn noch muss ich davon ausgehen, dass der von mir oben zitierte Satz von der Startseite ernstzunehmen ist und der Classic-Zugang tatsächlich nicht ewig bestehen bleibt. Und in diesem Moment wären diverse Kunden von der Teilhabe am Geschäftsleben über die Sparda-Bank ausgeschlossen!

P.S.: Während ich diesen Artikel schrieb, erhielt ich eine Antwort vom Service-Team mit dem Link zum Classic-Banking. Im Gegensatz zur oben zitierten Startseite war hier, wie auch in der zitierten Twitter-Antwort, nicht die Rede von einerzeitlichen Begrenzung.

Kategorien
Zugänglichkeit

Die neue Browserauswahlfunktion für Windows berücksichtigt keine Aspekte der Barrierefreiheit!

Nachdem Microsoft von der Europäischen Union verurteilt wurde, den Anwendern eine Auswahl an Browsern zur Verfügung zu stellen, wird diese Funktion nun in diesen Tagen allen Anwendern von Windows Vista und Windows 7 per Update zur Verfügung gestellt werden. Diese neue Browserauswahl kann sich jedoch für Anwender assistiver Technologien zu einer bösen Falle entpuppen!

Die Seite stellt nämlich keinerlei Informationen zur Verfügung, welche Browser für Blinde und andere Gruppen von Behinderten überhaupt geeignet sind. So wird aus der Auswahl Internet Explorer, Firefox, Safari, Opera und Chrome nämlich eine Wahl zwischen genau ZWEI Browsern, Internet Explorer und Firefox, wenn es unter Windows um die Belange behinderter Menschen geht. Es gibt nicht mal versteckten Text, der nur für Anwender von Bildschirmleseprogrammen hörbar wäre, der auf diesen Umstand hinweisen würde.

Wenn jetzt also ein Anwender den einzigen Browser mit Turbo-Technologie, den innovativsten Browser der Welt oder den neuen Browser für alle installiert und diesen als Standardbrowser festlegt, wird er web-technisch im Dunkeln sitzen. Screen Reader und Vergrößerungsprogramme kommen mit diesen Browsern nicht zurecht, weil diese die erforderlichen Schnittstellen nicht unterstützen. Um diese Entscheidung wieder rückgängig zu machen, muss ein Browserfenster aufgerufen werden. Ohne sehende Hilfe ist dann in der Regel nichts mehr zu machen.

Ich habe mit dem Marketing-Team bei Mozilla zusammen eine Eingabe erarbeitet, damit dieser Punkt berücksichtigt wird. Andere Hersteller und die EU waren da offensichtlich anderer Meinung und haben der Nutzerschaft, die auf Barrierefreiheit angewiesen ist, somit einen Bärendienst erwiesen. Vielen Dank dafür! 🙁

Und hier die Bitte an alle Leser, diese Info an alle Betroffenen im Freundes- und Bekanntenkreis weiterzugeben! Diese verlinkte Seite wird in den nächsten Tagen auf vielen Rechnern aufgerufen werden, und es ist wichtig, sich hier nicht durch fehlende Hinweise selbst ein Bein zu stellen! Vielen Dank schon im Voraus für eure Mithilfe!

Kategorien
Zugänglichkeit

Die deutsche Bank hat relauncht — oh Gott!

Die Deutsche Bank hat ihre Webseite relauncht. Hier sind meine Beobachtungen von Anschauen nur der Hauptseite. Da ich kein Kunde bei diesem Kreditinstitut bin, kann ich Dinge wie das Online-Banking nicht testen. Aber allein der Eindruck der Startseite spricht Bände.

„Unsere vielen Sprungmarken gib uns heute“…Schon fast rekordverdächtig ist die Flut an Sprungmarken, die einen gleich am Anfang der Seite begrüßt. Sechs Stück sind es, und sie sind ausschließlich englischsprachig. Sie fangen alle mit „Jump to…“ an, und sie haben so aussagekräftige Namen wie „Meta Navigation„.

Es folgt: „Index“ link, „Index Grafik“, „Jahres-Pressekonferent am 4. Februar 2010 Grafik“. OK.

Es folgt eine Liste mit „Kontakt“, „Site Map“ usw., Aha, das ist dann wohl die „Meta Navigation“.

„/de/img/tran_pxl.gif Schalter“. Aaaah ja.

„Eingabefeld Volltextsuche“ OK.

Es folgen dann noch diverse Listen mit verschiedenen Möglichkeiten sich über Privatkunden, Private Banking, Geschäftskunden, Jobs o. ä. zu informieren.

Es gibt einen Impressumsbereich. Es gibt einen Link zu „Accessibility„. Es gibt jede Menge Kurztasten.

Und es gibt sogar einen Hauptteil, wie die eine Sprungmarke am Seitenanfang vermuten lässt. Hineingeklatscht zwischen zwei navigationslisten eine Abfolge von Links, nicht strukturiert, von Pressemitteilungen. OK, kann man so machen…

Ganz am Ende findet sich sogar noch die Möglichkeit einer Kontraständerung. Da ich das nicht überprüfen kann, hab ich’s mal nicht ausprobiert.

Es gibt auf dieser Startseite keinen einzigen(!) heading-Tag.

Ich habe mich dann mal getraut und den Link „Privatkunden“ angeklickt.

Es gibt Überschriften! Sogar mehrere, und Unterüberschriften mit niedrigerer Ordnungsebene als die darüber liegenden Abschnitte! Und alle so: Yeah! 🙂

Und es gibt so etwas hier in verschiedener Form: „Link grafik pk-kredit_finanzierung-privatkredit link=pk-index-privatkredit-pbc1400b-pbcde-to-pk-kredit_finanzierung-privatkredit&WT.mc_id=1400&mc_wm=b&mc_wp=90“. Vielen Dank für das Gespräch!

Auf dieser Seite gibt es dann auch tatsächlich mehrere Formularfelder mit sogar richtig beschrifteten Schaltern.

Fazit: Dieser Relaunch ist eine ausgesprochene Peinlichkeit! Dass es im Jahr 2010 in Deutschland noch möglich ist, einen solchen Relaunch mit so offensichtlichen Fehlern in der Barrierefreiheit hinzulegen, ist unter aller Würde und durch NICHTS zu rechtfertigen! Und hier sind eventuelle Probleme für Sehbehinderte noch gar nicht berücksichtigt, und den Quellcode der Seite habe ich mir auch nur flüchtig angeschaut. Es wird zumindest nicht mit Layouttabellen gearbeitet.

Die Deutsche Bank hat im vergangenen Jahr einen Gewinn vor Steuern von 5 milliarden Euro erzielt. Einige Tausend Euro weniger Gewinn hätten dem Webseiten-Relaunch mit Sicherheit nicht geschadet, indem nämlich eine Agentur damit beauftragt worden wäre, die sich damit auskennt.

Setzen: 6!

Kategorien
Zugänglichkeit

HTML-Elemente in einem Dokument richtig zu plazieren ist wichtig!

Ich bekam heute eine Frage zur Barrierefreiheit bestimmter dynamischer Inhalte gestellt, die mich zu diesem Blogeintrag veranlasst hat.

Beim Anzeigen und Verstecken dynamischer Inhalte gibt es zwei gängige Prinzipien, die sich herauskristallisiert haben: Der eine Ansatz ist, den Inhalt direkt dort in das Dokument einzufügen, wo sich der Auslöser für die Veränderung befindet. Ein Beispiel hierfür ist die englischsprachige Careers-Seite von Mozilla. Das Klicken auf einen der Links „Meet Mozilla“, „The Team“, „Life at Mozilla“ bewirkt, dass der Text zu dem jeweiligen Thema den vorherigen Text ersetzt.

Ein weiterer Ansatz ist, den neuen Inhalt einfach ans Ende des document-Elements anzuhängen und dann mit Hilfe von CSS einen Overlay-Effekt oder eine Positionierung, die optisch korrekt ist, zu erreichen. Ein Beispiel hierfür ist die Demo der jQuery Thickbox. Das Klicken auf eine der Demos wie Image, Gallery oder Keep In Mind bewirkt, dass das Bild oder der Text ans Ende des Dokuments, wahrscheinlich durch eine document.addXxx-Methode, angehängt wird.

Optisch unterscheiden sich diese Beispiele vielleicht ein bisschen im Styling, aber das Prinzip ist dasselbe: Du klickst auf etwas, und ein neues Bild oder Text erscheinen und ersetzen ggf. anderen Inhalt. Die Seite wird hierbei jedoch nicht neu geladen.

Für den Anwender eines Bildschirmleseprogrammes macht die Wahl einer der beiden Methoden jedoch einen gravierenden Unterschied. Damit ein Screen Reader einem blinden Anwender eine Webseite vorlesen kann, muss ein Durchlaufen einer Hierarchie von zugänglichen Objekten oder des Dokumentenobjektmodells, oder in manchen Fällen sogar eine Analyse des HTML-Quellcodes selbst, stattfinden. CSS wird dann herangezogen, um festzustellen, ob bestimmte Elemente sichtbar sind, als Block o. ä. formatiert werden, und welche Textformatierungen vorliegen. Positionierungsinformationen stehen jedoch immer der Reihenfolge im tatsächlichen HTML-Quellcode nach, egal ob dieser schon vorcodiert ist oder durch JavaScript erzeugt wird.

Um es noch anders auszudrücken: Sogar ein dreispaltiges Seitenlayout erscheint dem Anwender eines Screen Readers als einspaltiges Dokument von oben nach unten. Die Spalten werden aufgelöst und der Reihenfolge entsprechend formatiert.

In der Konsequenz bedeutet dies, dass im zweiten Beispiel der neue Inhalt grundsätzlich am Ende erscheint. Unter Windows ist dies das Ende des virtuellen Puffers. Unter Linux und Mac ist dies das letzte, was in einem HTML-Dokument angezeigt wird. Man muss also zum Ende des Dokuments springen bzw. mit Orca unter Linux zum letzten Element navigieren oder unter Mac OS mit VoiceOver zum letzten Element des HTML-Inhalts, mit dem man gerade interagiert, springen. Dies gilt für alle Plattformen und Browser (Firefox, IE, Safari).

Um nun also den Inhalt der Thickbox lesen zu können, löst man erst die Demo aus, navigiert mit seinem Screen Reader dann ganz ans Ende, guckt, was es dort zu sehen gibt und kehrt dann zum Anfang der Seite zurück, um mit Navigationsmethoden wie dem Springen von Überschrift zu Überschrift wieder dorthin zu gelangen, wo man ursprünglich angefangen hat mit dem Auslösen der Demo. Dies ist weder besonders effizient noch besonders intuitiv.

Dasselbe kann man auf Facebook beobachten: Wenn man einen Freund hinzufügt, erscheint die Abfrage, ob man die Anfrage wirklich versenden möchte, für den Screen-Reader-Anwender ganz am Ende der Seite. Optisch erscheint die Abfrage jedoch in der Nähe des „Als Freund hinzufügen“-Schalters.

Im Mozilla-Beispiel jedoch wird der neue Inhalt gleich unterhalb der Liste der Auswahlmöglichkeiten angezeigt, also in der Umgebung, in der der Anwender eh gerade arbeitet. Es ist so also problemlos möglich, von „Meet Mozilla“ zu „Team“ usw. zu gelangen. Die Navigation ist intuitiv und effizient.

Wenn ihr also dynamische Inhalte erzeugt, ein Accordeon-Widget programmiert usw., helft Anwendern von Screen Readern bitte bitte bitte, indem ihr ein Element wählt, das sich in der Umgebung der Action befindet und fügt die neuen Inhalte dort ein, anstatt die Inhalte einfach ans Ende des Dokuments anzuhängen oder sie von dort zu entfernen. Ihr werdet Screen-Reader-Anwendern ein sehr viel effizienteres Navigieren auf euren Seiten ermöglichen, indem ihr nicht von ihnen verlangt, zwischen Teilen der Seite hin- und herzunavigieren, die weit voneinander entfernt liegen.