FresherKỹ thuậtKhả năng tiếp cận (accessibility)
Keyboard accessibility nghĩa là gì và người dùng mong đợi những phím nào hoạt động?
Thử trả lời trước
Đáp án mẫu
Keyboard accessibility nghĩa là mọi tính năng đều dùng được mà không cần chuột (WCAG 2.1.1). Những người phụ thuộc vào nó gồm người dùng screen reader, người khuyết tật vận động, người dùng thiết bị switch và người dùng thành thạo.
Các phím người dùng mong đợi:
TabvàShift+Tab: di chuyển tới và lui giữa các phần tử tương tác.Enter: kích hoạt link và button.Space: kích hoạt button, bật tắt checkbox và cuộn trang.- Phím mũi tên: di chuyển bên trong các nhóm như radio, tab, menu và danh sách.
Esc: đóng dialog, menu và popup.HomevàEnd: nhảy tới mục đầu hoặc cuối của danh sách.
Điều gì làm nó hoạt động:
- Dùng phần tử native (
button,a href,input), vốn focus được và hỗ trợ bàn phím sẵn. - Giữ chỉ báo focus nhìn thấy được (WCAG 2.4.7).
- Giữ thứ tự focus hợp lý khớp với thứ tự hiển thị.
- Không bao giờ tạo keyboard trap: người dùng phải thoát được mọi component.
- Tránh các giá trị
tabindexdương.
Hãy tự thử: rút chuột ra và hoàn thành một tác vụ trên trang của bạn.
Ý chính
- Mọi tính năng phải dùng được mà không cần chuột
- Tab, Enter, Space, mũi tên và Esc là các phím được mong đợi
- Phần tử native có sẵn hỗ trợ bàn phím
- Focus phải nhìn thấy được, hợp lý và không bị kẹt
Câu hỏi nối tiếp thường gặp
- Enter và Space khác nhau thế nào trên một button?
- Vì sao nên tránh các giá trị tabindex dương?
Lỗi thường gặp
- Xóa focus outline mà không có thứ thay thế
- Tạo phần tử click được nhưng chỉ phản hồi với chuột