Od wersji 130 Chrome suwaki są domyślnie możliwe do zaznaczenia za pomocą klawiatury, jeśli nie mają elementów podrzędnych, które można zaznaczyć za pomocą klawiatury.
Tło
Scrollery są wszędzie. Możesz go znaleźć w polu „Warunki korzystania z usługi”, w którym musisz przewinąć w dół, 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 element za pomocą myszy lub touchpada, przesuwając palcem w górę w dół. Urządzenie wskazujące, trackpad lub ekran dotykowy nie są jednak optymalnym sposobem na poruszanie się po stronie. Niektórzy wolą poruszać się po stronie HTML, uzyskując dostęp do każdego elementu, który można zaznaczyć, za pomocą samej klawiatury. Może to wynikać z różnych powodów. Od osób z drżeniem lub innymi problemami, które utrudniają korzystanie z myszy, od osób, które mają trudności z lokalizacją kursora myszy, oraz od innych osób, które używają pojedynczego przełącznika lub sterowania głosem.
Sprawdzone metody ułatwień dostępu zalecają, aby wszystkie funkcje były dostępne za pomocą klawiatury. Dzięki temu każdy może korzystać z internetu w sposób, który najbardziej mu odpowiada.
2.1.1 Klawiatura: wszystkie funkcje treści są dostępne za pomocą interfejsu klawiatury bez konieczności stosowania określonych ustawień czasu dla poszczególnych naciśnięć klawiszy, z wyjątkiem sytuacji, gdy funkcja wymaga podania danych, które zależą od ścieżki użytkownika, a nie tylko od punktów końcowych. (poziom A)
Przed zmianą
Przed tą zmianą pasek przewijania można było zaznaczyć za pomocą klawiatury tylko wtedy, gdy atrybut tabindex jest ustawiony na wartość 0 lub wyższą. Użyj na przykład tego kodu CSS i HTML. Następnie spróbuj przejść 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>
Jeśli użyjesz ujemnego indeksu tab, jak w poniżej pokazanym kodzie HTML, scroller zostanie pominięty.
<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 tabindex, użytkownik może mieć trudności z użyciem skumulowanej nawigacji za pomocą klawisza kursora w celu uzyskania dostępu do scrollera. Może to 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 suwak zawierający elementy podrzędne, które można zaznaczyć (jak w tym kodzie HTML), jest już dostępny, ponieważ klawisze strzałek umożliwiają przewijanie, gdy zaznaczone są elementy podrzędne, które można zaznaczyć. W tym przypadku nie zmieniamy zachowania.
<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 130 z elementami przewijającymi, które można zaznaczyć
Ta funkcja umożliwia zaznaczenie za pomocą klawiatury suwaków bez ustawionej wartości tabindex i bez elementów podrzędnych, które można zaznaczyć. Dzięki temu użytkownicy, którzy nie mogą lub nie chcą używać myszy, mogą korzystać z klawisza Tab i strzałek do zaznaczania treści.
<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 to zachowanie występuje tylko wtedy, gdy suwak nie ma elementów podrzędnych, które można zaznaczyć. Jeśli na przykład na pasku przewijania jest już przycisk, naciśnięcie klawisza Tab spowoduje pominięcie paska i wybranie przycisku. W takim przypadku po kliknięciu przycisku można już używać klawiszy strzałek do przewijania zawartości. Ze względu na tę regułę domyślne ustawienia w przypadku takich elementów podrzędnych mogą nie zawsze działać w najoptymalniejszy sposób. Jeśli chcesz, aby w tej sytuacji można było zaznaczyć za pomocą klawiatury sam element paska przewijania, zalecamy ustawienie wartości tabindex na 0 lub wyższą.
<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 umożliwia domyślne sterowanie suwakiem za pomocą klawiatury we wszystkich przypadkach. Ułatwia to użytkownikom przeglądanie stron za pomocą kart.