Sie sind hier: Start > Blog > Übersetzung von »WCAG 2.0 verstehen«: Fokus-Reihenfolge – Erfolgskriterium 2.4.3 verstehen

accessBlog

Aktuelles zum Thema Barrierefreies Webdesign.

2.4.3 Fokus-Reihenfolge: Wenn eine Webseite der Reihe nach navigiert werden kann und die Reihenfolge der Navigation die Bedeutung oder Bedienung beeinflusst, erhalten fokussierbare Komponenten den Fokus in einer Reihenfolge, der Bedeutung und Bedienbarkeit aufrecht erhält. (Stufe A)

Die Absicht dieses Erfolgskriteriums ist es sicherzustellen, dass Benutzer, wenn sie sequentiell durch Inhalt navigieren, Informationen in einer Reihenfolge antreffen, die konsistent mit der Bedeutung des Inhalts ist und die von der Tastatur aus bedient werden können. Damit wird Verwirrung reduziert, indem man es ermöglicht, dass Benutzer ein konsistentes mentales Modell des Inhalts entwickeln. Es kann unterschiedliche Reihenfolgen geben, welche die logischen Beziehungen im Inhalt reflektieren. Wenn man sich zum Beispiel durch die Komponenten einer Tabelle Zeile für Zeile oder Spalte für Spalte bewegt, so spiegelt beides die logischen Beziehungen im Inhalt wider. Jede der beiden Reihenfolgen kann dieses Erfolgskriterium möglicherweise erfüllen.

Weiterlesen …

Die Art und Weise, wie die sequentielle Navigationsreihenfolge im Webinhalt bestimmt wird, wird durch die Technik des Inhalts definiert. Einfaches HTML zum Beispiel definiert die sequentielle Navigation über die Vorstellung der Tabreihenfolge. Dynamisches HTML kann die Navigationssequenz möglicherweise verändern, indem Scripting zusammen mit dem Hinzufügen eines Tabindex-Attributs benutzt wird, um den Fokus auf zusätzlichen Elementen zu erlauben. Wenn kein Scripting oder keine Tabindex-Attribute benutzt werden, dann ist die Navigationsreihenfolge die Reihenfolge, in der die Komponenten im Inhalts-Stream erscheinen. (Siehe HTML 4.01-Spezifikation, Abschnitt 17.11, „Giving focus to an element“).

Ein Beispiel für eine Tastaturnavigation, bei der es sich nicht um die in diesem Erfolgskriterium thematisierte sequentielle Navigation handelt, ist die Benutzung einer Navigation per Pfeiltasten, um eine Baumkomponente zu durchqueren. Der Benutzer kann die Hoch- und Runter-Pfeile benutzen, um sich von Baumknoten (tree node) zu Baumknoten zu bewegen. Das Drücken der Pfeiltaste nach links kann möglicherweise einen Knoten ausklappen, dann wird man durch die Pfeiltaste nach unten in den neu ausgeklappten Knoten bewegt. Diese Navigationssequenz folgt der erwarteten Sequenz für eine Baumsteuerung - sobald zusätzliche Elemente aus- oder eingeklappt werden, werden sie zu der Navigationssequenz hinzugefügt oder entfernt.

Die Fokus-Reihenfolge muss nicht identisch mit der durch Software bestimmten Lese-Reihenfolge sein (siehe Erfolgskriterium 1.3.2), sofern der Benutzer nach wie vor die Webseite verstehen und bedienen kann. Da es mehrere mögliche, logische Lese-Reihenfolgen für den Inhalt geben kann, kann die Fokus-Reihenfolge einer beliebigen entsprechen. Wenn sich allerdings die Reihenfolge einer bestimmten Präsentation von der durch Software bestimmten Lese-Reihenfolge unterscheidet, dann könnten es Benutzer einer dieser Präsentation schwierig finden, die Webseite zu verstehen oder zu bedienen. Autoren sollten all diese Benutzer beim Design ihrer Webseiten sorgfältig in Betracht ziehen.

Ein Screenreader-Benutzer interagiert zum Beispiel mit der durch Software bestimmten Lese-Reihenfolge während ein sehender Tastaturbenutzer mit der visuellem Präsentation der Webseite interagiert. Es sollte darauf geachtet werden, dass die Fokus-Reihenfolge für beide Benutzergruppen einen Sinn ergibt und es keiner von beiden so erscheint, als würde diese willkürlich umher springen.

Von diese Techniken profitieren Tastaturbenutzer, die Dokumente sequentiell navigieren und erwarten, dass die Fokus-Reihenfolge mit der sequentiellen Lese-Reihenfolge übereinstimmt.

  • Menschen mit Mobilitäts-Einschränkungen, die auf einen Zugriff per Tastatur angewiesen sind, um eine Seite zu bedienen, profitieren von einer logischen, benutzbaren Fokus-Reihenfolge.

  • Menschen mit Behinderungen, die das Lesen erschweren, können die Orientierung verlieren, wenn das Tabben den Fokus an eine unerwartete Stelle setzt. Sie profitieren von einer logischen Fokus-Reihenfolge.

  • Menschen mit visuellen Einschränkungen können die Orientierung verlieren, wenn das Tabben den Fokus an eine unerwartete Stelle setzt oder wenn sie den Inhalt, der ein interaktives Element umgibt, nicht leicht finden können.

  • Für ein Individuum, das eine Vergrößerungssoftware mit einem hohen Grad an Vergrößerung benutzt, ist möglicherweise nur ein kleiner Teil der Seite sichtbar. Ein solcher Benutzer kann unter Umständen ein Feld im falschen Kontext interpretieren, wenn die Fokus-Reihenfolge nicht logisch ist.

(derzeit keine dokumentiert)

  1. Die Art und Weise, wie die sequentielle Navigationsreihenfolge im Webinhalt bestimmt wird, wird durch die Technik des Inhalts definiert. Einfaches HTML zum Beispiel definiert die sequentielle Navigation über die Vorstellung der Tabreihenfolge. Dynamisches HTML kann die Navigationssequenz möglicherweise verändern, indem Scripting zusammen mit dem Hinzufügen eines Tabindex-Attributs benutzt wird, um den Fokus auf zusätzlichen Elementen zu erlauben. In diesem Fall sollte die Navigation den Beziehungen und Sequenzen im Inhalt folgen. Wenn kein Scripting oder keine Tabindex-Attribute benutzt werden, dann ist die Navigationsreihenfolge die Reihenfolge, in der die Komponenten im Inhalts-Stream erscheinen. (Siehe HTML 4.01-Spezifikation, Abschnitt 17.11, „Giving focus to an element“).

  2. Benutzung einer Navigation per Pfeiltasten, um eine Baumkomponente zu durchqueren. Der Benutzer kann die Hoch- und Runter-Pfeile benutzen, um sich von Baumknoten (tree node) zu Baumknoten zu bewegen. Das Drücken der Pfeiltaste nach links kann möglicherweise einen Knoten ausklappen, dann wird man durch die Pfeiltaste nach unten in den neu ausgeklappten Knoten bewegt. Diese Navigationssequenz folgt der erwarteten Sequenz für eine Baumsteuerung - sobald zusätzliche Elemente aus- oder eingeklappt werden, werden sie zu der Navigationssequenz hinzugefügt oder entfernt.

  3. Eine Webseite implementiert nichtmodale Dialoge per Scripting. Wenn die auslösende Schaltfläche aktiviert wird, öffnet sich ein Dialog. Die interaktiven Elemente im Dialog werden sofort nach der Schaltfläche in die Fokus-Reihenfolge eingefügt. Wenn der Dialog geöffnet ist, geht die Fokus-Reihenfolge von der Schaltfläche zu den Elementen des Dialogs und dann zu dem interaktiven Element, das auf die Schaltfläche folgt. Wenn der Dialog geschlossen wird, geht die Fokus-Reihenfolge von der Schaltfläche zu dem darauf folgenden Element.

  4. Eine Webseite implementiert modale Dialoge per Scripting. Wenn die auslösende Schaltfläche aktiviert wird, öffnet sich ein Dialog der Fokus wird auf das erste interaktive Element in dem Dialog gesetzt. So lange der Dialog offen ist, ist der Fokus auf die Elemente des Dialogs beschränkt. Wenn der Dialog beendet wird, kehrt der Fokus zu der Schaltfläche oder zu dem Element, das auf die Schaltfläche folgt, zurück.

  5. Eine HTML-Webseite ist so gestaltet, dass die linksseitige Navigation im HTML nach dem Hauptteil des Inhalts erscheint und sie ist so mit CSS gestaltet, dass sie auf der linken Seite der Seite erscheint. Dies wird gemacht um zu ermöglichen, dass sich der Fokus erst zum Hauptteil des Inhalts bewegt, ohne dass tabIndex-Attribute oder JavaScript benötigt werden.

    Anmerkung: Auch wenn dieses Beispiel das Erfolgskriterium besteht, heißt das nicht notwendigerweise, dass jegliche Positionierung per CSS dies tun würde. Es kann sein, dass komplexere Positionierungs-Beispiele die Bedeutung und Bedienbarkeit unter Umständen erhalten oder auch nicht

  6. Das folgende Beispiel erfüllt das Erfolgskriterium nicht:

    Die Website einer Firma enthält ein Formular, das Marketing-Daten sammelt und es Benutzern erlaubt, verschiedene von der Firma veröffentlichte Newsletter zu abonnieren. Der Bereich des Formulars zur Sammlung von Marketing-Daten enthält Felder wie Name, Straße, PLZ, Ort und Bundesstaat oder Provinz. Ein anderer Bereich des Formulars enthält verschiedene Kontrollkästchen, so dass Benutzer die Newsletter, die sie erhalten möchten, kennzeichnen können. Die Tab-Reihenfolge für das Formular springt allerdings zwischen Feldern in unterschiedlichen Bereichen des Formulars hin und her, so dass sich der Fokus vom Namensfeld zu einem Kontrollkästchen, dann zur Straße und dann zu einem anderen Kontrollkästchen bewegt.

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

(derzeit keine dokumentiert)

Jeder nummerierte Punkt in diesem Abschnitt repräsentiert eine Technik oder eine Kombination von Techniken, welche die WCAG-Arbeitsgruppe für ausreichend zur Erfüllung dieses Erfolgskriterium hält. Die aufgelisteten Techniken erfüllen das Erfolgskriterium nur dann, wenn alle WCAG 2.0 Konformitätsbedingungen erfüllt wurden.

  1. G59: Platzierung der interaktiven Elemente in einer Reihenfolge, die sich nach Abfolgen und Beziehungen innerhalb des Inhalts richtet

  2. Übertragung des Fokus auf Elemente in einer Reihenfolge, die sich nach Abfolgen und Beziehungen innerhalb des Inhalts richtet, indem eine der folgenden Techniken benutzt wird:

  3. Dynamische Änderung einer Website, indem eine der folgenden Techniken benutzt wird:

Obwohl sie für die Konformität nicht erforderlich sind, so sollten die folgenden zusätzlichen Techniken dennoch in Betracht gezogen werden, um den Inhalt barrierefreier zu machen. Nicht alle Techniken können in allen Situationen benutzt werden oder wären in allen Situationen effektiv.

  • Bereitstellung eines deutlich erkennbaren Mechanismus zur Hervorhebung von Links oder Steuerelemente, wenn sie den Tastaturfokus bekommen (zukünftiger Link)

  • Erstellung alternativer Reihenfolgen zur Darstellung (zukünftiger Link)

Im Folgenden finden Sie verbreitete Fehler, die von der WCAG-Arbeitsgruppe als Scheitern an Erfolgskriterium 2.4.3 betrachtet werden.

Webseite

Eine nicht-eingebettete Ressource abgerufen von einem einzelnen URI unter der Benutzung von HTTP plus jeder anderen Ressource, die beim Rendern benutzt wird oder die dazu bestimmt ist, mit der Ursprungs-Ressource zusammen durch einen Benutzeragenten gerendert zu werden.

Anmerkung 1: Obwohl jede „andere Ressource“ zusammen mit der ursprünglichen Ressource gerendert würde, würden sie nicht zwangsläufig zeitgleich miteinander gerendert werden.

Anmerkung 2: Zum Zweck der Konformität mit diesen Richtlinien muss eine Ressource „nicht eingebettet“ innerhalb des Geltungsbereichs der Konformität sein, um als Webseite zu gelten.

Beispiel 1: Eine Web-Ressource, die alle eingebetteten Bilder und Medien beinhaltet.

Beispiel 2: Eine Web-Mail-Anwendung, die unter der Benutzung von Asynchronem JavaScript und XML (AJAX) entwickelt wurde. Das Programm liegt komplett unter http://example.com/mail, beinhaltet aber einen Posteingang, einen Kontaktbereich und einen Kalender. Es werden Links oder Schaltflächen bereitgestellt, die dazu führen, dass der Posteingang, die Kontakte oder der Kalender angezeigt werden, die aber nicht den URI der Seite als Ganzes verändern.

Beispiel 3: Eine anpassbare Portalseite, auf der Benutzer den anzuzeigenden Inhalt aus einer Gruppe verschiedener Inhaltsmodule auswählen können.

Beispiel 4: Wenn Sie in Ihrem Browser „http://shopping.example.com/“ eingeben, dann kommen Sie zu einer film-ähnlichen, interaktiven Einkaufsumgebung, in der Sie visuell in einem Geschäft herumgehen und Produkte aus den Regalen um Sie herum nehmen und in einen visuellen Einkaufswagen vor Ihnen legen können. Das Klicken auf ein Produkt führt dazu, dass es zusammen mit einem Datenblatt vorgestellt wird, das daneben schwebt. Dies kann eine einseitige Website sein oder einfach nur eine Seite innerhalb einer Website.

Der Reihe nach navigiert (navigated sequentially)

In der Reihenfolge navigiert, die festgelegt wurde, um den Fokus durch die Benutzung einer Tastaturschnittstelle vorrücken zu lassen (von einem Element zum nächsten).

N.B.: Bitte beachten Sie, dass es sich bei diesen Text um die Übersetzung des englischen Originals bei www.w3.org/TR/UNDERSTANDING-WCAG20/ handelt. Wenn sie Fehler bei der Lektüre finden oder Verbesserungsvorschläge haben, können Sie diese gerne in den Kommentaren hinterlassen.

Permalink
Tags: ,