Viết `alt` cho ảnh thế nào là đúng? Khi nào để `alt=""`?

alt mô tả chức năng của ảnh trong ngữ cảnh, không phải mô tả pixel. Cùng một tấm ảnh có thể cần alt khác nhau ở hai trang khác nhau.

Ba trường hợp chính:

<!-- Ảnh mang thông tin: mô tả thông tin đó -->
<img src="chart.png" alt="Doanh thu quý 3 tăng 12% so với quý 2">

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

<!-- Ảnh là link/nút: mô tả đích đến, không mô tả hình -->
<a href="/"><img src="logo.svg" alt="Trang chủ Acme"></a>

alt="" (rỗng, vẫn phải có thuộc tính) dùng cho ảnh thuần trang trí, hoặc ảnh mà nội dung đã được nói bằng chữ ngay bên cạnh — nếu để alt mô tả nữa thì screen reader đọc lặp hai lần.

Sai thường gặp:
- Bỏ hẳn thuộc tính alt: nhiều screen reader sẽ đọc tên file (IMG_20240102.jpg), tệ hơn alt="".
- Viết "hình ảnh của...", "ảnh chụp..." — screen reader đã tự thông báo đó là ảnh.
- Nhồi từ khoá SEO vào alt.
- Ảnh phức tạp (biểu đồ, sơ đồ) nhét cả đoạn dài vào alt; nên tóm tắt ngắn trong alt rồi đặt mô tả đầy đủ ở phần văn bản gần đó.