Thời lượng: 1 tuần
Level: Intermediate
Yêu cầu: Hoàn thành các module Component Architecture (4-6)
Tổng quan Module
Accessibility (A11y) không phải là một "tính năng" cộng thêm, nó là quyền cơ bản của người dùng. Trong Design System, A11y giúp chúng ta giải quyết vấn đề từ gốc rễ: Nếu component cơ bản (vd: Button) đã accessible, hàng ngàn trang web sử dụng nó cũng sẽ tự động accessible.
Kết quả học tập
Sau module này, bạn sẽ:
- Hiểu và áp dụng Semantic HTML & ARIA Roles đúng cách.
- Thiết kế hệ thống Keyboard Navigation chuyên nghiệp (Focus trap, Skip links).
- Biết cách test giao diện với Screen Readers (NVDA, VoiceOver).
- Đảm bảo Color Contrast đạt chuẩn WCAG 2.1 AA/AAA.
Bài 7.1: Semantic HTML & ARIA
Lý thuyết
Semantic HTML là gì?
Sử dụng các thẻ HTML đúng mục đích (<button> cho hành động, <a> cho chuyển trang, <nav> cho điều hướng) giúp trình duyệt và thiết bị trợ giúp hiểu được cấu trúc web.
ARIA (Accessible Rich Internet Applications):
Khi HTML thuần không đủ để mô tả các component phức tạp (vd: Tabs, Modals), chúng ta dùng thuộc tính aria-*.
Quy tắc vàng của ARIA:
"Nếu bạn có thể dùng một thẻ HTML có sẵn (native) để thay thế, ĐỪNG dùng ARIA."
Bài 7.2: Keyboard Navigation
Lý thuyết
Nhiều người dùng không sử dụng chuột. Họ điều hướng bằng phím Tab, Enter, Space và các phím mũi tên.
Các thành phần quan trọng:
- Focus Rings: Tuyệt đối không xóa bỏ
outline: nonemà không có phương án thay thế rõ ràng. - Focus Order: Thứ tự Tab phải logic (trên xuống dưới, trái sang phải).
- Focus Trap: Khi Modal mở, tiêu điểm phải được giữ bên trong Modal.
Bài 7.3: Screen Reader Testing
Lý thuyết
Screen Readers chuyển văn bản và cấu trúc web thành giọng nói hoặc chữ nổi.
Checklist cho Screen Reader:
- Alt Text: Mọi hình ảnh quan trọng đều phải có
alt. Hình ảnh trang trí thì dùngalt="". - Form Labels: Input không có label đi kèm sẽ vô dụng với người khiếm thị.
- Live Regions: Thông báo cho người dùng khi có nội dung thay đổi động (vd: toast notification) bằng
aria-live.
Thực hành: Accessibility Auditor
Hãy thử nghiệm công cụ kiểm tra độ tương phản màu sắc và trạng thái Focus ngay dưới đây:
Câu hỏi thảo luận
- A11y Debt: Làm sao để thuyết phục Stakeholders đầu tư cho Accessibility khi họ chỉ quan tâm đến tính năng?
- Overlay Tools: Các công cụ "Accessibility Overlays" tự động có thực sự giải quyết được vấn đề không?
- SVG Accessibility: Làm sao để icon trở nên accessible?
Tổng kết Module
Bạn đã học:
- Tầm quan trọng của Semantic HTML và ARIA.
- Cách thiết kế Keyboard Navigation đồng nhất.
- Tư duy thiết kế bao hàm (Inclusive Design).
Bước tiếp theo
Module 8 sẽ đi sâu vào Styling Systems - so sánh giữa CSS-in-JS, CSS Modules và Utility CSS để chọn ra "vũ khí" phù hợp nhất cho dự án của bạn.