Accessible UI không thể chỉ dùng được bằng chuột. Nếu người dùng không tab được tới control, không thấy focus state, hoặc bị kẹt trong modal, trang đó chưa đạt chuẩn operable của WCAG.
A keyboard flow with tab order markers and a highlighted focus ring.
Tab order • Focus ring • Skip link • No trap focus
Tab order là gì?
Tab order là thứ tự focus khi người dùng bấm Tab và Shift + Tab. Thứ tự này nên phản ánh cấu trúc giao diện tự nhiên, không nên bị bẻ cong bởi tabindex dương.
Nếu muốn đọc thêm từ nguồn chính thức, MDN có trang Keyboard accessible rất rõ.
Checklist focus tối thiểu
- Mọi control tương tác đều focus được bằng keyboard.
- Focus style nhìn thấy rõ, không chỉ đổi màu quá nhẹ.
- Không xóa
outlinenếu chưa thay bằng style khác tốt hơn. - Không dùng
tabindexdương, trừ khi có lý do rất đặc biệt. - Skip link hoặc link bỏ qua nội dung lặp được đặt ở đầu trang.
Lỗi hay gặp
- Dùng
divgắn click handler nhưng không hỗ trợEnter/Space. - Modal không trả focus về nút mở sau khi đóng.
- Dropdown / drawer làm focus bị kẹt hoặc “bay mất”.
- Element có thể focus nhưng không có hành vi tương tác rõ ràng.
Test nhanh bằng tay
- Đặt tay khỏi chuột.
- Tab từ trên xuống dưới toàn bộ flow.
- Quan sát focus có đi đúng thứ tự không.
- Kiểm tra modal, menu, drawer có trap focus hợp lý không.
- Thử lại với zoom lớn để xem focus có bị che bởi layout không.
Bài nên đọc tiếp
- Bấm liên kết scroll trong trang như thế nào?
- Thế nào là viết code theo tiêu chuẩn mobile-first
- Hướng dẫn xây dựng tỷ lệ khung hình responsive
SEO checklist trước khi publish
- Keyword chính xuất hiện trong title và intro.
- Internal links trỏ tới các bài nền tảng frontend hiện có.
- Code sample ngắn, đúng ngữ cảnh.
- Media có caption rõ nghĩa, không chỉ để làm đẹp.
- Phần kết có checklist để người đọc dễ áp dụng ngay.