Die meisten Nutzer verwenden wahrscheinlich täglich Widgets mit unendlichem Bildlauf. Die bekanntesten Beispiele für diese Art von Widget sind die Feeds sozialer Netzwerke. Beiträge oder Artikel im Feed werden während der Navigation des Nutzers ständig hinzugefügt oder entfernt. Schauen wir uns einmal an und vergleichen wir, wie ein sehender Nutzer mit dieser Funktion umgeht und wie eine Person mit einer Behinderung.
Ein sehender Benutzer kann in der Regel mit der Maus scrollen. Zum Beispiel:
Im obigen GIF wird beim Scrollen zunächst die erste Gruppe von Artikeln angezeigt; scrollt der Nutzer erneut, wird eine weitere Gruppe von Artikeln angezeigt.
Wenn ein Screenreader-Nutzer jedoch im Lesemodus – beispielsweise im „Browse-Modus“ von NVDA – durch dieses Widget navigiert, werden ihm nur die ersten fünf Artikel oder Beiträge angezeigt. Nach dem Aufrufen des fünften Artikels springt der Screenreader entweder in den Fußbereich oder zu den Inhalten, die nach diesem Widget folgen. Der Nutzer kann mit den Pfeiltasten nicht zum sechsten Artikel navigieren. Kurz gesagt: Das Widget für unendliches Scrollen ist für Nutzer von Bildschirmleseprogrammen weder im Lesemodus noch im Browse-Modus barrierefrei.
Um dieses Problem zu beheben, wurde mit ARIA 1.1 die „feed“-Rolle eingeführt. Wenn die „feed“-Rolle angewendet wird, arbeiten assistive Technologien und der Browser zusammen, um Bildschirmleseprogramm-Nutzern, die im Lesemodus durch das Widget mit unendlichem Bildlauf navigieren, eine barrierefreie Nutzung zu ermöglichen.
Anwendungsbeispiel (Screenshot, der zu einer Beispielseite führt)
Der obige Screenshot zeigt ein Beispiel für einen Newsfeed. Dieser Newsfeed enthält eine ARIA-Feed-Rolle. Wenn man im Browser-Modus eines Screenreaders durch diesen Feed navigiert, werden die Artikel fortlaufend hinzugefügt oder entfernt. Bitte beachten Sie, dass diese Funktion möglicherweise nicht bei allen Kombinationen aus Screenreader und Browser wie erwartet funktioniert. Es gilt als bewährte Vorgehensweise im Bereich Barrierefreiheit, alle möglichen Kombinationen aus Screenreader und Browser zu testen.
Auszüge aus dem Code (für den Link zur Beispielseite) – Neuigkeiten
<main> <h2>news</h2> <section id="main-content"> <div id="news-feed" role="feed"> </div> </section> </main>
Anmerkungen des Autors
- Autoren müssen die Rolle „Artikel“ als untergeordnete Elemente im Feed verwenden
- Autoren SOLLTEN dafür sorgen, dass jeder Artikel in einem Feed im Fokus stehen kann
- Die Autoren sollten jedem Artikel im Feed eine kurze Bezeichnung zuweisen.
- Autoren können die Artikel im Feed mithilfe von „aria-describedby“ näher beschreiben.
- Autoren sollten beim Hinzufügen oder Entfernen von Artikeln an beiden Enden der Liste das Attribut „aria-busy“ setzen.
- Autoren KÖNNEN bei Artikelelementen das Attribut „aria-setsize“ angeben, wenn der Artikelinhalt statisch ist.
- Autoren KÖNNEN den Wert von „aria-setsize“ auf -1 setzen, wenn die Gesamtzahl der Artikel extrem groß, unbestimmt ist oder sich häufig ändert.
Matrix zur Unterstützung von assistiver Technologie für das Attribut (die gängigsten Kombinationen aus Browser und assistiver Technologie)
| Assistive Technologie | Internet Explorer | FireFox | Google Chrome | Chrome für Mobilgeräte | Mobile Safari |
|---|---|---|---|---|---|
| JAWS | Unterstützt | Unterstützt | Unterstützt | Nicht verfügbar | Nicht verfügbar |
| NVDA | Unterstützt | Unterstützt | Unterstützt | Nicht verfügbar | Nicht verfügbar |
| Feedback | Nicht verfügbar | Unterstützt | Nicht verfügbar | Unterstützt | Nicht verfügbar |
| Voice-Over | Nicht verfügbar | Nicht verfügbar | Nicht verfügbar | Unterstützt | Unterstützt |
Hinweis:
- NVDA, VoiceOver und TalkBack melden Bildschirmleseprogrammen nicht, dass der „Role Feed“ aktiv ist; stattdessen werden Artikel automatisch im Lesecursor hinzugefügt oder entfernt.
- In Jaws werden Artikel bei Verwendung von Tastenkombinationen in Firefox und Google Chrome nicht hinzugefügt oder entfernt; beim Verwenden der Pfeiltasten im Durchsichtmodus werden Artikel jedoch hinzugefügt oder entfernt.
Zusammenfassung
Wenn Autoren bei der Erstellung des Widgets für unendliches Scrollen das ARIA-Feed-Rollenmuster nicht befolgen, funktionieren Screenreader im Lesemodus möglicherweise nicht wie erwartet. Ohne die ARIA-Feed-Rolle ist es für die Nutzer schwierig, die Inhalte innerhalb des Widgets wahrzunehmen, darin zu navigieren und sie zu verstehen. Um daher eine barrierefreie Nutzung zu gewährleisten, empfehle ich Autoren daher dringend, bei der Erstellung eines Widgets für unendliches Scrollen das ARIA-Feed-Rollenmuster zu befolgen.
