Aplikacje jednostronicowe stanowią poważne wyzwanie związane z ułatwieniami dostępu, jeśli chodzi o komunikowanie zmian widoku. Bez odświeżania strony czytniki ekranu nie wychwytują tych ważnych zmian w interfejsie użytkownika, pozostawiając użytkowników z wadami wzroku zdezorientowanymi i nieświadomymi.
Jednym z rozwiązań jest utworzenie wiadomości na podstawie tytułu strony i wykorzystanie aktywnego regionu ARIA do wyraźnego ogłoszenia, za pośrednictwem pomocnej wiadomości, że został załadowany nowy widok. Najpierw utwórz funkcję, która jest wywoływana podczas aktualizacji viewContent. W tym celu AngularJS udostępnia zdarzenie $ viewContentLoaded. W kodzie kontrolera nasłuchaj zdarzenia i wywołaj funkcję (w CoffeeScript):
app.controller ’PageController’, ($ scope, $ location, $ http) -> $ scope. $ on ’$ viewContentLoaded’, announce_view_loaded
W funkcji announce_view_loaded zaktualizuj tytuł strony i ogłoś wiadomość. Chociaż struktury jednostronicowe nie aktualizują automatycznie tytułów stron, synchronizacja tytułu strony z bieżącym widokiem poprawia zrozumienie widoku przez użytkowników.
Jednym ze sposobów jest użycie atrybutu danych gdzieś w widoku do przechowywania tytułu widoku:
document.title = $ (’[data-viewtitle]’). data ’viewtitle’
Teraz utwórz wiadomość, używając zaktualizowanego tytułu strony i ogłoś ją:
$ .announce (document.title + ’, widok wczytany’)
$ .announce () to funkcja jQuery, która używa pojedynczego, niewidocznego obszaru na żywo do ogłaszania treści. Takie podejście pomaga uprościć kod i wysiłki związane z debugowaniem w porównaniu z użyciem ad hoc aktywnych regionów. Należy jednak pamiętać o kilku sprawdzonych metodach.
Najpierw utwórz na swojej stronie pojedynczy region transmisji na żywo „komentator”, aby ogłaszać treść za pomocą aria-live = "grzeczne | asertywne". Nie używaj żadnych innych aktywnych regionów, w tym aktywnych ról regionów (np. Role = "alert | timer | log"). Przykładowy region na żywo:
div aria-live = "polite" id = "speakcer"> (tutaj dodany lub zaktualizowany tekst zostanie ogłoszony) / div>
Po drugie, wyczyść zawartość aktywnego regionu wkrótce po zaktualizowaniu zawartości. Zapobiega to natknięciu się użytkowników na stare wiadomości.
Wreszcie, tak jak w przypadku każdej innej techniki dostępności, rozważnie użyj $ .announce (). Powinien być używany tylko do przekazywania istotnych aktualizacji interfejsu użytkownika.
Słowa: Patrick Fox
Patrick Fox jest dyrektorem ds. Technologii interfejsu użytkownika w firmie Razorfish w Austin. Ten artykuł ukazał się pierwotnie w numerze 271 magazynu net.
Lubiłem to? Przeczytaj to!
- Przewodnik projektanta dotyczący dostępności cyfrowej
- Najlepsze darmowe czcionki skryptowe
- Darmowy wybór czcionek graffiti
