Thoạt nhìn, hình ảnh dễ tiếp cận có vẻ giống một chủ đề đơn giản — bạ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 một số người nghĩ. Trong phần này, chúng ta sẽ xem xét:
- Cách cập nhật mã để có thể truy cập vào hình ảnh.
- Thông tin nào nên được chia sẻ với người dùng và nơi chia sẻ thông tin đó.
- Những cách khác để cải thiện hình ảnh của bạn 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 viết một dòng mã, bạn phải nghĩ về điểm của hình ảnh và cách hình ảnh sẽ được sử dụng. Việc tự đặt câu hỏi cho bản thân về mục đích và ngữ cảnh của hình ảnh có thể giúp bạn xác định cách tốt nhất để truyền tải thông tin cho người bằ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 để giúp bạn hiểu bối cảnh của tính năng hoặc trang không?
- Hình ảnh đang cố gắng truyền tải loại thông tin gì?
- Hình ảnh đó đơn giản hay phức tạp?
- Hình ảnh có gợi ra cảm xúc hoặc nhắc người dùng hành động không?
- Hay chỉ là hình ảnh chỉ có hình ảnh "kẹo mắt" mà không có mục đích thực sự?
Sơ đồ quy trình trực quan, chẳng hạn như cây quyết định về hình ảnh có thể giúp bạn quyết định hình ả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 cách sử dụng tiện ích của trình duyệt hoặc các phương pháp khác. Sau đó, hãy tự hỏi: "Mình 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à hình ảnh trang trí. Nếu không, hình ảnh sẽ cung cấp thông tin theo một cách nào đó và cần thiết về mặt 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 chính xác nhất để mã hoá cho hình ảnh đó.
Hình ảnh trang trí
Hình ảnh trang trí là một thành phần hình ảnh không cung cấp thêm ngữ cảnh hoặc thông tin giúp người dùng hiểu rõ hơn về bối cảnh đó. Hình ảnh trang trí mang tính bổ sung và có thể mang lại phong cách hơn là chất.
Nếu bạn quyết định một hình ảnh chỉ mang tính trang trí, thì hình ảnh đó phải được ẩn theo phương thức lập trình khỏi AT. Khi bạn lập trình một hình ảnh cần ẩn, việc này sẽ báo hiệu cho AT rằng hình ảnh đó không cần thiết để hiểu nội dung, ngữ cảnh hoặc hành động trên trang. Có nhiều cách để ẩn hình ảnh, trong đó có cách sử dụng văn bản thay thế trống/null, áp dụng ARIA hoặc thêm hình ảnh làm nền CSS. Dưới đây là một vài ví dụ về cách ẩn hình ảnh trang trí khỏi người dùng.
alt trống hoặc rỗng
Thuộc tính văn bản thay thế trống/null 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 to tên tệp hoặc nội dung xung quanh để cung cấp cho người dùng thêm thông tin về hình ảnh.
Đã đặt vai trò thành presentation hoặc none
Vai trò được đặt thành presentation hoặc none sẽ xoá ngữ nghĩa của một phần tử để không hiển thị với cây hỗ trợ tiếp cận. Trong khi đó, aria-hidden= "true" sẽ xoá toàn bộ phần tử và toàn bộ phần tử con 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ì thành phần này có thể ẩn các thành phần 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 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 cung cấp 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 đơn giản. Các loại hình ảnh cung cấp thông tin bao gồm ảnh về các vật thể trong thế giới thực, biểu tượng thiết yếu, bản vẽ đơn giản và hình ảnh văn bản.
Nếu hình ảnh cung cấp nhiều 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. Nội dung mô tả hình ảnh thay thế (thường được viết tắt là "văn bản thay thế") giúp người dùng AT có thêm ngữ cảnh về một hình ảnh và giúp họ hiểu rõ hơn thông điệp hoặc ý định của hình ảnh.
Bạn có thể tạo các nội dung mô tả thay thế đơn giản bằng cách sử dụng các phần tử <img> bằng cách thêm thuộc tính alt, bất kể thuộc tính đó trỏ đến loại tệp nào, chẳng hạn như .jpg, .png, .svg và các phần tử khác.
<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ú ý đến khả năng hỗ trợ tiếp cận.
Trước tiên, vì SVG được mã hoá theo ngữ nghĩa nên AT sẽ bỏ qua chúng theo mặc định.
Nếu bạn có hình ảnh trang trí, thì đây không phải là vấn đề – AT sẽ bỏ qua hình ảnh đó như dự định. Tuy nhiên, nếu có một hình ảnh cung cấp thông tin, bạn cần thêm ARIA role="img" vào mẫu để AT nhận dạng đó là 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 dùng các phương thức lập trình khác để 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 hành động. Ví dụ về hình ảnh chức năng: biểu trưng liên kết đến trang chủ, biểu tượng kính lúp 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 cung cấp thông tin, hình ảnh chức năng phải bao gồm nội dung mô tả thay thế để cho tất cả người dùng biết mục đích của chúng. Không giống như hình ảnh cung cấp 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 các 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 hữu ích 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ư vậy, bạn có thể thêm nội dung mô tả thay thế cho từng phần tử (nhưng không bắt buộc).
Một cách để thêm nội dung mô tả thay thế vào hình ảnh là thông qua văn bản ẩn về mặt hình ảnh. 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 sẽ bị ẩn về mặt hình ảnh với sự trợ giúp của CSS tuỳ chỉnh.
Từ đoạn mã, bạn có thể thấy rằng "Navigate to the home" (Di chuyển đến trang chủ) là tiêu đề trình bao bọc và văn bản thay thế cho hình ảnh là "Lovely Ladybugs for your Lawn". Khi nghe mã biểu trư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"></img>
</a>
</div>
Hình ảnh phức tạp
Hình ảnh phức tạp thường cần được giải thích nhiều hơn so với hình ảnh trang trí, cung cấp thông tin hoặc chức năng. Nội dung mô tả cần có cả nội dung mô tả 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 bản đồ hoạ thông tin, bản đồ, đồ thị/biểu đồ và hình minh hoạ phức tạp. Tương tự như với các loại hình ảnh khác, bạn có thể dùng nhiều phương thức để 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 đường liên kết nội bộ đến phần giải thích dài hơn ở phần sau của trang. Phương thức này là một lựa chọn hay, không chỉ dành cho người dùng AT mà còn giúp cả 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 hiểu) có thể hưởng lợi từ việc có sẵn thông tin hình ảnh bổ sung trên màn hình thay vì bị che khuất trong mã.
Một phương thức khác bạn có thể sử dụng là nối thuộc tính aria-describedby vào phần tử <img>. Bạn có thể lập trình liên kết hình ảnh với mã nhận dạng có chứa nội dung mô tả dài hơn. Phương thức này tạo ra mối liên kết chặt chẽ giữa hình ảnh và phần mô tả đầy đủ. Nội dung mô tả mở rộng có thể hiện trên màn hình hoặc ẩn về mặt hình ảnh, nhưng hãy cân nhắc việc giữ cho nội dung đó hiển thị để hỗ trợ nhiều người hơn nữa.
Một cách khác để nhóm nội dung mô tả ngắn thay thế với nội dung mô tả dài hơn là sử dụng các phần tử HTML5 <figure> và <figcaption>. Các phần tử này hoạt động tương tự như aria-describedby ở chỗ nhóm các phần tử này theo ngữ nghĩa, tạo thành mối liên kết bền chặt hơn giữa hình ảnh và nội dung mô tả. Việc thêm role="group" ARIA đả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 gốc 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 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 bầy bọ rùa đang nhai lá của bụi hoa hồng, nhưng văn bản thay thế của bạn lại là "lỗi" thì điều đó có truyền tải 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 phải thu được nhiều thông tin hình ảnh phù hợp nhất có thể và 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 thông thườ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 gây nhàm chán cho người đọc. Nếu cần thêm ngữ cảnh bổ sung vào 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 phụ đề hoặc mô tả thêm về hình ảnh trong bản sao chính.
Ngoài ra, còn có một số phương pháp hay nhất về văn bản thay thế:
- Tránh dùng những từ như "hình ảnh" hoặc "ảnh chụp" trong phần mô tả, vì trình đọc màn hình sẽ giúp bạn xác định các loại tệp này.
- 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à tê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 alpha (ví dụ: #, 9 và) 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, nội dung mô tả hình ảnh sẽ nghe giống như một câu dài, kéo dài vô tận.
- Hãy viết văn bản thay thế giống như con người chứ không phải rô-bốt. Việc nhồi nhét từ khoá không mang lại lợi ích cho bất cứ ai — những người sử dụng trình đọc màn hình sẽ 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.
Kiểm tra mức độ hiểu biết của bạn
Kiểm tra kiến thức của bạn về ARIA và HTML
Làm cách nào để bạn có thể dễ dàng tiếp cận các hình ảnh phức tạp?
aria-describedby vào hình ảnh.