Do czego służył atrybut roll?

Atrybut role jest używany w ARIA (Dostępne Rozbudowane Aplikacje Internetowe) do wyraźnego określenia typu interfejsu użytkownika elementu. Pomaga to technologiom wspomagającym, takim jak czytniki ekranowe, zrozumieć przeznaczenie elementu i przekazać te informacje użytkownikom z ograniczonymi możliwościami. Uzupełnia semantykę HTML, szczególnie dla elementów, które nie mają wbudowanej semantyki lub gdy standardowa semantyka jest niewystarczająca.

Na przykład:

Element div z rolą button będzie postrzegany przez czytnik ekranowy jako przycisk, nawet jeśli nie ma standardowego zachowania ani semantyki HTML przycisku.

<div role="button" tabindex="0" aria-pressed="false">
  Kliknij mnie
</div>

Rola navigation na elemencie nav (chociaż nav ma już wbudowaną semantykę nawigacji) może dodatkowo poprawić jej interpretację w niektórych przypadkach.

<nav role="navigation">
  <ul>
    <li><a href="/">Strona główna</a></li>
  </ul>
</nav>

Niektóre złożone widżety, tworzone na podstawie elementów niesemantycznych, otrzymują swoje role dla poprawnego przedstawienia:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Zakładka 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Zakładka 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Zawartość zakładki 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Zawartość zakładki 2.
</div>

Atrybut role klasyfikuje elementy według ich funkcji i celu, zapewniając bardziej precyzyjną i użyteczną interakcję dla użytkowników korzystających z technologii wspomagających. Ważne jest, aby używać go razem z innymi atrybutami ARIA (np. aria-label, aria-expanded, aria-hidden), które przekazują stan i właściwości elementów.

Należy pamiętać:

Priorytet zawsze ma semantyka natywna HTML5. Jeśli istnieje odpowiedni element HTML, użyj go zamiast symulowania jego zachowania za pomocą role i innych atrybutów ARIA. Na przykład, użyj <button> zamiast <div role="button">.
Zmiana roli elementu nie zmienia jego wbudowanego zachowania. Na przykład, role="button" na div nie czyni go fokusowalnym ani aktywowanym za pomocą Space lub Enter bez dodatkowego JavaScript.