Nhiều người dùng dựa vào bàn phím để điều hướng trong ứng dụng—từ người dùng cho người bị suy giảm vận động tạm thời và vĩnh viễn khi sử dụng bàn phím trở nên hiệu quả và năng suất hơn. Điều hướng bằng bàn phím tốt cho ứng dụng của mình 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à thành phần 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 nhận dữ liệu nhập từ bàn phím. Ngoài việc nhận các sự kiện trên bàn phím, phần tử lấy tiêu điểm cũng nhận nội dung được dán từ bảng nhớ tạm.
Để di chuyển trọng tâm trên một trang, hãy dùng TAB để di chuyển "tiếp theo" và SHIFT + TAB
để điều hướng "ngược". Phần tử hiện được lấy tiêu điểm thường được biểu thị bằng một
vòng lấy nét và các trình duyệt khác nhau sẽ tạo kiểu vòng tiêu điểm theo cách khác nhau. Chiến lược phát hành đĩa đơn
thứ tự tiêu điểm tiến lên và lùi 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 lựa chọn có thể đặt tiêu điểm ngầm: các giá trị này tự động được chèn vào thứ tự thẻ dựa trên vị trí của họ trong DOM. Các phần tử tương tác này cũng tích hợp sẵn tính năng xử lý sự kiện bàn phím. Elements chẳng hạn như đoạn và div không thể làm tâm điểm ngầm vì người dùng thường không cần tương tác với chúng.
Việc triển khai thứ tự thẻ hợp lý là một phần quan trọng trong việc cung cấp cho người dùng với 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 duy trì 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
- Thiết lập chính xác chế độ hiển thị của nội dung ngoài màn hình không nên nhận lấy tiêu điểm
Sắp xếp các phần tử trong DOM theo thứ tự logic
Để kiểm tra xem thứ tự thẻ trong ứng dụng của bạn có hợp lý hay không, hãy thử nhấn phím tab qua . Nói chung, tiêu điểm phải tuân theo thứ tự đọc, di chuyển từ trái sang phải, từ đầu đến cuối trang.
Nếu thứ tự tiêu điểm có vẻ không đúng, bạn nên sắp xếp lại các phần tử trong DOM để làm cho thứ tự tab tự nhiên hơn. Nếu bạn muốn nội dung nào đó xuất hiện trực quan trước đó trên màn hình, hãy di chuyển đến vị trí trước đó trong DOM.
Hãy thử nhấn phím tab qua hai bộ nút bên dưới để trải nghiệm thẻ logic thứ tự khác 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ử sử dụng CSS để tránh tạo ra một thứ tự thẻ không hợp lý. Để khắc phục thứ tự thẻ không hợp lý ở trên, hãy di chuyển chữ "Kiwi" nổi nên nó nằm sau nút "Dừa" trong DOM và hãy xoá kiểu cùng dòng.
Thiết lập 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 nằm trong DOM nhưng không nên theo thứ tự nhấn phím tab. Ví dụ: nếu bạn có một ngăn điều hướng bên thích ứng đang mở khi bạn nhấp vào một nút, người dùng sẽ không thể tập trung vào thanh điều hướng bên khi đóng cửa.
Để 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:
display: nonevisibility: hidden
Để thêm lại phần tử vào thứ tự thẻ, ví dụ như khi thanh điều hướng bên là đã 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 sử dụng máy tính gần như hoàn toàn bằng bàn phím hoặc thiết bị đầu vào khác, thứ tự tab logic là cần thiết để tạo có thể truy cập và sử dụng được. Để tạo thói quen kiểm tra thứ tự tab, hãy thử duyệt qua ứng dụng của bạn trước mỗi lần xuất bản.