Single-Page-Apps
Viele Websites sind heute so aufgebaut, dass nur ein Teil der Seite nach einem Klick geladen wird.
Sie können zum Beispiel eine Suchfunktion haben, mit der man etwas suchen kann. Dann wird das Ergebnis in die Mitte der Seite geladen. So wird Bandbreite gespart und die Seite lädt schneller.
Welche Überlegungen zur Barrierefreiheit gibt es bei Single-Page-Apps?
Sie müssen die Nutzer von Screenreadern informieren, wenn neue Inhalte geladen werden. Wenn Sie das nicht machen, sagt der Screenreader nichts.
Wenn Sie eine neue Seite laden, sagt der Browser dem Screenreader, dass eine neue Seite geladen wurde. Der Screenreader weiß dann, was zu tun ist. Der Screenreader liest den Seitentitel und dann den Text von oben nach unten.
Wenn kein Seitenladeereignis da ist, sagt das Bildschirmlesegerät nichts. Sie können auf zwei Arten vorgehen: Man kann den Fokus entweder auf die Überschrift am Anfang des neuen Inhalts verschieben oder Text in einen “aria-Live-Bereich” einfügen, um den neuen Inhalt anzukündigen.
Beide Ansätze sind richtig. Es kommt darauf an, in welchem Zusammenhang man sich befindet. Lenken Sie den Fokus auf den neuen Inhalt. Wenn der Benutzer der Sprachausgabe dieses Ereignis als neue Seite oder neuen Inhalt erleben soll, verschieben Sie den Fokus am besten an den Anfang des neuen Inhalts.
Achten Sie darauf, dass das Ziel der Tab-Taste immer erreichbar ist, wenn Sie den Fokus senden.
Die Bedeutung des Einfügens einer Verzögerung
Hier ist noch etwas, was wichtig ist. Wenn Sie neue Inhalte auf einer Webseite einfügen, können Sie nicht erwarten, dass Screenreader sie sofort erkennen. Wenn Sie den Inhalt einfügen und dann sofort darauf zeigen, besteht die Möglichkeit, dass der Fokus eintrifft, bevor der Screenreader bemerkt, dass sich dort Inhalt befindet. Der Screenreader sagt nichts und der Benutzer versteht nichts. Sie denken dann:
“Ich habe gerade auf einen Link geklickt, aber ich habe nichts gehört. Ist etwas passiert? Ist meine Internetverbindung ausgefallen?”
Das kann für sie schlecht sein.
Warten Sie nach dem Einfügen des neuen Inhalts kurz, bevor Sie den Fokus darauf senden. Wenn Sie viele Inhalte einfügen, muss die Wartezeit länger sein.
Und für Webentwickler ist es auch nervig, dass sie nicht wissen, wann der Screenreader den neuen Inhalt registriert hat. Das heißt, Sie müssen eine willkürliche Zeit wählen. Es stimmt, dass verschiedene Benutzer auf verschiedenen Systemen längere oder kürzere Wartezeiten erleben. So ist es nun mal.
Eine Verzögerung von ein oder zwei Sekunden sollte in den meisten Fällen ausreichen. Testen Sie sie aber trotzdem auf Ihren Seiten.
Senden Sie den Fokus nicht absichtlich zu einem leeren Container. Der Screenreader muss Inhalte lesen können, sonst sagt er nichts.
Mit aria-live Ankündigung der neuen Inhalte aria-live
Manchmal ist es besser, den Fokus zu lassen, wo er ist und nur den Inhalt anzukündigen. Dann ist “aria-live” besser. ARIA-LIVE-Ankündigungen sollten kurz sein. Zum Beispiel nicht den ganzen Hauptinhalt in einem. Das wäre schlimm. Sie brauchen nur ein paar Worte oder einen Satz.
Manchmal ist es besser, den Nutzer nicht zu informieren, wenn neue Inhalte geladen werden. Das wäre zum Beispiel der Fall, wenn der neue Inhalt nicht sofort wichtig ist oder wenn es eine Störung wäre. Aber seien Sie sehr vorsichtig, wenn Sie sich dafür entscheiden, dies als stilles Ereignis zu belassen. In den meisten Fällen ist das falsch.
Es gibt noch ein paar andere Dinge, die Sie tun können, damit die Apps benutzerfreundlicher sind. Zum Beispiel, dass die URL aktualisiert wird, wenn sich der Hauptinhalt ändert. Und dass die Buttons “Zurück” und “Vorwärts” so funktionieren, als ob die Seiten jedes Mal geladen worden wären. Das hilft, um Verwirrung zu vermeiden.