Hãy kiểm tra để đảm bảo rằng tất cả chế độ đ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 có quyền sở hữu các thuộc tính và trạng thái của các chế độ đó.
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.
Hãy xem bài viết Giới thiệu về ARIA để biết thông tin tổng quan chung về cách ARIA có thể cung cấp ngữ nghĩa bị thiếu cho các chế độ điều khiển tuỳ chỉnh.
Cách kiểm thử theo cách thủ công
Để 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 tra trang bằng cách sử dụng ngăn hỗ trợ tiếp cận 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 hơn dành cho Windows. VoiceOver là trình đọc màn hình được tích hợp trong MacOS.
Khi sử dụng CSS, bạn có thể tạo kiểu cho các phần tử <div> và <button> để chúng truyền tải cùng một khả năng tương tác hình ảnh, nhưng hai trải nghiệm lại rất khác nhau khi sử dụng trình đọc màn hình.
<div> chỉ là một phần tử nhóm chung, do đó, trình đọc màn hình chỉ thông báo nội dung văn bản của <div>.
<button> được công bố dưới dạng "nút", là tín hiệu mạnh mẽ hơn nhiều để người dùng biết rằng đó là nội dung họ có thể tương tác.
Xem thêm về Ngữ nghĩa và trình đọc màn hình.
Cách khắc phục
Giải pháp đơn giản và tốt nhất cho vấn đề này là tránh hoàn toàn các chế độ điều khiển tương tác tuỳ chỉnh.
Ví dụ: thay thế <div> đang hoạt động như một nút bằng một <button> thực tế.
Nếu bạn phải giữ lại <div>, hãy thêm role="button" và aria-pressed="false" vào <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 của <div>.
Tại sao điều này quan trọng
Cách duy nhất để thực sự hiểu rõ trải nghiệm của người dùng công nghệ hỗ trợ đối với nội dung của bạn là tự kiểm tra nội dung đó bằng trình đọc màn hình. Khi sử dụng trình đọc màn hình, bạn sẽ hiểu rõ cách gắn nhãn nội dung và liệu có trở ngại nào đối với việc điều hướng bằng công nghệ hỗ trợ hay không. Nếu bạn chưa hiểu rõ cách diễn giải mã đánh dấu ngữ nghĩa bằng công nghệ hỗ trợ, hãy xem phần Giới thiệu về ngữ nghĩa để ôn lại kiến thức.
Xem thêm Cách xem xét tính năng hỗ trợ tiếp cận.
Tài nguyên
Mã nguồn cho phần kiểm tra Chế độ kiểm soát tuỳ chỉnh có vai trò ARIA