Hướng dẫn WCAG 2.2 ‘1.4.9 Văn bản hình ảnh (không có ngoại lệ)’ Cấp AAA
Mở đầu
WCAG 2.2 ‘1.4.9 Văn bản hình ảnh (không có ngoại lệ)’ cơ bản cấm việc sử dụng hình ảnh thay cho văn bản để truyền đạt thông tin.
Ngoại lệ chỉ được công nhận trong các trường hợp sau:
- Được sử dụng như một trang trí thuần túy.
- Cần thiết một cách trình bày cụ thể để truyền đạt thông tin.
- Là một phần của logo hoặc tên thương hiệu (những yếu tố này được coi là thiết yếu đối với thông tin).
Bài viết này sẽ giải thích cụ thể các vấn đề liên quan đến văn bản hình ảnh và các phương pháp thay thế, sử dụng HTML, CSS, JavaScript.
1. Vấn đề của văn bản hình ảnh
a. Sự giảm sút khả năng tiếp cận
- Khó khăn trong việc phóng to và tùy chỉnh: Hình ảnh không thể phóng to hoặc thay đổi màu sắc như văn bản.
- Không hỗ trợ công nghệ trợ giúp: Các trình đọc màn hình không thể đọc văn bản trong hình ảnh (nếu không có văn bản thay thế thích hợp).
b. Sự giảm sút trải nghiệm người dùng
- Trở nên khó đọc trên màn hình nhỏ.
- Người dùng không thể sử dụng các cài đặt phông chữ và màu sắc dễ đọc.
2. Cách để đáp ứng tiêu chuẩn
a. Styling văn bản bằng HTML và CSS
Thay vì sử dụng văn bản hình ảnh, thiết kế văn bản một cách trực quan bằng HTML và CSS.
Ví dụ về HTML và CSS
<p class="styled-text">Văn bản này không phải là hình ảnh, mà được styling bằng HTML và CSS</p>
.styled-text {
font-family: 'Arial', sans-serif;
font-size: 2em;
color: #333;
text-shadow: 1px 1px 2px #aaa;
background: linear-gradient(to right, #ff7e5f, #feb47b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
- Văn bản có thể linh hoạt phóng to hoặc thu nhỏ, cải thiện khả năng tiếp cận.
b. Trong trường hợp cần thiết một cách trình bày cụ thể
Khi thiết kế cụ thể là cần thiết để truyền đạt thông tin, hãy tái tạo thiết kế đó bằng CSS và tránh sử dụng văn bản hình ảnh.
Ví dụ về cách tái tạo bằng HTML và CSS
HTML
<h1 class="fancy-heading">Đang diễn ra chương trình giảm giá đặc biệt!</h1>
CSS
.fancy-heading {
font-family: 'Impact', sans-serif;
font-size: 3em;
color: #ffffff;
background-color: #ff5733;
text-transform: uppercase;
padding: 10px;
text-align: center;
}
c. Trường hợp sử dụng văn bản hình ảnh như một ngoại lệ
Khi việc sử dụng văn bản hình ảnh là không thể tránh khỏi, như trong trường hợp logo hoặc tên thương hiệu, hãy chắc chắn cung cấp văn bản thay thế (alt thuộc tính).
Ví dụ áp dụng ngoại lệ
<img src="brand-logo.png" alt="Logo tên công ty">
Lưu ý
- Văn bản thay thế mô tả ngắn gọn nội dung mà hình ảnh biểu thị.
- Ngoài logo, hãy sử dụng văn bản trong khả năng có thể.
3. Ví dụ về sai sót và cách cải thiện
a. Chỉ sử dụng văn bản hình ảnh
Ví dụ về sai sót
<img src="text-image.png" alt="">
- Nếu thuộc tính alt để trống, trình đọc màn hình sẽ không thể truyền đạt nội dung của hình ảnh.
*Biện pháp cải thiện
<img src="text-image.png" alt="Chương trình giảm giá mùa hè đang diễn ra!">
Hoặc, tái tạo bằng HTML và CSS
b. Không có phương án thay thế cho hình ảnh văn bản
Ví dụ về sai sót
- Văn bản trong hình ảnh không được cung cấp theo cách tiếp cận khả năng truy cập.
Biện pháp cải thiện
- Cung cấp nội dung văn bản hình ảnh bằng HTML.
4. Lưu ý khi triển khai
a. Sử dụng PDF quét
Khi sử dụng văn bản có trong PDF quét, hãy sử dụng OCR (nhận dạng ký tự quang học) để cung cấp văn bản.
b. Bố cục và thiết kế bằng CSS
- Sử dụng CSS để thực hiện thiết kế tương thích với các thiết bị phản hồi.
- Sử dụng các đơn vị tương đối như em và rem để điều chỉnh kích thước phông chữ và bố cục.
5. Lợi ích của khả năng tiếp cận
a. Tùy chỉnh linh hoạt
- Vì người dùng có thể điều chỉnh kích thước phông chữ và màu sắc, nên khả năng đọc được cải thiện.
b. Hỗ trợ công nghệ trợ giúp
- Văn bản thực tế sẽ được nhận diện đúng bởi các trình đọc màn hình và công cụ dịch.
Tóm tắt
Trong WCAG 2.2 “1.4.9 Văn bản hình ảnh (không có ngoại lệ)”, yêu cầu cung cấp thông tin văn bản bằng HTML và CSS trong khả năng có thể, và tránh sử dụng văn bản hình ảnh.
Điểm cần lưu ý khi triển khai
- Styling văn bản bằng HTML và CSS.
- Trong trường hợp sử dụng văn bản hình ảnh như một ngoại lệ, hãy cung cấp văn bản thay thế.
- Sử dụng OCR để chuyển đổi văn bản quét.
Bằng cách tuân thủ các tiêu chuẩn này, bạn có thể cung cấp nội dung web có khả năng tiếp cận cao.
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.