Od wersji Chrome 124 przewijane treści można domyślnie zaznaczyć za pomocą klawiatury, jeśli nie mają elementów podrzędnych, które można zaznaczyć na klawiaturze.
Wprowadzenie
Przewijacze są wszędzie. Znajdziesz ją w polu „Warunki korzystania z usługi”, które musisz przewinąć aż do końca, aby kliknąć przycisk przesyłania. Możesz też zobaczyć pionowy pasek menu z ikonami do wyboru.
W takich przypadkach wielu użytkowników internetu przewija ekran w górę za pomocą myszy lub touchpada. Pamiętaj jednak, że nie każdy użytkownik może wygodnie poruszać się po stronie, używając urządzenia wskazującego, trackpada lub ekranu dotykowego. Niektórzy wolą poruszać się po stronie HTML i otwierać każdy możliwy do zaznaczenia element za pomocą klawiatury. Przyczyny mogą być różne. Od osób mających drżenie lub innych problemów utrudniających obsługę myszy, osób mających trudności z wizualnym lokowaniem kursora myszy oraz innych korzystających z jednego przełącznika lub sterowania głosem.
Sprawdzone metody ułatwień dostępu zalecają, aby wszystkie funkcje były dostępne przy użyciu klawiatury. Dzięki temu każdy może korzystać z internetu w sposób, który jest dla niego najwygodniejszy.
2.1.1 Klawiatura: wszystkie funkcje treści można obsługiwać z użyciem interfejsu klawiatury bez wymogu określenia czasu dla poszczególnych naciśnięć klawiszy, z wyjątkiem sytuacji, w których podstawowa funkcja wymaga wprowadzania danych zależnych od ścieżki ruchu użytkownika, a nie tylko od punktów końcowych. (Poziom A)
Przed tą zmianą w celu skupienia się na przewijakach
Przed tą zmianą element przewijania można było aktywować jako kartę tylko wtedy, gdy indeks tabulacji ma wartość 0 lub większą. Użyj na przykład poniższego kodu CSS i HTML. Następnie spróbuj przejść klawiszem Tab od pierwszego przycisku do elementu przewijania.
div.scroll, button {
border: 1px solid lightgray;
margin-top: 1em;
border-radius: 0.5em;
}
div.scroll {
overflow: auto;
width: 20em;
height: 5em;
display: block;
}
div.long {
width: 10em;
height: 10em;
}
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a tab focusable scroller...</p>
<div class="long"></div>
<p>You need to scroll down to see this line.</p>
</div>
<button>End</button>
Użycie ujemnego indeksu tabulacji (jak w poniższym kodzie HTML) spowoduje pominięcie przewijania.
<button>Start</button>
<div class="scroll" tabindex="-1">
<p>This is not a tab focusable scroller...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
Jeśli nie ustawisz wartości parametru tabindex, użytkownik może mieć problemy z uzyskaniem dostępu do przewijania za pomocą sekwencyjnej nawigacji po fokusie. To może być bardzo frustrujące dla użytkowników, którzy nie mają dostępu do myszy.
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>You cannot see this line using the keyboard.</p>
</div>
<button>End</button>
Pamiętaj, że pasek przewijania zawierający elementy podrzędne, które można zaznaczyć, jak widać w poniższym kodzie HTML, jest już dostępny, ponieważ klawisze strzałek umożliwiają przewijanie, gdy elementy podrzędne, które można zaznaczyć, są aktywne. W tym przypadku żadne działanie nie zmienia się.
<button>Start</button>
<div class="scroll">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
Od Chrome 124 z opcjami przewijania
Ta funkcja umożliwia sterowanie za pomocą klawiatury bez ustawionej wartości tabindex i elementów podrzędnych z możliwością zaznaczenia. Pozwala to użytkownikom, którzy nie mogą lub nie chcą używać myszy, do zaznaczania treści za pomocą klawisza Tab i klawiszy strzałek na klawiaturze.
<button>Start</button>
<div class="scroll">
<p>This scroller does not have a tabindex value set...</p>
<div class="long"></div>
<p>but you can scroll through its content!</p>
</div>
<button>End</button>
Pamiętaj, że dzieje się tak tylko wtedy, gdy przewijany nie ma elementów podrzędnych, które można zaznaczyć. Jeśli na przykład przewijak zawiera już przycisk, zaznaczenie karty spowoduje pominięcie przewijania i zaznaczenie przycisku bezpośrednio na nim. W takim przypadku dostęp do zawartości przewijania można uzyskać za pomocą klawiszy strzałek, gdy przycisk jest już zaznaczony. Z powodu tej reguły ustawienie domyślne może nie zawsze działać w najbardziej optymalny sposób, jeśli istnieją takie elementy podrzędne. Jeśli chcesz, aby element przewijania można było w tej sytuacji aktywować za pomocą klawiatury, zalecamy ustawienie wartości indeksu tabulacji na wartość 0 lub większą.
<button>Start</button>
<div class="scroll" tabindex="0">
<p>This is a terms and conditions text. Please scroll down to acknowledge reading.</p>
<div class="long"></div>
<button id="B">Acknowledge</button>
</div>
<button>End</button>
Ta funkcja pozwala domyślnie korzystać z klawiatury we wszystkich przypadkach, co zwiększa komfort użytkowników internetu podczas poruszania się po kartach po stronie.