Alt text quan trọng thế nào?

alt mô tả ảnh cho screen reader, và hiện ra khi ảnh không tải được.

Nội dung viết gì phụ thuộc vai trò của ảnh:

<!-- 1. ảnh mang thông tin: mô tả thông tin đó -->
<img src="chart.png" alt="Doanh thu Q1 tăng 40% so với Q4 trước">

<!-- 2. ảnh trang trí: alt rỗng để screen reader bỏ qua -->
<img src="divider.svg" alt="">

<!-- 3. ảnh là link/nút: mô tả ĐÍCH ĐẾN, không mô tả hình -->
<a href="/gio-hang"><img src="cart.svg" alt="Giỏ hàng, 3 sản phẩm"></a>

Lỗi hay gặp, theo thứ tự phổ biến:
- alt="IMG_2043.jpg" — screen reader đọc nguyên tên file.
- alt="hình ảnh sản phẩm" — không thêm thông tin gì.
- Bắt đầu bằng "Hình ảnh của…" — screen reader đã tự thông báo đây là ảnh rồi.
- Bỏ hẳn alt — tệ nhất: screen reader không biết bỏ qua hay đọc, thường đọc luôn URL.

Phân biệt alt="" (cố ý bỏ qua) và không có alt (thiếu sót) là chi tiết hay bị hỏi.

Chốt: phép thử nhanh — đọc to trang mà thay mỗi ảnh bằng alt của nó; nếu câu văn vẫn trôi và không mất thông tin thì alt đã đúng.