Funkcja sekwencyjnego punktu początkowego nawigacji fokusa określa miejsce, w którym zaczynamy szukać elementów z możliwością zaznaczenia podczas sekwencyjnej nawigacji zaznaczenia ([Tab] lub [Shift-Tab]), gdy nie ma wybranego obszaru. Jest to szczególnie przydatne w przypadku funkcji ułatwień dostępu, takich jak „pomijaj linki” i zarządzania zaznaczeniem w dokumencie.
Język HTML zapewnia nam wbudowaną obsługę interakcji z klawiaturą, co oznacza, że można bardzo łatwo pisać strony, którymi można się posługiwać, niezależnie od tego, czy niepełnosprawność ruchowa uniemożliwia korzystanie z myszy, czy po prostu wydajna praca z uciążliwymi dłoniami podczas używania klawiatury.
Obsługa klawiatury polega na skupieniu, które określa, w którym miejscu na stronie mają być umieszczane zdarzenia klawiatury. W pewnych sytuacjach do tej pory musieliśmy dopracować dodatkowe rozwiązania, aby korzystanie z klawiatury było jak najlepsze. Metoda focus() pozwala nam zarządzać koncentracją przez selektywne wybieranie elementu, który ma się skupić w odpowiedzi na działanie użytkownika. Ta sprawdzona metoda wiąże się jednak z licznymi błędami i wymaga hakerskich ataków hakerów, aby uzyskać podstawowe informacje.
Chociaż ta technika wkrótce nie zostanie wycofana całkowicie, w Chrome 50 będzie potrzebna w mniejszej liczbie przypadków dzięki punktowi rozpoczęcia nawigacji z sekwencją skupienia. Dzięki tej zmianie dobrze utworzone strony automatycznie staną się łatwiej dostępne bez konieczności ręcznego zarządzania ostrością. Przeanalizujmy przykład.
Link na stronie
Witryny o dużej ilości tekstu często łączą się ze sobą na tej samej stronie, aby użytkownicy mogli szybko przechodzić 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łbym głupim żołądkiem w Australii), moje następne działania wyglądałyby następująco:
- Naciśnij dwukrotnie
Tab, aby zaznaczyć link Przepisy - Naciśnij
Enter, aby przejść do sekcji Przepisy - Naciśnij ponownie
Tab, aby zaznaczyć link Więcej informacji
Zobaczmy, jak to działa w praktyce w Chrome 49.
Ojej, nie poszło zgodnie z planem, prawda?
Zamiast zaznaczać link Czytaj więcej, naciśnięcie Tab, aby po raz ostatni przenieść zaznaczenie na następny element w spisie treści, powoduje przeniesienie zaznaczenia na kolejny element. Dzieje się tak, ponieważ deweloper nie ustawił parametru tabindex="-1" w nagłówku, aby można było go zaznaczyć. Dlatego kliknięcie o nazwie kotwicy #recipes nie przeniosło zaznaczenia. To subtelny błąd, a dla użytkowników myszy nie stanowi poważnego problemu. Może to jednak być bardzo dużo, jeśli używasz klawiatury lub innego urządzenia. Zastanów się, jak dużo linków wiąże się z typową stroną w Wikipedii. Byłoby frustrujące, gdy trzeba było ciągle przeglądać te wszystkie linki.
Przyjrzyjmy się temu samemu procesowi w Chrome 50.
O to nam chodziło, a co najlepsze, nie musieliśmy zmieniać kodu. Przeglądarka określiła po prostu, gdzie należy umieścić fokus w zależności od miejsca w dokumencie.
Jak to działa?
Przed wdrożeniem punktu początkowego zaznaczenia kursor zawsze przesuwał się z poprzedniego aktywnego elementu lub z góry strony. Oznacza to, że wybór elementu, który zostanie zaznaczony w następnej kolejności, może wymagać przeniesienia uwagi na coś, co nie powinno być elementu, na przykład element kontenera lub nagłówek. Powoduje to różnego rodzaju dziwności, w tym pierścień regulacji ostrości, gdy klikasz taki element bezczynnie.
Punkt początkowy zaznaczenia, jak sama nazwa wskazuje, umożliwia zaproponowanie, gdzie należy rozpocząć szukanie następnego elementu, który można zaznaczyć, po naciśnięciu Tab lub Shift-Tab.
Można go ustawić na kilka sposobów.
Jeśli coś jest zaznaczone, stanie się także punktem początkowym nawigacji.
Tak jak wcześniej, jeśli nic innego nie ustawiło punktu początkowego nawigacji zaznaczenia, będzie to bieżący document lub (jeśli jest dostępny i obsługiwany) obecnie aktywny dialog.
Jeśli przejdziemy do fragmentu strony, tak jak w przykładzie powyżej, spowoduje to ustawienie punktu początkowego zaznaczenia.
Ponadto kliknięcie dowolnego elementu na stronie niezależnie od tego, czy można go zaznaczyć, spowoduje ustawienie punktu początkowego nawigacji zaznaczenia.
Jeśli element, który był punktem początkowym, zostanie usunięty z DOM, jego element nadrzędny staje się punktem początkowym. Koniec z chaosem!
Inne zastosowania
Oprócz powyższego przykładu jest wiele innych, w których ta funkcja może się przydać.
Ukrywam elementy
Czasami użytkownik może być skupiony na elemencie, który musi mieć ustawioną wartość visibility: hidden lub display: none. Przykładem mogą być klikalne elementy w karuzeli. W poprzednich wersjach Chrome ukrycie obecnie aktywnego elementu w ten sposób powodowało przywrócenie domyślnego punktu początkowego, a przemiana wspomniana karuzela w nieprzyjemną pułapkę dla użytkowników z niepełnosprawnością ruchową. W przypadku sekwencyjnego punktu początkowego zaznaczenia ta sytuacja już nie obowiązuje. Jeśli element jest ukryty za pomocą jednej z powyższych metod, naciśnięcie klawisza Tab spowoduje po prostu przejście do następnego elementu, który można zaznaczyć.
Pomiń linki
Linki pomijania to niewidoczne kotwice, do których można uzyskać dostęp tylko za pomocą klawiatury. Umożliwiają użytkownikom „pomijanie” elementów nawigacyjnych i przechodzenie od razu do treści strony. Jest bardzo przydatne w przypadku korzystania z klawiatury i przełączania użytkowników urządzeń. Zgodnie z opisem na stronie WebAIM
Wiele popularnych witryn stosuje linki pomijania, jednak użytkownicy mogą ich nawet nie zauważyć.
Linki pomijania są nazywane kotwicami, więc działają tak samo jak w naszym pierwotnym przykładzie spisu treści.
Zastrzeżenia i pomoc
Punkt początkowy sekwencyjnej nawigacji zaznaczenia jest obecnie obsługiwany tylko w przeglądarkach Chrome 50, Firefox i Opera. Dopóki nie będzie on obsługiwany we wszystkich przeglądarkach, musisz dodać element tabindex="-1" (i usunąć kontur zaznaczenia) do nazwanych celów zakotwiczonych.
Demonstracyjny
Punkt początkowy sekwencyjnej nawigacji zaznaczenia to świetny dodatek do zestawu podstawowych ułatwień dostępu dostępnych w przeglądarce. Łatwo je zgromadzić, a w rzeczywistości możemy usunąć kod z aplikacji, poprawiając jednocześnie wygodę użytkowników. Podwójna wygrana! Aby lepiej poznać tę funkcję, obejrzyj prezentację.