Từ Chrome 124, theo mặc định, các thanh cuộn sẽ là bàn phím có thể làm tâm điểm nếu không có thành phần con cháu có thể làm tâm điểm bàn phím.
Thông tin khái quát
Trình cuộn ở khắp mọi nơi. Bạn có thể tìm thấy biểu mẫu trong hộp "Terms and Conditions" (Điều khoản và điều kiện), nơi bạn cần phải di chuyển xuống hết cỡ rồi nhấp vào nút gửi. Hoặc, bạn có thể gặp một thanh trình đơn dọc có nhiều biểu tượng để lựa chọn.
Trong những trường hợp như vậy, nhiều người dùng web sử dụng chuyển động lên xuống từ chuột hoặc bàn di chuột để cuộn qua các phần tử. Tuy nhiên, thiết bị trỏ, bàn di chuột hoặc màn hình cảm ứng không phải là cách thức tối ưu để di chuyển trên một trang đối với người dùng. Một số người muốn di chuyển trên trang HTML để truy cập vào mọi phần tử có thể làm tâm điểm chỉ bằng cách sử dụng bàn phím. Điều này có thể vì nhiều lý do. Từ những người gặp phải chứng run hoặc các vấn đề khác gây khó khăn cho việc thao tác bằng chuột, những người gặp khó khăn trong việc định vị con trỏ chuột và những người khác sử dụng một công tắc hoặc tính năng điều khiển bằng giọng nói.
Các phương pháp hay nhất về hỗ trợ tiếp cận đề xuất là tất cả tính năng phải hoạt động được bằng bàn phím. Bằng cách này, mọi người đều có thể sử dụng web theo cách phù hợp nhất với họ.
2.1.1 Bàn phím: Tất cả chức năng của nội dung có thể hoạt động thông qua giao diện bàn phím mà không cần yêu cầu thời gian cụ thể cho từng thao tác nhấn phím, ngoại trừ trường hợp hàm cơ bản yêu cầu dữ liệu đầu vào phụ thuộc vào đường dẫn di chuyển của người dùng chứ không chỉ các điểm cuối. (Cấp độ A)
Trước thay đổi này để lấy tiêu điểm ở trình cuộn
Trước sự thay đổi này, một phần tử thanh cuộn chỉ có thể lấy tiêu điểm vào thẻ nếu chỉ mục thẻ được đặt rõ ràng thành 0 trở lên. Ví dụ: sử dụng CSS và HTML sau. Sau đó, hãy thử nhấn phím tab từ nút đầu tiên đến phần tử thanh cuộn.
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>
Khi sử dụng chỉ mục thẻ phủ định như trong HTML sau, trình cuộn sẽ bị bỏ qua.
<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>
Nếu bạn không đặt giá trị tabindex, thì người dùng có thể gặp khó khăn khi sử dụng tính năng điều hướng tâm điểm tuần tự để truy cập vào thanh cuộn. Điều này có thể gây khó chịu cho những người dùng không có quyền sử dụng chuột.
<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>
Lưu ý rằng một thanh cuộn chứa các phần tử con có thể làm tâm điểm, như trong HTML sau đây, bạn có thể truy cập được, vì các phím mũi tên sẽ cho phép cuộn khi các phần tử con có thể làm tâm điểm được lấy làm tâm điểm. Không có hành vi nào thay đổi trong trường hợp này.
<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>
Từ Chrome 124 với các thanh cuộn có thể làm tâm điểm
Tính năng này cho phép các thanh cuộn không đặt giá trị tabindex và không có bất kỳ phần tử con có thể làm tâm điểm nào có thể làm tâm điểm bằng bàn phím. Điều này cho phép người dùng không thể hoặc chọn không sử dụng chuột để tập trung vào nội dung bằng cách sử dụng các phím tab và phím mũi tên trên bàn phím.
<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>
Xin lưu ý rằng hành vi này chỉ xảy ra nếu trình cuộn không có thành phần con cháu có thể làm tâm điểm. Ví dụ: nếu thanh cuộn đã chứa một nút, thì tiêu điểm thẻ sẽ bỏ qua thanh cuộn và đặt tiêu điểm trực tiếp vào nút đó. Trong trường hợp này, nội dung thanh cuộn có thể được truy cập bằng các phím mũi tên sau khi nút được lấy làm tâm điểm. Do quy tắc này, giá trị mặc định không phải lúc nào cũng hoạt động theo cách tối ưu nhất nếu có các phần tử con như vậy. Nếu muốn phần tử thanh cuộn có thể làm tâm điểm bằng bàn phím trong trường hợp này, bạn nên đặt giá trị tabindex từ 0 trở lên.
<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>
Theo mặc định, tính năng này cho phép thanh cuộn truy cập được bằng bàn phím trong mọi trường hợp, giúp người dùng web có trải nghiệm mượt mà hơn khi di chuyển thẻ trên một trang.