WCAG 2.2 Hướng dẫn 1.1.1 Nội dung không phải văn bản: Giải thích dành cho người mới bắt đầu và ví dụ cụ thể

1.1.1 “Nội dung không phải văn bản là gì?”

Hướng dẫn 1.1.1 “Nội dung không phải văn bản” trong WCAG (Web Content Accessibility Guidelines) 2.2 là tiêu chuẩn nhằm đảm bảo tất cả người dùng có thể hiểu được nội dung không phải văn bản (hình ảnh, video, âm thanh, v.v.) trên trang web mà không cần dựa vào thị giác hay thính giác.

Ví dụ, ngay cả khi hình ảnh hoặc biểu tượng được hiển thị trên trang, những người khiếm thị hoặc sử dụng trình duyệt chỉ hỗ trợ văn bản sẽ không thể nhìn thấy chúng. Hướng dẫn này yêu cầu cung cấp thông tin thay thế (như văn bản alt) để đảm bảo mọi người đều nhận được cùng một thông tin.

Quy tắc cơ bản

Cần tuân thủ các điểm sau:

1. Cung cấp văn bản thay thế cho nội dung không phải văn bản

   • Ví dụ: Đối với hình ảnh, biểu đồ, nút bấm, cần đính kèm văn bản mô tả nội dung.

2. Đối với nội dung mang mục đích trang trí hoặc không có ý nghĩa, cần chỉ định cách xử lý phù hợp

   • Ví dụ: Hình ảnh trang trí trong thiết kế nên được cấu hình để không bị đọc bởi trình đọc màn hình.

3. Cung cấp phụ đề hoặc mô tả cho nội dung âm thanh và video

   • Ví dụ: Chuyển nội dung âm thanh thành văn bản hoặc thêm phụ đề cho video.

Giải thích bằng ví dụ cụ thể

Giải thích bằng cách đưa ra các ví dụ cụ thể để người mới bắt đầu cũng có thể dễ dàng hiểu

1. Văn bản thay thế cho hình ảnh (thuộc tính alt)

Ví dụ đúng:

Trường hợp trên trang sản phẩm có hình ảnh của sản phẩm:

<img src="tshirt.jpg" alt="Áo thun màu đỏ, chất liệu cotton, size M">

• Tại sao cần thiết?
  Người dùng khiếm thị có thể hiểu được nội dung của hình ảnh bằng cách nghe văn bản thay thế này qua trình đọc màn hình.

Trường hợp hình ảnh trang trí:

Trong trường hợp hình ảnh được sử dụng làm nền hoặc yếu tố thiết kế, hãy chỉ định thuộc tính alt trống:

<img src="decorative-line.jpg" alt="">

• Tại sao cần thiết?
  Để tránh đọc lên những thông tin không có ý nghĩa

2. Giải thích về biểu tượng (icon)

Các biểu tượng được sử dụng trong nút hoặc liên kết cần có văn bản thay thế.

Ví dụ đúng:

<a href="/home">
  <img src="home-icon.png" alt="Home">
</a>

• Tại sao cần thiết?
  Vì chỉ biểu tượng thì không thể truyền đạt ý nghĩa, nên cần giải thích chức năng bằng văn bản thay thế.

Những sai lầm thường gặp:

Ví dụ không có văn bản thay thế:

<a href="/home">
  <img src="home-icon.png">
</a>

Trong trường hợp này, trình đọc màn hình chỉ thông báo là ‘liên kết’ mà không rõ sẽ chuyển đến đâu.

3. Chép lại nội dung âm thanh thành văn bản

Khi cung cấp tệp âm thanh hoặc podcast, hãy thêm bản chép lại (kịch bản văn bản).

Ví dụ đúng:

Hiển thị bản chép lại dưới tệp âm thanh:

<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  Trình duyệt này không thể phát tệp âm thanh
</audio>
<p>[Bản chép lại] Trong tập này, chúng tôi sẽ giải thích về các nguyên tắc cơ bản của khả năng tiếp cận web.</p>

• Tại sao cần thiết?
  Người khiếm thính cũng có thể hiểu nội dung thông qua văn bản.

4. Thêm phụ đề và mô tả vào nội dung video

Thêm phụ đề để truyền tải nội dung âm thanh bằng văn bản và thêm lời thuyết minh để bổ sung thông tin hình ảnh cho video.

Ví dụ đúng:

Thêm phụ đề vào trình phát video:

<video controls>
  <source src="example-video.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="vi" label="Phụ đề tiếng Việt">
</video>

• Tại sao cần thiết?
  Người khiếm thính có thể xem phụ đề để hiểu nội dung

5. Thông báo lỗi của biểu mẫu và mô tả biểu đồ

Biểu đồ và đồ thị:

Cung cấp thông tin thay thế cho đồ thị

Ví dụ đúng:

<img src="sales-chart.png" alt="Doanh thu năm 2024. Tăng 20% từ tháng 1 đến tháng 3">

• Tại sao cần thiết?
  Điều này nhằm diễn đạt chính xác thông tin được truyền tải bằng hình ảnh qua văn bản thay thế.

Lỗi của biểu mẫu:

Đảm bảo rằng thông báo lỗi không chỉ phụ thuộc vào hình ảnh.

<label for="email">Địa chỉ email</label>
<input type="email" id="email" required>
<span id="error" aria-live="polite">Vui lòng nhập đúng địa chỉ email</span>

• Tại sao cần thiết?
  Để đảm bảo nội dung lỗi cũng được truyền đạt đến người khiếm thị.

Những điểm mà người mới bắt đầu cần lưu ý

1. Thiết lập thông tin thay thế cho tất cả nội dung phi văn bản： Đặc biệt, luôn chuẩn bị thuộc tính alt cho hình ảnh và phụ đề cho video

2. Kiểm tra trình đọc màn hình： Thực tế sử dụng công cụ đọc màn hình để kiểm tra xem thông tin thay thế có hoạt động đúng hay không.

3. Xem xét trải nghiệm người dùng： Tạo điều kiện để người khiếm thị hoặc khiếm thính có thể tiếp cận thông tin một cách chính xác.

Bằng cách thực hiện những điều này, bạn có thể tạo ra nội dung web dễ tiếp cận cho tất cả mọi người.

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.