Mở đầu — vì sao bài này quan trọng
Hãy tưởng tượng bạn đang ngồi trên xe buýt từ Cầu Giấy về Hà Đông vào giờ cao điểm. Bạn muốn xem một video hướng dẫn dài 8 phút trên điện thoại nhưng lại quên tai nghe. Xung quanh ồn ào, bạn không thể bật loa. Nếu video đó có phụ đề (captions), bạn vẫn theo dõi trọn vẹn. Nếu không, bạn đành tắt đi.
Bây giờ hãy nghĩ đến một người điếc hoặc lãng tai bẩm sinh. Với họ, video không có phụ đề không phải là "bất tiện" — mà là hoàn toàn không thể tiếp cận. Toàn bộ nội dung âm thanh biến mất. Một podcast dài 40 phút không có bản ghi lời (transcript) chẳng khác nào một cánh cửa khóa trái.
Đây chính là lý do bài học này quan trọng. Trong toàn bộ khóa học về accessibility, chúng ta đã bàn nhiều về HTML, ARIA, màu sắc, bàn phím. Nhưng nội dung media — video và audio — là một mảng riêng biệt với những quy tắc riêng của WCAG. Chỉ cần một video quảng cáo sản phẩm không có phụ đề, bạn đã tự động loại bỏ khoảng 5-6% dân số Việt Nam có vấn đề về thính giác ở nhiều mức độ, chưa kể vô số người dùng "tình huống" (situational) như anh bạn trên xe buýt kia.
Bài 30 tập trung riêng vào captions và transcripts — hai công cụ giúp nội dung âm thanh và hình ảnh trở nên tiếp cận được cho mọi người. Chúng ta sẽ đi từ nền tảng WCAG (đặc biệt là tiêu chí 1.2.1 mà ghi chú gốc nhắc đến), phân biệt rạch ròi các loại nội dung media, rồi đến cách triển khai thực tế.
Khái niệm cốt lõi
Ba khái niệm dễ nhầm lẫn: Captions, Subtitles, Transcript
Rất nhiều người dùng ba từ này thay thế cho nhau, nhưng chúng khác nhau về bản chất:
- Captions (phụ đề trợ năng): Văn bản đồng bộ với video, không chỉ ghi lại lời thoại mà còn cả âm thanh quan trọng khác — tiếng chuông cửa, tiếng nhạc nền, tiếng cười, "[tiếng kính vỡ]", "[nhạc hồi hộp]". Captions được thiết kế cho người không nghe được âm thanh. Đây là loại quan trọng nhất về mặt accessibility.
- Subtitles (phụ đề dịch): Chỉ dịch lời thoại sang một ngôn ngữ khác, giả định người xem vẫn nghe được âm thanh. Ví dụ: xem phim Hàn với phụ đề tiếng Việt. Subtitles KHÔNG mô tả âm thanh nền, nên KHÔNG đủ để đáp ứng accessibility.
- Transcript (bản ghi lời): Toàn bộ nội dung âm thanh được ghi thành văn bản, không cần đồng bộ theo thời gian. Đây là một khối văn bản đầy đủ mà người dùng có thể đọc từ đầu đến cuối, tìm kiếm, hoặc để screen reader đọc.
Phân loại media theo WCAG
WCAG chia nội dung media thành các nhóm, và mỗi nhóm có yêu cầu khác nhau. Đây là điểm mấu chốt mà ghi chú gốc của bài đề cập:
1. Audio-only (chỉ có âm thanh) — ví dụ: podcast, file ghi âm. Không có hình ảnh, chỉ có tiếng nói/âm thanh. Yêu cầu: cung cấp transcript. Vì không có hình ảnh nào bị mất khi chuyển sang text, một bản ghi lời đầy đủ là đủ để người điếc tiếp cận toàn bộ nội dung.
2. Video-only (chỉ có hình ảnh, không âm thanh) — ví dụ: video hướng dẫn thao tác không lời, animation minh họa. Có hình ảnh nhưng không có tiếng. Yêu cầu: cung cấp một bản mô tả bằng text (text description) HOẶC một track âm thanh mô tả (audio description) kể lại những gì đang diễn ra trên màn hình. Vì người khiếm thị không thấy được hình ảnh, ta phải "kể" lại nội dung hình ảnh cho họ.
3. Video có âm thanh (synchronized media) — loại phổ biến nhất. Có cả hình lẫn tiếng. Loại này cần nhiều lớp bảo vệ hơn: captions cho người điếc, và ở mức cao hơn là audio description cho người khiếm thị. Trong bài này ta tập trung vào captions và transcripts.
WCAG 1.2.1 — Audio-only and Video-only (Prerecorded) — Level A
Đây là tiêu chí nền tảng, thuộc Level A (mức tối thiểu bắt buộc). Nội dung của nó rất rõ ràng:
- Với nội dung audio-only đã ghi sẵn (prerecorded): phải cung cấp một giải pháp thay thế bằng text trình bày thông tin tương đương — tức là transcript.
- Với nội dung video-only đã ghi sẵn: phải cung cấp text alternative hoặc audio track mô tả nội dung hình ảnh.
Các tiêu chí liên quan trong nhóm 1.2 (Time-based Media)
Để bạn có bức tranh tổng thể mà không lạc sang bài khác:
- 1.2.2 Captions (Prerecorded) — Level A: Video có âm thanh đã ghi sẵn phải có captions.
- 1.2.3 Audio Description or Media Alternative (Prerecorded) — Level A: Cung cấp audio description HOẶC transcript đầy đủ cho video có tiếng.
- 1.2.4 Captions (Live) — Level AA: Nội dung phát trực tiếp cần captions thời gian thực.
- 1.2.5 Audio Description (Prerecorded) — Level AA: Bắt buộc audio description cho video có tiếng ở mức AA.
Định dạng file captions: WebVTT và SRT
Về mặt kỹ thuật, captions thường được lưu trong file văn bản riêng và gắn vào video. Hai định dạng phổ biến:
- SRT (SubRip): định dạng lâu đời, đơn giản, được YouTube và nhiều player hỗ trợ.
- WebVTT (.vtt): chuẩn của web, dùng với thẻ
<track>trong HTML5, hỗ trợ định vị và định dạng phong phú hơn. Đây là định dạng bạn nên ưu tiên khi làm web.
Tình huống thực tế
Ví dụ 1: Kênh podcast của một startup fintech tại TP.HCM
Một startup fintech (giả định tên "MoMoney") có một podcast tuần về quản lý tài chính cá nhân, mỗi tập dài 30-45 phút, đăng trên website. Trong 6 tháng đầu, họ chỉ đăng file MP3 kèm một đoạn mô tả ngắn 3 dòng.
Vấn đề: Một người dùng điếc gửi email phàn nàn rằng anh muốn học về đầu tư nhưng không tiếp cận được bất kỳ tập nào. Đội SEO cũng nhận ra Google không "nghe" được nội dung audio, nên các tập podcast gần như vô hình trên tìm kiếm.
Giải pháp: Đội nội dung áp dụng WCAG 1.2.1 — bổ sung transcript đầy đủ cho từng tập, đặt ngay dưới trình phát audio, kèm nút "Xem bản ghi lời". Họ dùng công cụ chuyển giọng nói thành văn bản để tạo bản nháp, rồi biên tập viên soát lại tên riêng và thuật ngữ tài chính.
Kết quả sau 3 tháng: lượng truy cập tự nhiên (organic) vào trang podcast tăng khoảng 40% vì Google index được toàn bộ nội dung text. Người dùng điếc tiếp cận được nội dung. Và bất ngờ nhất: nhiều người dùng bình thường phản hồi rằng họ thích đọc transcript hơn nghe khi đang ở văn phòng.
Bài học: Transcript không chỉ là accessibility — nó là SEO và trải nghiệm người dùng. Một khoản đầu tư, ba lợi ích.
Ví dụ 2: Video hướng dẫn thao tác không lời trên app giao đồ ăn
Một app giao đồ ăn (giả định "FoodFast") thêm một video ngắn 15 giây trong màn hình onboarding, minh họa cách vuốt để đặt hàng nhanh. Video không có lời thoại, chỉ có animation ngón tay vuốt trên màn hình kèm nhạc nền vui tươi. Đây là video-only (về mặt thông tin, âm thanh chỉ là nhạc trang trí, không mang nội dung).
Vấn đề: Người khiếm thị dùng screen reader hoàn toàn không biết video đó đang minh họa điều gì. Screen reader chỉ đọc "video" rồi im lặng.
Giải pháp: Đội thiết kế áp dụng phần "video-only" của WCAG 1.2.1 — thêm một text alternative ngay cạnh video: "Video minh họa: vuốt thẻ món ăn sang phải để thêm nhanh vào giỏ hàng." Đồng thời họ đảm bảo văn bản này được screen reader đọc và cũng hiển thị dưới dạng caption cho người điếc (dù ở đây người điếc không mất nhiều vì không có lời thoại).
Bài học: Với video không lời, đừng nghĩ "không có tiếng thì khỏi cần làm gì". Người khiếm thị mất phần hình ảnh, nên bạn phải kể lại nội dung hình ảnh bằng text.
Ví dụ 3: Trang khóa học trực tuyến với video bài giảng có tiếng
Một nền tảng học nghề (bối cảnh rất giống chính khóa học này) có hàng trăm video bài giảng, mỗi video 10-20 phút, giảng viên nói tiếng Việt. Ban đầu không có phụ đề.
Vấn đề: Học viên khiếm thính không theo học được. Ngoài ra, nhiều học viên đi làm phản ánh họ hay xem bài giảng lúc nghỉ trưa ở nơi công cộng nhưng không tiện bật loa.
Giải pháp: Đội sản phẩm triển khai captions (WebVTT) cho toàn bộ video có tiếng, đồng bộ theo thời gian, ghi cả những chỗ giảng viên nhấn mạnh và ghi chú như "[demo trên màn hình]". Song song, họ tạo transcript đầy đủ đặt bên dưới mỗi video để học viên có thể tìm kiếm nhanh một khái niệm mà không cần tua đi tua lại.
Kết quả: tỷ lệ hoàn thành khóa học tăng, học viên phản hồi rằng chức năng tìm trong transcript giúp ôn tập nhanh hơn nhiều.
Bài học: Với synchronized media (video có tiếng), lý tưởng là kết hợp captions + transcript. Captions phục vụ lúc xem; transcript phục vụ lúc tra cứu và ôn tập.
Hướng dẫn từng bước
Dưới đây là quy trình thực tế để đảm bảo nội dung media của bạn đạt chuẩn.
Bước 1 — Phân loại nội dung media của bạn. Trước khi làm gì, xác định mỗi file thuộc loại nào: audio-only (podcast), video-only (không lời), hay video có tiếng. Việc phân loại quyết định bạn cần transcript, text description, hay captions.
Bước 2 — Với audio-only: tạo transcript.
- Dùng công cụ speech-to-text để tạo bản nháp (ví dụ các dịch vụ chuyển giọng nói thành văn bản hỗ trợ tiếng Việt).
- Bắt buộc biên tập lại bằng tay: sửa tên riêng, thuật ngữ, dấu câu, và loại bỏ từ đệm "à, ừm" nếu không cần thiết.
- Nếu có nhiều người nói, ghi rõ tên người nói:
Nam:/Lan:. - Đặt transcript ngay gần trình phát, trong một khối
<details>có thể mở/đóng hoặc một trang riêng có liên kết rõ ràng.
aria-describedby.Bước 4 — Với video có tiếng: tạo captions dạng WebVTT.
Cấu trúc một file .vtt cơ bản:
WEBVTT
00:00:01.000 --> 00:00:04.000
Xin chào, hôm nay chúng ta học về phụ đề.
00:00:04.500 --> 00:00:07.000
[nhạc nền nhẹ nhàng]
Gắn vào video bằng thẻ <track>:
<video controls>
<source src="bai-giang.mp4" type="video/mp4">
<track src="bai-giang.vi.vtt" kind="captions"
srclang="vi" label="Tiếng Việt" default>
</video>
Lưu ý: dùng kind="captions" (không phải subtitles) để thể hiện đây là phụ đề trợ năng có mô tả âm thanh.
Bước 5 — Đảm bảo chất lượng đồng bộ. Captions phải xuất hiện đúng lúc, không quá nhanh khiến người đọc không kịp, không quá 2 dòng mỗi lần. Chuẩn tham khảo: khoảng 32-42 ký tự mỗi dòng.
Bước 6 — Cung cấp transcript song song cho video có tiếng. Ngoài captions, thêm transcript để hỗ trợ tìm kiếm, ôn tập và người dùng khiếm thị dùng screen reader đọc một mạch.
Bước 7 — Kiểm thử. Bật captions, xem thử với âm lượng tắt. Dùng screen reader kiểm tra transcript có được đọc đúng không. Kiểm tra trên di động vì đây là nơi người dùng "tình huống" cần captions nhất.
Lỗi thường gặp & mẹo
Lỗi 1 — Dùng auto-captions của YouTube rồi để nguyên. Phụ đề tự động sinh bằng máy (đặc biệt tiếng Việt có dấu) thường sai rất nhiều, thiếu dấu câu, và không mô tả âm thanh nền. WCAG yêu cầu captions chính xác. Auto-caption chỉ là điểm khởi đầu — luôn phải biên tập lại.
Lỗi 2 — Nhầm subtitles với captions. Nhiều team nghĩ "đã có phụ đề tiếng Việt là xong". Nhưng nếu phụ đề đó chỉ ghi lời thoại mà bỏ qua tiếng chuông cửa, tiếng nhạc báo hiệu tình tiết, thì người điếc vẫn mất thông tin. Captions phải mô tả cả âm thanh phi lời quan trọng.
Lỗi 3 — Chôn nội dung quan trọng vào audio mà không có transcript. Ví dụ một thông báo khuyến mãi chỉ đọc bằng giọng nói trong video, không có text nào tương đương. Nguyên tắc: mọi thông tin truyền qua âm thanh phải có bản text tương đương.
Lỗi 4 — Quên "burned-in captions" không thay thế được captions thật. Phụ đề "cháy cứng" vào khung hình (không tắt được) không cho người dùng bật/tắt, không đổi cỡ chữ, không được screen reader đọc. Ưu tiên captions dạng track riêng.
Mẹo hữu ích:
- Viết transcript ngay trong quy trình sản xuất, không để dồn về sau — rẻ và nhanh hơn nhiều.
- Với tiếng Việt, kiểm tra kỹ dấu và tên riêng vì đây là chỗ máy hay sai nhất.
- Đặt nút "Xem bản ghi lời / Transcript" nổi bật, đừng giấu.
- Nhớ rằng captions và transcript còn giúp SEO và người học ở môi trường ồn — hãy dùng lập luận này để thuyết phục cấp trên cấp ngân sách.
Bài tập thực hành
Bài tập 1 — Phân loại. Cho 4 nội dung sau, xác định mỗi cái là audio-only, video-only hay video có tiếng, và cần gì (transcript / text description / captions): a) Một tập podcast phỏng vấn dài 25 phút. b) Một animation 10 giây minh họa cách gấp hộp giấy, không có lời. c) Một video quảng cáo có người dẫn nói và nhạc nền. d) Một file ghi âm hướng dẫn thiền 15 phút.
Bài tập 2 — Viết file WebVTT.
Lấy một video ngắn (10-20 giây) có lời thoại tiếng Việt của bạn. Tự viết một file .vtt với ít nhất 3 khối thời gian, trong đó có ít nhất một chú thích âm thanh phi lời như [tiếng vỗ tay]. Gắn vào một trang HTML bằng thẻ <track> và kiểm tra phụ đề hiển thị đúng.
Bài tập 3 — Tạo transcript cho podcast. Chọn một đoạn audio 3 phút. Dùng công cụ speech-to-text tạo bản nháp, rồi biên tập tay: sửa dấu câu, tên riêng, ghi rõ người nói nếu có nhiều giọng. So sánh bản nháp máy và bản đã biên tập, ghi lại những loại lỗi máy hay mắc.
Bài tập 4 — Kiểm thử tình huống. Mở một video có captions trên điện thoại, tắt tiếng hoàn toàn, và thử theo dõi nội dung chỉ bằng phụ đề. Ghi lại: bạn có hiểu đủ không? Có chỗ nào phụ đề trôi quá nhanh không? Điều này giúp bạn cảm nhận trải nghiệm của người dùng thực.
Tóm tắt
Bài 30 tập trung vào hai công cụ cốt lõi để nội dung media trở nên tiếp cận được: captions và transcripts.
Những điểm cần khắc cốt ghi tâm:
- Captions là phụ đề đồng bộ theo thời gian, ghi cả lời thoại lẫn âm thanh quan trọng, dành cho người không nghe được. Subtitles chỉ dịch lời thoại và KHÔNG đủ cho accessibility. Transcript là bản văn bản tĩnh của toàn bộ nội dung âm thanh.
- WCAG 1.2.1 (Level A): audio-only cần transcript; video-only cần text alternative hoặc audio description. Đây là mức tối thiểu bắt buộc.
- Với video có tiếng, ở mức AA bạn cần captions, và lý tưởng là bổ sung thêm transcript để hỗ trợ tìm kiếm và ôn tập.
- Kỹ thuật: dùng WebVTT với thẻ
<track kind="captions">cho web. - Đừng tin auto-caption một cách mù quáng, đặc biệt với tiếng Việt có dấu — luôn biên tập lại.
- Lợi ích vượt xa accessibility: SEO tốt hơn, phục vụ người dùng trong môi trường ồn hoặc thầm lặng, tăng tỷ lệ hoàn thành nội dung.