Nhiều người dùng dựa vào bàn phím để điều hướng các ứng dụng – từ những người dùng bị suy giảm chức năng vận động tạm thời và vĩnh viễn cho đến những người dùng sử dụng phím tắt để thao tác hiệu quả 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 cụ thể, tiêu điểm đề cập đến 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 nhập qua bàn phím. Ngoài việc nhận các sự kiện trê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 dùng TAB để di chuyển "tiến" và SHIFT + TAB để di chuyển "Lùi". Phần tử đang được lấy tiêu điểm thường được biểu thị bằng một vòng lấy nét và nhiều trình duyệt sẽ tạo kiểu cho các vòng lấy nét theo cách khác nhau. Thứ tự mà tiêu điểm di chuyển 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ể làm tâm điểm ngầm: các phần tử này được tự động 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 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à div không hoàn toàn có thể làm tâm đ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ó 2 ý 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ử di chuyển qua các thẻ trên trang của bạn. 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 để sắp xếp thứ tự thẻ một cách 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ử di chuyển qua hai nhóm nút bên dưới để trải nghiệm một thứ tự thẻ hợp lý và một thứ tự thẻ không hợp lý:
Thứ tự thẻ hợp lý
Thứ tự không hợp lý trong thẻ
Mã cho hai ví dụ này được so sánh bên dưới:
Thứ tự thẻ hợp lý
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
Thứ tự không hợp lý trong thẻ
<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 thứ tự thẻ không hợp lý. Để sửa thứ tự thẻ không hợp lý ở trên, hãy di chuyển nút "Kiwi" nổi để nút này xuất hiện sau nút "Coconut" trong DOM và xoá kiểu cùng dòng.
Đặ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 nằm trong DOM nhưng không nên xuất hiện theo thứ tự thẻ. Ví dụ: nếu bạn có một điều hướng bên thích ứng mở ra khi bạn nhấp vào một nút, người dùng sẽ không thể tập trung vào điều hướng bên khi nút đó được đó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:
display: nonevisibility: hidden
Để thêm lại phần tử vào thứ tự thẻ, ví dụ như khi điều hướng bên đang mở, hãy thay thế tương ứng các thuộc tính CSS ở trên 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 một thiết bị đầu vào khác, thứ tự thẻ logic là cần thiết để giúp ứng dụng của bạn dễ truy cập và hữu dụng. Để kiểm tra thứ tự thẻ, hãy thử kiểm tra nhanh ứng dụng trước mỗi lần xuất bản.