roll atributi nima uchun qo'shilgan?

ARIA (Accessible Rich Internet Applications) ichida role atributi, elementning foydalanuvchi interfeysining turini aniq belgilash uchun ishlatiladi. Bu yordamchi texnologiyalar, masalan, ekran o‘quvchilar, elementning maqsadini tushunishga va bu ma’lumotlarni cheklovlarga duch kelgan foydalanuvchilarga yetkazishga yordam beradi. Bu HTML semantikasi bilan to‘ldiradi, ayniqsa, elementlar o‘z ichiga semantikani olmagan yoki standart semantik etarli bo‘lmagan hollarda.

Masalan:

• div elementiga role="button" tayinlangan bo‘lsa, ekran o‘quvchi uni tugma sifatida qabul qiladi, hatto u standart xatti-harakatlar yoki HTML tugmasi semantikasi bilan ta’minlanmagan bo‘lsa ham.

<div role="button" tabindex="0" aria-pressed="false">
  Menga bos
</div>

• nav elementida navigation roli (garchi nav o‘zida navigatsiya semantikasi bo‘lsa ham) ba’zi hollarda uning talqinini yaxshilashi mumkin.

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

• Ba’zi murakkab vidjetlar, semantik bo‘lmagan elementlar asosida yaratilgan bo‘lsa, to‘g‘ri taqdimot uchun o‘z rollarini oladi:

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

role atributi elementlarni ularning funktsiyasi va maqsadiga ko‘ra tasniflaydi, yordamchi texnologiyalarni ishlatadigan foydalanuvchilar uchun yanada aniq va foydali interaktsiya ta’minlaydi. Uni boshqa ARIA atributlari bilan (masalan, aria-label, aria-expanded, aria-hidden) birga ishlatish muhim, chunki bu atributlar elementlarning holati va xususiyatlarini uzatadi.

Eslab qolish kerak:

• Doimo HTML5 ning tabiiy semantikasi ustun bo‘lishi kerak. Agar mos HTML element mavjud bo‘lsa, uni role va boshqa ARIA atributlari bilan uning xatti-harakatini taqlid qilish o‘rniga foydalaning. Masalan, <button> o‘rniga <div role="button"> ishlatmang.
• Elementning roli o‘zgartirilishi uning o‘ziga xos xatti-harakatini o‘zgartirmaydi. Masalan, div ustida role="button" bo‘lsa, u Space yoki Enter bilan fokuslanmaydi yoki faollashtirilmaydi, qo‘shimcha JavaScriptsiz.