За какво беше добавен атрибутът roll?

Атрибутът role се използва в ARIA (Accessible Rich Internet Applications) за явно определяне на типа на потребителския интерфейс на елемента. Това помага на помощните технологии, като скрийн рийдъри, да разберат предназначението на елемента и да предадат тази информация на потребителите с ограничени възможности. Той допълва семантиката на HTML, особено за елементи без вградена семантика или когато стандартната семантика не е достатъчна.

Например:

• Елементът div с роля button ще бъде възприет от скрийн рийдър като бутон, дори ако няма стандартно поведение или семантика на HTML бутон.

<div role="button" tabindex="0" aria-pressed="false">
  Натисни ме
</div>

• Ролята navigation на елемент nav (макар че nav вече има вградена семантика за навигация) може допълнително да подобри интерпретацията й в някои случаи.

<nav role="navigation">
  <ul>
    <li><a href="/">Начало</a></li>
  </ul>
</nav>

• Някои сложни widget-и, създадени на базата на несемантични елементи, получават своите роли за коректно представяне:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Вкладка 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Вкладка 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Съдържание на вкладка 1.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Съдържание на вкладка 2.
</div>

Атрибутът role класифицира елементите според тяхната функция и цел, осигурявайки по-точно и полезно взаимодействие за потребителите, използващи помощни технологии. Важно е да се използва заедно с други ARIA атрибути (например aria-label, aria-expanded, aria-hidden), които предават състоянието и свойствата на елементите.

Трябва да се помни:

• Винаги се дава приоритет на нативната семантика на HTML5. Ако съществува подходящ HTML елемент, използвайте го вместо симулация на неговото поведение чрез role и други ARIA атрибути. Например, използвайте <button> вместо <div role="button">.
• Промяната на ролята на елемент не променя неговото вградено поведение. Например, role="button" на div не го прави фокусируем или активируем с Space или Enter без допълнителен JavaScript.