Funkcja „punkt początkowy sekwencyjnej nawigacji zaznaczenia” określa, gdzie zaczynamy szukać elementów, na których można ustawić zaznaczenie, 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ą, co oznacza, że tworzenie stron, których można używać za pomocą klawiatury, jest bardzo proste. Nie ma znaczenia, czy nie możemy używać myszki z powodu niepełnosprawności ruchowej, czy po prostu nie chcemy marnować cennych milisekund na odrywanie rąk od klawiatury.
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 zapewnić płynne działanie dla użytkowników klawiatury. Metoda focus() pozwala nam zarządzać fokusem przez selektywne wybieranie elementu, który ma być w nim widoczny w odpowiedzi na działanie użytkownika. Ta sprawdzona metoda ma jednak wiele pułapek i wymaga zastosowania skomplikowanych technik JavaScriptu, 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 - Naciśnij ponownie
Tab, aby zaznaczyć link do artykułu
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 kotwicy #recipes nie powoduje przeniesienia zaznaczenia. 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 znajduje się 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.
To właśnie tego 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 fokusa fokus zawsze przechodził od poprzedniego elementu lub od góry strony. Oznacza to, że wybranie elementu, który ma być 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 zjawiska, 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 element nadrzędny 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ń dostępu 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ę.