Benutzerdefinierte Elemente und Barrierefreiheit

Question

Ich möchte ein Listbox-Widget mit den aktuellen Web-Komponenten-Spezifikationen implementieren. Darüber hinaus sollte die resultierende Listbox dem ARIA-Standard entsprechen. das Listenfeld-Widget Instanziierungsanwendung sollte so einfach sein wie:

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

Zum Zwecke der Sauberkeit und Verkapselung, alles andere im Schatten dom gemacht werden sollte. Um dieses Widget zu implementieren, sind zwei benutzerdefinierte Elemente, <x-listbox> und <x-option> registriert. Das Element der obersten Ebene des Schattens dom von <x-listbox> ist ein <div>, die die role=listbox und die aria-activedescendent Attribute für die Zugänglichkeit trägt (Ich will nicht diese Attribute auf dem <x-listbox> Element, weil sie Details Implementierung sind.)

Damit aria-activedescendent zu arbeiten, benötigt man IDs auf den Optionselementen. Das direkte Platzieren von IDs auf die <x-option> Elemente funktioniert nicht aus zwei Gründen: Erstens würde es den ID-Namespace des Dokuments verschmutzen, das das Listbox-Widget verwendet. Zweitens und noch wichtiger ist, dass IDs nicht über Schattengrenzen hinweg funktionieren (was ein Zweck des Schatten-Doms ist), so dass die IDs der Optionen in demselben Schattenbereich wie das <div> mit dem aria-activedescendent-Attribut leben müssen.

Eine Lösung hierfür wäre jeden <x-option> zu umgeben, die als Inhalte in dem Schatten von dom <x-listbox> mit einer anderen <div> (Zugehörigkeit zu diesem shadow dom) wiedergegeben wird, auf das ein ID gesetzt werden kann.

Meine Frage ist: Ist dies der richtige Weg zu gehen und wie dies mit dem benutzerdefinierten Element und Shadow-dom-Web-Apis zu implementieren?

Answer 1

Sie sollten dies wahrscheinlich besser implementieren, indem Sie ein select Element (mit JavaScript) erstellen. Dies sollte sicherstellen, dass Bildschirmleser dies korrekt als eine Eingabe zum Auswählen eines Werts/Werte aus einer Liste erkennen.

ein select Element wie folgt unter Ihrem <x-listbox> Element hinzufügen:

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

Dann aria-hidden="true"<x-listbox> Element Ihrer benutzerdefinierten hinzuzufügen.

Schließlich CSS anwenden, damit das Screenreader-Element unsichtbar wird.

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

Das ist mein Ansatz, aber vielleicht gibt es einen besseren.