Thông số yêu cầu với Văn Bản Thay Thế (Alt Text) của The Washington Post

Đối với thẻ img

Văn bản thay thế được cung cấp qua thuộc tính alt trên thẻ img. Một ví dụ về điều này là <img alt=”alt text goes here” src=”example.png” />.

Mỗi thẻ img nên có thuộc tính alt. Việc không đặt giá trị này một cách rõ ràng có thể dẫn đến việc người dùng trình đọc màn hình đọc to tên tệp hình ảnh, đây thường là một trải nghiệm không hữu ích cho người dùng.

Nếu chúng ta đặt rõ ràng alt=””, thì trình đọc màn hình sẽ bỏ qua hình ảnh. Nếu một hình ảnh hoàn toàn mang tính trang trí và/hoặc được lặp lại để tạo hiệu ứng ấn tượng (ví dụ: bạn có một loạt hình ảnh bông tuyết nằm rải rác trên một trang có chủ đề mùa đông), thì cách tốt nhất là sử dụng alt=””. Bạn nên có một cái gì đó như <img alt=”” src=”purely-decorative.png” />.

Lưu ý: Nếu thẻ img của bạn src là đường dẫn đến SVG thì bạn nên thêm role=”img” vào thẻ img. Nó có vẻ dư thừa, nhưng điều này giúp trình đọc màn hình xử lý SVG một cách chính xác khi đọc văn bản thay thế. Vì vậy, chúng ta nên có <img alt=”alt text goes here” src=”example.svg” role=”img” />.

Đối với thẻ svg

Thẻ svg không có thuộc tính alt nhưng chúng ta vẫn có thể cung cấp văn bản thay thế cho SVG.

Chúng tôi khuyên bạn nên sử dụng bất kỳ phương pháp nào trong hai phương pháp sau đây là phù hợp nhất cho trường hợp sử dụng của bạn.

Phương pháp 1: Đặt aria-hidden=”true” trên svg và thêm văn bản thay thế ở nơi khác (phương pháp ưu tiên)

Lưu ý: Chúng tôi sử dụng thẻ span để chứa văn bản thay thế trong ví dụ bên dưới, nhưng bạn có thể thấy một loại phần tử khác, chẳng hạn như thẻ table, phù hợp hơn để mô tả một số nội dung svg. Trước đây, The Post đã sử dụng bảng chỉ sr thay thế cho bản đồ svg để chia sẻ kết quả bầu cử cấp quận với người dùng trình đọc màn hình.

Đối với thành phần Biểu tượng WPDS của chúng tôi, chúng tôi sử dụng các bước sau:

Thêm aria-hidden=”true” vào thẻ svg để trình đọc màn hình bỏ qua thẻ này.

Thêm một khoảng bên cạnh svg (dưới dạng phần tử anh em trực tiếp) và áp dụng lớp chỉ sr hoặc trình bao bọc Ẩn trực quan để chỉ trình đọc màn hình có thể đọc được khoảng đó.

Thêm văn bản thay thế cho svg vào phần tử span mới được thêm vào. Vì văn bản thay thế này không nằm trong phần tử img nên theo mặc định, trình đọc màn hình sẽ không được thông báo rằng văn bản đang mô tả một hình ảnh. Đây là trường hợp bạn nên thêm rõ ràng “hình ảnh” (hoặc trong ví dụ bên dưới là “biểu tượng”) vào văn bản thay thế.

Dưới đây là một ví dụ về cách thức hoạt động của nó. Kiểm tra biểu tượng bằng công cụ dành cho nhà phát triển Chrome để xem HTML và CSS. Hoặc, tốt hơn nữa, hãy kiểm tra nó bằng trình đọc màn hình mà bạn chọn.

Phương pháp 2: Sử dụng aria-labelledby với thẻ tiêu đề và aria-descriptedby với thẻ desc (một giải pháp nhẹ khi Phương pháp 1 không thực hiện được)

Thêm thẻ tiêu đề làm thẻ con đầu tiên của thẻ svg (như minh họa trong ví dụ bên dưới) để cung cấp mô tả ngắn gọn về hình ảnh. Tiêu đề cũng có thể xem được đối với những người dùng sáng mắt di chuột qua svg.

Nếu không thể mô tả hình ảnh bằng tiêu đề ngắn gọn (khoảng 1 câu), thì hãy thêm thẻ mô tả bên dưới thẻ tiêu đề để cung cấp thêm thông tin chi tiết. Ví dụ: mô tả cho đồ họa SVG có thể liệt kê các chi tiết cụ thể từ đồ họa trong khi tiêu đề tóm tắt ngắn gọn hình thức và mục đích của đồ họa. Các đường thẳng, hình tròn riêng lẻ và các thành phần trực quan khác trong thẻ svg có thể có tiêu đề và mô tả riêng, nhưng chúng tôi khuyên bạn chỉ nên có một tiêu đề và một mô tả ở cấp cơ sở — như được mô tả ở trên — để có trải nghiệm người dùng đơn giản hơn.

Đặt các giá trị thuộc tính id duy nhất cho thẻ title và desc. Sau đó, trong thẻ svg, đặt aria-labelledby=”id of title tag goes here” và aria-describedby=”id of desc tag goes here”.

Vì chúng tôi không áp dụng aria-hidden=”true” cho thẻ svg trong phương pháp này nên chúng tôi phải áp dụng aria-hidden=”true” cho từng thẻ văn bản trong svg. Nếu không, các thẻ title và desc có thể không được đọc chính xác. Lưu ý rằng phần tử “văn bản hiển thị” trong ví dụ bên dưới không được trình đọc màn hình đọc nhưng được đề cập như một phần của văn bản thay thế trong thẻ desc.

Chọn “Hiển thị mã” bên dưới để xem triển khai của chúng tôi. Đây là một mô hình mà bạn có thể làm theo cho các SVG của riêng mình.

Tóm lại, không có giải pháp hoàn hảo cho văn bản thay thế cho SVG. Chúng tôi đề xuất Phương pháp 1 ở trên như một phương tiện để giải quyết vấn đề này.

Xác định giá trị dự phòng cho văn bản thay thế

Nếu một hình ảnh là quan trọng để hiểu một bài viết hoặc sản phẩm, thì không nên sử dụng các dự phòng cho văn bản thay thế. Trường nên được yêu cầu trong những trường hợp đó.

Tuy nhiên, có một số trường hợp mà các dự phòng cho văn bản thay thế có thể hữu ích nếu được thực hiện đúng cách.

Dự phòng tốt nhất trong hầu hết các trường hợp: alt=””

alt=”” thường là dự phòng tốt nhất cho văn bản thay thế.

Văn bản thay thế cần phải được viết một cách cẩn thận và các nội dung dự phòng khác có thể sẽ không hữu ích và thậm chí có khả năng gây nhầm lẫn hoặc gây hiểu nhầm cho người dùng. Bất cứ nơi nào một hình ảnh không xác định có thể bị thiếu văn bản thay thế (ví dụ: nội dung cũ có nhiều hình ảnh không cần thiết đang được chuyển sang một nền tảng mới), tốt hơn là bạn nên sử dụng hơn là mạo hiểm gặp sự cố alt=”” với một dự phòng khác.

Không sử dụng giá trị chung chung như “Hình ảnh” hoặc “Hình ảnh không có văn bản thay thế” làm giá trị dự phòng. Văn bản này vô dụng đối với trình đọc màn hình và làm rối trải nghiệm người dùng.

Khi các dự phòng khác có thể được sử dụng

Nếu bạn có một số bối cảnh cơ bản về nội dung của hình ảnh, chẳng hạn như trường tên hoặc chú thích, thì bạn có thể muốn sử dụng bối cảnh này làm văn bản thay thế dự phòng. Tuy nhiên, điều này có thể dẫn đến trải nghiệm người dùng dư thừa nếu tên và chú thích đã được hiển thị ở nơi khác trên trang nơi hình ảnh xuất hiện (ví dụ: ảnh hồ sơ được hiển thị ngay bên cạnh tên của người đó). Như được hiển thị bên dưới, dù sao thì chú thích cũng phục vụ một mục đích khác với văn bản thay thế.

Một ví dụ về nơi văn bản thay thế dự phòng không trống có thể hữu ích: Hãy tưởng tượng bạn có nguồn cấp dữ liệu cập nhật trực tiếp các giao dịch mua gần đây từ máy bán hàng tự động và đang hiển thị chúng dưới dạng hình ảnh sản phẩm của họ từ mặt trước của máy bán hàng tự động. Người dùng sáng mắt có thể đọc nhãn trong hình ảnh sản phẩm, vì vậy không có nhãn văn bản trong trang HTML. Cơ sở dữ liệu mà bạn đang làm việc có một trường tên bắt buộc cho từng hạng mục máy bán hàng tự động khớp với nội dung được viết trong hình ảnh sản phẩm, vì vậy, bạn có thể sử dụng trường tên đó làm văn bản thay thế dự phòng khi chưa viết thêm văn bản thay thế mô tả nào.

Trong những trường hợp như thế này khi văn bản thay thế dự phòng không alt=”” thực sự hữu ích, đây thường là dấu hiệu của các vấn đề khác. Ví dụ: sẽ tốt hơn nếu hiển thị tên dưới dạng văn bản cho tất cả người dùng trong tình huống trên hơn là để họ đọc tên đó từ hình ảnh.