Kể từ Chrome 130, theo mặc định, trình cuộn có thể lấy tiêu điểm bằng bàn phím nếu không có phần tử con có thể lấy tiêu điểm bằng bàn phím.
Thông tin khái quát
Thanh cuộn có ở khắp mọi nơi. Bạn có thể tìm thấy thông báo này trong hộp "Điều khoản và điều kiện", nơi bạn cần phải cuộn xuống hết cỡ để nhấp vào nút gửi. Hoặc bạn có thể thấy một thanh trình đơn dọc chứa đầy các biểu tượng để 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 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 tối ưu để người dùng di chuyển trên trang. Một số người thích di chuyển trên trang HTML bằng cách truy cập vào mọi phần tử có thể lấy tiêu điểm chỉ bằng bàn phím. Điều này có thể là do nhiều lý do. Từ những người bị rung hoặc các vấn đề khác khiến họ khó điều khiển chuột, những người gặp khó khăn trong việc xác định vị trí con trỏ chuột bằng hình ảnh, và những người khác sử dụng một nút chuyển hoặc điều khiển bằng giọng nói.
Theo các phương pháp hay nhất về hỗ trợ tiếp cận, tất cả các tính năng phải có sẵn bằng bàn phím. Nhờ đó, 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 đều có thể hoạt động thông qua giao diện bàn phím mà không 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 khi thay đổi này để lấy tiêu điểm trong thanh cuộn
Trước thay đổi này, phần tử thanh cuộn chỉ có thể được đặt làm tâm điểm của thẻ nếu giá trị của thuộc tính tabindex được đặt rõ ràng thành từ 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 bạn sử dụng một chỉ mục thẻ phủ định như trong HTML sau đây, 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, người dùng có thể khó sử dụng tính năng điều hướng tiêu đ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>
Xin lưu ý rằng bạn có thể truy cập vào một trình cuộn chứa các phần tử con có thể lấy tiêu điểm, như trong HTML sau, 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ấy tiêu điểm được lấy tiêu điểm. Không có hành vi nào được 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 130 có công cụ cuộn có thể làm tâm điểm
Tính năng này cho phép thanh cuộn không đặt giá trị tabindex và không có phần tử con nào có thể lấy tiêu điểm có thể lấy tiêu điểm bằng bàn phím. Điều này cho phép những người dùng không thể hoặc chọn không sử dụng chuột để đặt tiêu điểm nội dung bằng cách sử dụng 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 thanh cuộn không có phần tử con có thể lấy tiêu điểm. Ví dụ: nếu thanh cuộn đã chứa một nút, thì tiêu điểm thẻ sẽ bỏ qua trình cuộn và đặt tiêu điểm trực tiếp vào nút đó. Trong trường hợp này, bạn có thể truy cập vào nội dung của trình cuộn 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 có thể 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 bạn muốn phần tử thanh cuộn có thể lấy tiêu đ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>
Tính năng này cho phép người dùng sử dụng bàn phím theo mặc định trong mọi trường hợp, nhờ đó, người dùng web sẽ có trải nghiệm mượt mà hơn khi di chuyển thẻ trên một trang.