Dostępność w aplikacjach z jedną stroną (ARIA itp.)

Question

Jakie jest najlepsze podejście do uzyskania dostępu do SPA (AngularJS) dostępnego (dla czytników ekranu itp.)?

Mam mało doświadczenia ze specyfikacją Aria i zastanawiam się, czy w ogóle będzie działać na jednej stronie aplikacji.

Jakie są najczęstsze pułapki podczas opracowywania?

Jak można debugować i testować dostępność podczas opracowywania?

Answer 1

Może to obejmować szeroki zakres problemów tutaj. Przejdę więc przez niektóre podstawy w nadziei, że to cię zacznie na swojej drodze, typowe pułapki, jak to było.

Po pierwsze, tak jak komentatorzy powiedzieli, tak, musisz upewnić się, że znaczniki ARIA są poprawnie używane. Powiedzmy, że jeśli chcesz odsłonić div jako przycisk, będziesz miał coś takiego.

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

ten przycisk, gdy wybrany przez czytnik ekranu będzie nazwany „super krzykliwe przycisk”, więc nie trzeba przycisk, aby umieścić w swoim atrybutem aria-label. Istnieją bardziej złożone przykłady, ale to ilustruje podstawy tego. Rola, etykieta aria i tabindex będą najbardziej rozpowszechnionymi atrybutami ARIA, które widzisz.

Najważniejsze są elementy indeksujące tabulatory, do których klikają użytkownicy czytników ekranu. Ustaw tabindex na 0, aby uwzględnić go w domyślnej lokalizacji w dokumencie. Jeśli nie chcesz, aby osoby, które używają nawigacji przy klawiaturze, muszą normalnie zostać osiągnięte, ustaw wartość -1. Oznacza to, że jest poza normalną kolejnością tabulacji, ale nadal można się do niej dostać, jeśli chcesz ręcznie ustawić ostrość ręcznie za pomocą javascript/jquery .focus().

Jak wspomniano, czasami można pomóc nawigatorom klawiatury/użytkownikom czytników ekranu, przenosząc ich uwagę. Przykładem może być kliknięcie przycisku i wyświetlenie menu. Można zrobić coś takiego, aby umieścić je na pierwszy link w menu:

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

wiem, że to w JQuery, nie jestem zaznajomiony z angularjs ale mój krótki widok sprawia, że ​​myślę, że to bardziej z kontrolera ViewModel w przeciwieństwie do czegoś specyficznego dla interfejsu, takiego jak JQuery, ale popraw mnie, jeśli się mylę.

Aktywne regiony mogą być używane, jeśli robisz fajne rzeczy na ekranie, które nie mają sensu dla użytkownika czytnika ekranu. Możesz pisać tekst do elementów w tych regionach, aby wysyłać informacje tekstowo. Najprostszym sposobem jest użycie roli alertu lub statusu, odpowiednio dla ważnych wiadomości lub ogólnych aktualizacji statusu. Te role domyślnie sprawiają, że Twój element jest aktywnym regionem, a wszelkie zmiany w nim wprowadzone zostaną zgłoszone do czytnika ekranu. Tak szybkie Przykładem może wyglądać tak:

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

Później w JQuery (biorąc przykład z ciebie ładujesz dokument i blaknięcie go, gdy masz go):

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

ten sprawi, że czytnik ekranu będzie wiedział, że dokument jest załadowany i gotowy do odczytu na ekranie. Regiony na żywo mogą być nieco trudne, ale są potężnym beasty, jeśli możesz je opanować.

Wreszcie, jeśli chodzi o testy dostępności, jest kilka opcji. Coś, na co ostatnio natknąłem się, to Wave, które wydaje się być narzędziem do testowania online. Wygląda dobrze od pierwszego spojrzenia, możesz spróbować.Inną opcją jest pobranie samemu czytnika ekranu i wykonanie polecenia. Polecam NVDA, który jest czytnikiem ekranu open-source (czyli wolnym). To mój ulubiony czytnik ekranu i jest cholernie dobry. Syntezator, do którego jest dołączony, nie ma najmilszego głosu, ale są też inne opcje, albo możesz wyłączyć wyjście głosowe i wyświetlić tekstowy widok tego, co by to powiedział przy użyciu Przeglądarki Mowy. Ostatnią opcją jest poprosić testerów ułatwień dostępu, by zabrali Twoją aplikację na jazdę próbną. W przypadku produktów konsumpcyjnych lub rzeczy w tych nawiasach, osoby niewidome i inni użytkownicy dostępnej technologii mogą zgłosić się na ochotnika, aby to zrobić, jeśli zostaną o to poproszeni. W przypadku większej liczby aplikacji biznesowych, które mogą nie być dostępne na publicznym forum, istnieje kilka organizacji, które mogą konsultować się w kwestiach związanych z udostępnianiem aplikacji internetowych.

W żadnym wypadku nie jest to obszerny podręcznik na temat ułatwień dostępu, miałem nadzieję, że naprawdę zacznę w dobrym kierunku. Aby uzyskać nieco głębszy wygląd, spróbuj spojrzeć na dokumentację ARIA roles (wszystko to pomoże, ale kod znajduje się pod nagłówkiem definicji) i na tej podstawie ARIA States and Properties documentation. Oba mogą być trochę suche, ale mają też pełną listę wszystkiego, co możesz użyć ARIA mądrego. Google, jak mam nadzieję, również będzie mógł dostarczyć kilka samouczków.

Mam nadzieję, że pomoże ci to zacząć. Powodzenia!