Các yếu tố tùy chỉnh và khả năng truy cập

Question

Tôi muốn triển khai tiện ích hộp danh sách bằng cách sử dụng thông số thành phần web hiện tại. Hơn nữa, hộp danh sách kết quả phải phù hợp với tiêu chuẩn ARIA. Instantiating widget listbox nên càng đơn giản như:

<x-listbox> 
    <x-option>Option 1</x-option> 
    <x-option>Option 2</x-option> 
</x-listbox> 

Đối với mục đích của sự sạch sẽ và đóng gói, mọi thứ khác nên được trả lại trong bóng tối dom. Để triển khai tiện ích con này, hai thành phần tùy chỉnh, <x-listbox> và <x-option> được đăng ký. Yếu tố cấp cao nhất của các dom bóng của <x-listbox> là một <div> rằng mang role=listbox và aria-activedescendent thuộc tính cho khả năng tiếp cận (Tôi không muốn những thuộc tính này trên các yếu tố <x-listbox> vì họ là những chi tiết thực hiện.)

Để cho aria-activedescendent để hoạt động, một id cần trên các yếu tố tùy chọn. Đặt id trực tiếp trên các phần tử <x-option> sẽ không hoạt động vì hai lý do: Thứ nhất, nó sẽ làm ô nhiễm không gian tên id của tài liệu sử dụng tiện ích hộp danh sách. Thứ hai và thậm chí quan trọng hơn, id không hoạt động trên các ranh giới bóng tối (đó là một mục đích của bóng tối), vì vậy các id của các tùy chọn phải sống trong cùng một mái vòm như <div> với thuộc tính aria-activedescendent.

Một giải pháp cho điều này sẽ là bao quanh mỗi <x-option> được hiển thị dưới dạng nội dung bên trong vòm bóng của <x-listbox> với một số khác <div> (thuộc về bóng tối đó), có thể đặt id.

Câu hỏi của tôi là: Đây có phải là cách đúng đắn để đi và làm thế nào để thực hiện điều này bằng cách sử dụng các yếu tố tùy chỉnh và bóng tối apis dom web?

Answer 1

của bạn có thể cần thực hiện tốt hơn này bằng cách tạo ra một yếu tố select (sử dụng JavaScript). Điều này sẽ đảm bảo người đọc màn hình nhận ra chính xác điều này làm đầu vào để chọn giá trị/giá trị từ danh sách.

Thêm một yếu tố select như thế này dưới đây yếu tố <x-listbox> của bạn:

<select class="only-screenreader"> 
    <option>Option 1</option> 
    <option>Option 2</option> 
</select> 

Sau đó thêm aria-hidden="true" đến yếu tố tùy chỉnh <x-listbox> của bạn.

Cuối cùng áp dụng CSS để làm cho trình chọn màn hình chọn phần tử ẩn.

.only-screenreader { 
    position:absolute; 
    left:-10000px; 
    top:auto; 
    width:1px; 
    height:1px; 
    overflow:hidden; 
} 

Đó là cách tiếp cận của tôi nhưng có thể có cách tốt hơn.