HTML/CSS | Thuộc tính alt

Học HTML, CSS từ Zero Tới Hero

• 1. Tìm hiểu về thuộc tính alt
• 2. Lợi ích khi sử dụng thuộc tính alt
• 3. Cách dùng thuộc tính alt đúng đắn

1. Tìm hiểu về thuộc tính alt

Thuộc tính alt (alternative - thay thế) dùng để chỉ định văn bản thay thế trong trường hợp hình ảnh không hiển thị.

Ví dụ:

<img
    src="https://htmlcss.fullstack.edu.vn/assets/f8_icon_abc.png"
    alt="TCL47"
/>

Tên ảnh đúng là f8_icon.png đã bị sửa thành f8_icon_abc.png (hình ảnh không tồn tại). Vì vậy đây được coi là một URL lỗi và hình ảnh không được hiển thị, văn bản trong thuộc tính alt đã được hiển thị thay thế.

Những tình huống phổ biến văn bản thay thế được sử dụng:

• Hình ảnh bị lỗi (bị xóa, lỗi khi tải ảnh, v.v)
• Công cụ tìm kiếm thu thập dữ liệu trên trang
• Người dùng sử dụng trình đọc màn hình

2. Lợi ích khi sử dụng thuộc tính alt

Việc sử dụng thuộc tính alt đôi khi không được chú ý, điều này là không nên vì nó mang lại khá nhiều lợi ích.

Những lợi ích tiêu biểu:

• Người dùng vẫn nhận được thông tin dù ảnh lỗi
• Công cụ tìm kiếm hiểu hình ảnh nói về điều gì
• Trình đọc màn hình đọc nội dung của thuộc tính alt

3. Cách dùng thuộc tính alt đúng đắn

Cách đơn giản nhất đó là bạn hãy tự đặt câu hỏi:

Nếu hình ảnh không hiển thị thì nội dung văn bản nào có thể thay thế nó mà vẫn đảm bảo biểu đạt được nội dung của hình ảnh.

Hiểu theo một cách khác, dù là hình ảnh hay văn bản cũng là một phương tiện để truyền đạt thông tin mà thôi. Không dùng cách này thì có thể dùng cách khác, không có ảnh thì ta dùng văn bản.

Xem xét ví dụ dưới đây:

Trong ví dụ này, văn bản thay thế là Vai trò của HTML, CSS và JavaScript trong trang web. Tuy không thể truyền đạt được nhiều thông tin như hình ảnh nhưng đã đủ để người dùng và công cụ tìm kiếm hiểu được thông điệp của hình ảnh.

Nếu bạn vẫn thấy khó, hãy tham khảo các tình huống sau:

• Hình ảnh là Logo của trang web, văn bản thay thế có thể là: tên tổ chức, tên thương hiệu, v.v.
• Hình ảnh biểu tượng cho các chức năng hoặc vai trò, văn bản thay thế là tên của chức năng hoặc vai trò đó.
• Hình ảnh nằm trong nội dung blog hoặc tài liệu, văn bản thay thế là thông tin tóm tắt của đoạn văn trước hình ảnh đó.
• Hình ảnh chỉ mang tính trang trí thì để alt="" (lưu ý là không bỏ thuộc tính alt vì các trình phân tích có thể coi là bạn đã quên thêm thuộc tính này).

Tóm tắt

• Thuộc tính alt (alternative - thay thế) dùng để chỉ định văn bản thay thế trong trường hợp hình ảnh không hiển thị.
• Những tình huống phổ biến văn bản thay thế được sử dụng:
  • Hình ảnh bị lỗi (bị xóa, lỗi khi tải ảnh, v.v)
  • Công cụ tìm kiếm thu thập dữ liệu trên trang
  • Người dùng sử dụng trình đọc màn hình
• Những lợi ích tiêu biểu khi sử dụng thuộc tính alt:
  • Người dùng vẫn nhận được thông tin dù ảnh lỗi
  • Công cụ tìm kiếm hiểu hình ảnh nói về điều gì
  • Trình đọc màn hình đọc nội dung của thuộc tính alt
• Nội dung cho alt chỉ cần ngắn gọn, súc tích, thể hiện được hình ảnh đó nói về điều gì.
• Hình ảnh chỉ mang tính trang trí thì để alt="" (lưu ý là không bỏ thuộc tính alt vì các trình phân tích có thể coi là bạn đã quên thêm thuộc tính này).