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-labelledby
in diesem Fall die Verwendung von Attributen? Das input
Element wurde bereits von dem label
Element beschriftet, das das for
Attribut verwendet, nicht wahr?
html
label
accessibility
wai-aria
Ian Y.
quelle
quelle
Antworten:
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.
quelle
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.
quelle