Khi mới nhìn qua, hình ảnh dễ tiếp cận có vẻ như là một chủ đề đơn giản, vì vậy, một số "văn bản thay thế" với một hình ảnh là xong. Tuy nhiên, chủ đề này sẽ chi tiết hơn so với nhiều người nghĩ. Trong phần này, chúng ta sẽ xem xét:
- Cách cập nhật mã để hình ảnh có thể truy cập được.
- Thông tin nào sẽ đượ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ã, đầu tiên bạn phải suy nghĩ về điểm về hình ảnh và cách hình ảnh sẽ được sử dụng. Hãy tự đặt ra các câu hỏi về mục đích và bối 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 một người đang sử 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 để giúp bạn hiểu được 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 loại thông tin nào?
- Hình ảnh đơn giản hay phức tạp?
- Hình ảnh có gợi lên cảm xúc hoặc thôi thúc người dùng hành động không?
- Hay 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 xác định xem 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 một 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: "Tôi có hiểu nội dung còn sót lại không?" Nếu câu trả lời là có, rất có thể đó là một hình ảnh trang trí. Nếu không, hình ảnh lại có giá trị cung cấp thông tin theo một cách nào đó và cần thiết theo ngữ cảnh. Khi bạn 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 để lập trình cho ứng dụng.
Hình ảnh trang trí
Hình ảnh trang trí là phần tử hình ảnh không bổ sung ngữ cảnh hoặc thông tin bổ sung cho phép để người dùng hiểu rõ hơn ngữ cảnh. Hình ảnh trang trí là yếu tố bổ sung và có thể mang lại phong cách thay vì thực chất.
Nếu bạn cho rằng hình ảnh là hình ảnh trang trí, hình ảnh đó phải được ẩn bằng cách lập trình từ AT. Khi bạn lập trình ẩn một hình ảnh, hình ảnh này sẽ báo hiệu cho AT biết rằng hình ảnh không cần thiết để hiểu nội dung, ngữ cảnh hoặc hành động của trang. Có có nhiều cách để ẩn hình ảnh, bao gồm cả việc sử dụng phương án thay thế văn bản trống/rỗng, á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í của người dùng.
alt trống hoặc rỗng
Thuộc tính văn bản thay thế trống/rỗng khác với thuộc tính thay thế bị thiếu văn bản. 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
Đã đặt vai trò thành presentation hoặc none
loại bỏ ngữ nghĩa của một phần tử khỏi khả năng hỗ trợ tiếp cận
cây xanh. Trong khi đó, aria-hidden= "true"
sẽ xoá toàn bộ phần tử (và tất cả các 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ì lệnh 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 thấy tệp hình ảnh. Hãy đảm bảo 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 giàu thông tin
Hình ảnh chứa 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 các vật thể trong thế giới thực, cá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 chứa nhiều thông tin, bạn nên thêm văn bản thay thế có lập trình, trong đó 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 biết thêm ngữ cảnh về hình ảnh, đồng thời giúp họ hiểu rõ hơn về thông điệp hoặc ý định của hình ảnh đó.
Mô tả thay thế đơn giản có sử dụng
Phần tử <img>
có được bằng cách thêm thuộc tính alt, bất kể thuộc tính đó thuộc loại tệp nào
điểm đến, chẳng hạn như .jpg, .png, .svg và các địa chỉ 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.
Thứ nhất, vì SVG được mã hoá theo ngữ nghĩa nên AT sẽ bỏ qua các giao thức này 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
như dự định. Nhưng nếu bạn có một hình ảnh giàu thông tin, role="img" ARIA
cần được thêm vào mẫu để AT nhận ra đó là một hình ảnh.
Thứ hai, các phần tử <svg> không sử dụng thuộc tính alt nên
các phương pháp lập trình khác nhau phải
được dùng để thêm nội dung mô tả thay thế vào hình ảnh giàu thông tin của bạn.
<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 là đã kết nối với một hành động. Ví dụ về hình ảnh chức năng là biểu trưng liên kết vào trang chủ, kính lúp dùng làm nút tìm kiếm hoặc mạng xã hội biểu tượng đư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 một phương án thay thế để thông báo cho tất cả người dùng về mục đích của họ. Không giống như một hình ảnh giàu thông tin, mỗi hình ảnh chức năng cần mô tả hành động của hình ảnh—không phải khía cạnh trực quan.
Trong ví dụ về biểu trưng, hình ảnh vừa cung cấp thông tin vừa có thể hành động vì nó vừa hình ảnh truyền tải thông tin và 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 các mô tả thay thế vào mỗi thành phần, nhưng đó không phải là .
Một cách để thêm nội dung mô tả thay thế vào hình ảnh là dùng phương thức ẩ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ì nó nằm trong DOM, nhưng bị ẩn một cách trực quan với sự trợ giúp của CSS tùy chỉnh.
Bạn có thể thấy từ đoạn mã rằng "Navigate to the website" (Di chuyển đến trang chủ) là tiêu đề của 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ỏ". Khi nghe mã biểu trưng bằng trình đọc màn hình, bạn sẽ nghe thấy cả 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
Một hình ảnh phức tạp thường cần nhiều lời giải thích hơn là chỉ mang tính chất trang trí, cung cấp thông tin hoặc hình ảnh chức năng. Cần có cả lựa chọn 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à các hình minh hoạ phức tạp. Giống như đối tượng khác có nhiều phương pháp khác nhau để thêm vào các 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 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à lựa chọn tốt, không chỉ cho người dùng AT mà còn giúp những người có khuyết tật, chẳng hạn như nhận thức, học tập và đọc khuyết tật—những người có thể được hưởng lợi từ việc có hình ảnh bổ sung này có sẵn trên màn hình thay vì bị che khuất trong mã.
Bạn có thể sử dụng một phương pháp khác là thêm 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ột ID chứa
mô tả dài hơn. Phương pháp này tạo mối liên kết chặt chẽ giữa hình ảnh
và nội dung mô tả đầy đủ. Nội dung mô tả mở rộng có thể hiển thị trên
màn hình hoặc bị ẩn trực quan, nhưng hãy cân nhắc hiển thị màn hình để hỗ trợ ngay cả
người khác.
Một cách khác để nhóm các đoạn mô tả thay thế ngắn với đoạn mô tả dài hơn là sử dụng phần tử <figure> và <figcaption> của HTML5. Các phần tử này hoạt động tương tự như aria-describedby ở chỗ nó nhóm các phần tử về mặt ngữ nghĩa, tạo nên mối liên kết chặt chẽ hơn giữa hình ảnh và nội dung mô tả. 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 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 về một bầy bọ rùa đang gặm lá cây hoa hồng giải thưởng của bạn nhưng văn bản thay thế lại có nội dung "lỗi" sẽ truyền tải toàn bộ thông điệp và mục đích của hình ảnh? Chắc chắn là không.
Phần mô tả thay thế cần thu thập được nhiều thông tin hình ảnh phù hợp nhất càng ngắn gọn và dễ dàng. Mặc dù không có giới hạn về số lượng ký tự trình đọc màn hình có thể đọc, thì bạn nên viết giới hạn văn bản thay thế thành Tối đa 150 ký tự để tránh gây nhàm chán cho người đọc. Nếu bạn cần bổ sung thêm ngữ cảnh của 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 chú thích hoặc mô tả thêm về hình ảnh trong nội dung chính.
Một số văn bản thay thế bổ sung phù hợp nhất bao gồm:
- Tránh sử dụng các từ như "hình ảnh" hoặc "ảnh" trong phần 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 nhất quán và chính xác nhất có thể. Hình ảnh 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à 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 chấm câu thích hợp bất cứ khi nào có thể. Nếu không có, nội dung mô tả hình ảnh sẽ nghe như một câu dài vô tận.
- Viết văn bản thay thế như người và 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ẽ 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 kiến thức
Kiểm tra kiến thức của bạn về ARIA và HTML
Làm cách nào để tiếp cận các hình ảnh phức tạp?
aria-describedby vào hình ảnh.