it-swarm.com.de

Was ist der Zweck des Attributs "role" in HTML?

Ich sehe immer wieder Rollenattribute in der Arbeit einiger Leute. Ich benutze es auch, bin mir aber nicht sicher, wie es wirkt.

Zum Beispiel:

<header id="header" role="banner">
    Header stuff in here
</header>

Oder:

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

Oder:

<section id="main" role="main">
     Main content stuff in here
</section>

Ist dieses Rollenattribut erforderlich?

Ist dieses Attribut für die Semantik besser?

Verbessert es SEO?

Eine Liste von Rollen kann gefunden werden hier , aber ich sehe einige Leute, die ihre eigenen erfinden. Ist das erlaubt oder eine korrekte Verwendung des Rollenattributs?

Irgendwelche Gedanken dazu?

1095
jeroen

Die meisten der angezeigten Rollen wurden als Teil von ARIA 1.0 definiert und später in HTML5 integriert. Einige der neuen HTML5-Elemente (dialog, main usw.) basieren sogar auf den ursprünglichen ARIA-Rollen.

http://www.w3.org/TR/wai-aria/

Es gibt zwei Hauptgründe, Rollen zusätzlich zu Ihrem nativen semantischen Element zu verwenden.

Grund Nr. 1. Überschreiben der Rolle, wenn kein Host-Sprachelement geeignet ist oder aus verschiedenen Gründen ein weniger semantisch geeignetes Element verwendet wurde.

In diesem Beispiel wurde ein Link verwendet, obwohl die resultierende Funktionalität eher einer Schaltfläche ähnelt als einem Navigationslink.

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

Screenreader hören dies als Schaltfläche (im Gegensatz zu einem Link), und Sie können einen CSS-Attributselektor verwenden, um Class-Itis und Div-Itis zu vermeiden.

*[role="button"] {
  /* style these a buttons w/o relying on a .button class */
}

Grund Nr. 2. Sichern der Rolle eines nativen Elements, um Browser zu unterstützen, die die ARIA-Rolle implementiert haben, die Rolle des nativen Elements jedoch noch nicht implementiert haben.

Beispielsweise wird die "Haupt" -Rolle in Browsern seit vielen Jahren unterstützt, sie ist jedoch eine relativ neue Ergänzung zu HTML5, sodass viele Browser die Semantik für <main> noch nicht unterstützen.

<main role="main">…</main>

Dies ist technisch redundant, hilft aber einigen Nutzern und schadet keinem. In einigen Jahren wird diese Technik wahrscheinlich überflüssig.

Sie haben auch geschrieben:

Ich sehe einige Leute, die sich etwas ausdenken. Ist das erlaubt oder eine korrekte Verwendung des Rollenattributs?

Dies ist eine gültige Verwendung des Attributs, sofern keine echte Rolle enthalten ist. Browser übernehmen die erste erkannte Rolle in der Tokenliste.

<span role="foo link note bar">...</a>

Aus der Liste sind nur link und note gültige Rollen, daher wird die Verknüpfungsrolle angewendet, da sie an erster Stelle steht. Wenn Sie benutzerdefinierte Rollen verwenden, stellen Sie sicher, dass sie nicht mit einer definierten Rolle in ARIA oder der von Ihnen verwendeten Host-Sprache (HTML, SVG, MathML usw.) in Konflikt stehen.

944
James Craig

Soweit ich weiß, wurden Rollen ursprünglich von XHTML definiert, aber veraltet. Sie sind jedoch jetzt in HTML 5 definiert, siehe hier: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

Der Zweck des Rollenattributs besteht darin, die genaue Funktion eines Elements (und seiner untergeordneten Elemente) als Teil einer Webanwendung für die Analyse von Software zu identifizieren. Dies dient hauptsächlich der Barrierefreiheit für Bildschirmleser, kann aber auch als nützlich für eingebettete Browser und Bildschirmschaber angesehen werden. Um für den ungewöhnlichen HTML-Client nützlich zu sein, muss das Attribut auf eine der Rollen aus der von mir verknüpften Spezifikation festgelegt werden. Wenn Sie es sich selbst machen, kann diese "zukünftige" Funktionalität nicht funktionieren - ein Kommentar wäre besser.

Praktische Hinweise hier: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

155
S Hubble

Ist dieses Rollenattribut erforderlich?

Antwort: Ja .

  • Das Rollenattribut ist erforderlich, um Accessible Rich Internet Applications zu unterstützen. ( WAI-ARIA um Rollen in XML-basierten Sprachen zu definieren. wenn die Sprachen kein eigenes Rollenattribut definieren.
  • Obwohl das Rollenattribut aus diesem Grund von der Arbeitsgruppe für Protokolle und Formate veröffentlicht wird , hat das Attribut auch allgemeinere Anwendungsfälle.

Es bietet Ihnen:

  • Barrierefreiheit
  • Geräteanpassung
  • Serverseitige Verarbeitung
  • Komplexe Datenbeschreibung, ... etc.
18
Laxmi

Mir ist klar, dass dies eine alte Frage ist, aber eine andere mögliche Überlegung, die von Ihren genauen Anforderungen abhängt, ist, dass die Validierung auf https://validator.w3.org/ Warnungen wie folgt generiert:

Warnung: Die Formularrolle ist für das Element Formular nicht erforderlich.

10
dotnetnutty