Powód użycia roli = "list" i roli = "listitem"?

Question

Czy jest jakaś korzyść z używania następującego kodu?

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

Czy następujący kod ma takie samo znaczenie do technologii wspomagających?

<ul> 
    <li></li> 
    <li></li> 
    <li></li> 
</ul> 

Answer 1

Odpowiedź brzmi: tak, technologie wspomagające działają dobrze, gdy do struktury dokumentu użyto poprawnego znacznika semantycznego. Jeśli jest to prosta lista statyczna, nie ma potrzeby oznaczania ich rolami.

Na przykład: Rozważmy role="listitem", którego baseConcept jest zdefiniowany jako HTML li. A baseConcept HTML li jest prawie identyczne z definicją roli = "listitem" z wyjątkiem faktu, że nie dziedziczy żadnych właściwości. Więcej info

Zatem rozważmy następujący przykład:

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

Tutaj autor strony chce wykorzystać właściwość aria poziomu dla Li. Mimo że aria-labelledby i aria-owns mogą być stosowane do wszystkich elementów podstawowego znacznika, właściwość aria-level wymaga, aby element miał jakąś rolę. Od ARIA spec używa języka ontologii sieciowej (OWL) do reprezentowania ról w hierarchii klas. OWL opisuje te role jako klasy wraz z ich stanami i właściwościami. Tak więc, aby użyć poziomu arii, element musi być określony jako pewna rola, ponieważ zwykły HTML nie dziedziczy żadnych właściwości ani ograniczeń. Po oznaczeniu roli jako listitem wymaga ona, aby listitem był własnością elementu o roli = "list". Więc w końcu używasz obu ról.

Z drugiej strony role są również użyteczne, jeśli semantyczny znacznik nie jest również używany. Na przykład:

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

Tutaj program do odczytu ekranu wyświetli listę ARIA (złożoną z elementów div), jak każdą inną normalną listę HTML.

Answer 2

Pytanie jest nieco niejednoznaczne, ale jeśli pytasz, czy istnieje korzyść dodawania roli = "listitem" do elementów li, które mają już tę rolę domyślną, wówczas odpowiedź na to konkretne pytanie brzmi: : No.

(Tak, użycie li jest preferowane z div, a rola = "listitem" jest potrzebna, jeśli zaczynasz od div, choć li jest preferowany, ale nie sądzę, że to całkiem co ty pytanie.)

Sprawdź to blog post by Steve Faulkner; opracował dokument z najlepszymi praktykami, dotyczący czasu i miejsca korzystania z różnych ról ARIA w HTML5. Dokument jest obecnie here, ale ponieważ jest to nieoficjalna wersja robocza, nie wiem, czy ten link będzie nadal działał w przyszłości.

Ogólnie rzecz biorąc, nie trzeba (i nie należy) określać roli dla elementów, jeśli ta rola jest taka sama, jak rola domyślna elementu. Ponieważ elementy li mają domyślną rolę listitem, nie ma powodu, aby to powtarzać.

Istnieje kilka wyjątków od tej reguły i dotyczą one głównie nowych elementów HTML5, które przeglądarki nie implementują jeszcze poprawnie domyślnych ról. Tak więc, na przykład, ponieważ element HTML5 w postaci article nie jest jeszcze widoczny dla wszystkich przeglądarek jako pełniący rolę artykułu, wówczas jest zalecany <article role='article'> w tym i podobnych przypadkach.