Der Zweck der Verwendung von "aria-labelledby" für bereits beschriftete Eingabeelemente?

84

Viele ARIA-Demonstrationswebsites verwenden Code wie:

<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">

Aber wozu dient aria-labelledbyin diesem Fall die Verwendung von Attributen? Das inputElement wurde bereits von dem labelElement beschriftet, das das forAttribut verwendet, nicht wahr?

— Ian Y.
quelle

1

w3.org/TR/2010/WD-wai-aria-20100916/…

— Sarfraz

8

Danke @Sarfraz. Diese Seite veranschaulicht jedoch nicht den Zweck einer solchen Verwendung für bereits beschriftete Eingabeelemente.

— Ian Y.

69

Es gibt einige gute Beispiele für die Verwendung auf Mozilla Developer-Seiten . Vielleicht ist das beste ihrer Beispiele, wo es verwendet wird, um ein Popup-Menü mit dem übergeordneten Menüelement zu verknüpfen - es ist Beispiel 7 auf der Seite:

<div role="menubar">  
    <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>  
    <div role="menu" aria-labelledby="fileMenu">  
        <div role="menuitem">Open</div>  
        <div role="menuitem">Save</div>  
       <div role="menuitem">Save as ...</div>  
       ...  
    </div>  
    ...

ARIA-Attribute sind in der Regel am nützlichsten beim Erstellen von barrierefreien Rich-Internet-Anwendungen : Solange Sie sich an semantisches Standard-HTML halten und Formulare mit Standardbezeichnungen verwenden, sollten Sie es überhaupt nicht benötigen. Es gibt also keinen Grund, es zu verwenden ein LABEL / INPUT-Paar. Wenn Sie jedoch eine "Rich UI" von Grund auf neu erstellen (DIVs und andere Low-Level-Elemente mit Javascript, die Interaktivität hinzufügen), ist es wichtig, dass ein Screenreader weiß, was die übergeordnete Absicht ist.

— BrendanMcK
quelle

11

Danke @BrendanMcK. Was du gesagt hast, ist wahr. Ich hatte jemanden gefragt, der für ARIA arbeitet, und er sagte auch, dass es in diesem Fall nicht notwendig ist, Aria-Labelledby zu verwenden. Für die Kennzeichnung von <Eingaben> sagte er, dass sie nur verwendet werden sollen, wenn wir eine <Eingabe> mit mehreren <Labels> kennzeichnen müssen. Hier ist ein Beispiel, das er zur Verfügung gestellt hat: html5accessibility.com/tests/mulitple-labels.html

— Ian Y.

1

Es kann mehr als ein LABEL demselben Steuerelement zugeordnet werden, indem mehrere Referenzen über das Attribut for erstellt werden . Ok, WAVE / WebAIM mag es nicht und es stellt sich heraus, dass es ein Problem mit der UA-Unterstützung gibt . Aber sein Vorschlag ist nur seltsam , und ich glaube nicht, dass er einen wirklichen Vorteil hat. Zumindest IE <= 8 unterstützt nicht mehrere IDs in aria-labelledby .

— Sourcejedi

1

Dieser Link muss hier sein: developer.mozilla.org/en-US/docs/Accessibility/ARIA

— Facundo Colombier

5

Es gibt immer Probleme mit der UA-Unterstützung bei Neuem, weshalb Entwickler auf die progressive Verbesserung setzen. Diese ARIA-Technik bietet die Möglichkeit, das Attribut "for" zu beseitigen, und ermöglicht es anderen Elementen, Teil der Rich-Form zu werden. Diese Techniken werden zur gängigen Praxis.

— user2323922
quelle

1

Fokussiert es das Element beim Klicken wie das Attribut for? Ich vermute nicht

— Dominic

3

Völlig falsch. Die Arienattribute sollen NICHT andere Attribute ersetzen, da ihr einziger Zweck darin besteht, den Zugriff auf Elemente zu erleichtern. Elemente sollten aufgrund eines Arienattributs NICHT fokussierbar sein.

— Gust van de Wal

1

Die gängige Praxis (leider?) Ist meiner Meinung nach derzeit noch nicht wahr. Best Practice ist möglicherweise die bessere Wahl. Vielleicht in der Zukunft, wenn es übliche Praxis ist, dass hochentwickelte KI HTML anstelle von Menschen schreibt :)

— Michael