Rola Struktura dokumentu

`article`

Oznacza samodzielną kompozycję, która mogłaby istnieć osobno — wpis na blogu, artykuł informacyjny, odpowiedź na forum lub karta produktu. Najpierw użyj natywnego elementu <article>; sięgaj po role="article" tylko gdy nie możesz użyć elementu HTML.

Kiedy używać

Użyj <article>. Natywny element przenosi rolę za darmo i integruje się z algorytmem konspektu dokumentu.

role="article" na <div> jest właściwe, gdy nie możesz użyć natywnego elementu — zazwyczaj z powodu ograniczeń szablonu. Każdy artykuł powinien zawierać własny nagłówek, aby użytkownicy czytników ekranu mogli go zidentyfikować.

Dla kanału artykułów (osi czasu, indeksu bloga) opakuj je w role="feed" i ustaw aria-posinset / aria-setsize na każdym artykule. W przeciwnym razie zostaw oba atrybuty bez wartości.

Częste błędy

Używanie <article> dla każdego bloku treści. Element implikuje „istnieje samodzielnie”. Blurb na pasku bocznym rzadko jest artykułem.
role="article" na <section> będącej częścią większego dokumentu, a nie samodzielną kompozycją. Użyj zamiast tego role="region" lub po prostu <section>.
Artykuł bez nagłówka. Użytkownicy czytników ekranu nawigujący po artykułach nie mają nazwy dla niego.
Zagnieżdżanie <article> wewnątrz <article> dla wątku komentarzy bez użycia aria-labelledby, by nadać każdemu wewnętrznemu artykułowi odrębną dostępną nazwę.

Przykład

<article aria-labelledby="post-title-42">
  <h2 id="post-title-42">Dlaczego jedna strona powinna mieć jeden punkt orientacyjny main</h2>
  <p>Punkt orientacyjny <code>&lt;main&gt;</code> identyfikuje…</p>
</article>