Benutzerdefinierte Elemente und Zugänglichkeit

9

Ich möchte ein Listenfeld-Widget mit den aktuellen Webkomponenten-Spezifikationen implementieren. Darüber hinaus sollte die resultierende Listbox dem ARIA-Standard entsprechen. Die Instanziierung des Listbox-Widgets sollte so einfach sein wie:

%Vor%

Aus Gründen der Sauberkeit und Verkapselung sollte alles andere im Schattenbereich dargestellt werden. Um dieses Widget zu implementieren, sind zwei benutzerdefinierte Elemente, <x-listbox> und <x-option> , registriert. Das Element der obersten Ebene des Schattenbereichs von <x-listbox> ist ein <div> , das die Attribute role=listbox und aria-activedescendent für die Barrierefreiheit enthält (ich möchte diese Attribute nicht für das Element <x-listbox> , da es sich um eine Implementierung handelt Details.)

Damit aria-activedescendent funktioniert, benötigt man IDs auf den Optionselementen. Das direkte Platzieren von IDs auf die Elemente <x-option> 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 Ziel des Schatten-Doms ist), so dass die IDs der Optionen im selben Schatten wie das <div> mit dem Attribut aria-activedescendent leben müssen.

Eine Lösung wäre, jedes <x-option> , das als Inhalt innerhalb der Schattendomäne von <x-listbox> gerendert wird, mit einem anderen <div> (das zu diesem Schattendom gehört) zu umgeben, auf das eine ID gesetzt werden kann.

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

    
Marc 13.05.2014, 06:38
quelle

1 Antwort

1

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

Fügen Sie ein select Element wie dieses unter Ihrem <x-listbox> Element hinzu:

%Vor%

Fügen Sie dann aria-hidden="true" zu Ihrem benutzerdefinierten <x-listbox> -Element hinzu.

Wenden Sie abschließend CSS an, damit das Screenreader-Element unsichtbar wird.

%Vor%

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

    
idmean 17.08.2014 18:26
quelle