Sử dụng thuộc tính alt để cung cấp văn bản thay thế cho hình ảnh
Hình ảnh là một thành phần quan trọng của hầu hết các trang web và tất nhiên là một điểm khó khăn đặc biệt đối với người dùng 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">; /articleNghiê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 này 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:
- alt cho phép bạn chỉ định một chuỗi đơn giản để sử dụng bất cứ khi nào không có hình ảnh, chẳng hạn như khi hình ảnh không tải được hoặc được bot thu thập thông tin trên web truy cập hoặc gặp phải trình đọc màn hình.
- alt khác với title hoặc bất kỳ loại phụ đề nào khác ở chỗ alt chỉ được dùng nếu không có hình ảnh.
Việc viết 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" a>lt="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; 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 đó. Tuy nhiên, vì chúng ta có văn bản hiển thị, trình đọc màn hình sẽ nhận và đọc to từ "tìm kiếm"; do đó, giá trị alt giống hệt trên hình ảnh là thừa.
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ô dụng 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&qu>ot; alt=""Tóm lại, tất cả hình ảnh đều phải có thuộc tính alt, nhưng không nhất thiết phải 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="".
