Images Do Not Have Alternate Text: Lỗi thiếu alt text và cách viết alt đúng chuẩn Accessibility

Điều nguy hiểm của lỗi này nằm ở chỗ: nhiều người nghĩ rằng chỉ cần “thêm đại alt cho có” là xong. Thực tế, alt text viết sai còn gây hại cho accessibility nhiều hơn là không có.

Alt text là gì

Alt text (alternative text) là nội dung văn bản thay thế cho hình ảnh, được dùng trong các trường hợp:

• Screen reader đọc cho người khiếm thị
• Hình ảnh không tải được
• Công cụ tìm kiếm hiểu nội dung hình ảnh

Alt text trả lời một câu hỏi rất đơn giản: Hình ảnh này mang thông tin gì?

Vì sao lỗi thiếu alt text vẫn xảy ra nhiều

Lý do không nằm ở việc không biết alt là gì, mà nằm ở cách sử dụng sai.

• Quên thêm alt cho ảnh content
• Cho rằng alt chỉ để phục vụ SEO
• Không phân biệt ảnh trang trí và ảnh nội dung
• Dùng CMS upload ảnh nhanh, bỏ qua phần mô tả

Đặc biệt, nhiều website thêm alt một cách máy móc, dẫn đến trải nghiệm screen reader rất tệ.

Những loại hình ảnh cần xử lý alt khác nhau

Ảnh mang nội dung

Đây là các hình ảnh truyền tải thông tin thực sự: ảnh sản phẩm, ảnh minh họa nội dung, biểu đồ.

<img src="shoes.jpg" alt="Giày thể thao màu đen dành cho nam">

Alt nên mô tả đúng thông tin mà hình ảnh cung cấp, không lan man.

Ảnh trang trí

Ảnh chỉ dùng để trang trí, không mang ý nghĩa nội dung.

<img src="background-shape.png" alt="">

Alt rỗng giúp screen reader bỏ qua hình ảnh này, thay vì đọc những thông tin vô nghĩa.

Icon và hình ảnh chức năng

Nếu hình ảnh đóng vai trò như một nút hoặc hành động, alt phải mô tả hành động đó.

<img src="search-icon.svg" alt="Tìm kiếm">

Khi nào alt text trở thành spam SEO

Alt text bị lạm dụng khi:

• Nhồi từ khóa không liên quan
• Lặp lại tiêu đề trang cho mọi hình ảnh
• Mô tả quá dài và không cần thiết

Screen reader sẽ đọc toàn bộ alt text. Một alt dài dòng khiến trải nghiệm người dùng trở nên mệt mỏi.

Ví dụ alt text sai

<img src="shoes.jpg" alt="giày nam giày thể thao giày đẹp giá rẻ mua giày nam">

Alt này không phục vụ người dùng, chỉ phục vụ ý đồ SEO.

Nguyên tắc viết alt text đúng

• Mô tả đúng thông tin hình ảnh cung cấp
• Ngắn gọn, rõ ràng
• Không nhồi từ khóa
• Để alt rỗng với ảnh trang trí
• Không lặp lại nội dung đã có ngay bên cạnh ảnh

Ảnh hưởng của alt text đến accessibility và UX

Alt text đúng chuẩn mang lại nhiều lợi ích:

• Screen reader đọc nội dung mạch lạc
• Người dùng hiểu được hình ảnh ngay cả khi không thấy
• Nội dung website trở nên đầy đủ và dễ tiếp cận
• Giảm điểm trừ trong audit accessibility

Những sai lầm cần tránh

• Để trống alt cho ảnh nội dung
• Viết alt như caption marketing
• Dùng cùng một alt cho nhiều ảnh khác nhau
• Nghĩ rằng alt chỉ dành cho SEO

Kết luận

Lỗi Images do not have alternate text tưởng chừng đơn giản nhưng lại liên quan trực tiếp đến cách bạn hiểu về accessibility. Alt text không phải là nơi để nhồi từ khóa, cũng không phải lúc nào cũng cần mô tả dài dòng. Chỉ cần viết alt đúng với vai trò của hình ảnh, bạn đã cải thiện đáng kể trải nghiệm cho người dùng và chất lượng tổng thể của website.