Thanh cuộn có thể đặt làm tiêu điểm trên bàn phím

Trên Chrome 130, theo mặc định, trình cuộn có thể làm tâm điểm nếu không có trẻ em có thể làm tâm đ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ể vì 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.

Các phương pháp hay nhất về hỗ trợ tiếp cận đều khuyến nghị rằng tất cả tính năng đều phải sử dụng được bằng một 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 nội dung có thể hoạt động thông qua giao diện bàn phím mà không cần thời gian cụ thể cho từng thao tác nhấn phím, ngoại trừ khi hàm cơ bản yêu cầu dữ liệu đầu vào phụ thuộc vào đường dẫn của tệp 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ử 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>
Trình cuộn có thể làm tâm điểm do có một chỉ mục thẻ dương.

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>
Bộ cuộn bị bỏ qua do có tabindex âm.

Nếu bạn không đặt một giá trị chỉ mục thẻ, người dùng có thể gặp khó khăn khi sử dụng điều hướng tiêu điểm tuần tự để truy cập vào trình cuộn. Điều này có thể rất khó chịu dành cho 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>
Thanh cuộn không có tabindex.

Xin lưu ý rằng một trình cuộn chứa các phần tử con có thể làm tâm điểm, như trong HTML sau đây, đều đã truy cập được, vì các phím mũi tên sẽ cho phép cuộn khi trẻ có thể làm tâm điểm sẽ được lấy làm tâm đ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>
Bạn có thể đặt tiêu điểm vào thanh cuộn do thanh cuộn chứa các thành phần con có thể đặt tiêu điểm.

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. Chế độ này cho phép người dùng không thể hoặc chọn không sử dụng chuột để lấy tiêu điểm vào nội dung bằng cách sử dụng phím tab và mũi tên trên bàn phím khoá.

<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>
Thanh cuộn không có tabindex hoặc phần tử con có thể lấy tiêu điểm nhưng vẫn có thể lấy tiêu điểm.

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 thanh cuộn và trực tiếp tập trung vào nút đó. Trong trường hợp này, trình cuộn bạn có thể truy cập vào nội dung bằng các phím mũi tên sau khi tập trung. 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>
Trình cuộn có chỉ mục thẻ là 0.

Tính năng này cho phép trình cuộn có thể truy cập được 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 thẻ một trang.