Nguyên tắc cơ bản về quyền truy cập bằng bàn phím

Nhiều người dùng khác nhau dựa vào bàn phím để điều hướng ứng dụng, từ người dùng bị suy giảm vận động tạm thời và vĩnh viễn đến người dùng sử dụng phím tắt để làm việc hiệu quả và năng suất hơn. Việc có chiến lược điều hướng bằng bàn phím tốt cho ứng dụng sẽ mang lại trải nghiệm tốt hơn cho mọi người.

Tại một thời điểm nhất định, tâm điểm (focus) đề cập đến phần tử nào trong ứng dụng (chẳng hạn như trường, hộp đánh dấu, nút hoặc đường liên kết) hiện đang nhận dữ liệu đầu vào từ bàn phím. Ngoài việc nhận sự kiện bàn phím, phần tử được lấy tiêu điểm cũng nhận được nội dung được dán từ bảng nhớ tạm.

Để di chuyển tiêu điểm trên một trang, hãy sử dụng TAB để di chuyển "tiến" và SHIFT + TAB để di chuyển "lui". Phần tử hiện đang được lấy tiêu điểm thường được biểu thị bằng một vòng tiêu điểm và các trình duyệt khác nhau sẽ tạo kiểu cho vòng tiêu điểm theo cách khác nhau. Thứ tự tiêu điểm di chuyển qua lại thông qua các phần tử tương tác được gọi là thứ tự thẻ.

Các phần tử HTML tương tác như trường văn bản, nút và danh sách chọn sẽ được tự động đặt tiêu điểm: các phần tử này sẽ tự động được chèn vào thứ tự thẻ dựa trên vị trí của chúng trong DOM. Các thành phần tương tác này cũng có tính năng xử lý sự kiện bàn phím tích hợp. Các phần tử như đoạn văn bản và div không thể lấy tiêu điểm ngầm vì người dùng thường không cần tương tác với các phần tử đó.

Việc triển khai thứ tự thẻ hợp lý là một phần quan trọng để mang đến cho người dùng trải nghiệm điều hướng bằng bàn phím mượt mà. Có hai ý tưởng chính cần lưu ý khi đánh giá và điều chỉnh thứ tự thẻ:

  1. Sắp xếp các phần tử trong DOM theo thứ tự hợp lý
  2. Đặt chính xác chế độ hiển thị của nội dung ngoài màn hình không được nhận tiêu điểm

Sắp xếp các phần tử trong DOM theo thứ tự hợp lý

Để kiểm tra xem thứ tự thẻ của ứng dụng có hợp lý hay không, hãy thử nhấn phím tab trên trang. Nhìn chung, tiêu điểm phải tuân theo thứ tự đọc, di chuyển từ trái sang phải, từ trên xuống dưới trang.

Nếu thứ tự tiêu điểm có vẻ không chính xác, bạn nên sắp xếp lại các phần tử trong DOM để làm cho thứ tự thẻ tự nhiên hơn. Nếu bạn muốn một nội dung nào đó xuất hiện sớm hơn trên màn hình, hãy di chuyển nội dung đó sớm hơn trong DOM.

Hãy thử nhấn phím tab qua hai nhóm nút bên dưới để trải nghiệm thứ tự thẻ hợp lý so với thứ tự thẻ không hợp lý:

Thứ tự thẻ logic

Thứ tự thẻ không hợp lý

Mã cho hai ví dụ này được so sánh bên dưới:

Thứ tự thẻ logic

<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

Thứ tự thẻ không hợp lý

<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>

Hãy cẩn thận khi thay đổi vị trí hình ảnh của các phần tử bằng CSS để tránh tạo ra thứ tự thẻ không hợp lý. Để khắc phục thứ tự thẻ phi logic ở trên, hãy di chuyển nút "Kiwi" nổi để nút này nằm sau nút "Coconut" trong DOM và xoá kiểu nội tuyến.

Đặt chính xác chế độ hiển thị của nội dung ngoài màn hình

Đôi khi, các thành phần tương tác ngoài màn hình cần phải nằm trong DOM nhưng không được nằm trong thứ tự thẻ. Ví dụ: nếu bạn có một thanh điều hướng bên thích ứng mở ra khi bạn nhấp vào một nút, thì người dùng sẽ không thể lấy tiêu điểm trên thanh điều hướng bên khi thanh này đóng.

Để ngăn một phần tử tương tác cụ thể nhận tiêu điểm, bạn nên cấp cho phần tử đó một trong các thuộc tính CSS sau:

  • display: none
  • visibility: hidden

Để thêm phần tử trở lại thứ tự thẻ, ví dụ: khi mở thanh điều hướng bên, hãy thay thế các thuộc tính CSS ở trên tương ứng bằng:

  • display: block
  • visibility: visible

Các bước tiếp theo

Đối với những người dùng hầu như chỉ sử dụng bàn phím hoặc một thiết bị đầu vào khác để thao tác trên máy tính, thứ tự thẻ hợp lý là điều cần thiết để giúp ứng dụng của bạn dễ tiếp cận và sử dụng. Để kiểm tra thứ tự thẻ, bạn nên dùng phím tab để di chuyển qua ứng dụng trước mỗi lần phát hành.