Thuộc tính alt không phải chỗ chép lại tên file hoặc dồn từ khóa SEO. Nó cung cấp văn bản thay thế cho hình ảnh theo ngữ cảnh sử dụng. Một ảnh dùng để minh họa nội dung cần cách viết khác với biểu tượng dùng để mở trang liên hệ.
1. Hỏi ảnh đang làm nhiệm vụ gì
Cây quyết định alt của W3C WAI bắt đầu từ vai trò của ảnh: có thông tin, có chữ, có chức năng hay chỉ trang trí. Vì vậy, không nên áp một câu mô tả cố định cho mọi nơi sử dụng cùng một file.
Ví dụ ảnh bàn làm việc trong trang giới thiệu không gian có thể cần mô tả cách bố trí. Cùng ảnh đó đặt làm nền cho một thông báo đã đủ nội dung bằng chữ có thể chỉ đóng vai trò trang trí. Người biên tập phải xét toàn bộ khối nội dung, không chỉ riêng hình ảnh.
2. Ảnh thông tin: nói điều người đọc cần biết
Giả sử bài hướng dẫn phân biệt cổng kết nối có ảnh chụp cạnh laptop. Một alt hữu ích có thể nêu đúng các cổng nhìn thấy và thứ tự của chúng, nếu đó là thông tin bài đang giải thích. “Ảnh laptop đẹp” không thay thế được thông tin này.
<img src="laptop-ports.jpg"
alt="Cạnh trái laptop có cổng HDMI, USB-A và USB-C, từ trái sang phải">Đây là ví dụ giả định; chỉ dùng mô tả khi ảnh thực sự thể hiện như vậy. Đừng suy đoán khả năng sạc, tốc độ truyền hoặc chuẩn kết nối chỉ từ hình dạng cổng. Với ảnh sản phẩm, mô tả chi tiết có ý nghĩa cho lựa chọn của người dùng thay vì liệt kê mọi vật thể trong khung hình.
3. Ảnh trang trí: alt rỗng không phải thiếu alt
W3C hướng dẫn dùng alt rỗng cho ảnh trang trí để công nghệ hỗ trợ có thể bỏ qua. Bỏ hẳn thuộc tính alt không tương đương: một số trình đọc màn hình có thể đọc tên file.
<img src="section-divider.png" alt="">Chỉ chọn cách này khi ảnh không mang thông tin hoặc chức năng cần truyền đạt. Không dùng alt rỗng để bỏ qua một biểu đồ quan trọng vì khó mô tả. Ngược lại, không cần buộc người nghe đọc lại một câu đã xuất hiện ngay cạnh ảnh chỉ để mọi ô alt đều có chữ.
4. Ảnh trong liên kết: mô tả đích đến
Với ảnh là nội dung duy nhất của một liên kết, văn bản thay thế phải giúp hiểu liên kết dẫn đến đâu. Hướng dẫn ảnh chức năng của W3C nhấn mạnh mục đích hoặc hành động, không chỉ hình dáng biểu tượng.
<a href="/contact">
<img src="contact-icon.svg" alt="Liên hệ bộ phận hỗ trợ">
</a>Nếu cùng liên kết đã có chữ rõ ràng, ảnh có thể dùng alt rỗng để tránh lặp:
<a href="/contact">
<img src="contact-icon.svg" alt="">
Liên hệ bộ phận hỗ trợ
</a>Các đường dẫn trong ví dụ là minh họa cho website giả định. Khi triển khai thật, kiểm tra cả tên liên kết mà công nghệ hỗ trợ nhận được và đích đến thực tế.
5. Biểu đồ cần nội dung ngoài một thuộc tính
Với biểu đồ nhiều dữ liệu, một câu alt ngắn thường không đủ. Hãy cung cấp phần diễn giải hoặc bảng dữ liệu ngay trong trang, đồng thời dùng alt để nhận diện biểu đồ và chỉ dẫn đến thông tin chi tiết. Người không xem được hình vẫn cần tiếp cận kết luận và số liệu quan trọng.
Đây cũng là cơ hội kiểm tra chất lượng biên tập: đơn vị đo, khoảng thời gian và nguồn dữ liệu có rõ không? Không bịa xu hướng để tạo một câu alt nghe hợp lý. Nếu ảnh chứa văn bản quan trọng chưa xuất hiện ở nơi khác, cần cung cấp nội dung chữ tương ứng.
6. Quy trình review trước khi đăng
- Xem ảnh trong đúng trang và xác định vai trò của nó.
- Viết văn bản thay thế bằng ngôn ngữ của nội dung xung quanh.
- Đối chiếu từng chi tiết với ảnh, bỏ suy đoán và từ khóa không phục vụ ý nghĩa.
- Kiểm tra HTML sau khi CMS lưu để biết thuộc tính có được giữ đúng không.
- Đọc thử theo thứ tự trang bằng công nghệ hỗ trợ khi có thể, đặc biệt với liên kết chỉ có ảnh.
Công cụ tự động có thể phát hiện một số ảnh thiếu alt nhưng không quyết định thay người biên tập rằng câu mô tả đã đúng. Mục tiêu là người không nhìn thấy ảnh vẫn hiểu thông tin và thao tác được, không chỉ làm một cảnh báo kỹ thuật biến mất.
Chưa có bình luận. Hãy là người đầu tiên chia sẻ ý kiến.