Site icon Blog IT & Life Hacks｜Ý tưởng để học hỏi và thực hành

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

greeden

Green key with wheelchair icon on white laptop keyboard. Accessibility disability computer symbol

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.

Exit mobile version