2012-06-22 3 views
61

Viele ARIA Demonstration Websites verwenden, um Code wie:Die Verwendung von "aria-labeledby" auf bereits beschrifteten Eingabeelementen?

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


Aber was ist der Zweck aria-labelledby Attribut in diesem Fall der Verwendung? Das input Element wurde bereits durch das label Element markiert, das for Attribut verwendet, nicht wahr?

+0

http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-markierteby – Sarfraz

+6

Dank @Sarfraz. Diese Seite veranschaulicht jedoch nicht den Zweck einer solchen Verwendung auf bereits beschrifteten Eingabeelementen. –

Antwort

52

Es gibt einige gute Beispiele für seine Verwendung unter Mozilla Developer pages. Vielleicht die beste ihrer Beispiele, wo es ein Popup-Menü zu assoziieren mit dem übergeordneten Menüpunkt verwendet wird - 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 neigt dazu, in der größten Nutzen zu sein Gebäude Barriere Rich Internet Applications: Solange Sie mit semantischem Standard-HTML arbeiten - mit Formularen mit Standardslabels - sollten Sie es überhaupt nicht brauchen: Es gibt also keinen Grund, es für ein LABEL/INPUT-Paar zu verwenden. Aber wenn Sie "Rich UI" von Grund auf neu erstellen (DIVs und andere Low-Level-Elemente mit JavaScript hinzufügen Interaktivität), dann ist es wichtig, einen Screenreader wissen, was die höhere Ebene Intent ist.

+4

Danke @ BrendanMcK. Was du gesagt hast, ist wahr. Ich hatte jemanden gefragt, der für ARIA arbeitet und auch er sagte, dass es in diesem Fall keine Notwendigkeit gibt, aria-labelledby zu verwenden. Für die Kennzeichnung s, sagte er, benutze es nur, wenn wir eine mit mehreren

+0

[Mehr als ein LABEL kann dem gleichen Steuerelement zugeordnet werden, indem mehrere Referenzen über das Attribut for erzeugt werden] (http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.9.1). Ok, WAVE/WebAIM gefällt es nicht, und es stellt sich heraus [es gibt ein Problem mit der UA-Unterstützung] (http://webaim.org/discussion/mail_thread?thread=4307). Aber sein Vorschlag ist nur schwer zu fassen, und ich glaube nicht, dass er einen wirklichen Vorteil hat. [Zumindest IE <= 8 unterstützt nicht mehrere IDs in aria-labeledby] (http://www.paciellogroup.com/blog/aria-tests/aria-labelledby-input.html). – sourcejedi

+0

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

5

Es gibt immer UA Support Probleme mit etwas Neuem, deshalb sehen Entwickler die progressive Verbesserung. Diese ARIA-Technik bietet die Möglichkeit, das "for" -Attribut aufzuheben und ermöglicht anderen Elementen, Teil der reichen Form zu werden. Diese Techniken werden zur gängigen Praxis.

+0

Focusiert es das Element beim Klicken wie das Attribut for? Ich rate nicht –

+0

Geräte sollten aber nicht viele tun ... noch. – user2323922

Verwandte Themen