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
Przewijacze 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 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 jest optymalnym sposobem poruszania się po stronie dla każdego użytkownika. Niektóre osoby preferują poruszanie się po stronie HTML uzyskującej dostęp do każdego możliwego elementu za pomocą polecenia tylko klawiaturę. Przyczyny mogą być różne. 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.
Sprawdzone metody dotyczące 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)
Wcześniej ta zmiana dotyczyła elementów do przewijania
Przed tą zmianą pasek przewijania można było zaznaczyć za pomocą klawiatury tylko wtedy, gdy atrybut tabindex ustawiono 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>
Przy użyciu ujemnego indeksu tabindex, jak w poniższym kodzie HTML, element przewijania zostanie pominięto.
<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, możesz mieć problemy z korzystaniem sekwencyjnego zaznaczenia, aby uzyskać dostęp do elementu przewijania. 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>
Zwróć uwagę, że pasek przewijania, który zawiera elementy podrzędne, które można zaznaczyć, jak w przykładzie poniżej: jest już dostępny, bo klawisze strzałek umożliwiają przewijanie, gdy i skupiające się dzieci. W tym przypadku nie zmienia się zachowanie.
<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ć. Użytkownicy, którzy nie mogą lub wybierz, by nie używać myszy do zaznaczania treści za pomocą tabulatora i strzałki na klawiaturze klawiszy.
<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 element przewijania 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 tym przypadku treść jest już dostępna za pomocą klawiszy strzałek, gdy przycisk skupieni. Z tego powodu domyślna wartość może nie zawsze działać optymalnie, jeśli takie elementy istnieją. Jeśli chcesz, aby sam element przewijania aby w tej sytuacji można było zaznaczyć za pomocą klawiatury, zalecamy ustawienie parametru Tabindex 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 umożliwia domyślny dostęp do przewijania za pomocą klawiatury we wszystkich przypadkach, które ułatwią użytkownikom poruszanie się po kartach. stronę.