Einseitige Apps stellen eine erhebliche Herausforderung für die Barrierefreiheit dar, wenn es darum geht, Ansichtsänderungen zu kommunizieren. Ohne eine Seitenaktualisierung erfassen Bildschirmleser diese wichtigen Änderungen an der Benutzeroberfläche nicht und lassen Benutzer mit Sehbehinderung verwirrt und unbewusst zurück.
Eine Lösung besteht darin, eine Nachricht basierend auf dem Seitentitel zu erstellen und eine ARIA-Live-Region zu nutzen, um über eine hilfreiche Nachricht explizit mitzuteilen, dass eine neue Ansicht geladen wurde. Erstellen Sie zunächst eine Funktion, die aufgerufen wird, wenn viewContent aktualisiert wird. AngularJS bietet zu diesem Zweck ein $ viewContentLoaded-Ereignis an. Warten Sie im Controller-Code auf das Ereignis und rufen Sie eine Funktion (in CoffeeScript) auf:
app.controller ’PageController’, ($ scope, $ location, $ http) -> $ scope. $ on ’$ viewContentLoaded’, Announce_view_loaded
Aktualisieren Sie in der Funktion "ounce_view_loaded "den Seitentitel und kündigen Sie die Nachricht an. Während Single-Page-Frameworks Seitentitel nicht automatisch aktualisieren, verbessert das Synchronisieren des Seitentitels mit der aktuellen Ansicht das Verständnis der Benutzer für die Ansicht.
Eine Möglichkeit, dies zu tun, besteht darin, irgendwo in der Ansicht ein Datenattribut zu verwenden, um den Ansichtstitel zu speichern:
document.title = $ (’[data-viewtitle]’). data ’viewtitle’
Erstellen Sie nun eine Nachricht mit dem aktualisierten Seitentitel und kündigen Sie sie an:
$ .announce (document.title + ’, Ansicht geladen’)
$ .announce () ist eine jQuery-Funktion, die eine einzelne, nicht sichtbare Live-Region verwendet, um Inhalte anzukündigen. Dieser Ansatz vereinfacht den Code- und Debugging-Aufwand im Vergleich zur Ad-hoc-Verwendung von Live-Regionen. Es gibt jedoch einige bewährte Methoden, an die Sie sich erinnern sollten.
Erstellen Sie zunächst eine einzelne Live-Region für Ansager auf Ihrer Seite, um Inhalte mit aria-live = "höflich | durchsetzungsfähig" anzukündigen. Verwenden Sie keine anderen Live-Regionen, einschließlich Live-Regionsrollen (z. B. role = "alert | timer | log"). Ein Beispiel für eine Live-Region:
div aria-live = "höflich" id = "Ansager"> (Text, der hier hinzugefügt oder aktualisiert wird, wird angekündigt) / div>
Zweitens löschen Sie den Inhalt der Live-Region kurz nach dem Aktualisieren des Inhalts. Dies verhindert, dass Benutzer auf alte Nachrichten stoßen.
Verwenden Sie schließlich, wie bei jeder Eingabehilfen-Technik, $ .announce () mit Bedacht. Es sollte nur zur Übermittlung wichtiger UI-Updates verwendet werden.
Wörter: Patrick Fox
Patrick Fox ist Web UI Technology Director bei Razorfish in Austin. Dieser Artikel erschien ursprünglich in Ausgabe 271 des Netzmagazins.
Mochte dies? Lese das!
- Der Designerleitfaden zur digitalen Barrierefreiheit
- Die besten kostenlosen Schriftarten
- Kostenlose Auswahl an Graffiti-Schriftarten
