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żna 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 dobrze w przypadku użytkowników klawiatury. Metoda focus() pozwala nam zarządzać fokusem przez selektywne wybieranie elementu, który ma być w fokusie 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 „Czytaj więcej”, 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 kolejny 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 kotwicy #recipes nie powoduje zmiany fokusa. To drobny błąd, który nie ma większego znaczenia, jeśli używasz myszy. Może to być bardzo ważne, jeśli używasz klawiatury lub przełącznika. Czy wiesz, ile linków wewnętrznych jest na typowej stronie w Wikipedii? Nie chcemy, aby użytkownicy musieli przełączać się między wszystkimi 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 zaznaczony, 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 w fokusie, 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, bieżąca 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 zastosowania
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 powinien mieć wartość visibility: hidden lub display: none. Przykładem takich elementów są 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 się to już nie sprawdza. 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 korzystających z klawiatury i przełącznika na urządzeniu. 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 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 wygrana Aby dowiedzieć się więcej o tej funkcji, obejrzyj prezentację.