Thiết kế khả năng tiếp cận và số ký tự - Độ dài tối ưu cho alt text và nhãn ARIA

Trong triển khai khả năng tiếp cận web, thiết kế số ký tự là yếu tố thường bị bỏ qua. Nếu alt text quá dài, người dùng trình đọc màn hình sẽ bị ngập trong dòng thông tin; nếu quá ngắn, ý nghĩa của hình ảnh không được truyền tải. Nhãn ARIA và văn bản vùng live cũng tương tự - thiết kế số ký tự phù hợp là chìa khóa cho trải nghiệm tiếp cận. Bài viết này giải thích số ký tự tối ưu và các mẫu triển khai cho từng phần tử, dựa trên yêu cầu của hướng dẫn WCAG.

Thiết kế số ký tự alt text - Ngưỡng 125 ký tự và cơ sở của nó

Khuyến nghị phổ biến cho alt text là "125 ký tự trở xuống". Con số này không được ghi rõ trong đặc tả WCAG mà bắt nguồn từ hành vi của các trình đọc màn hình chính. JAWS (Job Access With Speech) có thể chia nhỏ alt text khi vượt quá khoảng 125 ký tự. Mặc dù NVDA và VoiceOver không có hiện tượng chia nhỏ rõ ràng, nhưng alt text dài làm tăng gánh nặng nhận thức cho người dùng, vì vậy nên giữ ngắn gọn.

Tuy nhiên, 125 ký tự chỉ là hướng dẫn, và số ký tự tối ưu khác nhau đáng kể tùy theo loại hình ảnh. Bảng dưới đây tóm tắt số ký tự alt text được khuyến nghị theo loại hình ảnh.

Đặt alt text không rỗng cho hình trang trí là lỗi triển khai phổ biến. Viết "trang trí" hay "hình ảnh" cho hình nền hoặc đường phân cách khiến trình đọc màn hình đọc thông tin vô nghĩa, làm giảm trải nghiệm người dùng. Hình trang trí phải luôn đặt alt="", và lý tưởng nhất là dùng CSS background-image để loại bỏ hoàn toàn khỏi DOM.

Cách viết alt text - Nguyên tắc phụ thuộc ngữ cảnh

Alt text tối ưu cho cùng một hình ảnh thay đổi tùy theo ngữ cảnh. Điều này là do Tiêu chí thành công 1.1.1 của WCAG 2.2 (Nội dung phi văn bản) yêu cầu văn bản thay thế "phục vụ mục đích tương đương". Ví dụ, ảnh một con chó trong bài "Quản lý sức khỏe thú cưng" cần thông tin khác so với cùng ảnh đó trong bài "Kỹ thuật chụp ảnh".

Trường hợp đầu nên bao gồm thông tin sức khỏe như "Chó Golden Retriever đứng trên cân. Cân nặng lý tưởng 25-34 kg", trong khi trường hợp sau nên tập trung vào kỹ thuật: "Bóng chó Golden Retriever chụp ngược sáng. Nền mờ ở khẩu độ f/2.8". Số ký tự tự nhiên sẽ khác nhau, nhưng điều quan trọng là chọn lọc thông tin phù hợp với ngữ cảnh.

Giống như thiết kế thông báo lỗi, viết alt text với ý thức "người dùng nên làm gì tiếp theo" rất hiệu quả. Với hình ảnh sản phẩm trên trang thương mại điện tử, bao gồm thông tin cần thiết cho quyết định mua hàng như màu sắc và kích thước giúp cung cấp trải nghiệm mua sắm tương đương cho người dùng không thể dựa vào thị giác.

Thiết kế số ký tự nhãn ARIA

Thuộc tính ARIA (Accessible Rich Internet Applications) cung cấp thông tin cho trình đọc màn hình mà ngữ nghĩa HTML không thể truyền tải. Trong đó, aria-label và aria-labelledby được sử dụng thường xuyên nhất, nhưng có ít hướng dẫn rõ ràng về thiết kế số ký tự, phần lớn phụ thuộc vào đánh giá của nhà phát triển.

Khi aria-label vượt quá 40 ký tự, gánh nặng nhận thức tăng lên cho người dùng trình đọc màn hình. Đặt aria-label="Điều hướng chính" cho landmark điều hướng không có vấn đề, nhưng khi cần mô tả phức tạp, tham chiếu phần tử riêng bằng aria-describedby phù hợp hơn.

Sự không khớp giữa aria-label và văn bản hiển thị gây ra vấn đề nghiêm trọng cho người dùng điều khiển bằng giọng nói. Ví dụ, nếu văn bản hiển thị của nút là "Gửi" nhưng aria-label="Gửi dữ liệu biểu mẫu", nói "Nhấp Gửi" qua điều khiển giọng nói có thể không nhận diện được nút. Tiêu chí thành công 2.5.3 của WCAG 2.2 (Nhãn trong tên) yêu cầu tên truy cập phải bao gồm văn bản hiển thị.

Tốc độ đọc của trình đọc màn hình và số ký tự

Người dùng trình đọc màn hình thường đặt tốc độ đọc gấp 1,5-3 lần tốc độ chuẩn. Một số người dùng thành thạo sử dụng tốc độ gấp 5 lần trở lên. Trong môi trường đọc tốc độ cao này, độ dài văn bản ảnh hưởng trực tiếp đến trải nghiệm.

Ở tốc độ chuẩn (khoảng 150 từ/phút tiếng Anh, khoảng 300 ký tự/phút tiếng Nhật), đọc 125 ký tự alt text mất khoảng 25 giây. Ngay cả ở tốc độ gấp 3 cũng mất khoảng 8 giây. Trên trang gallery có 10 hình ảnh, mỗi hình có 125 ký tự alt text, người dùng trình đọc màn hình phải mất hơn 80 giây chỉ để đi qua gallery.

Để giảm thiểu vấn đề này, các chiến lược sau hiệu quả cho gallery và carousel:

• Giữ alt text mỗi hình ảnh trong 30-50 ký tự và cung cấp chi tiết trên trang riêng
• Thêm nhãn như aria-label="Gallery hình ảnh sản phẩm (12 hình)" cho toàn bộ gallery để người dùng có thể bỏ qua
• Nhóm bằng role="group" để cho phép bỏ qua qua điều hướng landmark
• Cung cấp liên kết "Xem tất cả hình ảnh" dẫn đến trang danh sách có mô tả chi tiết

Khả năng tiếp cận biểu mẫu và số ký tự

Khả năng tiếp cận phần tử biểu mẫu gồm bốn lớp: nhãn, placeholder, thông báo lỗi và văn bản trợ giúp. Thiết kế số ký tự của mỗi lớp quyết định tính dễ sử dụng của biểu mẫu.

Sử dụng placeholder thay thế nhãn là anti-pattern đặc biệt có vấn đề về khả năng tiếp cận. Văn bản placeholder biến mất khi người dùng bắt đầu nhập, nên người dùng có thể quên mục đích của trường. Ngoài ra, màu mặc định của placeholder trong hầu hết trình duyệt có tỷ lệ tương phản không đủ (khoảng 2.5:1), không đạt tiêu chuẩn tối thiểu WCAG 4.5:1. Giống như thiết kế số ký tự quy ước đặt tên, nhãn biểu mẫu cũng cần ngắn gọn và rõ ràng.

Kiểm soát số ký tự vùng live

Vùng live (aria-live) thông báo cho trình đọc màn hình về các thay đổi động trên trang. Chúng được sử dụng để truyền tải nội dung thay đổi trực quan theo thời gian thực, như tin nhắn chat đến, kết quả xác thực biểu mẫu và cập nhật bộ đếm ngược.

Khía cạnh quan trọng nhất trong thiết kế số ký tự vùng live là cân bằng tần suất cập nhật với số ký tự. Như đã thảo luận trong thiết kế tin nhắn chatbot, khi lượng lớn văn bản đổ vào trong thời gian ngắn, người dùng trình đọc màn hình không thể xử lý thông tin.

aria-live="assertive" ngắt quãng đọc hiện tại để thông báo ngay lập tức, vì vậy chỉ nên giới hạn cho tình huống thực sự khẩn cấp. Sử dụng assertive cho lỗi xác thực biểu mẫu sẽ ngắt quãng đọc mỗi khi người dùng nhập, gây khó khăn cho thao tác. Lỗi xác thực nên dùng polite để thông báo sau khi thao tác hiện tại hoàn tất.

Tiêu chí thành công WCAG 2.2 và số ký tự

WCAG 2.2 không có tiêu chí thành công nào trực tiếp quy định số ký tự, nhưng nhiều tiêu chí gián tiếp ảnh hưởng đến thiết kế số ký tự.

Tiêu chí thành công 2.4.4 (Mục đích liên kết) có triết lý tương tự với tối ưu hóa văn bản OGP. Văn bản liên kết mơ hồ như "nhấp vào đây" hay "chi tiết" khiến người dùng trình đọc màn hình không thể xác định đích đến khi duyệt danh sách liên kết. Nên dùng văn bản mô tả khoảng 15-40 ký tự, như "Đọc tài liệu chính thức WCAG 2.2", để mục đích rõ ràng chỉ từ văn bản liên kết.

Khả năng tiếp cận và số ký tự trên trang web đa ngôn ngữ

Trên trang web đa ngôn ngữ, cùng một nội dung có thể thay đổi đáng kể về số ký tự giữa các ngôn ngữ. Dịch alt text tiếng Anh sang tiếng Nhật giảm khoảng 60-70% số ký tự, trong khi dịch sang tiếng Đức có thể tăng khoảng 130%. Sự biến động này được trình bày chi tiết trong thiết kế độ dài văn bản đa ngôn ngữ.

Từ góc độ khả năng tiếp cận, mối quan tâm quan trọng nhất là thiếu bản dịch cho aria-label. Không hiếm trường hợp văn bản HTML hiển thị đã được dịch nhưng văn bản tham chiếu bởi aria-label hoặc aria-describedby vẫn giữ nguyên ngôn ngữ gốc. Khi sử dụng framework i18n, hãy nhớ đưa văn bản thuộc tính ARIA vào phạm vi dịch thuật.

Sử dụng đúng thuộc tính lang cũng quan trọng. Khi trang chứa văn bản bằng ngôn ngữ khác với ngôn ngữ chung của trang, đặt thuộc tính lang trên phần tử đó cho phép trình đọc màn hình chuyển sang engine giọng nói đúng. Ví dụ, trích dẫn tiếng Anh trong trang tiếng Nhật nên dùng <blockquote lang="en">.

Danh sách kiểm tra triển khai - Quản lý chất lượng số ký tự khả năng tiếp cận

Để liên tục quản lý chất lượng thiết kế số ký tự khả năng tiếp cận, chúng tôi khuyến nghị tích hợp danh sách kiểm tra sau vào quy trình phát triển.

• Alt text: Hình trang trí đã đặt alt="" chưa? Hình thông tin có mô tả phù hợp ngữ cảnh 30-125 ký tự không?
• aria-label: Có mâu thuẫn với văn bản hiển thị không? Có trong 40 ký tự không?
• Nhãn biểu mẫu: Mọi trường nhập liệu đã liên kết với phần tử label chưa? Có dùng placeholder thay thế nhãn không?
• Văn bản liên kết: Có liên kết chỉ ghi "nhấp vào đây" hay "chi tiết" không? Chỉ từ văn bản liên kết có hiểu được mục đích không?
• Vùng live: Số ký tự có phù hợp với tần suất cập nhật không? Việc dùng assertive có thực sự cần thiết không?
• Cấu trúc tiêu đề: Tiêu đề có phản ánh chính xác nội dung không? Chỉ lướt tiêu đề có hiểu được cấu trúc trang không?
• Thông báo lỗi: Nội dung lỗi và cách sửa có truyền tải được trong 50 ký tự không? Có thông báo qua aria-live không?

Công cụ kiểm tra tự động (axe, Lighthouse, WAVE, v.v.) có thể phát hiện vấn đề cấu trúc, nhưng đánh giá chất lượng alt text và tính phù hợp của nhãn ARIA cần đánh giá thủ công. Tích hợp đánh giá khả năng tiếp cận vào quy trình của nhóm phát triển và thường xuyên kiểm tra thực tế bằng trình đọc màn hình là con đường chắc chắn nhất đến trang web thực sự tiếp cận được.

Bạn cũng có thể tìm sách liên quan về khả năng tiếp cận web trên Amazon. Học hệ thống các tiêu chí thành công WCAG sẽ cải thiện đáng kể khả năng đánh giá trong thiết kế số ký tự.