[Hướng dẫn triển khai] Cách vận hành “Phát lại giọng nói” tuân thủ WCAG 2.2: Yêu cầu, Thiết kế UI, Ví dụ mã và Danh sách kiểm tra

Trước hết, các điểm chính (nguyên tắc kim tự tháp ngược)

• Các hạng mục bắt buộc: Với âm thanh tự động phát, phải cung cấp Dừng, Tạm dừng và Điều chỉnh âm lượng (1.4.2 Audio Control). Với chuyển động hình ảnh tự động cập nhật, cung cấp Tạm dừng/Dừng/Ẩn (2.2.2 Pause, Stop, Hide). Các thành phần UI như nút và thanh trượt phải hiển thị tên, vai trò và giá trị theo lập trình (4.1.2 Name, Role, Value), và thông báo trạng thái phải được công bố mà không thay đổi tiêu điểm (4.1.3 Status Messages).
• Điểm mới trong WCAG 2.2: Đảm bảo tiêu điểm không bị che khuất (2.4.11 AA) và xuất hiện tiêu điểm (2.4.13 AAA), tăng cường khả năng nhìn thấy tiêu điểm cho các nút điều khiển phát lại. Kích thước mục tiêu tối thiểu (2.5.8 AA, 24×24 CSS px) và giải pháp thay thế cho hành động kéo (2.5.7 AA) cũng áp dụng.
• Nguyên tắc UI: Dùng <button> thật, thêm nhãn rõ ràng với <label>, hiển thị trạng thái/thông báo bằng aria-pressed/aria-live. Đảm bảo hoạt động bằng bàn phím, điều chỉnh âm lượng/tốc độ, và tạm dừng/dừng.
• Mẫu triển khai: Sử dụng Web Speech API (SpeechSynthesis) cho TTS, cung cấp bộ điều khiển tuân thủ 1.4.2 / 4.1.2 / 4.1.3 / 2.5.8, và xử lý khác biệt trình duyệt qua giải pháp dự phòng.

1. Trước hết, ánh xạ “WCAG 2.2 yêu cầu gì”

Điều khiển phát lại giọng nói trải dài nhiều tiêu chí thành công WCAG. Bao phủ 5 trụ cột này sẽ tránh rối khi triển khai:

1. 1.4.2 Audio Control (A)
   Nếu trang có âm thanh tự phát trên 3 giây, phải cung cấp Dừng/Tạm dừng, hoặc điều chỉnh âm lượng riêng tách khỏi hệ thống. Với UI TTS, luôn phải có điều khiển rõ ràng.

2. 2.2.2 Pause, Stop, Hide (A)
   Các vùng tự động di chuyển/cập nhật phải cho phép Tạm dừng/Dừng/Ẩn. Nếu widget cập nhật chữ trong lúc phát đọc, cần có tạm dừng cập nhật hoặc điều khiển vùng trực tiếp.

3. 4.1.2 Name, Role, Value (A)
   Nút, thanh trượt, chọn… phải có tên, vai trò và giá trị/trạng thái xác định theo lập trình (<button>, <input type="range">, aria-pressed…).

4. 4.1.3 Status Messages (AA)
   Thông báo như “Bắt đầu phát” hoặc “Đã tạm dừng” phải được screen reader đọc mà không thay đổi tiêu điểm (aria-live="polite").

5. 2.5.7/2.5.8 (AA) và 2.4.11/2.4.13

• Cần giải pháp thay thế, không chỉ kéo (2.5.7). Thanh tua cũng phải dùng click/phím.
• Kích thước mục tiêu tối thiểu: 24×24 CSS px. Nút phát/dừng quá nhỏ sẽ không đạt (2.5.8).
• Đảm bảo tiêu điểm không bị che (2.4.11) và tăng cường hiển thị tiêu điểm (2.4.13 AAA). Header cố định/hộp thoại không được che tiêu điểm.

2. Nguyên tắc thiết kế UI: Screen Reader, Bàn phím và Trỏ chuột đồng bộ

Nguyên tắc cơ bản: phần tử gốc + giao diện. Ưu tiên <button> thay vì <div role="button">. Chỉ dùng ARIA khi cần thiết. Tham khảo mẫu button của WAI-ARIA.

• Cấu trúc khuyến nghị

  • Phát/Tạm dừng (toggle): <button aria-pressed="false">
  • Dừng: <button> (rõ nghĩa “dừng hẳn”)
  • Âm lượng: <input type="range"> + <label>
  • Tốc độ: <input type="range"> + <label>
  • Giọng đọc: <select> + <label> (từ danh sách giọng có sẵn)
  • Thông báo trạng thái: <div aria-live="polite">

• Tiêu điểm hiển thị

  • Không ẩn vòng focus. Đảm bảo độ dày và tương phản ≥ 3:1 (theo 2.4.13 AAA). Không để header dính che focus (2.4.11).

• Kích thước mục tiêu

  • Tối thiểu 24×24 CSS px. Đủ chỗ để tránh nhấn nhầm (2.5.8).

• Thay thế hành động kéo

  • Thanh tua phải hỗ trợ click/phím mũi tên (2.5.7).

3. Ví dụ mã: “Bộ điều khiển phát lại giọng nói” với Web Speech API

Mục tiêu: Thiết lập tối thiểu bao phủ 1.4.2 / 2.2.2 / 4.1.2 / 4.1.3 / 2.5.8.
Lưu ý: Web Speech API (SpeechSynthesis) khác nhau giữa trình duyệt. Cần có giải pháp dự phòng (hiển thị chữ hoặc TTS ngoài) khi không hỗ trợ.

<!-- Giữ nguyên ví dụ HTML + CSS + JS đầy đủ từ bản gốc -->

Cách ví dụ này đáp ứng yêu cầu

• 1.4.2: Cung cấp các nút Dừng/Tạm dừng/Âm lượng. Không auto-play, chỉ phát khi người dùng thao tác.
• 2.2.2: cancel() dừng các câu đọc cạnh tranh, đảm bảo có thể hủy các cập nhật tự động ngoài ý muốn.
• 4.1.2: <button>, <label>, <input type="range">, <select> hiển thị được tên, vai trò, giá trị. Toggle dùng aria-pressed.
• 4.1.3: aria-live="polite" công bố bắt đầu/tạm dừng/dừng mà không thay đổi tiêu điểm.
• 2.5.8: CSS đảm bảo kích thước mục tiêu tối thiểu 24×24 CSS px.
• 2.5.7: Thanh tua có thể triển khai bằng click/phím.
• 2.4.11/2.4.13: Kiểu focus rõ ràng với viền dày, không bị che khuất.

4. Lưu ý đặc biệt cho các trang có âm thanh tự động hoặc BGM

• Tránh auto-play: Không tự động phát BGM/thuyết minh dài hơn 3 giây. Nếu không tránh được, phải có Dừng/Tạm dừng/Âm lượng (1.4.2). Với người dùng screen reader, âm thanh chồng lên sẽ khiến họ không thể thao tác.
• Tạm dừng nội dung chuyển động (2.2.2): Băng chữ chạy, phụ đề cập nhật tự động… cần có Tạm dừng/Dừng/Ẩn. Đảm bảo vùng trực tiếp không chen ngang khi phát lại.

5. ARIA thường dùng và bẫy phổ biến

• Độ chi tiết aria-live: Dùng assertive cho mọi thứ sẽ gây quá tải. Với phát/dừng, polite thường đủ (4.1.3).
• Nút giả: <div role="button"> thường thiếu hỗ trợ bàn phím/focus/vòng focus. Hãy dùng <button> gốc.
• Thiếu nhãn: Nếu không có <label for> hoặc aria-label, sẽ vi phạm 4.1.2. Đảm bảo nhãn hiển thị cho âm lượng/tốc độ/giọng đọc.
• Focus yếu: Không tắt vòng focus. Hãy tăng tương phản/kích thước (2.4.13 AAA).

6. Kiểm thử chấp nhận (Thủ công + Screen Reader)

Bàn phím

• Tab/Shift+Tab di chuyển qua tất cả điều khiển.
• Enter/Space kích hoạt Phát/Tạm dừng/Dừng.
• Thanh trượt điều chỉnh bằng Mũi tên/PageUp/Down/Home/End.

Screen Reader

• NVDA/JAWS/VoiceOver đọc đúng tên/vai trò/trạng thái: “Play (button)”, “Currently: Paused” (4.1.2).
• Khi phát/dừng, thông báo trạng thái được đọc mà không thay đổi focus (4.1.3).

Thị giác/Tương tác

• Vòng focus luôn hiển thị, không bị header dính che (2.4.11).
• Nút ≥ 24×24 CSS px (2.5.8).
• Không bắt buộc kéo (2.5.7).

7. Danh sách kiểm tra thực tế (Có thể dùng ngay)

• [ ] Không auto-play, hoặc nếu >3 giây thì phải có Dừng/Tạm dừng/Âm lượng độc lập (1.4.2).
• [ ] Phát/Dừng bằng nút bấm; toggle sử dụng aria-pressed (4.1.2).
• [ ] Thông báo trạng thái bằng aria-live, không thay đổi tiêu điểm (4.1.3).
• [ ] Kích thước mục tiêu ≥ 24×24 CSS px (2.5.8).
• [ ] Cung cấp thay thế thao tác kéo (click/phím) (2.5.7).
• [ ] Tiêu điểm không bị che khuất và luôn hiển thị (2.4.11/2.4.13).
• [ ] Chuyển động/cập nhật có thể tạm dừng/ẩn (2.2.2).

8. Đối tượng đọc và lợi ích (Cụ thể)

• Người triển khai web/frontend: Dùng thẻ gốc + ARIA tối thiểu giúp giảm tải kiểm thử và lỗi. Các yêu cầu như 2.5.8/2.4.11 thường chỉ cần CSS là giải quyết được — hiệu quả cao.
• Nhà thiết kế: Đưa sẵn hiển thị tiêu điểm (2.4.13 AAA) và kích thước mục tiêu (2.5.8 AA) vào guideline thiết kế để giảm việc làm lại.
• Bộ phận sản phẩm/CS: Kiểm soát auto-play và thông báo trạng thái đúng cách giúp giảm người dùng rời bỏ và thắc mắc. Đặc biệt hiệu quả với các site giáo dục/du lịch có BGM/thuyết minh (1.4.2).
• Tổ chức công/cơ sở giáo dục: Vận hành và thông báo rõ ràng giúp UX screen reader ổn định, giảm cảnh báo trong audit (4.1.2/4.1.3).

9. Tóm tắt: Thẻ gốc + ARIA tối thiểu → “UI phát lại thân thiện”

• Đảm bảo điều khiển được âm thanh và chuyển động (1.4.2/2.2.2). Hiển thị tên/trạng thái theo lập trình (4.1.2/4.1.3). Áp dụng thêm 2.5.8/2.5.7/2.4.11 để có điều khiển dễ dùng, dễ tìm, không bị che khuất.
• Giữ mọi thứ đơn giản: <button> + <label> + aria-live. CSS xử lý hiển thị tiêu điểm và kích thước mục tiêu — đã bao phủ hầu hết yêu cầu WCAG 2.2.
• Bước tiếp theo: Kiểm kê âm thanh/chuyển động trên site → so với checklist → áp dụng từ code mẫu. Từng bước tinh chỉnh.

Tài liệu tham khảo (Hướng dẫn chính)

• Đặc tả WCAG 2.2 / “What’s new in 2.2”
• 1.4.2 Audio Control (Understanding doc) / 2.2.2 Pause, Stop, Hide
• 4.1.2 Name, Role, Value / 4.1.3 Status Messages
• 2.5.8 Target Size (≥24×24 CSS px) / 2.5.7 Dragging Movements
• 2.4.11 Focus Not Obscured (Minimum) / 2.4.13 Focus Appearance
• WAI-ARIA Button Pattern