Nhiều người dùng khác nhau dựa vào bàn phím để điều hướng 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 đến người dùng sử dụng phím tắt để làm việc hiệu quả hơn. Việc có một chiến lược điều hướng bằng bàn phím hiệu quả cho ứng dụng sẽ mang lại 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, tiêu điểm đề cập đến phần tử nào trong ứng dụng của bạn đang chủ động nhận dữ liệu đầu vào từ bàn phím, chẳng hạn như trường, hộp đánh dấu, nút hoặc đường liên kết. Ngoài các 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 dùng TAB để di chuyển "tiến" và SHIFT + TAB để di chuyển "lùi". Phần tử được lấy tiêu điểm thường được biểu thị bằng một vòng tiêu điểm và nhiều trình duyệt tạo kiểu cho vòng tiêu điểm theo cách khác nhau. Thứ tự mà tiêu điểm chuyển tiếp và lùi qua các phần tử tương tác được gọi là thứ tự nhấn phím Tab.
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 đều có thể lấy tiêu điểm một cách ngầm ẩn: chúng 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 phần tử tương tác này cũng có tính năng xử lý sự kiện từ bàn phím tích hợp. Các phần tử như đoạn văn và div không thể lấy tiêu điểm một cách ngầm định 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 mang đến cho người dùng trải nghiệm di chuyển 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ự hợp lý
- Đặ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 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ừ trên xuống dưới của 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 để thứ tự nhấn phím Tab tự nhiên hơn. Để thay đổi bố cục trực quan trên trang web, hãy di chuyển bố cục đó lên trước trong DOM thay vì tạo kiểu để bố cục đó xuất hiện sớm hơn bằng CSS.
Ví dụ:
<button style="float: right">Kiwi</button> <button>Peach</button> <button>Coconut</button>
<button>Peach</button> <button>Coconut</button> <button>Kiwi</button>
Hãy cẩn thận khi thay đổi vị trí hiển thị của các phần tử bằ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ý, chúng tôi đã di chuyển nút "Kiwi" nổi để xuất hiện sau Coconut và xoá kiểu nội tuyến.
Đặt chính xác trạng thái 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 có trong DOM, nhưng chúng không nên có trong thứ tự thẻ. Ví dụ: nếu bạn có thành phần điều hướng thích ứng mở ra trong một thanh bên khi người dùng nhấp vào nút, thì người dùng không thể tập trung vào thành phần điều hướng khi thành phần 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 cung cấp cho phần tử một trong các thuộc tính CSS sau:
display: nonevisibility: hidden
Để thêm phần tử trở lại thứ tự thẻ, ví dụ: khi chế độ điều hướng đang mở, hãy thay thế các thuộc tính CSS này bằng:
display: blockvisibility: visible
Các bước tiếp theo
Đối với những người dùng thao tác trên máy tính hầu 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à yếu tố cần thiết để giúp ứng dụng của bạn dễ tiếp cận và sử dụng. Để tạo thói quen kiểm tra thứ tự thẻ, hãy thử nhấn phím Tab để chuyển qua ứng dụng trước mỗi lần xuất bản.