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 một hộp "Điều khoản và điều kiện", trong đó bạn cần kéo xuống hết để 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 các cử chỉ 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 để mọi người dùng thao tác trên một 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ả 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 sử dụng tabindex âm như trong HTML sau, thanh 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 với thanh 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ì thao tác nhấn phím Tab để chọn phần tử làm tâm điểm sẽ bỏ qua thanh cuộn và trực tiếp tập trung 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 thanh cuộn bằng các phím mũi tên sau khi nút được lấy tiêu đ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 chính 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 truy cập vào thanh cuộn bằng bàn phím theo mặc định 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 qua các thẻ trên một trang.