Nhiều người dùng dựa vào bàn phím để thao tác trên các ứng dụng, từ người dùng bị suy giảm vận động tạm thời và vĩnh viễn cho đến những người dùng phím tắt để thao tác và làm việc hiệu quả hơn. Việc có chiến lược điều hướng bằng bàn phím phù hợp 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 tiêu điểm 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 đ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 dùng TAB để di chuyển "tiến" và SHIFT + TAB để di chuyển "lùi lại". 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ự mà 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 lọc có thể có thể lấy tiêu điểm ngầm: các phần tử này tự động được chèn vào thứ tự thẻ dựa trên vị trí của chúng 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. Các phần tử như đoạn và div không thể ngầm đặt tiêu điể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 lại cho người dùng trải nghiệm thao tác mượt mà bằng bàn phí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 lấy nét
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ó 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 bộ nút dưới đây để trải nghiệm thứ tự thẻ logic 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ử sử dụng CSS để tránh tạo 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 nút "Kiwi" nổi để nút này nằm sau nút "Coconut" trong DOM, đồng thời 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 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 ngăn điều hướng bên thích ứng mở ra khi 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 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 vận hành 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ự thẻ hợp lý là cần thiết để giúp ứng dụng dễ tiếp cận và sử dụng được. Một thói quen tốt để kiểm tra thứ tự thẻ là bạn hãy thử nhấn thẻ qua ứng dụng trước mỗi lần xuất bản.