Các nút điều khiển tương tác có thể làm tâm điểm vào bàn phím

Ngày xuất bản: 2 tháng 5 năm 2019

Kiểm tra theo cách thủ công để đảm bảo tất cả các chế độ kiểm soát tuỳ chỉnh đều có thể lấy tiêu điểm bằng bàn phím và hiển thị chỉ báo tiêu điểm. Thứ tự lấy tiêu điểm của các phần tử phải tuân theo thứ tự DOM. Nếu bạn không chắc chắn về những phần tử nào sẽ nhận được tiêu điểm, hãy xem mô-đun tiêu điểm trong khoá học Tìm hiểu về hỗ trợ tiếp cận trên web.dev.

Cách kiểm thử theo cách thủ công

Để kiểm tra xem chế độ điều khiển tuỳ chỉnh có thể lấy làm tiêu điểm và hiển thị chỉ báo tiêu điểm hay không, hãy bắt đầu bằng cách nhấn phím Tab trên trang web của bạn. Sử dụng TAB (hoặc SHIFT + TAB) để di chuyển giữa các chế độ điều khiển, đồng thời sử dụng các phím mũi tên, ENTER và SPACE để điều chỉnh giá trị của các chế độ điều khiển (xem thêm phần Các nguyên tắc cơ bản về khả năng truy cập bằng bàn phím):

Bạn có thể truy cập vào tất cả các nút điều khiển tương tác trên trang không? Có chỉ báo tiêu điểm trên mỗi chế độ điều khiển tương tác không?

Cách khắc phục

Nếu không thể dùng phím tab để chuyển qua tất cả các phần tử trên một trang, bạn có thể cần dùng tabindex để cải thiện khả năng lấy tiêu điểm của các chế độ kiểm soát đó.

Để làm cho một thành phần điều khiển tuỳ chỉnh có thể lấy tiêu điểm, hãy chèn phần tử điều khiển tuỳ chỉnh vào thứ tự nhấn phím Tab tự nhiên bằng cách sử dụng tabindex="0" (xem thêm phần Kiểm soát tiêu điểm bằng tabindex). Ví dụ:

<div tabindex="0">Focus me with the TAB key</div>

Bạn cũng có thể cần thêm các vai trò ARIA thích hợp vào các phần tử điều khiển tuỳ chỉnh. Xem phần Các chế độ kiểm soát tuỳ chỉnh có vai trò ARIA.

Nếu bạn không thấy chỉ báo tiêu điểm, hãy cân nhắc sử dụng :focus để luôn hiện chỉ báo tiêu điểm. Bất kể bạn sử dụng chuột hay bàn phím để chuyển đến nút này, chỉ báo tiêu điểm của nút luôn có cùng một giao diện (xem thêm phần Tiêu điểm kiểu).

Tại sao điều này quan trọng

Đối với những người dùng không thể hoặc không muốn sử dụng chuột, thao tác điều hướng bằng bàn phím là phương thức chính để truy cập mọi nội dung trên màn hình. Trải nghiệm tốt khi dùng bàn phím phụ thuộc vào thứ tự thẻ hợp lý và kiểu tiêu điểm dễ nhận biết. Nếu không thấy hoặc không biết nội dung đang được lấy tiêu điểm, thì người dùng bàn phím sẽ không thể tương tác với trang.

Tìm hiểu thêm về tính năng hỗ trợ tiếp cận trong Learn Accessibility (Tìm hiểu về tính năng hỗ trợ tiếp cận).

Tài nguyên