Den Screenreader beherrschen: Zugängliche Websites sind nur der eine Teil

Die Zugänglichkeit von Internetseiten zu bewerten, ist eine jener Arbeiten, die man eigentlich niemandem recht machen kann. Viele Webdesigner halten unsere strengen Testkriterien oft für übertrieben. Insbesondere dann, wenn wir die Zugänglichkeit von Websites zertifizieren, kommt es darum zu langfädigen Diskussionen um Checkpunkte und deren tatsächlicher Wichtigkeit.
Person benutzt Tastatur eines Laptops

Doch nicht selten kommt Kritik auch von Seiten der Menschen mit Behinderungen, in deren Auftrag wir ja gewissermassen tätig sind. «Das Webportal der Schweizerischen Post sei zugänglich? Ist ja gar nicht wahr!» bekamen wir in letzter Zeit etwa zu hören. Interessant ist die Begründung solcher Aussagen. Nicht selten kommt es vor, dass blinde Anwender von Screenreadern an zugänglichen Webseiten genau jene Punkte bemängeln, für die wir uns im Verlaufe des Zertifizierungsvorganges einsetzen. Eine zugängliche Website zeichnet sich dadurch aus, dass sie klar und korrekt strukturiert ist. Ist dies der Fall, würde Menschen mit Behinderungen eigentlich die Navigation auf der Seite vereinfacht. Voraussetzung dafür ist jedoch, dass die behinderte Person ihr Hilfsmittel beherrscht und versteht. Dieses liefert nämlich beim Lesen zugänglicher Websites eine ganze Menge von Zusatzinformationen, welche in der Tat etwas verwirrend scheinen können. Vielen Screenreader-Anwendern fehlt in diesem Bereich ein gewisses Grundwissen. Gehören Sie dazu? Dann ist diese Sammlung an Tipps möglicherweise für Sie!

Wie wir arbeiten: Eine Fläche auf einer Zeile

Wenn eine «sehende» Person eine Internetseite anschaut, liesst sie in den meisten Fällen die Seite nicht einfach von oben nach unten durch. Vielmehr scannt sie zunächst den Bildschirm und bleibt beim «wichtigen» Teil hängen – da, wo etwas gross und fett gedruckt ist. Gleichzeitig verschafft sie sich bereits einen Überblick über die Struktur der Seite, sieht etwa, wo sich das Hauptmenü oder die Auswahl der verfügbaren Seitensprachen befindet. All dies passiert unbegreiflich schnell – quasi in einem Blick.

Ein Screenreader hingegen liefert nach Öffnen einer Internetseite oft nur einen kurzen Überblick über die Struktur. Er sagt etwa an, aus wie vielen Überschriften, Links, Frames und Formularfeldern das Dokument besteht. Danach wird der Cursor in der Regel aber schlicht auf die erste Zeile der Seite gesetzt. Und wer nun sein Hilfsmittel nicht beherrscht, wird sich Zeile für Zeile durch sämtliche Navigations- und Inhaltsblöcke und auch durch jede neu geladene Seite arbeiten müssen, um langsam die Struktur zu verstehen… Wenn dann der Screenreader noch Elemente wie Tabellen, Überschriften oder Listen einzeln ansagt, wird klar, warum unsere zertifizierten und extra mit solchen Informationen versehenen Seiten nicht als «Zugänglich» empfunden werden: Wer einige einfache aber oft vergessene Screenreader-Tricks nicht kennt, sieht sich hier einem unverständlichen, unübersichtlichen Mix aus Struktur und Inhalt gegenüber.

Diese korrekt eingebundenen Strukturinformationen werden von Screenreadern nämlich nicht nur angesagt. Sie können auf Wunsch auch aufgelistet, an- oder übersprungen werden. Im Falle des eben erwähnten Beispiels bedeutet dies, dass auch ein Screenreader-Anwender, ähnlich der sehenden Person, eine Seite gezielt nach Überschriften durchsuchen kann. Und da Überschriften oft verwendet werden, um die Seite in Haupt- und Unterabschnitte einzuteilen, ergibt sich so auch die Möglichkeit, schnell einen klaren Überblick über die Seitenstruktur zu erhalten. Natürlich ersetzt eine «Überschriftenliste» nicht den «einen Blick» der sehenden Person. Sie ist aber, wie wir meinen, das Werkzeug, welches dem raschen Überblicken am nächsten kommt; es ist unsere Methode, die Fläche, auf welcher eine sehende Person die Website sieht, auf die Zeile zu bringen, welche die Navigationseinheit des blinden Computer-Users ist.

Komplexe Menüs verstehen: Die List mit den Listen

Manchmal werden aber auch schon einzelne Blöcke innerhalb einer Seite zur Überforderung. Besonders schwierig gestaltet sich etwa das Verstehen der Navigationsbereiche. Diese bestehen oft aus mehreren Auswahl-Listen (Haupt- und Untermenüs, Werkzeugleisten, Spracheinstellungen etc.). Manche der Menüs erstrecken sich über mehrere Ebenen – Haupt- und Untermenüs werden also ineinander verschachtelt. Wiederum haben jene, die eine Internetseite mit Augen betrachten, den Vorteil, auf einen Blick zu erkennen, wie die Navigation aufgebaut ist; und bei verschachtelten Menüs kann einfach die Ebenenstruktur erkannt werden.

Screenreader-Anwender haben in solchen Fällen die Möglichkeit, Listen (oder Listeneinträge) gezielt anzuspringen. Der Screenreader informiert über Listenverschachtelungen. Und er schafft die Möglichkeit, einzelne Verschachtelungsebenen auf knopfdruck zu Verlassen oder die gesamte Liste zu überspringen. Um dies zu können, müssen wiederum nur einige Screenreader-Funktionen bekannt sein.

Links und Nicht-Links: Die einfache Einteilung, wenn alles andere nicht geht

Also so und ähnlich können zugängliche Websites mit Screenreadern gelesen werden. Wem das nun bereits zu kompliziert war, oder wer – wie wir – auch heute noch vorwiegend auf nicht korrekt strukturierten Internetseiten surft, sollte auf jeden Fall die Linkfunktionen kennen: Die meisten Screenreader erstellen auf Tastendruck eine einfache Auflistung aller auf einer Seite befindlichen Links; oder sie helfen, noch nicht besuchte Links auf einer Seite zu finden, respektive zu einem bereits besuchten Link zurückzukehren.

Nützlich finden wir aber auch die gegenteilige Funktion: Viele Screenreader erlauben, Links gezielt zu überspringen und auf einer Internetseite diejenigen Abschnitte zu finden, welche keine Links enthalten. Vielfach lässt sich auf diese Weise der Anfang des Seitentextes finden und die Navigation überspringen.
Ach ja: Und wenn auch dann der gewünschte Seitenabschnitt nicht leicht auffindbar ist, gibt es in der Regel eine vom Screenreader bereitgestellte Suchfunktion. Hier wird einfach ein mögliches Schlagwort eingegeben, nach welchem dann der ganze Seiteninhalt durchsucht wird.

Den Arbeitsweg lernen: Wissen, wo man ist und wo man hin will

All dies, einschliesslich der später aufgeführten Tabelle, klingt in der Theorie etwas verwirrend. Es kann helfen, sich das Surfen im Internet bildlich vorzustellen, etwa ähnlich eines Ausfluges in die Stadt: Eine Stadt bietet eine navigierbare Struktur, besteht aus mehr oder weniger zugänglichen Elementen, die sich bemerkbar machen (sie klingen, riechen oder blockieren den Fussweg). Eine Person, ob blind oder sehend spielt gar keine Rolle, kann sich entweder über den Lärm, den Gestank oder die vielen Hindernisse aufregen; oder sie kann lernen, mit den Elementen zu arbeiten, sich an ihnen zu orientieren und so den persönlichen Arbeitsweg zu finden.

Genau so können jene unter Ihnen, welche mit Screenreadern arbeiten, sich mit den Elementen auf einer HTML-Seite vertraut machen, sich an ihnen orientieren und wichtige Seitenabschnitte gezielt finden lernen. Hören Sie genau hin, wenn Ihnen der Screenreader mitteilt, wo sich welche Überschrift, Liste oder Tabelle befindet. Wenn Sie sich bei Ihren Ausflügen (in der Stadt oder im Internet) immer klar sind, wo Sie sind und wo Sie hin wollen, werden Sie staunen, wie leichter Ihnen die Orientierung fällt. Versuchen Sie, bewusst auf die Zeilen-Navigation zu verzichten und entdecken Sie die übrigen Orientierungsmöglichkeiten. Etwa so:

Beispiel 1: Der SBB-Fahrplan

Auf sbb.ch lässt sich das Abfrage-Formular für Zugsverbindungen ganz einfach ausfüllen. Die Resultate-Seite mit den möglichen Verbindungen präsentiert sich einem Screenreader-Neuling zunächst etwas verwirrend – kein Wunder: Die Seite besteht aus oft mehr als «150 Links, zwei Frames und keinen Überschriften» (von «Zugänglichkeit» kann hier kaum die Rede sein).
Der Trick dieser Seite ist nun, mit Tabellen zu arbeiten. Diese finden sich nämlich reichlich auf der Seite und sie sind meistens so gestaltet, dass ein Blinden-Hilfsmittel gut darauf zugreifen kann. In der ersten Tabelle wird die Suchabfrage zusammen gefasst. Die zweite Tabelle enthält die Übersicht über die der Anfrage am ehesten entsprechenden Verbindungen. Und schliesslich folgen, schön in einzelne Tabellen aufgeteilt, die einzelnen Verbindungen im Detail… Nun muss man noch erwähnen, dass sich auch Tabellen sehr einfach an- und überspringen lassen – und schon haben wir, trotz vieler Barrieren, eine Möglichkeit, mit oft nur zwei Tastaturbefehlen direkt zu Verbindungsübersicht und -Details zu gelangen.

Beispiel 2: Die Facebook Pinwand finden

Facebook, das populäre soziale Netzwerk, bietet auch heute noch eine Internetseite, welche in Sachen unzugänglichkeit und Barrieren fast alle Register zieht. Das Textchen zum Weißen Hai schon gelesen?… Immerhin finden sich auf Facebook doch hie und da einige nützliche HTML-Elemente, die wir als Navigationshilfen einsetzen können. Wenn ich so schnell wie möglich zu meiner persönlichen Pinwand (leider nur für meine Freunde sichtbar) gelangen will, mache ich folgendes:

  • Auf der Startseite springe ich zur ERSTEN Liste und wähle dort den dritten Eintrag (Link «Profil») aus – oft kann ich diesen auch direkt, durch das Finden des ersten Besuchten Links in der Liste, anspringen.
  • Auf der nun folgenden Seite springe ich zur ersten korrekt gekennzeichneten Überschrift («Informationen»).
  • Von hier aus springe ich mit dem Screenreader zum nächsten Schalter (dem Button «Posten», welcher den Status aktualisiert).
  • Und wenn ich nun nach dem ersten grösseren NICHT verlinkten Block auf einer Seite suche, springt der Fokus meistens zum ersten Beitrag der Pinwand.

Screenreader-Nutzer: Klappt das bei Ihnen?

Es bedarf also ungefähr sieben Tasten-Anschlägen, um von der Startseite zur Pinwand zu gelangen. Der Weg dahin ist offensichtlich etwas seltsam. Würde das Facebook-Team dem Thema Web-Accessibility etwas mehr Aufmerkwsamkeit schenken, liesse sich die Navigation wohl logischer gestalten.

Und So fangen Sie an

Die Auswahl an Screenreadern ist riesig, genau so wie die Tastenkombinationen, mit welchen sie bedient werden. Die folgenden Tastenbefehle stehen im bei uns meist verwendeten Screenreader, JAWS For Windows zur Verfügung. Die meisten funktionieren aber auch in System Access und Orca, wo sie sich übrigens auch individuell anpassen lassen.

Elemente anspringen

Wichtig: Drücken Sie eine der Tasten gemeinsam mit SHIFT, springt der Fokus nicht zum nächsten, sondern zum vorhergehenden jeweiligen Element.

Buchstabe Steht für Springt zum Element HTML-Tag
U unvisited Nicht besuchter Link a
V visited Besuchter Link a (visited)
N Not linked Nicht verlinktem Bereich (quasi alles, ausser A)
H Heading Überschrift h1 bis h6
L List Liste ul und ol
I Item Listeneintrag li
T Table Tabelle table
B Button Schalter / Knopf in Formularen input type=»submit»

Elemente auflisten

Tastenkombination Listet die Elemente auf HTML-Tag
INSERT + F7 Links a
INSERT + F6 Überschriften h1 bis h6
INSERT + CTRL + T Tabellen table

Und hören Sie nicht mehr auf!

… Und dies ist nur eine sehr kleine Übersicht darüber, wie Sie mit einem Screenreader besser im Internet navigieren. Es sind Tricks, welche ich im Alltag nutze und schätze. Ich empfehle Ihnen, die Dokumentation Ihres Screenreaders nach einer Liste der für Ihr Produkt verfügbaren Navigationstasten zu durchforsten und sich dann all jene anzugewöhnen, die für Ihre Arbeit nützlich sind.

Wenn Sie meiner Liste von Kurztasten noch etwas beifügen möchten, schreiben Sie Ihr Feedback unten in den Kommentar-Bereich! Und falls Sie auf Ihrem Ausflug durch die Elemente und Strukturen des Internets auf einen spannenden «Arbeitsweg» stossen, teilen Sie uns doch auch diesen mit!

5 Kommentare zu “Den Screenreader beherrschen: Zugängliche Websites sind nur der eine Teil

  1. Guter Artikel. Ich selber bin zwar etwas sehbehindert, aber nicht blind. Daher fällt es mir schwer, mich in die Welt eines Blinden hineinzudenken. Der Artikel hilft da einen Schritt weiter.

  2. Hallo
    Als jemand der den Bildschirm nur als hellen Fleck wahrnimmt, also ohne screenreader komplett aufgeschmissen ist, weiß ich sehr genau was gemeint ist. Ich würde das ganze noch ergänzen wollen, und sagen, dass man nicht nur seinen Screenreader sondern auch seinen Browswer kennen sollte, bzw. welche Möglichkeiten er bietet, um den Arbeitsweg zu erleichtern. So ist z.B. das addon adblock plus für Firefox, (ich weiß leider nicht ob es so etwas auch für den Internetexplorer gibt), ein prima Baustellenwegräumer, da es Werbeanzeigen und ähnliche Sachen ausblendet. Das sorgt oft genug dafür, dass Webseiten nur noch halb so verwirrend sind.
    Gruß Günni

  3. Hallo, ich fand den Artikel eigentlich gut aber das mit dem Internett und jaws wird manchmal ein bisschen übertrieben. Sicher, es ist alles andere als einfach aber auch sehende Menschen tun sich mit dem Netz schwer. Ich gehöre vielleicht zu jenen die man als rudimentär bezeichnen könnte weil ich finde, man sollte sich die Seite einmal vorlesen lassen damit man einen überblick gewinnt dann sind da all die tollen Tastenkombinationen die uns die Navigation erleichtern. Die drei Wichtigsten wurden nicht erwähnt: ins+1 schaltet die Navigation aus und dann sagt der screamreader was die jeweils gedrückte Taste oder Tastenkombination tut und dann ins+h oder w (ich spreche von jaws) listet eine Anzahl nützlicher Tastenkombinationen auf die man im jeweiligen Programm oder im Netz brauchen kann. Selbsthilfe ist immer gut! Nun noch was was mich wirklich manchmal stresst: In vielen formularfeldern wird dessen Titel nicht angesagt oder manchmal auch verschoben … da muss man dann ausprobieren à gogo. Und kürzlich wollte ich in «leshop» was kaufen. Hat alles sehr gut geklappt und dann habe ich mich angemeldet. Da stand dann: «sie müssen die rot markierten Felder korrigieren oder ändern» … leider habe ich nicht herausbekommen wie ich jaws dazu bringe mir die Farbe anzusagen und dann wird dann noch zwischen Hintergrund und Vordergrund unterschieden. Da meine Braillezeile momentan streikt, kann ich nicht auf diese zurückgreifen. gut, ich bin wohll ein bisschen redsehlig aber egal. Viel Spass beim surfen und einfach nie aufgeben! Grüsse Alexander P.S. Wer was weis wegen den Farben der soll doch auch schreiben.

  4. @Anonymous,
    Vielen Dank für’s Feedback zum Text. Die Problematik mit den Formularen treffen wir bei unserer Arbeit häufig an. Thematisch sind wir dann wieder beim «einen Teil», bei den Accessibility-Mängeln, mit denen sich viele der anderen Artikel unseres Blogs befassen. Als Work Around fürs Leshop formular können Sie unter JAWS versuchen, den JAWS-Cursor auf die Beschriftung eines Formularfeldes zu setzen und dann mit INS + 5 dessen Farbe zu erfahren. Zwar erkannte JAWS in meinem Versuch die Farben der fehlenden Formularfelder nicht als «Orange», aber immerhin als «Schokolade1 Auf Hellgoldrutengelb». Viel Erfolg beim Ausfüllen!

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verarbeitet werden .