Przewijane elementy klawiatury, które można zaznaczyć

Od Chrome 130 użytkownicy mogą domyślnie zaznaczyć za pomocą klawiatury, jeśli nie mają dzieci, które można zaznaczyć przy użyciu klawiatury.

Tło

Przewijacze są wszędzie. Możesz je znaleźć w „Warunkach korzystania z usługi” pudełko, w którym musisz przewinąć do końca, aby kliknąć przycisk Prześlij. lub może wyświetlić się pionowy pasek menu z ikonami do wyboru.

W takich przypadkach wielu użytkowników internetu używa ruchów myszy lub touchpada, 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 drżenia i inne problemy utrudniające obsługę myszy, mają trudności z wzrokowym lokalizowaniem kursora myszy. Inne osoby korzystają z przełącznikiem lub sterowaniem głosowym.

Według sprawdzonych metod ułatwień dostępu wszystkie funkcje muszą być dostępne za pomocą klawiaturę. Dzięki temu każdy może korzystać z internetu w najwygodniejszy dla nich sposób. dla nich.

2.1.1 Klawiatura: wszystkie funkcjonalność można używać za pomocą interfejs klawiatury bez konieczności zmiany czasu naciśnięcia poszczególnych klawiszy. Wyjątkiem jest sytuacja, gdy funkcja podstawowa wymaga danych wejściowych, które są zależne od ścieżki użytkownika a nie tylko w punktach końcowych. (Poziom A)

Wcześniej ta zmiana dotyczyła elementów do przewijania

Przed tą zmianą element przewijania mógł być zaznaczony tylko wtedy, gdy klawisz Tabindex ma wartość 0 lub większą. Możesz na przykład użyć poniższych stylów 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>

Przy użyciu ujemnego indeksu tabindex, jak w poniższym kodzie HTML, element przewijania 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 przeznaczone 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 nic się nie zmienia.

<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 przewijającym treści bez ustawionej wartości tabindex i bez żadnych dzieci, które można zaznaczyć za pomocą klawiatury. 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 pasek przewijania zawiera już przycisk, zaznaczenie możesz pominąć przewijanie i przejść bezpośrednio na przycisk. W tym przypadku treść jest już dostępna za pomocą klawiszy strzałek, gdy przycisk skupieni. W wyniku tej reguły wartość domyślna może nie zawsze zachowywać się co jest optymalne. 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ę.