Dostępność w aplikacjach jednostronicowych (ARIA itp.)

To może obejmować szeroki wachlarz problemów. Więc przejdę przez niektóre z podstaw w nadziei, że zacznie cię na swojej drodze, typowe pułapki, jakby to było.

Po pierwsze, tak jak komentatorzy powiedzieli, tak, musisz upewnić się, że tagi ARIA są poprawnie użyte. Gdybyś chciał ujawnić div jako guzik, miałbyś coś takiego.

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

Ten Przycisk po wybraniu przez czytnik ekranu będzie nazywany "super krzykliwym przyciskiem", więc nie musisz wkładać przycisku twój atrybut aria-label. Istnieją bardziej złożone przykłady, ale to w zasadzie ilustruje podstawy. Role, Aria-label i tabindex będą najbardziej rozpowszechnionymi atrybutami ARIA.

Elementy indeksowania kart, które mają zostać kliknięte przez użytkowników czytnika ekranu, są w tym celu niezbędne. Ustaw tabindex na 0, aby umieścić go w domyślnej lokalizacji w dokumencie. Jeśli nie chcesz, aby ludzie korzystający z nawigacji z klawiatury mogli normalnie do niej dotrzeć, ustaw ją na -1. Oznacza to, że poza normalną kolejnością kart, ale nadal można nawigować do, Jeśli chcesz ręcznie skupić się na użytkowniku za pomocą javascript / jquery .focus ().

Jak wspomniano, czasami możesz pomóc nawigatorom klawiaturowym / użytkownikom czytników ekranu, przesuwając dla nich ostrość. Przykładem może być kliknięcie przycisku i wyświetlenie menu. Możesz zrobić coś takiego, aby umieścić je na pierwszym linku menu:

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

Wiem, że to jest w JQuery, nie znam AngularJS ale mój brief widok sprawia, że myślę, że jest to bardziej kontroler ViewModel w przeciwieństwie do czegoś specyficznego dla interfejsu użytkownika, takiego jak JQuery, ale popraw mnie, jeśli się mylę.

Regiony na żywo mogą być używane, jeśli robisz dziwne rzeczy na ekranie, które nie będą miały sensu dla użytkownika czytnika ekranu. Można pisać tekst do elementów w tych regionach, aby umieścić informacje w formie tekstowej. Najprostszym sposobem na to jest użycie roli alertu lub statusu, odpowiednio dla ważnych wiadomości lub ogólnych aktualizacji statusu. Te role sprawiają, że Twoje domyślnie element aktywny region, a wszelkie zmiany tekstu w nim będą zgłaszane do czytnika ekranu. Tak więc szybki przykład wyglądałby mniej więcej tak:

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

Potem w JQuery (na przykładzie załadowania dokumentu i zaniku go, gdy go masz):

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

To poinformuje czytnik ekranu, że dokument jest załadowany i gotowy do odczytu na ekranie. Żywe regiony mogą być nieco trudne, ale są potężną bestią, jeśli potrafisz je opanować.

Wreszcie, jeśli chodzi o testowanie 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 samodzielne złapanie czytnika ekranu i wypróbowanie go. Polecam NVDA, który jest czytnikiem ekranu o otwartym kodzie źródłowym (a więc wolnym). To mój czytnik ekranu z wyboru i jest cholernie dobry. Syntezator, do którego jest dołączony, nie ma najładniejszy głos, ale są inne opcje, lub możesz wyłączyć wyjście mowy i wyświetlić tekstowy wyświetlacz tego, co mówi za pomocą przeglądarki mowy. Ostatnią opcją jest poproszenie testerów dostępności o zabranie aplikacji na jazdę próbną. W przypadku produktów konsumenckich lub rzeczy wymienionych w tych nawiasach osoby niewidome i inni użytkownicy dostępnych technologii mogą zgłosić się na ochotnika, jeśli zostaną o to poproszeni. W przypadku bardziej zorientowanych na biznes aplikacji, których możesz nie chcieć na publicznym forum, istnieje kilka organizacje, które mogą konsultować się w kwestiach udostępniania aplikacji internetowych.

W żadnym wypadku nie jest to wyczerpujący podręcznik dotyczący dostępności, miałem nadzieję, że naprawdę rozkręcę cię we właściwym kierunku. W celu głębszego przyjrzenia się, spróbuj przyjrzeć się dokumentacji Aria role (wszystko to pomoże, ale kod znajduje się w nagłówku definicje), a następnie Aria States and Properties documentation. Oba mogą być trochę suche, ale również mają pełne lista wszystkiego, czego możesz użyć Aria wise. Google też powinno dać jakieś tutoriale, mam nadzieję.