Атрибути 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>

• Баъзе виджетҳои мураккаб, ки аз унсурҳои номуайян сохта шудаанд, ролҳои худро барои намоиши дуруст мегиранд:

<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.