Özel öğeler ve erişilebilirlik

Question

Geçerli web bileşenleri teknik özelliklerini kullanarak bir liste kutusu parçası uygulamak istiyorum. Ayrıca, ortaya çıkan liste kutusu ARIA standardına uygun olmalıdır. temizlik ve kapsülleme amaçları doğrultusunda

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

, her şey gölge dom'daki oluşturulması gereken: olarak listbox widget'ı başlatmasını olarak basit olmalıdır. Bu widget'ı uygulamak için, iki özel öğe, <x-listbox> ve <x-option> kayıtlıdır. <x-listbox> gölgesi dom en üst düzey elemanı için Amacıyla role=listbox ve aria-activedescendent erişilebilirlik özelliklerini (bunlar uygulama ayrıntıları oldukları için <x-listbox> öğe üzerinde bu özelliklerini istemiyoruz.)

taşıyan <div> olduğunu Çalışmak için aria-activedescendent, seçenek öğelerinde bir ids gerekir. Kimliklerin doğrudan <x-option> öğelerine eklenmesi iki nedenden ötürü işe yaramaz: Öncelikle, liste kutusu widget'ını kullanan belgenin kimlik ad alanını kirletir. İkincisi ve hatta daha da önemlisi, ids, gölge sınırlarının (gölge domunun bir amacı olan) üzerinde çalışmaz, bu yüzden seçeneklerin kimlikleriözniteliğine sahip <div> ile aynı gölge dom içinde yaşamak zorundadır. Bunun için

bir çözelti, bir kimlik konabilir üzerinde (bu gölge dom ait) bir <div> ile <x-listbox> gölgesi dom içinde olarak oluşturulacak her <x-option> çevreleyecek şekilde olacaktır.

Soruma şudur: Bu gitmek için doğru yol ve özel öğe ve gölge dom web apis kullanarak nasıl uygulanır?

Answer 1

Muhtemelen bunu bir select öğesi (JavaScript kullanarak) oluşturarak uygulamanız daha iyi olacaktır. Bu, ekran okuyucularının bir listeden bir değer/değer seçmek için bir giriş olarak doğru bir şekilde bunu tanımasını sağlamalıdır.

sizin <x-listbox> eleman aşağıda böyle bir select öğesi ekleyin:

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

Daha sonra, özel <x-listbox> elemana aria-hidden="true" ekleyin. Son olarak ekran okuyucusu seçme öğesini görünmez yapmak için CSS'yi uygulayın.

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

Bu benim yaklaşımım, ancak belki de daha iyi bir tane var.