Ինչու է ավելացվել 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-ի։