Bạn viết alt text cho ảnh thông tin, ảnh trang trí và ảnh chức năng như thế nào?

alt đúng phụ thuộc vào ảnh đó làm gì, không chỉ vào việc nó hiển thị gì.

• Ảnh thông tin: truyền tải cùng thông tin bằng một cụm ngắn. alt="Bar chart: sales rose 20% in Q3".
• Ảnh trang trí: dùng alt="" rỗng để screen reader bỏ qua. Không bỏ hẳn thuộc tính, nếu không một số reader sẽ đọc tên file.
• Ảnh chức năng (nằm trong link hoặc button): mô tả hành động hoặc đích đến, không mô tả hình. alt="Download report (PDF)".
• Ảnh chứa chữ: alt chính là đoạn chữ đó. Nên ưu tiên dùng text thật khi có thể.
• Ảnh phức tạp (biểu đồ, sơ đồ): cung cấp alt ngắn, kèm mô tả dài hơn hoặc bảng dữ liệu ở gần đó.

<img src="team.jpg" alt="Five engineers reviewing a whiteboard">
<img src="divider.svg" alt="">
<a href="/report.pdf"><img src="pdf-icon.svg" alt="Download report (PDF)"></a>

Không mở đầu bằng "image of" hay "picture of", vì screen reader đã tự thông báo đó là ảnh. Ảnh nền CSS không có alt, nên thông tin quan trọng cũng phải tồn tại dưới dạng text.

Hãy tự hỏi: nếu ảnh biến mất, người dùng mất đi điều gì? Hãy viết điều đó.