Web Accessibility: checklist thực tế cho developer

Accessibility không chỉ là trách nhiệm đạo đức — nó còn là yêu cầu pháp lý ở nhiều quốc gia và cải thiện SEO, usability cho tất cả users. Nhiều developer bỏ qua vì không biết bắt đầu từ đâu. Bài này cung cấp checklist actionable.

Semantic HTML là nền tảng

Dùng đúng HTML elements: <button> cho buttons (không phải <div onClick>), <nav> cho navigation, <main> cho main content, <article> cho posts. Screen readers và keyboard navigation phụ thuộc vào semantic structure. ARIA chỉ là fallback khi HTML không đủ.

Heading hierarchy quan trọng: một <h1> per page, headings theo thứ tự (h1 > h2 > h3). Screen reader users dùng headings để navigate trang. Đừng dùng heading tags để styling — dùng CSS thay vì.

Keyboard Navigation

Tất cả interactive elements phải accessible bằng keyboard. Tab order phải logical. Focus indicator phải visible — đừng remove outline:none mà không có replacement. Test bằng cách navigate toàn bộ trang chỉ với keyboard.

Custom components (dropdowns, modals, tabs) phải implement keyboard patterns đúng theo ARIA Authoring Practices Guide. Modal phải trap focus khi open và restore focus khi close.

Color Contrast

WCAG AA yêu cầu contrast ratio 4.5:1 cho normal text, 3:1 cho large text. WCAG AAA yêu cầu 7:1. Dùng browser DevTools hoặc axe extension để check. Đừng chỉ dựa vào màu sắc để truyền đạt thông tin — kết hợp với icons hoặc text.

Automated Testing

axe-core (qua axe DevTools extension hoặc jest-axe) có thể phát hiện ~30-40% accessibility issues tự động. Integrate vào CI/CD với playwright-axe hoặc cypress-axe. Automated testing là starting point, không phải điểm kết thúc.