Kodėl buvo pridėtas atributas roll?

ARIA (Accessible Rich Internet Applications) atributas role naudojamas aiškiai nustatyti vartotojo sąsajos elemento tipą. Tai padeda pagalbinėms technologijoms, tokioms kaip ekrano skaitytuvai, suprasti elemento paskirtį ir perduoti šią informaciją naudotojams su negalia. Jis papildo HTML semantiką, ypač elementams, kurie neturi įmontuotos semantikos arba kai standartinė semantika yra nepakankama.

Pavyzdžiai:

Elementui div, kuriam priskirta button rolė, ekrano skaitytuvas jį suvoks kaip mygtuką, net jei jis neturi standartinio elgesio ir HTML mygtuko semantikos.

<div role="button" tabindex="0" aria-pressed="false">
  Spustelėk mane
</div>

Rola navigation ant elemento nav (nors nav jau turi įmontuotą navigacijos semantiką) gali papildomai pagerinti jos interpretaciją kai kuriais atvejais.

<nav role="navigation">
  <ul>
    <li><a href="/">Pradžia</a></li>
  </ul>
</nav>

Kai kurie sudėtingi valdikliai, sukurti remiantis nesemantiniais elementais, gauna savo roles, kad būtų teisingai atvaizduoti:

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

role atributas klasifikuoja elementus pagal jų funkciją ir tikslą, užtikrindamas tikslesnį ir naudingesnį sąveiką naudotojams, naudojantiems pagalbines technologijas. Svarbu naudoti jį kartu su kitais ARIA atributais (pvz., aria-label, aria-expanded, aria-hidden), kurie perduoda elementų būseną ir savybes.

Reikėtų prisiminti:

Visada pirmenybė teikiama natūraliai HTML5 semantikui. Jei yra tinkamas HTML elementas, naudokite jį vietoje jo elgesio imitacijos su role ir kitais ARIA atributais. Pavyzdžiui, naudokite <button> vietoje <div role="button">.
Elemento rolės keitimas nekeičia jo įmontuoto elgesio. Pavyzdžiui, role="button" ant div nepadaro jo fokusavimo ar aktyvavimo Space ar Enter klavišais be papildomo JavaScript.