Hướng dẫn WCAG 2.2 ‘1.4.5 Văn bản hình ảnh’ Mức AA
Mở đầu
Hướng dẫn WCAG 2.2 “1.4.5 Văn bản hình ảnh” yêu cầu sử dụng văn bản thực tế thay vì hiển thị văn bản dưới dạng hình ảnh khi có thể. Điều này giúp người dùng sử dụng công nghệ hỗ trợ và những người cần phóng to hoặc tùy chỉnh văn bản dễ dàng truy cập nội dung hơn.
Bài viết này sẽ giải thích phương pháp cụ thể để đáp ứng hướng dẫn này một cách dễ hiểu ngay cả đối với những người mới bắt đầu học HTML, CSS, JavaScript.
1. Văn bản hình ảnh là gì?
Văn bản hình ảnh là những chữ được nhúng dưới dạng hình ảnh. Ví dụ, các chữ trong logo hoặc banner là những trường hợp điển hình.
Ví dụ
<img src="text-image.png" alt="Chào mừng">
Văn bản trong hình ảnh như vậy khó khăn trong việc phóng to, thay đổi kiểu, tìm kiếm, dịch và làm giảm khả năng tiếp cận.
2. Phương pháp triển khai đáp ứng tiêu chuẩn.
a. Cung cấp thông tin bằng văn bản
Thay vì sử dụng văn bản hình ảnh, bạn hãy sử dụng HTML và CSS để tạo kiểu cho văn bản.
Ví dụ cải tiến
Ví dụ về HTML và CSS
<p class="styled-text">Chào mừng</p>
.styled-text {
font-family: 'Arial', sans-serif;
font-size: 2em;
font-weight: bold;
color: #333;
text-shadow: 1px 1px 2px #aaa;
}
Lợi ích
- Máy đọc màn hình sẽ đọc đúng văn bản
- Người dùng có thể thay đổi kích thước phông chữ và màu sắc
b. Trường hợp ngoại lệ sử dụng văn bản hình ảnh.
Khi việc sử dụng văn bản hình ảnh không thể tránh khỏi (ví dụ: logo), cung cấp văn bản thay thế thích hợp.
Ví dụ về việc áp dụng ngoại lệ
<img src="logo.png" alt="Logo tên công ty">
Lưu ý
- Mô tả rõ ràng nội dung bằng thuộc tính alt.
- Việc truyền đạt ý nghĩa và vai trò của hình ảnh là rất quan trọng.
c. Sử dụng CSS để kiểm soát phần trình bày.
Bằng cách sử dụng CSS để trang trí văn bản, bạn có thể thực hiện thiết kế mà không cần sử dụng văn bản hình ảnh.
Ví dụ triển khai
HTML
<h1 class="fancy-heading">Khuyến mãi đặc biệt</h1>
CSS
.fancy-heading {
font-family: 'Georgia', serif;
font-size: 3em;
color: #e74c3c;
text-transform: uppercase;
background: linear-gradient(to right, #e74c3c, #f39c12);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Điểm mấu chốt
- Vì có thể tùy chỉnh thiết kế một cách tự do bằng CSS, nên không cần sử dụng văn bản hình ảnh.
d. Chuyển đổi văn bản từ PDF đã quét
Khi sử dụng văn bản từ PDF đã quét, hãy sử dụng OCR (Nhận dạng ký tự quang học) để cung cấp dưới dạng văn bản thực.
Ví dụ
- Sử dụng chức năng OCR của Adobe Acrobat để chuyển đổi PDF đã quét thành văn bản có thể chỉnh sửa.
3. Ví dụ thất bại và biện pháp khắc phục
a. Chỉ sử dụng văn bản hình ảnh.
Ví dụ thất bại
<img src="banner.png" alt="">
- Thuộc tính alt không phù hợp, khiến máy đọc màn hình không nhận diện được văn bản.
Biện pháp cải tiến
<img src="banner.png" alt="Đang diễn ra chương trình khuyến mãi mùa hè!">
b. Hình ảnh văn bản với kiểu dáng cố định.
Ví dụ thất bại
- Hình ảnh mà người dùng không thể thay đổi kích thước phông chữ hoặc màu sắc.
Biện pháp cải tiến
- Triển khai kiểu dáng có thể linh hoạt điều chỉnh bằng cách sử dụng HTML và CSS.
4. Lưu ý khi triển khai
a. Cải thiện khả năng tiếp cận
- Sử dụng văn bản thực tế và giảm thiểu văn bản hình ảnh.
- Khi sử dụng văn bản hình ảnh, cung cấp văn bản thay thế rõ ràng.
b. Hỗ trợ đáp ứng (Responsive)
- Áp dụng kiểu dáng bằng CSS và điều chỉnh thiết kế văn bản theo thiết bị và kích thước màn hình.
5. Lợi ích của khả năng tiếp cận
a. Người dùng có thể tùy chỉnh văn bản.
Vì người dùng có thể thay đổi kích thước phông chữ, màu sắc và nền, nên khả năng đọc được cải thiện.
b. Tối ưu hóa cho công cụ tìm kiếm.
Văn bản thực tế có lợi cho SEO và giúp công cụ tìm kiếm chính xác lập chỉ mục nội dung.
Tóm tắt
Hướng dẫn “1.4.5 Văn bản hình ảnh” của WCAG 2.2 khuyến nghị sử dụng văn bản thực tế để cung cấp thông tin.
Những điểm cần lưu ý khi triển khai
- Điều chỉnh kiểu dáng bằng HTML và CSS, tránh sử dụng văn bản hình ảnh.
- Khi sử dụng văn bản hình ảnh một cách ngoại lệ, hãy đảm bảo cung cấp văn bản thay thế.
- Trong trường hợp PDF đã quét, hãy sử dụng OCR để chuyển đổi thành văn bản.
Bằng cách thực hiện những điều này, bạn có thể cung cấp nội dung web dễ sử dụng cho người dùng khiếm thị và những người có hạn chế về môi trường.
Chúng tôi đã phát hành UUU Web Accessibility Widget Tool, công cụ giúp dễ dàng triển khai khả năng truy cập web. Nếu bạn quan tâm đến việc cải thiện khả năng truy cập, hãy xem thêm thông tin chi tiết.