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”, gdzie 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 używa ruchów w górę i w dół myszką lub touchpadem, aby przewijać element. Urządzenie wskazujące, trackpad lub ekran dotykowy nie są jednak optymalnym sposobem na poruszanie się po stronie. Niektórzy użytkownicy wolą poruszać się po stronie HTML, korzystając z klawiatury do dostępu do każdego elementu, na którym można ustawić zaznaczenie. Może to wynikać z różnych powodów. Od osób, które mają drżenie lub inne problemy utrudniające korzystanie z myszy, od tych, które mają trudności z lokalizacją kursora myszy, a także od innych osób, które używają pojedynczego przełącznika lub sterowania głosem.
Zgodnie ze sprawdzonymi metodami dotyczącymi ułatwień dostępu wszystkie funkcje muszą być 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 przełączyć się z pierwszego przycisku na element kółka 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 tym 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>
W Chrome 130 z możliwością zaznaczania pasków przewijania
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. Z tego powodu domyślna wartość może nie zawsze działać optymalnie, jeśli takie elementy istnieją. 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łatwi to użytkownikom przeglądanie stron za pomocą kart.