roll atributu niyə əlavə olunub?

ARIA (Əlçatan Zəngin İnternet Tətbiqləri) daxilində role atributu, elementin istifadəçi interfeysinin növünü açıq şəkildə müəyyən etmək üçün istifadə olunur. Bu, köməkçi texnologiyalara, məsələn, ekran oxuyuculara, elementin məqsədini anlamağa və bu məlumatları məhdudiyyətləri olan istifadəçilərə çatdırmağa kömək edir. HTML semantikası ilə tamamlayır, xüsusən də daxili semantikası olmayan elementlər və ya standart semantik kifayət etmədikdə.

Məsələn:

• div elementinə role="button" təyin olunmuşsa, ekran oxuyucu onu düymə kimi qəbul edir, hətta onun standart davranışı və HTML düymə semantikası olmasa belə.

<div role="button" tabindex="0" aria-pressed="false">
  Mənə kliklə
</div>

• nav elementində navigation rolu (hətta nav artıq daxili navigasiya semantikası daşıyır) bəzi hallarda onun şərhini yaxşılaşdıra bilər.

<nav role="navigation">
  <ul>
    <li><a href="/">Əsas Səhifə</a></li>
  </ul>
</nav>

• Bəzi mürəkkəb vidjetlər, semantik olmayan elementlər əsasında yaradılmışsa, düzgün təqdimat üçün öz rollarını alırlar:

<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">
  Tab 1-in məzmunu.
</div>
<div id="panel-2" role="tabpanel" aria-labelledby="tab-2" hidden>
  Tab 2-in məzmunu.
</div>

role atributu elementləri funksiyaları və məqsədlərinə görə təsnif edir, köməkçi texnologiyaları istifadə edən istifadəçilər üçün daha dəqiq və faydalı qarşılıqlı əlaqə təmin edir. Onu digər ARIA atributları ilə (məsələn, aria-label, aria-expanded, aria-hidden) birlikdə istifadə etmək vacibdir, çünki bu atributlar elementlərin vəziyyətini və xüsusiyyətlərini ötürür.

Yadda saxlamalı:

• Həmişə HTML5-in yerli semantikası üstün tutulur. Əgər uyğun HTML elementi mövcuddursa, onu role və digər ARIA atributları ilə onun davranışını təqlid etmək əvəzinə istifadə edin. Məsələn, <button> istifadə edin, <div role="button"> yerinə.
• Bir elementin rolunu dəyişdirmək onun daxili davranışını dəyişmir. Məsələn, role="button" olan div Space və ya Enter ilə fokuslanmır və aktivləşdirilmir, əlavə JavaScript olmadan.