Kiểm tra để đảm bảo rằng tất cả các thành phần điều khiển tuỳ chỉnh đều có role thích hợp và mọi thuộc tính ARIA bắt buộc đều cung cấp thuộc tính và trạng thái của các thành phần đó.
Ví dụ: một hộp đánh dấu tuỳ chỉnh cần có role="checkbox" và aria-checked="true|false" để truyền tải đúng trạng thái của hộp đánh dấu đó.
Tìm hiểu cách sử dụng ARIA và HTML để biết thời điểm tốt nhất để cung cấp ngữ nghĩa còn thiếu cho các thành phần điều khiển tuỳ chỉnh.
Cách kiểm thử
Để kiểm tra xem tất cả các thành phần điều khiển tương tác tuỳ chỉnh có vai trò ARIA thích hợp hay không, hãy kiểm thử trang bằng thẻ hỗ trợ tiếp cận trong Công cụ của Chrome cho nhà phát triển hoặc trình đọc màn hình.
JAWS và NVDA là hai trong số các trình đọc màn hình phổ biến nhất dành cho Windows. VoiceOver là trình đọc màn hình được tích hợp vào macOS.
Với CSS, bạn có thể tạo kiểu cho phần tử <div> và <button> để truyền tải cùng một tính năng hỗ trợ thị giác, nhưng trải nghiệm sẽ rất khác khi sử dụng trình đọc màn hình. <div> chỉ là một phần tử nhóm chung, vì vậy, trình đọc màn hình chỉ thông báo nội dung văn bản của <div>.
<button> được thông báo là "nút", một tín hiệu mạnh mẽ hơn nhiều cho người dùng rằng đó là một nội dung mà họ có thể tương tác.
Xem thêm phần Ngữ nghĩa và trình đọc màn hình.
Cách khắc phục
Giải pháp tốt nhất cho vấn đề này là tránh sử dụng các thành phần điều khiển tương tác tuỳ chỉnh. Ví dụ: thay thế <div> hoạt động như một nút bằng <button> thực tế.
<button>Learn more</button>
Nếu bạn phải sử dụng <div>, hãy thêm role="button" và aria-pressed="false".
<div role="button" aria-pressed="false">Learn more</div>
Giờ đây, trình đọc màn hình sẽ thông báo vai trò và trạng thái tương tác cho <div>.
Tại sao điều này quan trọng
Nếu chưa từng sử dụng công nghệ hỗ trợ, bạn có thể không biết nội dung của mình hoạt động như thế nào đối với người dùng công nghệ hỗ trợ. Tốt nhất là bạn có thể thường xuyên trò chuyện với những người dùng sử dụng công nghệ hỗ trợ và chia sẻ ý kiến phản hồi về hiệu suất của trang web hoặc ứng dụng web của bạn.
Một cách khác để hiểu cách người dùng công nghệ hỗ trợ trải nghiệm nội dung của bạn là kiểm thử bằng Công nghệ hỗ trợ. Việc sử dụng trình đọc màn hình giúp bạn hiểu rõ hơn về cách nội dung được gắn nhãn và liệu có điều gì gây trở ngại cho quá trình điều hướng hay không.
Tài nguyên
Bạn có thể xem mã nguồn của bài kiểm tra Chế độ kiểm soát tuỳ chỉnh có vai trò ARIA