Đăng ký để truy cập
Đọc thêm nội dung này khi bạn đăng ký ngay hôm nay.
Thay thế văn bản là một trong những nền tảng của khả năng truy cập web. Khi hình ảnh, biểu tượng, biểu đồ, nút bấm hoặc video không thể được cảm nhận trực tiếp, nội dung thay thế bằng văn bản giúp người dùng vẫn hiểu được thông tin và thao tác cần thực hiện.
Trong WCAG 2.2, chủ đề này nằm ở nhóm “Text Alternatives” và liên quan trực tiếp đến tiêu chí 1.1.1 “Non-text Content”. Nói đơn giản, nếu một nội dung không phải văn bản mang thông tin hoặc chức năng, trang web cần cung cấp cách diễn đạt bằng văn bản có cùng mục đích. Điều này đặc biệt quan trọng với người dùng trình đọc màn hình, màn hình chữ nổi hoặc các công nghệ hỗ trợ khác.
Thay thế văn bản là gì?
Thay thế văn bản, thường được gọi là text alternative hoặc alt text, là phần mô tả bằng chữ cho nội dung không phải chữ. Với hình ảnh trong HTML, cách quen thuộc nhất là thuộc tính alt. Với nút bấm chỉ có biểu tượng hoặc liên kết chỉ có hình ảnh, “thay thế văn bản” có thể là tên truy cập được để công nghệ hỗ trợ đọc đúng mục đích của thao tác.
Mục tiêu không phải là mô tả mọi chi tiết nhìn thấy trên màn hình. Mục tiêu là truyền đạt thông tin mà người dùng cần để hiểu nội dung hoặc hoàn thành hành động. Vì vậy, một ảnh trang trí có thể để alt="", trong khi một biểu đồ quan trọng cần mô tả ngắn trong thuộc tính alt và phần giải thích rõ hơn ở gần biểu đồ.
Khi nào cần alt text, khi nào nên để trống?
| Loại nội dung | Cách xử lý nên dùng | Ví dụ |
|---|---|---|
| Hình ảnh mang thông tin | Viết alt text nêu thông tin chính mà hình ảnh truyền đạt. | alt="Sơ đồ quy trình đăng ký gồm ba bước: nhập thông tin, xác nhận, hoàn tất" |
| Hình ảnh chỉ để trang trí | Để alt rỗng để trình đọc màn hình bỏ qua. | alt="" |
| Biểu đồ hoặc đồ thị phức tạp | Dùng alt text ngắn, sau đó thêm phần giải thích bằng văn bản gần biểu đồ. | Alt nêu biểu đồ nói về điều gì, đoạn văn bên dưới giải thích xu hướng chính. |
| Nút bấm hoặc liên kết chỉ có biểu tượng | Cung cấp tên thao tác cụ thể, không dùng nhãn mơ hồ. | “Tải tài liệu PDF” rõ hơn “Nhấp vào đây”. |
| Video hoặc âm thanh | Dùng phụ đề, mô tả âm thanh hoặc nội dung thay thế phù hợp với loại phương tiện. | Video hướng dẫn nên có phụ đề và phần mô tả các thao tác quan trọng trên màn hình. |
WCAG 2.2 yêu cầu điều gì ở nội dung không phải văn bản?
Tiêu chí 1.1.1 của WCAG 2.2 yêu cầu nội dung không phải văn bản có một văn bản thay thế phục vụ mục đích tương đương, trừ một số trường hợp đặc biệt. Với người làm nội dung, có thể hiểu tiêu chí này qua ba câu hỏi thực tế:
- Nếu người dùng không nhìn thấy hình ảnh, họ có mất thông tin quan trọng không?
- Nếu nút hoặc liên kết chỉ có biểu tượng, người dùng có biết thao tác sẽ làm gì không?
- Nếu thông tin nằm trong biểu đồ, video hoặc âm thanh, có phiên bản văn bản đủ rõ để hiểu nội dung không?
Nếu câu trả lời là “có”, cần bổ sung văn bản thay thế. Nếu hình ảnh chỉ tạo không khí hoặc trang trí và không bổ sung ý nghĩa, alt rỗng thường tốt hơn một mô tả dài gây nhiễu.
Ví dụ viết tốt hơn cho hình ảnh, nút bấm và liên kết
| Trường hợp | Chưa tốt | Tốt hơn | Lý do |
|---|---|---|---|
| Ảnh minh họa bài viết | “Ảnh” | “Người dùng đang kiểm tra giao diện web bằng trình đọc màn hình” | Mô tả được ngữ cảnh liên quan đến bài viết. |
| Biểu đồ | “Biểu đồ doanh số” | “Biểu đồ cột so sánh doanh số theo từng năm; phần mô tả bên dưới giải thích các thay đổi chính” | Alt text định danh nội dung, còn phân tích chi tiết nằm trong văn bản chính. |
| Liên kết | “Xem thêm” | Xem hướng dẫn về mục đích của liên kết | Người dùng biết liên kết sẽ dẫn đến nội dung nào. |
| Nút biểu tượng | “Nút” | “Tìm kiếm”, “Mở menu”, “Đóng hộp thoại” | Tên thao tác phản ánh đúng chức năng. |
Bối cảnh pháp lý và vận hành nên được hiểu thận trọng
Khả năng truy cập web không chỉ là vấn đề kỹ thuật. Ở nhiều khu vực, tổ chức công, dịch vụ công hoặc một số loại dịch vụ số có thể chịu yêu cầu pháp lý riêng. Tuy nhiên, phạm vi áp dụng phụ thuộc vào quốc gia, lĩnh vực và loại tổ chức, nên không nên diễn giải WCAG như một bảo đảm tuân thủ pháp lý tự động.
- Hoa Kỳ: ADA thường được nhắc đến trong bối cảnh quyền tiếp cận của người khuyết tật. Với nội dung web và ứng dụng di động của chính quyền tiểu bang và địa phương, quy định cụ thể cần được xem xét theo bối cảnh áp dụng.
- Liên minh Châu Âu: Web Accessibility Directive tập trung vào trang web và ứng dụng di động của các cơ quan khu vực công, cùng các cơ chế như tuyên bố khả năng truy cập, phản hồi của người dùng và giám sát định kỳ.
- Nhật Bản: JIS X 8341-3:2016 là một tiêu chuẩn tham chiếu quan trọng cho khả năng truy cập nội dung web, đặc biệt khi tổ chức muốn đánh giá và cải thiện cách cung cấp thông tin cho nhiều nhóm người dùng.
Với đội phát triển và đội nội dung, cách tiếp cận an toàn là xem alt text như một phần của quy trình xuất bản: viết, kiểm tra, sửa lại khi nội dung thay đổi và tránh nhồi từ khóa chỉ vì mục tiêu SEO. Alt text tốt trước hết phải hữu ích cho người dùng.
3. Xử lý biểu đồ và nội dung phức tạp
Với biểu đồ, bản đồ, sơ đồ quy trình hoặc infographic, alt text ngắn thường không đủ. Một cách làm dễ kiểm soát là dùng alt text để định danh nội dung, sau đó đặt bảng dữ liệu, danh sách ý chính hoặc đoạn giải thích ngay bên dưới.
| Nội dung phức tạp | Cách trình bày dễ tiếp cận hơn |
|---|---|
| Biểu đồ xu hướng | Alt text nêu chủ đề biểu đồ; đoạn văn bên dưới tóm tắt xu hướng chính. |
| Sơ đồ quy trình | Viết lại các bước theo danh sách có thứ tự. |
| Infographic nhiều số liệu | Chuyển thông tin chính thành bảng hoặc danh sách ngắn. |
4. Đừng bỏ qua nút bấm, biểu tượng và liên kết
Khả năng truy cập không chỉ nằm ở ảnh. Một nút chỉ có biểu tượng kính lúp cần có tên “Tìm kiếm”. Một liên kết chỉ ghi “tại đây” nên được thay bằng nội dung mô tả điểm đến. Nếu bài viết có nhiều liên kết, hãy kiểm tra lại mục đích của liên kết trong ngữ cảnh để người dùng hiểu được hành động trước khi kích hoạt.
5. Chuẩn bị thay thế cho phương tiện truyền thông
Video và âm thanh cần được xử lý theo loại nội dung. Video đã ghi sẵn thường cần phụ đề cho lời nói và âm thanh quan trọng; video hướng dẫn thao tác có thể cần mô tả các phần chỉ xuất hiện bằng hình ảnh. Với phát trực tiếp, hãy cân nhắc phụ đề thời gian thực hoặc phương án hỗ trợ tương đương. Có thể tham khảo thêm hướng dẫn về phụ đề, thuyết minh âm thanh và tính tương tác trong video.
Checklist kiểm tra nhanh trước khi xuất bản
- Mỗi hình ảnh mang thông tin đã có alt text đúng mục đích.
- Hình ảnh trang trí dùng
alt=""thay vì mô tả thừa. - Biểu đồ, sơ đồ và infographic có phần giải thích bằng văn bản.
- Nút bấm và liên kết dùng nhãn hành động rõ ràng.
- Video có phụ đề hoặc mô tả phù hợp với nội dung.
- Alt text đã được đọc lại trong ngữ cảnh của trang, không chỉ kiểm tra riêng từng ảnh.
Tóm tắt
Thay thế văn bản tốt giúp người dùng hiểu được nội dung ngay cả khi họ không nhìn thấy hình ảnh hoặc không thể tiếp cận phương tiện theo cách thông thường. Với WCAG 2.2, điểm quan trọng không phải là viết thật nhiều, mà là viết đúng mục đích: nội dung nào cần mô tả thì mô tả rõ, nội dung trang trí thì để công nghệ hỗ trợ bỏ qua, nội dung phức tạp thì cung cấp phần giải thích đầy đủ hơn.
Nếu đưa alt text vào quy trình biên tập hằng ngày, nhóm nội dung và nhóm phát triển sẽ giảm được lỗi lặp lại, cải thiện trải nghiệm cho người dùng công nghệ hỗ trợ và tạo ra trang web dễ sử dụng hơn cho nhiều người.