Thoạt nhìn, hình ảnh hỗ trợ tiếp cận có vẻ là một chủ đề đơn giản – bạn chỉ cần thêm một số "văn bản thay thế" vào hình ảnh là xong. Tuy nhiên, chủ đề này phức tạp hơn so với suy nghĩ của một số người. Trong phần này, chúng ta sẽ xem xét:
- Cách cập nhật mã để giúp hình ảnh dễ tiếp cận.
- Những thông tin cần chia sẻ với người dùng và nơi chia sẻ thông tin đó.
- Các cách khác để cải thiện hình ảnh nhằm hỗ trợ người khuyết tật.
Mục đích và bối cảnh của hình ảnh
Trước khi bạn viết dù chỉ một dòng mã, hãy nghĩ về mục đích của hình ảnh điểm, vị trí và cách sử dụng hình ảnh đó. Khi tự hỏi bản thân những câu hỏi này, bạn có thể xác định cách truyền tải thông tin hiệu quả nhất cho người dùng công nghệ hỗ trợ (AT), chẳng hạn như trình đọc màn hình.
Bạn có thể tự hỏi:
- Hình ảnh đó có cần thiết để hiểu bối cảnh của tính năng hoặc trang không?
- Hình ảnh này đang cố gắng truyền tải loại thông tin nào?
- Hình ảnh này đơn giản hay phức tạp?
- Hình ảnh có khơi gợi cảm xúc hoặc thúc đẩy người dùng hành động không?
- Hay hình ảnh đó chỉ là "kẹo mắt" không có mục đích thực sự?
Lưu đồ trực quan, chẳng hạn như cây quyết định bằng hình ảnh, có thể giúp bạn quyết định hình ảnh của mình thuộc danh mục nào.
Hãy thử ẩn hình ảnh trên trang web hoặc ứng dụng web của bạn bằng tiện ích trình duyệt hoặc các phương pháp khác. Sau đó, hãy tự hỏi: "Tôi có hiểu nội dung còn lại không?" Nếu câu trả lời là có, thì rất có thể đó là một hình ảnh trang trí. Nếu không, hình ảnh đó sẽ mang tính chất cung cấp thông tin theo một cách nào đó và cần thiết theo ngữ cảnh. Sau khi xác định mục đích của hình ảnh, bạn có thể xác định cách mã hoá chính xác nhất cho hình ảnh đó.
Hình ảnh trang trí
Hình ảnh trang trí là một phần tử trực quan không thêm ngữ cảnh hoặc thông tin bổ sung để giúp người dùng hiểu rõ hơn về ngữ cảnh. Hình ảnh trang trí là hình ảnh bổ sung và có thể mang tính phong cách hơn là nội dung.
Nếu bạn quyết định rằng một hình ảnh mang tính trang trí, thì hình ảnh đó phải được ẩn theo cách lập trình khỏi các AT. Khi bạn lập trình để ẩn một hình ảnh, điều này báo hiệu cho AT rằng hình ảnh đó không cần thiết để hiểu nội dung, bối cảnh hoặc hành động của trang. Có nhiều cách để ẩn hình ảnh, bao gồm cả việc sử dụng văn bản thay thế trống hoặc rỗng, áp dụng ARIA hoặc thêm hình ảnh làm nền CSS. Sau đây là một số ví dụ về cách ẩn hình ảnh trang trí đối với người dùng.
alt trống hoặc rỗng
Thuộc tính văn bản thay thế trống hoặc rỗng khác với thuộc tính văn bản thay thế bị thiếu. Nếu thiếu thuộc tính văn bản thay thế, AT có thể đọc tên tệp hoặc nội dung xung quanh để cung cấp thêm thông tin cho người dùng về hình ảnh.
Đã đặt vai trò thành presentation hoặc none
Một vai trò được đặt thành presentation hoặc none sẽ loại bỏ ngữ nghĩa của một phần tử khỏi việc hiển thị cho cây hỗ trợ tiếp cận.
Trong khi đó, aria-hidden= "true" sẽ xoá toàn bộ phần tử (và tất cả phần tử con của phần tử đó) khỏi API hỗ trợ tiếp cận.
<!-- All of these choices lead to the same result. -->
<img src=".../Ladybug.jpg" role="presentation">
<img src=".../Ladybug.jpg" role="none">
<img src=".../Ladybug.jpg" aria-hidden="true">
Hãy thận trọng khi sử dụng aria-hidden vì thao tác này có thể ẩn những phần tử mà bạn không muốn ẩn.
Hình ảnh trong CSS
Khi bạn thêm hình nền bằng CSS, trình đọc màn hình sẽ không phát hiện được tệp hình ảnh. Hãy chắc chắn rằng bạn muốn ẩn hình ảnh trước khi áp dụng phương pháp này.
Hình ảnh cung cấp thông tin
Hình ảnh mang tính thông tin là hình ảnh truyền tải một khái niệm, ý tưởng hoặc cảm xúc. Hình ảnh mang tính thông tin bao gồm ảnh chụp các đối tượng ngoài đời thực, biểu tượng thiết yếu, bản vẽ đơn giản và hình ảnh có văn bản.
Nếu hình ảnh của bạn mang tính thông tin, bạn nên thêm văn bản thay thế có lập trình để mô tả mục đích của hình ảnh. Thông tin mô tả thay thế cho hình ảnh (thường được viết tắt là "văn bản thay thế") cung cấp cho người dùng AT nhiều bối cảnh hơn về hình ảnh và giúp họ hiểu rõ hơn về thông điệp hoặc mục đích của hình ảnh.
Bạn có thể thêm nội dung mô tả thay thế vào các phần tử <img> bằng cách thêm thuộc tính alt. Điều này áp dụng cho tất cả các loại tệp, bao gồm cả JPG, PNG hoặc SVG.
<img src=".../Ladybug_Swarm.jpg"
alt="A swarm of red ladybugs is resting on the leaves of my prize rose bush.">
Tuy nhiên, khi sử dụng các phần tử <svg> cùng dòng, bạn cần chú ý thêm đến khả năng hỗ trợ tiếp cận. SVG được mã hoá theo ngữ nghĩa, vì vậy, theo mặc định, AT sẽ bỏ qua các SVG này.
Nếu SVG là một hình ảnh trang trí, thì điều này không sao cả – AT sẽ bỏ qua hình ảnh đó như dự kiến. Nhưng nếu SVG của bạn là một hình ảnh mang tính thông tin, hãy thêm ARIA role="img" vào phần tử để AT nhận dạng đó là một hình ảnh.
Thứ hai, các phần tử <svg> không sử dụng thuộc tính alt, vì vậy, bạn phải sử dụng các phương thức mã hoá khác nhau để thêm nội dung mô tả thay thế vào hình ảnh cung cấp thông tin.
<svg role="img">
<title>Cartoon drawing of a red, black, and gray ladybug.</title>
</svg>
Hình ảnh chức năng
Hình ảnh chức năng được kết nối với một thao tác. Ví dụ về hình ảnh chức năng là biểu trưng liên kết đến trang chủ, kính lúp được dùng làm nút tìm kiếm hoặc biểu tượng mạng xã hội đưa bạn đến một trang web hoặc ứng dụng khác.
Giống như hình ảnh mang tính thông tin, hình ảnh chức năng phải có nội dung mô tả thay thế để thông báo cho tất cả người dùng về mục đích của hình ảnh. Không giống như hình ảnh mang tính thông tin, mỗi hình ảnh chức năng cần mô tả hành động của hình ảnh chứ không phải khía cạnh trực quan.
Trong ví dụ về biểu trưng, hình ảnh này vừa cung cấp thông tin vừa có thể thực hiện hành động vì vừa là hình ảnh truyền tải thông tin vừa hoạt động như một đường liên kết. Trong những trường hợp như thế này, bạn có thể thêm nội dung mô tả thay thế cho từng phần tử, nhưng đây không phải là yêu cầu bắt buộc.
Một cách để thêm nội dung mô tả thay thế cho hình ảnh là thông qua văn bản ẩn trực quan. Khi bạn sử dụng phương thức này, trình đọc màn hình sẽ đọc văn bản vì văn bản nằm trong DOM, nhưng văn bản sẽ bị ẩn bằng CSS tuỳ chỉnh.
Bạn có thể thấy trong đoạn mã rằng "Chuyển đến trang chủ" là tiêu đề trình bao bọc và văn bản thay thế của hình ảnh là "Bọ rùa đáng yêu cho bãi cỏ của bạn". Khi nghe mã nhận dạng bằng trình đọc màn hình, bạn sẽ nghe thấy cả hình ảnh và hành động được truyền tải trong một hình ảnh.
<div title="Navigate to the homepage">
<a href="/">
<img src=".../Ladybug_Logo.png" alt="Lovely Ladybugs for your Lawn"/>
</a>
</div>
Hình ảnh phức tạp
Hình ảnh phức tạp thường cần nhiều nội dung giải thích hơn so với hình ảnh trang trí, thông tin hoặc chức năng. Bạn cần có cả nội dung mô tả thay thế ngắn và dài để truyền tải toàn bộ thông điệp. Hình ảnh phức tạp bao gồm đồ hoạ thông tin, bản đồ, đồ thị/biểu đồ và hình minh hoạ phức tạp.
Giống như các loại hình ảnh khác, bạn có thể sử dụng nhiều phương pháp để thêm nội dung mô tả thay thế vào hình ảnh phức tạp.
<img src=".../Ladybug_Anatomy.svg" alt="Diagram of the anatomy of a ladybug.">
<a href="ladybug-science.html">Learn more about the anatomy of a ladybug</a>
Một cách để thêm nội dung giải thích bổ sung cho hình ảnh là liên kết đến một tài nguyên hoặc cung cấp một đường liên kết chuyển đến phần giải thích dài hơn sau này trên trang. Đây là một lựa chọn phù hợp, không chỉ cho người dùng công nghệ hỗ trợ mà còn giúp những người khuyết tật (chẳng hạn như khuyết tật về nhận thức, học tập và đọc) có thể hưởng lợi từ việc có sẵn thông tin bổ sung về hình ảnh này trên màn hình thay vì bị ẩn trong mã.
Một phương thức khác mà bạn có thể sử dụng là thêm thuộc tính aria-describedby vào phần tử <img>. Bạn có thể liên kết hình ảnh với một mã nhận dạng chứa nội dung mô tả dài hơn theo cách lập trình. Phương pháp này tạo ra mối liên kết chặt chẽ giữa hình ảnh và nội dung mô tả đầy đủ. Bạn có thể hiển thị nội dung mô tả mở rộng trên màn hình hoặc ẩn nội dung này. Tuy nhiên, hãy cân nhắc việc giữ cho nội dung mô tả mở rộng hiển thị để hỗ trợ thêm nhiều người dùng.
Một cách khác để nhóm nội dung mô tả thay thế ngắn với nội dung mô tả dài hơn là sử dụng các phần tử <figure> và <figcaption>. Các phần tử này hoạt động tương tự như aria-describedby ở chỗ chúng nhóm các phần tử theo ngữ nghĩa, tạo mối liên kết chặt chẽ hơn giữa hình ảnh và nội dung mô tả của hình ảnh đó.
Việc thêm ARIA role="group" đảm bảo khả năng tương thích ngược với các trình duyệt web cũ không hỗ trợ ngữ nghĩa của phần tử <figure>.
Các phương pháp hay nhất về văn bản thay thế
Tất nhiên, việc chỉ thêm văn bản thay thế là chưa đủ. Văn bản cũng phải có ý nghĩa. Ví dụ: nếu hình ảnh của bạn là về một đàn bọ rùa đang gặm lá của bụi hoa hồng đoạt giải, nhưng văn bản thay thế của bạn lại là "côn trùng", thì liệu văn bản đó có truyền tải được toàn bộ thông điệp và ý định của hình ảnh không? Chắc chắn là không.
Nội dung mô tả thay thế cần nắm bắt càng nhiều thông tin thị giác có liên quan càng tốt và phải ngắn gọn. Mặc dù không có giới hạn về số lượng ký tự mà trình đọc màn hình có thể đọc, nhưng bạn nên giới hạn văn bản thay thế ở mức 150 ký tự trở xuống để tránh khiến người đọc mệt mỏi. Nếu cần thêm thông tin bổ sung cho hình ảnh, bạn có thể sử dụng một trong các mẫu hình ảnh phức tạp, thêm văn bản chú thích hoặc mô tả thêm về hình ảnh trong bản sao chính.
Một số phương pháp hay nhất khác về văn bản thay thế bao gồm:
- Tránh sử dụng các từ như "ảnh về" hoặc "hình ảnh về" trong nội dung mô tả, vì trình đọc màn hình sẽ xác định các loại tệp này cho bạn.
- Khi đặt tên cho hình ảnh, hãy đặt tên nhất quán và chính xác nhất có thể. Tên hình ảnh là một phương án dự phòng khi văn bản thay thế bị thiếu hoặc bị bỏ qua.
- Tránh sử dụng các ký tự không phải chữ cái (ví dụ: #, 9, &) và sử dụng dấu gạch ngang giữa các từ thay vì dấu gạch dưới trong tên hình ảnh hoặc văn bản thay thế.
- Sử dụng dấu câu thích hợp bất cứ khi nào có thể. Nếu không có dấu chấm, phần mô tả hình ảnh sẽ giống như một câu dài, không bao giờ kết thúc.
- Viết văn bản thay thế như một người dùng chứ không phải robot. Việc nhồi nhét từ khoá không mang lại lợi ích cho bất kỳ ai – những người sử dụng trình đọc màn hình sẽ cảm thấy khó chịu và các thuật toán của công cụ tìm kiếm sẽ phạt bạn.