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

Cuộn ở mọi nơi. Bạn có thể tìm thấy thông tin này trong mục "Điều khoản và điều kiện" hộp nơi bạn phải di chuyển xuống để nhấp vào nút gửi. Hoặc bạn có thể gặp phải thanh trình đơn dọc có đầ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 để điều hướng trang đối với mỗi người dùng. Một số người muốn điều hướng qua trang HTML truy cập mọi phần tử có thể làm tâm điểm bằng cách sử dụng chỉ có bàn phím. Điều này có thể vì nhiều lý do. Từ những người run rẩy hoặc các vấn đề khác gây khó khăn khi vận hành chuột, những người gặp khó khăn khi định vị con trỏ chuột một cách trực quan và những người khác sử dụng một 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. 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 cho 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 có thay đổi này về tiêu điểm trong trình cuộn

Trước khi có sự thay đổi này, một phần tử cuộn chỉ có thể được lấy làm tâm điểm bằng thẻ nếu chỉ mục thẻ được đặt rõ ràng thành 0 hoặc cao hơ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>

Khi sử dụng một chỉ mục thẻ phủ định như trong HTML sau đây, trình cuộn sẽ đã 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 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>

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>

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 các trình cuộn mà không đặt giá trị danh mục thẻ và không đặt trẻ có thể làm tâm điểm để bàn phím có thể làm tâm điể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>

Xin lưu ý rằng hành vi này chỉ xảy ra nếu trình cuộn không có phần tử con nào 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 trình 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, chế độ mặc định có thể không phải lúc nào cũng hoạt động tối ưu nếu các phần tử con này tồn tại. Nếu bạn muốn chính phần tử cuộn có thể lấy bàn phím làm tâm điểm trong trường hợp này, bạn nên đặt chỉ mục thẻ 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 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.