Um dem HTML-Tag mehr Bedeutung zu geben, verwende ich data - * . Eigentlich habe ich diesen Ansatz von jQuery Mobile gelernt. Aber kürzlich stieß ich auf WAI-ARIA . Es scheint fast so ähnlich zu sein wie data - * . Kann mir jemand erklären, wie das anders ist und ihre Browserabhängigkeit?
Nützliche Links
über WAI-ARIA
über daten- *
UPDATE: Endlich .. sie sind beide verschieden. Sie haben eine ähnliche Syntax. Das hat mich verwirrt. Ich akzeptiere @Gajotres Antworten. Und sieh dir diese Tube an Video für ARIA live. Ordne dieses Video der Antwort von @ Gajotres zu.
Der W3C HTML5 Arbeitsentwurf besagt:
"Ein benutzerdefiniertes Datenattribut ist ein Attribut in keinem Namespace, dessen Name beginnt mit der Zeichenkette "data" und hat mindestens ein Zeichen danach der Bindestrich ... "
Mit diesen benutzerdefinierten Datenattributen können Sie Attribute erstellen, um Daten mit Scripts zu teilen, die auf Ihrer eigenen Site ausgeführt werden. Sie dürfen nicht mit generischer Software verwendet oder geerntet werden. Sie sind nicht darauf beschränkt, wie viele benutzerdefinierte Datenattribute Sie angeben können. Laut caniuse.com "können alle Browser bereits Daten-Attribute verwenden und mit getAttribute darauf zugreifen."
Aufgrund der guten Unterstützung gibt es viele Beispiele für benutzerdefinierte Datenattribute, die bereits in der freien Wildbahn existieren. Wenn Sie Dreamweaver CS5.5 verwenden, können Sie eine jQuery Mobile (JQM) -Anwendung erstellen. jQuery Mobile verwendet umfangreiche benutzerdefinierte Datenattribute zur Identifizierung von Rollen von Elementen, Themen und vielen anderen Dingen. Hier ist ein Beispiel für eine JQM-Seite:
%Vor%Wenn Sie sich bemühen, Ihre Website für Benutzer mit verschiedenen Surfgewohnheiten und körperlichen Behinderungen zugänglich zu machen, werden Sie wahrscheinlich die Rolle und die aria-Attribute erkennen. WAI-ARIA (Accessible Rich Internet Applications) ist eine Methode, mit der Sie Ihre dynamischen Webinhalte und Anwendungen so definieren können, dass Menschen mit Behinderungen sie identifizieren und erfolgreich interagieren können. Dies geschieht durch Rollen, die die Struktur des Dokuments oder der Anwendung definieren, oder durch aria-Attribute, die eine Widget-Rolle, eine Beziehung, einen Status oder eine Eigenschaft definieren.
ARIA-Verwendung wird in den Spezifikationen empfohlen, um HTML5-Anwendungen leichter zugänglich zu machen. Wenn Sie semantische HTML5-Elemente verwenden, sollten Sie ihre entsprechende Rolle festlegen. Die grundlegende Struktur kann in etwa so aussehen:
%Vor%Es gibt auch eine Vielzahl von aria-Attributen, um Ihre Inhalte navigierbarer und verständlicher zu machen. Dinge wie aria-labeledby, aria-level, aria-describedby und aria-orientation machen deinen Content wiedererkennbar. Sie können mehr darüber auf der Seite ARIA-Status und -Eigenschaften lesen.
Bleiben Sie bei den Daten - * Attributen. Sie werden derzeit besser unterstützt. Und das sollte als Ersatz für ältere Arten von benutzerdefinierten Attributen verwendet werden. Auch Daten * -Attribute werden als Datenspeicher erstellt, während ARIA- und ROLE-Attribute zur besseren Lesbarkeit erstellt werden.
Es gibt nichts Gemeinsames zwischen ihnen, außer dass sie HTML-Attribute sind.
Die ARIA-Attribute sind in Spezifikationen definiert und sollen von relevanter Software wie Browsern und assistiver Software beobachtet werden.
Die data-
-Attribute sind ein Mechanismus, der speziell für die seitenweite oder standortweite Verwendung für beliebige Zwecke bestimmt ist, ohne dass eine allgemeine Definition für diese Zwecke erforderlich ist. Das heißt, sie sind für den "privaten Gebrauch" gedacht, im Wesentlichen für clientseitiges Scripting (und möglicherweise Styling) und könnten auch in Site-spezifischen Suchmaschinen und in Autorenwerkzeugen verwendet werden. Ein data-foo
-Attribut in Ihrer Site wird niemals mit einem Attribut kollidieren, das in Spezifikationen oder mit irgendetwas anderem definiert ist, solange Sie (oder der Site-Administrator) seine Verwendung konsistent halten und eine eigene interne Dokumentation ihrer Verwendung solcher Attribute haben / p>
Tags und Links html jquery html5 css3 jquery-mobile