Miks lisati atribuut roll?

ARIA (Accessible Rich Internet Applications) atribuudi role kasutatakse selgelt kasutajaliidese elemendi tüübi määratlemiseks. See aitab abitehnoloogiatel, nagu ekraanisõbrad, mõista elemendi eesmärki ja edastada seda teavet piiratud võimetega kasutajatele. See täiendab HTML semantikat, eriti elementide puhul, millel puudub sisseehitatud semantika või kui standardsemantika ei ole piisav.

Näited:

• Element div, millele on määratud roll button, tajutakse ekraanisõbraga nagu nupp, isegi kui see ei oma standardset käitumist ja HTML nupu semantikat.

<div role="button" tabindex="0" aria-pressed="false">
  Vajuta mind
</div>

• Roll navigation nav elemendil (kuigi nav juba omab sisseehitatud navigatsiooni semantikat) võib täiendavalt parandada selle tõlgendust mõnel juhul.

<nav role="navigation">
  <ul>
    <li><a href="/">Avaleht</a></li>
  </ul>
</nav>

• Mõned keerukad vidinad, mis on loodud neseemantiliste elementide põhjal, saavad oma rolle õige esitamise jaoks:

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

role atribuut klassifitseerib elemendid nende funktsiooni ja eesmärgi järgi, pakkudes täpsemat ja kasulikumat suhtlust abitehnoloogiaid kasutavate kasutajate jaoks. Oluline on seda kasutada koos teiste ARIA atribuutidega (näiteks aria-label, aria-expanded, aria-hidden), mis edastavad elementide olekut ja omadusi.

Pea meeles:

• Alati eelistatakse natiivset HTML5 semantikat. Kui sobiv HTML element on olemas, kasutage seda selle asemel, et jäljendada selle käitumist role ja teiste ARIA atribuutidega. Näiteks kasutage <button> asemel <div role="button">.
• Elemendi rolli muutmine ei muuda selle sisseehitatud käitumist. Näiteks, role="button" div-il ei tee seda fokuseeritavaks ega aktiveeritavaks Space või Enter klahvi vajutamisel ilma täiendava JavaScriptita.