Hướng dẫn đầy đủ về Hỗ trợ Trình đọc màn hình: Nguyên tắc cơ bản & Mẹo triển khai — NVDA, VoiceOver & TalkBack

Tổng quan (Những điểm then chốt trước tiên)

• Trình đọc màn hình không quan tâm đến “giao diện” mà quan tâm đến ngữ nghĩa, khả năng lấy nét, và bộ ba Tên · Vai trò · Giá trị.
• Ưu tiên HTML gốc và chỉ thêm ARIA tối thiểu cần thiết — đây là con đường ngắn nhất để thành công.
• Các công thức tối ưu đọc thực tiễn cho giao diện thường gặp: hình ảnh & biểu tượng, bảng, biểu mẫu, hộp thoại, tab, v.v.
• Các bước kiểm thử thủ công và điểm kiểm tra đọc cho NVDA (Windows) / VoiceOver (macOS & iOS) / TalkBack (Android).
• Bao gồm checklist thực tế, đoạn mã mẫu, và sửa lỗi anti-pattern.

Đối tượng: Kỹ sư front-end, nhà thiết kế UI/UX, nhóm QA/CS, PM/Giám đốc web
Mức độ tiếp cận: Hướng đến WCAG 2.1 AA theo mặc định; cố gắng đạt AAA khi khả thi

1. Giới thiệu: Trình đọc màn hình đọc ý nghĩa, không phải hình thức

Trình đọc màn hình (SR) chuyển đổi thông tin trực quan thành giọng nói hoặc chữ nổi. Người dùng duyệt nội dung theo ý nghĩa thay vì theo thứ tự hiển thị. Ba chìa khóa:

1. Ngữ nghĩa: Thể hiện loại/vai trò phần tử (tiêu đề, nút, liên kết, biểu mẫu, bảng, v.v.).
2. Tên · Vai trò · Giá trị: Tên (label), vai trò (role), trạng thái (value).
3. Lấy nét (focus): Có thể truy cập và định vị được bằng bàn phím hoặc thao tác vuốt.

2. Nguyên tắc: Ưu tiên HTML gốc; chỉ thêm ARIA khi cần

• Dùng button, a, label, table, th, ul/ol, nav, main, header, footer… đúng chức năng trước.
• Tránh lạm dụng role="presentation" hoặc aria-hidden. Không bao giờ ẩn phần tử tương tác.
• Thứ tự DOM = Thứ tự đọc.
• Nhãn (label) phải khớp với văn bản hiển thị.

3. Cách SR hoạt động: Chế độ và điều hướng

• Chế độ duyệt (Browse): nhảy theo tiêu đề, liên kết, mốc.
• Chế độ focus/form: nhập liệu và thao tác.
• Điều hướng điển hình: NVDA dùng H, K, D, F; VoiceOver dùng tổ hợp VO + phím mũi tên; iOS/Android dùng thao tác vuốt và Rotor/menu đọc.

4. Hình ảnh & biểu tượng: mô tả đúng hoặc im lặng đúng lúc

• Thông tin: cung cấp alt.
• Chức năng (icon button): gán nhãn cho nút, không cho ảnh.
• Trang trí: alt="" để im lặng.
• Ưu tiên SVG thay vì icon font.

5. Tiêu đề, landmarks, skip link

• Một h1 duy nhất, sau đó là h2, h3 theo cấp bậc.
• Dùng header, nav, main, footer với nhãn phân biệt.
• Cung cấp liên kết “Skip to content” cho điều hướng nhanh.

6. Biểu mẫu: liên kết nhãn, gợi ý, lỗi

• Dùng <label for="">.
• Gắn thông báo gợi ý/lỗi bằng aria-describedby.
• Khi lỗi: bật role="alert" và aria-invalid.
• Nhóm radio/checkbox bằng fieldset + legend.

7. Bảng: tiêu đề, mối quan hệ, tóm tắt

• Dùng scope="col" cho tiêu đề cột, scope="row" cho hàng.
• Dùng caption để mô tả mục đích bảng.
• Đảm bảo đơn vị rõ ràng trong ô.

8. Hộp thoại/Modal

• role="dialog", aria-modal="true", aria-labelledby, aria-describedby.
• Focus khi mở, trap focus, đóng bằng Esc, trả focus về nút gốc.

9. Tabs, accordion, menu

• Tabs: chỉ tab được chọn mới có trong Tab order; điều hướng bằng phím mũi tên.
• Accordion: nút có aria-expanded.
• Menu điều hướng website: dùng ul/li và a; không lạm dụng role="menu".

10. Cập nhật động & live regions

• Dùng role="status" hoặc aria-live cho thông báo nền.
• role="alert" cho cảnh báo khẩn cấp.

11. Ngôn ngữ & tối ưu đọc

• Gán lang cho trang và đoạn văn ngoại ngữ.
• Dùng abbr để giải thích từ viết tắt.

12. Nội dung ẩn nhưng SR đọc được

• Sử dụng lớp .sr-only thay vì display:none.
• Áp dụng để thêm mô tả phụ cho biểu tượng.

13. Đặc thù di động

• Kích thước chạm: ≥44×44 px.
• Thứ tự DOM = Thứ tự vuốt.
• Thiết kế cho Rotor/Reading menu.

14. Anti-patterns phổ biến

• <div onclick> → thay bằng <button>.
• Nút chỉ có icon → thêm nhãn.
• alt="" cho ảnh quan trọng → thêm mô tả.
• Dùng aria-hidden sai → tránh ẩn phần tử có thể tương tác.
• Thứ tự hiển thị ≠ DOM → phải sắp xếp lại DOM.

15. Kiểm thử thủ công

• NVDA: kiểm tiêu đề, landmark, link, button, form, dialog, tab, table.
• VoiceOver/TalkBack: kiểm focus, đọc alt, thông báo live.

16. Đảm bảo chất lượng: design system & CI

• Định nghĩa Name · Role · Value cho mỗi component.
• Dùng Storybook + addon a11y.
• Tích hợp axe/Lighthouse vào CI/CD.
• Thêm kiểm thử SR thủ công trong sprint.

17. Đoạn mã mẫu (dùng ngay)

• Utility .sr-only.
• Skip link + <main>.
• Vùng thông báo lỗi role="alert".
• Vùng trạng thái role="status".
• Tabs tối giản với ARIA.

18. Bao phủ tiêu chí WCAG 2.1 AA

• 1.1.1 (alt text), 1.3.1 (quan hệ), 2.1.1 (keyboard), 2.4.1 (skip link), 2.4.3 (focus order), 2.4.6 (tiêu đề & nhãn), 2.4.7 (focus visible), 3.3.1 & 3.3.3 (lỗi biểu mẫu), 4.1.2 (Name · Role · Value).

19. Lợi ích

• Dev: Ít bug, dễ bảo trì.
• Designer: Kiến trúc thông tin rõ ràng.
• QA/CS: Quy trình test nhanh.
• PM/Exec: Đáp ứng pháp lý, cải thiện CVR, uy tín thương hiệu.
• Người dùng: Giảm nhầm lẫn, giảm mệt mỏi, dùng được rộng hơn.

20. Kết luận

1. HTML gốc = siêu năng lực.
2. Căn chỉnh Name · Role · Value cho mọi thành phần.
3. Ảnh & icon: mô tả cái cần, im lặng cái thừa.
4. Biểu mẫu & bảng: kết nối nhãn và quan hệ.
5. Mobile: DOM order = flick order.
6. Kiểm thử thường xuyên với NVDA/VoiceOver/TalkBack.

👉 Hãy xây dựng web nơi giọng đọc dẫn dắt rõ ràng, không gây nhầm lẫn, để không ai bị bỏ lại phía sau.