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


Ich sehe immer Rollenattribute in der Arbeit einiger Leute. Ich benutze es auch, aber ich bin mir nicht sicher über seine Wirkung.

Beispielsweise:

<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 notwendig?

Ist dieses Attribut für die Semantik besser?

Verbessert es SEO?

Eine Liste der Rollen kann gefunden werden HierAber ich sehe, dass einige Leute ihr eigenes machen. Ist das erlaubt oder eine korrekte Verwendung des Rollenattributs?

Irgendwelche Gedanken dazu?


913
2018-05-01 10:11


Ursprung


Antworten:


Die meisten Rollen, die Sie sehen, 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, zusätzlich zu Ihrem nativen semantischen Element Rollen zu verwenden.

Grund # 1. Überschreiben der Rolle, für die kein Hostsprachenelement geeignet ist oder aus verschiedenen Gründen ein weniger semantisch geeignetes Element verwendet wurde.

In diesem Beispiel wurde eine Verknüpfung verwendet, obwohl die resultierende Funktionalität eher knopfartig ist als eine Navigationsverbindung.

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

Screenreader hören dies als eine Schaltfläche (im Gegensatz zu einer Verknüpfung), und Sie können einen CSS-Attributselektor verwenden, um Klassen-Itis und Div-itis zu vermeiden.

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

Grund # 2. Die Rolle eines nativen Elements wird gesichert, um Browser zu unterstützen, die die ARIA-Rolle implementiert haben, aber noch nicht die Rolle des nativen Elements implementiert haben.

Zum Beispiel wurde die "Haupt" -Rolle in Browsern seit vielen Jahren unterstützt, aber es ist eine relativ neue Ergänzung zu HTML5, daher unterstützen viele Browser die Semantik noch nicht <main>.

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

Dies ist technisch redundant, hilft aber einigen Benutzern und schadet keinem. In ein paar Jahren wird diese Technik wahrscheinlich unnötig werden.

Du hast auch geschrieben:

Ich sehe, dass einige Leute ihr eigenes machen. Ist das erlaubt oder eine korrekte Verwendung des Rollenattributs?

Das ist eine gültige Verwendung des Attributs, es sei denn, eine echte Rolle ist nicht enthalten. Browser wenden die erste erkannte Rolle in der Tokenliste an.

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

Nur aus der Liste link und note sind gültige Rollen und daher wird die Link-Rolle angewendet, weil sie zuerst kommt. Wenn Sie benutzerdefinierte Rollen verwenden, stellen Sie sicher, dass sie nicht mit einer definierten Rolle in ARIA oder der von Ihnen verwendeten Hostsprache (HTML, SVG, MathML usw.) in Konflikt stehen.


814
2017-09-06 18:12



So wie ich es verstehe, wurden Rollen zunächst von XHTML definiert, wurden aber nicht mehr weiterentwickelt. 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 Parsing-Software zu identifizieren. Dies ist hauptsächlich eine Barrierefreiheit für Bildschirmleser, aber ich kann es auch als nützlich für eingebettete Browser und Screen Scraper sehen. Um für den ungewöhnlichen HTML-Client nützlich zu sein, muss das Attribut auf eine der Rollen aus der verknüpften Spezifikation gesetzt werden. Wenn Sie sich selbst ein Bild machen, kann diese "Zukunfts" -Funktionalität nicht funktionieren - ein Kommentar wäre besser.

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


140
2018-05-01 13:10



Ist dieses Rollenattribut notwendig?

Antworten: Ja.

  • Das Rollenattribut ist erforderlich, um zugängliche Rich-Internet-Anwendungen zu unterstützen (WAI-ARIA) Definieren von Rollen in XML-basierten Sprachen, wenn die Sprachen nicht ihr eigenes Rollenattribut definieren.
  • Obwohl dies der Grund dafür ist, dass das Rollenattribut von der Arbeitsgruppe Protokolle und Formate, das Attribut hat auch allgemeinere Anwendungsfälle.

Es bietet Ihnen:

  • Zugänglichkeit
  • Geräteanpassung
  • Serverseitige Verarbeitung
  • Komplexe Datenbeschreibung, ... etc.

9
2017-10-13 07:36