Sử dụng thuộc tính alt để cung cấp các lựa chọn thay thế văn bản 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, tất nhiên là yếu tố đặc biệt gắn bó 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 trên trang để tìm ra loại văn bản thay thế phù hợp. 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 trong số 10 con mèo lặng lẽ đánh giá chủ sở hữu khi chúng ngủ
Trên trang này, chúng tôi có hình ảnh của một con mèo, minh hoạ một bài viết về hành vi phán đoán 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 cách sử dụng tên cố định là "/160204193356-01-cat-500.jpg". Điều 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 hữu ích thay thế cho hình ảnh này – ví dụ: "Một con mèo nhìn chầm chông 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 (bạn có thể thấy trên thanh VoiceOver màu đen) và có thể chọn xem có chuyển đến 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 để sử 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, bị bot thu thập dữ liệu trên web truy cập hoặc trình đọc màn hình gặp phải.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ệc viết văn bản thay thế hữu ích cũng là một nghệ thuật. Để một chuỗi có thể thay thế bằng văn bản có thể sử dụng, chuỗi cần truyền tải cùng một khái niệm như hình ảnh trong cùng ngữ cảnh.
Hãy xem xét hình ảnh biểu trưng được liên kết trong quảng cáo trên đầu trang chủ của một trang như các hình ảnh minh họa ở trên. Chúng tôi có thể mô tả hình ảnh này khá chính xác là "Biểu trưng của The Funion".
<img class="logo" src="logo.jpg" alt="The Funion logo">
Bạn có thể muốn sử dụng văn bản thay thế văn bản đơn giản hơn cho "trang chủ" hoặc "trang chính", nhưng điều đó sẽ gây bất lợi cho cả người dùng có thị lực kém và người thị giác.
Tuy nhiên, hãy tưởng tượng một người dùng trình đọc màn hình muốn tìm biểu trưng quảng cáo trên đầu trang chủ trên trang; gán cho biểu trưng một giá trị thay thế là "trang chủ" thực sự tạo ra một trải nghiệm khó hiểu hơn. Và một người dùng sáng mắt cũng phải đối mặt với thách thức tương tự — tìm ra thao tác nhấp vào biểu trưng trang web — với tư cách là người dùng trình đọc màn hình.
Mặt khác, không phải lúc nào việc mô tả 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 văn bản không có ở đó, bạn chắc chắn sẽ cung cấp cho hình ảnh đó một giá trị thay thế là "tìm kiếm". Tuy nhiên, vì chúng ta có văn bản hiển thị nên trình đọc màn hình sẽ nhậ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ỏ 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 hình ảnh đó hoàn toàn.
<img src="magnifying-glass.jpg" alt="">
Tóm lại, mọi hình ảnh 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ế mô tả ngắn gọn về hình ảnh, trong khi hình ảnh trang trí nên có thuộc tính alt trống – tức là alt="".