Was genau machen Aria-Controls für den Benutzer? Wie wird es von AJAX-Nutzung beeinflusst?

Question

Ich habe eine Reihe von Registerkarten mit geeigneten Rollen und Attributen für die Unterstützung von Eingabehilfen. Der Inhalt dieser Tab-Steuerelemente wird über Ajax geladen. Jeder Wrapper für den geladenen Inhalt enthält jedoch auch die entsprechenden Registerkartenrollen und -attribute. Das Problem besteht darin, dass beim Ausführen eines automatisierten Audits mit den Chrome-Eingabehilfen der Test fehlschlägt, dass das entsprechende Register ID für alle Registerkarten mit Ausnahme des derzeit aktiven Registers fehlt (weil dieses Wrapper mit ID wurde geladen). Der genaue Fehler besagt: "ARIA-Attribute, die sich auf andere Elemente beziehen, sollten sich auf Elemente beziehen, die im DOM existieren."

Da die ID einmal existiert die Registerkarte mit den entsprechenden aria-controls Attribut ist aktiv, ist das wirklich ein Fehler? Oder ist dies nur ein Fall von falsch positiv, weil es ein automatisierter Test ist und sie nur so viel tun können.

Zusammenfassend, was macht aria-controls tun und muss es wirklich auf eine ID verweisen, die derzeit im DOM existiert?

Answer 1

aria-controls geben Sie Ihrer assistierenden Technologie eine Möglichkeit, zum kontrollierten Element zu gelangen.

Wenn dieses Element nicht im DOM ist oder nicht zugegriffen werden kann, dann ist es ein Fehler.

Answer 2

Die beiden (das Element mit aria-controls sowie das Element mit dem referenzierten id) müssen gleichzeitig vorhanden sein, egal ob beim Seitenrendern oder über JS-Injektion.

Das DOM wird von der UA/AT-Kombination analysiert, bevor der Benutzer überhaupt zum Steuerelement gelangt oder Ihr Skript ausgelöst wird, damit es existiert. Wenn Sie JS-Injection verwenden, müssen Sie sicherstellen, dass das DOM erneut analysiert wird.

Dies gilt auch für aria-owns.

Answer 3

Ich weiß nicht, ob das Folgende in Ihrer Architektur funktionieren würde, aber es würde das Fehlerproblem lösen: Entwerfen Sie die Registerkarten so, dass sie alle auf der Seite zum Zeitpunkt des Ladens sind. Formatiere diejenigen, die nicht außerhalb des Darstellungsbereichs angezeigt werden sollen, mit absoluter Positionierung und etwas wie "left: -99em". Verwenden Sie AJAX, um die Positionierung zurückzusetzen, wenn die Zeit zum Anzeigen der Registerkarten gekommen ist. Das Ergebnis ist, dass die ARIA ID-Abhängigkeiten immer gültig sind, da die Registerkarten immer Teil des DOM sind.