Wie benutzt man einen Klassenselektor für aria-labeledby?

Question

Ich versuche, ein zugängliches Eingabefeld zu erstellen, wie so:

<input type="text" role="textbox" aria-labelledby="helper-msg-value"> 
<p id="helper-msg-value">You must enter a value</p> 

Gibt es eine Möglichkeit, statt einer ID eine Klasse, die als Selektor für das aria-labelledby Attribut zu benutzen? So etwas wie das:

Answer 1

Warum nicht einfach ein normales Etikett verwenden und es normal anbringen. Dies würde in allen Browsern und Screen-Reader arbeitet ...

<div class="field"> 
    <label for="qty" class="required"><abbr title="Quantity">Qty</abbr></label> 
    <input type="text" name="qty" aria-required="true" id="qty" class="required"> 
</div> 

Also mit diesem haben wir ein richtiges Etikett und Eingangsanpassung, so dass wont automatisierter Kontrolleure fail. Es liest das Etikett im Kontext und sagt den Benutzern, was das Feld ist, damit sie wissen, was sie eingeben müssen (in Ihrem Fall teilen Sie dem Benutzer nicht mit, was er eingibt). Und wir Benutzer Aria-erforderlich, die nur pings der Benutzer mit "erforderlich". Und es ist Standard, dass kein zusätzlicher Text und keine Etiketten dafür hinzugefügt werden müssen.

Kann die erforderlich * oder was nicht auf der Grundlage der erforderlichen cla

Answer 2

Es ist nicht möglich, Stil eine Klasse mit aria-labelledby oder aria-describedby zu verwenden. Es ist zwar möglich, mehrere Labels mit aria-labelledby an ein Element anzuhängen, die einzigen Werte, mit denen es arbeitet, sind IDs. Ich kann mir vorstellen, dass dies der Fall ist, weil sie erwarten, dass diese Etiketten für diesen Zweck einzigartig sind. Eine mögliche Lösung wäre, ein "Aria-Label" an die Eingabe mit dem Text anzuhängen, den Sie tatsächlich lesen möchten. Zum Beispiel mit

<label for="textfield">Q.T.Y.</label> <input type="text" id="textfield" aria-label="Quantity">

ein Screen erlauben würde, Text vorzulesen, die anders als die angezeigte Label ist. Beachten Sie jedoch, dass viele (meist?) Screenreader das Element <label> nicht lesen, wenn ein Aria-Label am Eingang verwendet wurde.

Bearbeiten: Eine Klasse soll für mehrere Instanzen eines Elements auf einer Seite verwendet werden. Wenn Sie sich auf ein Element konzentrieren, muss der Screenreader genau wissen, welches Element das Attribut aria darstellt. Aus diesem Grund werden IDs verwendet - IDs müssen für eine Seite eindeutig sein, dh eine bestimmte ID darf nur zu einem Element gehören. Dies ermöglicht dem Browser (und assistiven Technologien), schnell und genau das richtige Element für das Attribut aria zu finden. Wenn Sie drei Elemente auf der Seite mit derselben Klasse, aber unterschiedlichen Inhalten hätten, was würden Sie erwarten, dass sie ausgelesen werden?