Der Grund für die Verwendung von role = "list" und role = "listitem"?

Question

Gibt es einen Vorteil, den folgenden Code zu verwenden?

<ul role="list"> 
    <li role="listitem"></li> 
    <li role="listitem"></li> 
    <li role="listitem"></li> 
</ul> 

Ist der folgende Code die gleiche Bedeutung zu unterstützenden Technologien hat?

Answer 1

Die Antwort ist ja, assistive Technologien funktionieren gut, wenn korrekte semantische Markup für die Strukturierung des Dokuments verwendet wird. Wenn es sich um eine einfache statische Liste handelt, müssen diese nicht mit den Rollen markiert werden.

Zum Beispiel: Betrachten Sie die role="listitem", deren baseConcept als HTML li definiert ist. Und das baseConcept HTML li ist fast identisch mit der Definition von role = "listitem", abgesehen von der Tatsache, dass es keine Eigenschaften erbt. Mehr info

Daher betrachten wir folgendes Beispiel:

<h3 id="header">Vegetables</h3> 
    <ul role="list" aria-labelledby="header" aria-owns="external_listitem"> 
    <li role="listitem" aria-level="3">Carrot</li> 
    <li role="listitem" aria-level="3">Tomato</li> 
    <li role="listitem" aria-level="3">Lettuce</li> 
    </ul> 
… 
<div role="listitem" id="external_listitem">Asparagus</div> 

Hier ist die Seite Autor will aria-Level-Eigenschaft für das li verwenden. Obwohl aria-labelledby und aria-ownes auf alle Elemente des Basis-Markups angewendet werden können, erfordert die Eigenschaft aria-level, dass das Element eine Rolle hat. Seit ARIA-Spezifikation verwendet Web Ontology Language (OWL), um die Rollen in einer Klassenhierarchie darzustellen. OWL beschreibt diese Rollen als Klassen mit ihren Zuständen und Eigenschaften. Um eine Aria-Ebene zu verwenden, muss das Element eine Rolle definiert werden, da HTML keine Eigenschaften oder Einschränkungen erbt. Sobald Sie die Rolle als Listenelement markiert haben, muss dieses Listenelement einem Element mit role = "list" gehören. Sie verwenden also beide Rollen.

Auf der anderen Seite sind Rollen auch nützlich, wenn semantisches Markup ebenfalls nicht verwendet wird. Zum Beispiel:

<div role="list"> 
    <div role="listitem">dog</div> 
    <div role="listitem">cat</div> 
    <div role="listitem">sparrow</div> 
    <div role="listitem">wolf!</div> 
</div> 

Hier wird die Screenreader-Software wird die ARIA-Liste (bestehend aus divs) wie jede anderen normalen HTML-Liste anzuzeigen.

Answer 2

Sie Frage ist ein wenig mehrdeutig, aber wenn Sie fragen, ob es einen Vorteil zum Hinzufügen von role = "listitem" zu li-Elemente, die haben bereits das als ihre Standardrolle, dann die Antwort auf diese spezifische Frage ist : Nein,

(Ja, die Verwendung von li ist bevorzugt von div. Und Rolle = "listitem" wird benötigt, wenn Sie von einem div begannen, obwohl li bevorzugt wird, aber ich denke nicht, dass Sie das sind fragen.)

Überprüfen Sie diese blog post by Steve Faulkner; Er hat einen Entwurf für Best-Practice-Dokumente zusammengestellt, in dem erläutert wird, wann und wo die verschiedenen ARIA-Rollen in HTML5 verwendet werden sollen. Das Dokument ist derzeit here, aber da es ein inoffizieller Entwurf ist, weiß ich nicht, ob dieser Link auch in Zukunft funktioniert.

Im Allgemeinen müssen (und sollten) Sie keine Rolle für Elemente angeben, wenn diese Rolle mit der Standardrolle des Elements identisch ist. Also, da li Elemente eine Standardrolle von listitem haben, gibt es keinen Grund, das zu wiederholen.

Es gibt einige Ausnahmen von dieser Regel, und sie befassen sich hauptsächlich mit neuen HTML5-Elementen, für die Browser noch nicht ordnungsgemäß Standardrollen implementieren. Da zum Beispiel das Element article von HTML5 noch nicht von allen Browsern mit einer Rolle als Artikel versehen ist, wird <article role='article'> in diesen und ähnlichen Fällen tatsächlich empfohlen.