Dùng thuộc tính alt để cung cấp lựa chọn thay thế văn bản cho hình ảnh
Hình ảnh là thành phần quan trọng của hầu hết các trang web và tất nhiên là điểm gắn bó đặc biệt với những người dùng có thị lực kém. Chúng ta phải xem xét vai trò của hình ảnh trong một trang để xác định loại văn bản thay thế mà hình ảnh đó nên có. Hãy xem hình ảnh này.
<article>
<h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
<img src="imgs/160204193356-01-cat-500.jpg">
</article>
Nghiên cứu cho thấy 9/10 con mèo âm thầm đánh giá chủ nhân khi họ ngủ
Trong trang này, chúng ta có một bức ảnh về một con mèo, minh hoạ một bài viết về hành vi đánh giá nổi tiếng của mèo. Trình đọc màn hình sẽ thông báo hình ảnh này bằng tên ký tự của hình ảnh, "/160204193356-01-cat-500.jpg". Thông tin đó chính xác nhưng không hề hữu ích.
Bạn có thể sử dụng thuộc tính alt để cung cấp văn bản thay thế hữu ích cho hình ảnh này, ví dụ: "Một con mèo nhìn chằm chằm vào không gian một cách đáng sợ".
<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">
Sau đó, trình đọc màn hình có thể thông báo nội dung mô tả ngắn gọn về hình ảnh (xuất hiện trong thanh VoiceOver màu đen) và người dùng có thể chọn tiếp tục đọc bài viết hay không.
Một số nhận xét về alt:
altcho phép bạn chỉ định một chuỗi đơn giản để dùng bất cứ khi nào hình ảnh không có sẵn, chẳng hạn như khi hình ảnh không tải được, được bot thu thập dữ liệu web truy cập hoặc gặp phải trình đọc màn hình.altkhác vớititle(hoặc bất kỳ loại chú thích nào) ở chỗ chỉ được sử dụng nếu không có hình ảnh.
Viết được văn bản thay thế hữu ích cũng là một nghệ thuật. Để một chuỗi trở thành văn bản thay thế có thể sử dụng, chuỗi đó cần truyền tải cùng một khái niệm với hình ảnh, trong cùng một ngữ cảnh.
Hãy cân nhắc sử dụng hình ảnh biểu trưng được liên kết trong tiêu đề trang như những hình ảnh ở trên. Chúng ta có thể mô tả hình ảnh này một cách khá chính xác là "Biểu trưng Funion".
<img class="logo" src="logo.jpg" alt="The Funion logo">
Bạn có thể muốn thay thế bằng văn bản đơn giản hơn là "trang chủ" hoặc "trang chính", nhưng điều đó sẽ gây bất lợi cho cả người dùng khiếm thị và người dùng bình thường.
Nhưng hãy tưởng tượng một người dùng trình đọc màn hình muốn xác định vị trí biểu trưng trên đầu trang trên trang; việc cung cấp giá trị alt là "trang chủ" sẽ tạo ra trải nghiệm khó hiểu hơn. Người dùng bình thường cũng gặp phải thách thức tương tự như người dùng trình đọc màn hình khi tìm hiểu xem việc nhấp vào biểu trưng trang web sẽ dẫn đến điều gì.
Mặt khác, không phải lúc nào việc mô tả hình ảnh cũng hữu ích. Ví dụ: hãy xem xét hình ảnh kính lúp bên trong nút tìm kiếm có văn bản "Tìm kiếm". Nếu không có văn bản, bạn chắc chắn sẽ đặt giá trị alt là "tìm kiếm" cho hình ảnh đó. Nhưng vì chúng ta có văn bản hiển thị nên trình đọc màn hình sẽ chọn và đọc to từ "search"; do đó, một giá trị alt giống hệt trên hình ảnh là không cần thiết.
Tuy nhiên, chúng ta biết rằng nếu bỏ qua văn bản alt, chúng ta có thể sẽ nghe thấy tên tệp hình ảnh. Điều này vừa vô ích vừa có thể gây nhầm lẫn. Trong trường hợp này, bạn chỉ cần sử dụng thuộc tính alt trống và trình đọc màn hình sẽ bỏ qua hoàn toàn hình ảnh.
<img src="magnifying-glass.jpg" alt="">
Tóm lại, tất cả hình ảnh đều phải có thuộc tính alt nhưng không phải hình ảnh nào cũng có văn bản. Hình ảnh quan trọng phải có văn bản thay thế mang tính mô tả ngắn gọn về hình ảnh đó, còn hình ảnh trang trí phải có thuộc tính văn bản thay thế trống, tức là alt="".