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

Kiểm tra thủ công để đảm bảo rằng tất cả các thành phần điều khiển tuỳ chỉnh đều có thể lấy làm tiêu điểm bằng bàn phím và hiển thị chỉ báo tiêu điểm. Thứ tự các phần tử được lấy tiêu điểm phải tuân theo thứ tự DOM. Nếu bạn không chắc 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 thành phần điều khiển tuỳ chỉnh có thể lấy 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, dùng các phím mũi tên cùng ENTER và SPACE để thao tác với các giá trị tương ứng (xem thêm Nguyên tắc cơ bản về quyền truy cập vào bàn phím):

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

Cách khắc phục

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

Để đặt tiêu điểm cho một thành phần điều khiển tuỳ chỉnh, hãy chèn thành phần điều khiển tuỳ chỉnh vào thứ tự thẻ tự nhiên bằ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 thành phần điều khiển 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 thị 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 đó, chỉ báo tiêu điểm của nút luôn giống nhau (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 chọn không sử dụng chuột, thao tác trên bàn phím là phương tiện chính để truy cập mọi nội dung trên màn hình. Trải nghiệm bàn phím tốt phụ thuộc vào thứ tự thẻ logic và kiểu tiêu điểm rõ ràng. Nếu người dùng bàn phím không thể xem hoặc tìm hiểu nội dung đang được lấy tiêu điểm, thì họ sẽ không thể tương tác với trang.

Tìm hiểu thêm trong bài viết Cách đánh giá khả năng hỗ trợ tiếp cận.

Tài nguyên