Kāpēc tika pievienots atribūts roll?

ARIA (Accessible Rich Internet Applications) atribūts role tiek izmantots, lai skaidri noteiktu elementa lietotāja saskarnes tipu. Tas palīdz palīgtehnoloģijām, piemēram, ekrāna lasītājiem, saprast elementa nozīmi un nodot šo informāciju lietotājiem ar ierobežotām spējām. Tas papildina HTML semantiku, īpaši elementiem, kuriem nav iebūvētas semantikas vai kad standarta semantika ir nepietiekama.

Piemēri:

• Elementam div, kam piešķirta loma button, ekrāna lasītājs to uztvers kā pogu, pat ja tas nesatur standarta uzvedību un HTML pogas semantiku.

<div role="button" tabindex="0" aria-pressed="false">
  Nospied mani
</div>

• Rola navigation uz elementa nav (lai gan nav jau ir iebūvēta navigācijas semantika) var papildus uzlabot tās interpretāciju dažos gadījumos.

<nav role="navigation">
  <ul>
    <li><a href="/">Sākums</a></li>
  </ul>
</nav>

• Daži sarežģīti logrīki, kas izveidoti, balstoties uz nesemantiskām elementiem, iegūst savas lomas, lai pareizi tās attēlotu:

<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">Tabula 1</button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">Tabula 2</button>
</div>
<div id="panel-1" role="tabpanel" aria-labelledby="tab-1">
  Tabulas 1 saturs.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Tabulas 2 saturs.
</div>

role atribūts klasificē elementus pēc to funkcijas un mērķa, nodrošinot precīzāku un noderīgāku mijiedarbību lietotājiem, kuri izmanto palīgtehnoloģijas. Ir svarīgi to lietot kopā ar citiem ARIA atribūtiem (piemēram, aria-label, aria-expanded, aria-hidden), kas nodod elementu stāvokli un īpašības.

Jāatceras:

• Vienmēr prioritāte ir nativai HTML5 semantikā. Ja ir piemērots HTML elements, lietojiet to vietā, lai imitētu tā uzvedību ar role un citiem ARIA atribūtiem. Piemēram, lietojiet <button> vietā <div role="button">.
• Elementa lomas maiņa nemaina tā iebūvēto uzvedību. Piemēram, role="button" uz div nepadara to fokusējamu vai aktivizējamu ar Space vai Enter bez papildu JavaScript.