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 hiệu quả cho ứng dụng sẽ tạo ra trải nghiệm tốt hơn cho mọi người.
Tiêu điểm và thứ tự thẻ
Tại một thời điểm nhất định, lấy nét là phần tử nào trong ứng dụng của bạn (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 các sự kiện bàn phím, phần tử được đặt tiêu điểm còn 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 được lấy tiêu điểm thường được biểu thị bằng vòng lấy nét và nhiều trình duyệt sẽ định kiểu vòng tiêu điểm theo cách khác nhau. Thứ tự tiêu điểm tiến và 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ẻ:
- Sắp xếp các phần tử trong DOM theo thứ tự logic
- Đặ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ẻ trong ứng dụng có hợp lý hay không, hãy thử đóng thẻ thông qua 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ừ đầu xuống cuố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 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 phần tử tương tác ngoài màn hình cần phải nằm trong DOM nhưng không được theo thứ tự thẻ của bạn. 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ể tập trung vào thanh điều hướng bên khi nó bị đóng.
Để ngăn một phần tử tương tác cụ thể nhận tiêu điểm, bạn nên cung cấp cho phần tử một trong các thuộc tính CSS sau đây:
display: nonevisibility: hidden
Để thêm lại phần tử vào thứ tự thẻ, chẳng hạn như khi thanh điều hướng bên đang mở, hãy thay thế các thuộc tính CSS ở trên tương ứng bằng:
display: blockvisibility: 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ị nhập khác để vận hành 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.