Barrierefreiheit in Einzelseiten-Anwendungen (ARIA usw.)

Question

Was ist der beste Ansatz, um einen SPA (AngularJS) zugänglich zu machen (für Bildschirmleseprogramme usw.)?

Ich habe wenig oder keine Erfahrung mit der Aria-Spezifikation, und ich frage mich, ob es überhaupt auf einer einzelnen Seite Anwendung arbeiten wird.

Was sind die häufigsten Fallstricke bei der Entwicklung?

Wie debugge und teste ich die Zugänglichkeit bei der Entwicklung?

Answer 1

Dies könnte hier eine breite Palette von Problemen abdecken. Also werde ich einige der Grundlagen in der Hoffnung durchgehen, dass es dich auf deinem Weg anfängt, die üblichen Fallstricke.

Erstens, wie die Kommentatoren sagten, ja, Sie müssen sicherstellen, dass ARIA-Tags korrekt verwendet werden. Also, wenn Sie beispielsweise ein div als Schaltfläche anzeigen möchten, haben Sie so etwas.

<div id="mysuperflashybutton" ... role="button" aria-label="Super flashy" tabindex="0"></div> 

Diese Taste, wenn sie von einem Screenreader ausgewählt wird „Super auffällige Schaltfläche“ genannt werden, so müssen Sie nicht Knopf in Ihrem Arie-label-Attribute setzen. Es gibt komplexere Beispiele, aber das veranschaulicht die Grundlagen ziemlich genau. Rolle, Aria-Label und Tabindex sind die häufigsten ARIA-Attribute, die Sie sehen.

Tab-Indizierungselemente, auf die Bildschirmleser-Benutzer klicken sollen, sind von entscheidender Bedeutung. Setzen Sie den Tabindex auf 0, um ihn an der Standardposition des Dokuments einzufügen. Wenn Sie nicht möchten, dass Benutzer normalerweise die Tastaturnavigation verwenden, legen Sie sie auf -1 fest. Dies bedeutet, dass es sich außerhalb der normalen Tabulatorreihenfolge befindet, aber immer noch navigiert werden kann, wenn Sie den Fokus des Benutzers dort manuell über javascript/jquery .focus() setzen möchten.

Wie bereits erwähnt, können Sie Tastaturbenutzern/Bildschirmleser Benutzern manchmal helfen, indem Sie ihren Fokus für sie verschieben. Ein Beispiel wäre, wenn sie auf eine Schaltfläche klicken und ein Menü erscheint. Man könnte so etwas tun sie auf den ersten Link im Menü zu setzen:

$('#linkmenuactivator').on("click", function() { 
    $('#linkmenu').find('li:first a').focus(); 
}); 

Ich weiß, das ist in JQuery, ich bin nicht vertraut mit AngularJS aber meine kurze Sicht macht mich denken, es eher ein Ansichtsmodell Controller ist im Gegensatz zu etwas UI-spezifischen wie JQuery, aber korrigieren Sie mich, wenn ich falsch liege.

Live-Regionen können verwendet werden, wenn Sie auf dem Bildschirm funkige Dinge tun, die für einen Screenreader-Benutzer keinen Sinn ergeben. Sie können Text in die Elemente in diesen Regionen schreiben, um die Informationen im Text auszugeben. Der einfachste Weg, dies zu tun, ist die Verwendung einer Rolle des Alarms oder Status für wichtige Nachrichten bzw. generische Status-Updates. Diese Rollen machen Ihr Element standardmäßig zu einer Live-Region, und alle darin enthaltenen Textänderungen werden an den Screenreader gemeldet. So ein kurzes Beispiel würde wie folgt aussehen:

<p id="ariastatusbox" ... role="status"></p> 

Dann später in JQuery (am Beispiel eines Dokuments Laden und Verblassen es in, wenn Sie haben es):

$('#maincontent').fadeIn(function() { 
    $('#ariastatusbox').text('Document loaded'); 
}); 

Diese wird dem Bildschirmleser mitteilen, dass das Dokument geladen und zum Lesen auf dem Bildschirm bereit ist. Live-Regionen können etwas schwierig sein, aber sie sind eine mächtige Biest, wenn Sie sie beherrschen können.

Zum Testen der Barrierefreiheit gibt es ein paar Optionen. Etwas, über das ich kürzlich gestolpert bin, ist Wave, das ein Online-Test-Tool zu sein scheint. Es sieht auf den ersten Blick gut aus, man könnte es versuchen.Eine andere Möglichkeit ist, einen Bildschirmleser selbst zu ergreifen und es auszuprobieren. Ich empfehle NVDA das ist ein Open-Source (also daher kostenlos) Bildschirmleser. Es ist mein Bildschirmleser der Wahl und ist verdammt gut. Der Synthesizer, mit dem er geliefert wird, hat nicht die angenehmste Stimme, aber es gibt andere Optionen, oder Sie könnten die Sprachausgabe ausschalten und eine Textanzeige dessen anzeigen, was sie mit dem Speech Viewer sagen würde. Eine letzte Option besteht darin, Tester auf Barrierefreiheit zu bitten, Ihre App für eine Testfahrt zu verwenden. Für Verbraucherprodukte oder Dinge in diesen Bereichen können sich blinde Menschen und andere Nutzer zugänglicher Technologien freiwillig dazu bereit erklären, wenn sie danach gefragt werden. Für geschäftlich ausgerichtete Apps, die Sie vielleicht nicht in einem öffentlichen Forum haben möchten, gibt es mehrere Organisationen, die sich über Probleme beim Zugang zu Web-Anwendungen beraten können.

Dies ist auf keinen Fall ein umfassendes Handbuch zur Barrierefreiheit, ich hatte gehofft, Sie wirklich in die richtige Richtung zu starten. Für ein bisschen tieferes Aussehen, versuchen Sie, die ARIA roles Dokumentation zu betrachten (alles wird helfen, aber der Code ist unter der Überschrift der Definitionen), und weiter von der . Sie können beide ein wenig trocken sein, aber haben auch die vollständige Liste von allem, was Sie ARIA weise verwenden können. Google sollte hoffentlich auch einige Tutorials geben können.

Ich hoffe, das hilft Ihnen den Einstieg. Viel Glück!