aria-expanded atributu interaktiv elementin hazırda genişləndirilmiş və ya yığılmış yığıla bilən konteyneri idarə edib-etmədiyini göstərmək üçün istifadə olunan WAI-ARIA xüsusiyyətidir. Bu atributu menyunu, akkordeonu və ya gizli paneli işə salan düymələr və ya keçidlər kimi elementlərə tətbiq etməklə siz köməkçi texnologiya istifadəçilərinə qarşılıqlı əlaqədə olduqları məzmunun vəziyyəti barədə məlumat verirsiniz. Düzgün istifadə ekran oxuyucularının bölmənin açıq və ya bağlı olduğunu elan etməsini təmin edir ki, bu da istifadəçilərə veb saytınızda əminliklə naviqasiya etməyə imkan verir.
Müasir veb dizaynda aria-expanded məqsədi nədir?
W3C WAI-ARIA spesifikasiyalarına görə, aria-expanded interaktiv elementin hazırda genişləndirilmiş və ya yığılmış yığıla bilən konteyneri idarə edib-etmədiyini göstərir. İstifadəçi gizli naviqasiya menyusunu dəyişən düyməni kliklədikdə, ekran oxuyucusu həmin menyunun hazırda görünən və ya gizli olduğunu bilməlidir. Bu atribut olmadan, brauzer keçid vəziyyəti haqqında proqram siqnalı vermir və köməkçi texnologiyaların istifadəçilərini istədikləri bölməni uğurla açıb-açmadığını təxmin etməyə vadar edir. İstifadəçi nəzarətçi ilə əlaqə saxladıqda bu vəziyyət JavaScript tərəfindən dinamik şəkildə dəyişdirilməlidir.
aria-expanded necə düzgün tətbiq edilir
Tətbiq həm statik işarələmə, həm də dinamik yeniləmələr tələb edir. Siz HTML-də komponentin ilkin vəziyyətini təyin edirsiniz, adətən məzmun standart olaraq gizlidirsə, onu ‘false’ olaraq təyin edirsiniz. İstifadəçi tətikə kliklədikdə, məzmun görünən kimi skriptiniz atribut dəyərini ‘true’ olaraq yeniləməlidir. Bu, akkordeon komponentləri, mobil menyu keçidləri və elektron ticarət məhsul səhifələrində tapılan açılan filtrlər üçün ümumi nümunədir. Həmişə tətik elementinin diqqəti cəlb edə biləcəyini və vəziyyət dəyişikliyinin dərhal baş verdiyini təmin edin.
Nə vaxt aria-expanded və digər atributlardan istifadə etməlisiniz?
Aria-expanded və digər vəziyyətlər arasında seçim etmək elementin nəyə nəzarət etdiyini başa düşməyi əhatə edir. Aria-expanded xüsusi olaraq element konteynerin görünürlüğünü dəyişən idarəedici olduqda istifadə edin. Ayrılmış regionun görünməsinə nəzarət etməyən elementlər üçün ondan istifadə etməyin. Məsələn, yeni səhifə açan sadə düymə bu atributdan istifadə etməməlidir. Bunun əvəzinə, eyni səhifə kontekstində sənəd obyekt modelini dəyişdirən UI nümunələri üçün istifadə edin.
| Atribut | Əsas İstifadə Halı | Hədəf Element |
|---|---|---|
| aria-expanded | Yığıla bilən bölmələr | Düymələr/Keçidlər |
| aria-hidden | Məzmunun gizlədilməsi | Konteynerlər/Divlər |
| aria-haspopup | Menyu tətikləri | Düymələr/Divlər |
Alien Road iş axınlarımızda aria-expanded necə tətbiq edir
Alien Road olaraq biz əlçatanlığı ilkin simli çərçivə mərhələsindən dizayn-qurma prosesimizə inteqrasiya edirik. Müştəri üçün xüsusi akkordeon və ya naviqasiya qurarkən, layihə spesifikasiyası fayllarımızda vəziyyət dəyişikliyi tələblərini sənədləşdiririk. İnkişaf mərhələsində mühəndislərimiz UI elementinin klik hadisəsini həmin elementin aria-expanded dəyər yeniləməsi ilə əlaqələndirən JavaScript funksiyaları yazırlar. Vəziyyətin düzgün elan edildiyini yoxlamaq üçün ekran oxuyucularından istifadə edərək əllə yoxlamalar aparırıq. Bu, sayt müştərilərimiz üçün canlı yayıma başlamazdan əvvəl hər bir interaktiv komponentin əsas əlçatanlıq standartlarına cavab verməsini təmin edir.
aria-expanded istifadə edərkən ümumi səhvlər
Tez-tez rast gəlinən səhv istifadəçi interfeys ilə əlaqə saxladıqda atributu yeniləməyi unutmaqdır. Düymədə ‘expanded=true’ yazılıbsa, lakin məzmun vizual olaraq gizlidirsə, istifadəçi təcrübəsi qarışıq olur. Digər səhv heç bir genişlənməyə səbəb olmayan statik elementlərə atributun tətbiq edilməsidir. Skriptinizin istifadəçi aktiv sahənin xaricinə kliklədikdə açıq menyunun bağlanması kimi kənar halları idarə etməsini təmin edin. Bu, vəziyyətin səhifənin vizual təsviri ilə sinxronizasiyadan çıxmasının qarşısını alır.
- Həmişə düzgün boolean dəyərlərindən istifadə edin: ‘true’ və ya ‘false’.
- JavaScript-inizin konteynerdə deyil, tətik elementində atributu yenilədiyinə əmin olun.
- İdarəetmə elementinin düymə etiketi kimi yerli olaraq diqqəti cəlb edə biləcəyini yoxlayın.
- Vəziyyət dəyişikliyi elanını təsdiqləmək üçün tətbiqinizi ekran oxuyucusu ilə sınayın.
Niyə nəzarətçinin vəziyyəti vacibdir?
Nəzarətçinin vəziyyəti istifadəçiyə onların qarşılıqlı əlaqəsinin nəticəsi haqqında kontekst təqdim edir. Əgər istifadəçi menyunu açmaq üçün düyməni sıxırsa, aria-expanded atributu onlara hərəkatın uğurlu olduğunu və indi kəşf etmək üçün yeni məzmun bölməsinin olduğunu bildirir. Onsuz istifadəçi səhifənin cavabsız və ya qırıq olduğunu güman edə bilər. Atributu dəqiq saxlamaqla siz bütün ziyarətçilərə keçidin vizual təsdiqinə ehtiyac duyulmadan məzmununuzda naviqasiya etməyə imkan verən etibarlı təcrübə yaradırsınız.
Hansı UI nümunələri aria-expanded tələb edir?
Bir neçə UI nümunəsi əlçatanlığı qorumaq üçün bu atributa güvənir. Akkordeonlar ən çox yayılmış nümunədir, burada birdən çox başlıq müvafiq məzmununun görünürlüğünə nəzarət edir. Naviqasiya panellərindəki açılan menyular da tez-tez alt menyuların mövcudluğunu göstərmək üçün bundan istifadə edirlər. Bundan əlavə, elektron ticarət saytlarındakı filtr panelləri tez-tez axtarış meyarlarının görünürlüğünü idarə etmək üçün bundan istifadə edirlər. İdarə etdiyimiz tipik hesabda biz bu nümunələri istifadəçilərin axtarışlarını dəqiqləşdirməli olduğu məhsul siyahısı səhifələrində görürük.
- Akkordeonlar: Məzmun bloklarının görünürlüğünü dəyişin.
- Naviqasiya Menyuları: Alt menyuların görünən olub olmadığını göstərin.
- Filtrlər: Yan panel axtarış meyarlarının göstərilməsini idarə edin.
- Modal Dialoqlar: Tətiyin genişlənmə vəziyyətini idarə edin.
Bu həftə haradan başlamaq lazımdır
Veb saytınızda ən çox istifadə edilən interaktiv elementləri yoxlamaqla başlayın. Digər məzmunun görünürlüğünü dəyişən bütün düymələri və ya keçidləri müəyyənləşdirin. Bu elementlərin cari olaraq aria-expanded atributunun düzgün təyin edilib-edilmədiyini və dinamik şəkildə yeniləndiyini yoxlayın. Bu atributları çatışmayan elementlər taparsanız, skriptlərinizi onları müvafiq olaraq idarə etmək üçün yeniləyin. Daha böyük saytlar üçün əvvəlcə əsas naviqasiyaya və istifadəçi naviqasiyasına və ümumi sayt əlçatanlığına ən yüksək təsir göstərdiyi üçün hər hansı filtr və ya akkordeon vidjetlərinə diqqət yetirin.
Tez-tez Verilən Suallar
Keçiddə aria-expanded istifadə etməliyəmmi?
Bəli, siz keçiddə aria-expanded istifadə edə bilərsiniz, lakin fəaliyyət sadəcə olaraq UI vəziyyətini dəyişdirirsə, düymə elementindən istifadə etmək adətən üstünlük təşkil edir. Keçidlər adətən yeni URL-ə naviqasiya üçün nəzərdə tutulub. Keçid əməliyyatı üçün keçiddən istifadə etməli olsanız, onun tam əlçatan olduğundan və aria-expanded atributunun əlaqəli konteynerin cari vəziyyətini düzgün əks etdirdiyindən əmin olun.
aria-expanded məzmunun gizlədilməsini avtomatik idarə edirmi?
Xeyr, aria-expanded elementin faktiki görünürlüğünə nəzarət etmir. O, yalnız vəziyyəti köməkçi texnologiyaya çatdırır. Məzmunu ekrandan fiziki olaraq gizlətmək üçün hələ də display: none və ya visibility: hidden kimi CSS-dən istifadə etməlisiniz. Atribut sadəcə ekran oxuyucularından istifadə edən istifadəçilərə həmin konteynerin cari vəziyyətini təsvir etmək üçün etiket rolunu oynayır.
Genişləndirilmiş vəziyyət yoxdursa, hansı dəyərdən istifadə etməliyəm?
Əgər element yığıla bilən bölgəyə nəzarət etmirsə, siz ümumiyyətlə aria-expanded atributundan istifadə etməməlisiniz. Onu yalnız görünən və gizli vəziyyətlər arasında dəyişdirilə bilən məzmun üçün təti̇k rolunu oynayan elementlərə tətbiq edin. Qeyri-yığıla bilən elementlərə atributun daxil edilməsi əslində mövcud olmayan funksionallığı nəzərdə tutaraq ekran oxuyucu istifadəçiləri üçün qarışıqlığa səbəb ola bilər.
aria-expanded tətbiqini necə sınaya bilərəm?
Tətbiqinizi sınamaq üçün NVDA və ya VoiceOver kimi ekran oxuyucusundan istifadə edin. Tətik elementinə keçin və ekran oxuyucusunun vəziyyəti necə elan etdiyini müşahidə edin. Tətiyi işə saldıqda, ekran oxuyucusu bölmənin indi genişləndiyini göstərmək üçün statusunu yeniləməlidir. Elan dəyişməzsə, qarşılıqlı əlaqə zamanı JavaScript-iniz atribut dəyərini düzgün yeniləyə bilmir.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn