Funkcja „punkt początkowy sekwencyjnej nawigacji zaznaczenia” określa, gdzie zaczynamy szukać elementów, które można zaznaczyć, w przypadku sekwencyjnej nawigacji zaznaczenia ([Tab] lub [Shift-Tab]), gdy nie ma obszaru zaznaczenia. Jest to szczególnie przydatne w przypadku funkcji ułatwień dostępu, takich jak „przechodzenie do linków” i zarządzanie punktem skupienia w dokumencie.
HTML zapewnia wiele wbudowanych funkcji obsługi interakcji z klawiaturą, dzięki czemu można łatwo pisać strony, z których można korzystać za pomocą klawiatury. Jest to przydatne, gdy nie możemy używać myszki z powodu niepełnosprawności ruchowej lub gdy chcemy oszczędzać cenne milisekundy.
Obsługa klawiatury zależy od zaznaczenia, które określa, gdzie na stronie mają być wysyłane zdarzenia klawiatury. Do tej pory było kilka sytuacji, w których musieliśmy wykonać dodatkową pracę, aby wszystko działało prawidłowo w przypadku użytkowników klawiatury. Metoda focus() pozwala nam zarządzać fokusem przez selektywne wybieranie elementu, który ma być fokusem w odpowiedzi na działanie użytkownika. Ta sprawdzona metoda ma jednak wiele pułapek i wymaga zastosowania skomplikowanych sztuczek w języku JavaScript, aby zapewnić podstawowe działanie.
Ta technika nie zniknie w najbliższym czasie, ale w Chrome 50 będzie potrzebna w mniejszej liczbie przypadków dzięki sekwencyjnemu punktowi początkowemu nawigacji. Dzięki tej zmianie dobrze napisane strony będą automatycznie bardziej dostępne bez konieczności ręcznego zarządzania punktem skupienia. Przeanalizujmy to na przykładzie.
Link na stronie
Witryny z dużą ilością tekstu często zawierają linki na tej samej stronie, aby ułatwić użytkownikom szybkie przechodzenie do ważnych sekcji.
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
Gdybym używał klawiatury (i był łakomczuchem na australijskie jedzenie), moja kolejna seria działań wyglądałaby mniej więcej tak:
- Naciśnij
Tabdwukrotnie, aby zaznaczyć link do przepisów - Naciśnij
Enter, aby przejść do sekcji Przepisy - Aby zaznaczyć link „Więcej informacji”, naciśnij ponownie
Tab
Zobaczmy, jak to działa w Chrome 49.
No cóż, nie poszło zgodnie z planem, prawda?
Naciśnięcie Tab po raz ostatni zamiast linku „Więcej informacji” przeniosło zaznaczenie na następny element w spisie treści. Dzieje się tak, ponieważ programista nie ustawił w nagłówku wartości tabindex="-1", aby można było go zaznaczyć. Kliknięcie nazwanej kotwic #recipes nie powoduje zmiany fokusa. To drobny błąd, który nie ma większego znaczenia, jeśli używasz myszy. Jednak może to być bardzo ważne, jeśli używasz klawiatury lub przełącznika. Weź pod uwagę ilość linków na typowej stronie w Wikipedii. Nie byłoby przyjemnie, gdyby trzeba było ciągle przełączać się między tymi kotwicami.
Przyjrzyjmy się temu samemu procesowi w Chrome 50.
Wow, to dokładnie to, czego chcieliśmy. Co najlepsze, nie musieliśmy zmieniać kodu. Przeglądarka właśnie określiła, gdzie powinien być fokus, na podstawie tego, gdzie byliśmy w dokumencie.
Jak to działa?
Przed wdrożeniem punktu początkowego punkt ten zawsze przenosił się z poprzedniego elementu lub z góry strony. Oznacza to, że wybranie elementu, który ma być następny, może polegać na przeniesieniu wyróżnienia na element, który nie powinien być wyróżniony, np. na element kontenera lub nagłówek. Powoduje to różne dziwne zachowania, w tym wyświetlanie pierścienia fokusu, jeśli przypadkowo klikniesz taki element.
Punkt początkowy fokusa, jak sama nazwa wskazuje, zapewnia mechanizm sugerujący, gdzie należy zacząć szukać następnego elementu, na którym można skupić się po naciśnięciu przycisku Tab lub Shift-Tab.
Można go ustawić na kilka sposobów:
Jeśli coś jest w fokusie, jest to również punkt początkowy nawigacji fokusu, tak jak wcześniej.
Podobnie jak wcześniej, jeśli punkt początkowy nawigacji fokusowej nie został ustawiony przez inny element, będzie nim bieżąca document lub, jeśli jest dostępny i obsługiwany, aktywna dialog.
Jeśli przejdziemy do fragmentu strony, jak w przykładzie powyżej, ustawimy punkt początkowy.
Jeśli klikniesz dowolny element na stronie, niezależnie od tego, czy można go zaznaczyć, będzie to punkt początkowy nawigacji z użyciem fokusa.
Jeśli element, który był punktem początkowym fokusa, zostanie usunięty z DOM, jego nadrzędny element stanie się punktem początkowym fokusa. Koniec z zawracaniem uwagi!
Inne przypadki użycia
Oprócz opisanego powyżej przypadku ta funkcja może być przydatna w wielu innych sytuacjach.
Ukrywanie elementów
Czasami użytkownik może skupić się na elemencie, który musi być ustawiony na visibility: hidden lub display: none. Przykładem mogą być klikalne elementy w karuzeli. W poprzednich wersjach Chrome ukrywanie elementu, na którym jest fokus, w taki sposób powodowało przywrócenie fokusu do domyślnego punktu początkowego, co zamieniało wspomniany karuzel w nieprzyjemną pułapkę dla użytkowników z zaburzeniami motorycznymi. W przypadku sekwencyjnego punktu początkowego punktu skupienia nie jest to już konieczne. Jeśli element jest ukryty za pomocą jednej z tych metod, naciśnięcie klawisza Tab spowoduje przejście do następnego elementu, który można zaznaczyć.
Pomiń linki
Linki pomijania to niewidoczne kotwy, do których można dotrzeć tylko za pomocą klawiatury. Umożliwiają one użytkownikom „ominięcie” elementów nawigacyjnych, aby przejść bezpośrednio do treści strony. Mogą być bardzo przydatne dla użytkowników klawiatury i Switcha. Jak wyjaśniono na stronie WebAIM
Wiele popularnych witryn stosuje linki do pomijania, choć prawdopodobnie nigdy ich nie zauważysz.
Linki do pomijania są nazwanymi kotwicami, więc działają tak samo jak w naszym przykładzie oryginalnej spisu treści.
Zastrzeżenia i pomoc
Punkt początkowy sekwencyjnej nawigacji za pomocą fokusa jest obecnie obsługiwany tylko w Chrome 50, Firefox i Opera. Dopóki ta funkcja nie będzie obsługiwana we wszystkich przeglądarkach, musisz dodać tabindex="-1" (i usunąć zaznaczenie obszaru fokusu) do nazwanych celów w ankre.
Prezentacja
Punkt początkowy sekwencyjnej nawigacji za pomocą fokusa to świetne uzupełnienie zestawu funkcji ułatwień w przeglądarce. Jest ona łatwa do zrozumienia i pozwala nam usunąć kod z aplikacji, a zarazem poprawić wrażenia użytkowników. Podwójna korzyść Aby dowiedzieć się więcej o tej funkcji, obejrzyj prezentację.