A11y là cách viết rút gọn của accessibility. Với website, nó không chỉ là “thêm alt cho ảnh” mà là thiết kế để người dùng có thể đọc, điều hướng, hiểu và thao tác bằng nhiều cách khác nhau: chuột, bàn phím, screen reader, touch, voice control.
Dark accessibility dashboard with keyboard, label, contrast and focus indicators.
Keyboard • Labels • Contrast • Focus • ARIA
A11y giải quyết vấn đề gì?
Một trang web “trông ổn” chưa chắc đã “dùng ổn”. A11y giúp:
- Người dùng dùng bàn phím vẫn thao tác được.
- Screen reader đọc đúng cấu trúc nội dung và tên điều khiển.
- Người có thị lực yếu vẫn đọc được nhờ tương phản và scale hợp lý.
- Form có label, lỗi và hướng dẫn rõ ràng hơn.
- Trải nghiệm trên mobile, TV, kiosk hoặc thiết bị hỗ trợ đều tốt hơn.
Nếu muốn xem hệ thống quy chuẩn lớn hơn, có thể đọc thêm WCAG 2 Overview của W3C.
4 nguyên tắc WCAG 2.2
- Perceivable: nội dung phải có thể nhận biết, như alt text, caption, contrast.
- Operable: điều khiển được bằng bàn phím, focus rõ ràng, không trap focus.
- Understandable: label, error message, copy và flow phải dễ hiểu.
- Robust: markup đủ chuẩn để trình duyệt và công nghệ hỗ trợ đọc được.
Những lỗi dev thường bỏ sót
- Dùng
divhoặcspanlàm nút bấm. - Ẩn outline focus rồi quên thay bằng focus style khác.
- Form chỉ có placeholder, không có label thật.
- Dùng ARIA quá tay thay vì semantic HTML.
- Heading nhảy cấp hoặc cấu trúc bài không có H2/H3 rõ ràng.
Bài nên đọc tiếp trong cluster
- Semantic HTML cho A11y
- aria-label, aria-labelledby và aria-describedby khác nhau thế nào?
- Keyboard accessibility: focus order, tabindex và lỗi hay gặp
- Form accessible: label, hint, error message và trạng thái cần có
SEO checklist trước khi publish
- Title chứa cụm từ chính và đủ rõ intent tìm kiếm.
- Meta description mô tả đúng giá trị bài viết.
- Bài có ít nhất 1 H1 duy nhất và nhiều H2/H3 hợp lý.
- Có internal link tới bài trụ cột và bài liên quan.
- Ảnh hoặc media có alt text/figcaption mô tả rõ.
Tham khảo thêm: Keyboard accessible – MDN