ARIA etiketləri, vizual elementlərin kifayət qədər kontekstə malik olmadığı hallarda ekran oxuyucuları kimi köməkçi texnologiyalara təsviri mətn təqdim etmək üçün istifadə olunan xüsusi HTML atributlarıdır. İkonlara, düymələrə və ya interaktiv komponentlərə aydın, mətn əsaslı ad verməklə tərtibatçılar görmə qabiliyyəti məhdud olan istifadəçilərin xüsusi səhifə elementlərinin məqsəd və funksiyasını effektiv şəkildə şərh edə bilmələrini təmin edirlər. Bu etiketlərin düzgün tətbiqi, fərdi fiziki aparat və ya proqram təminatı konfiqurasiyalarından asılı olmayaraq hər kəsin istifadə edə biləcəyi rəqəmsal məkanlar qurmaq üçün əsas tələbdir.
Müasir veb inkişafı üçün əlçatanlıq etiketləri niyə lazımdır?
Müasir veb interfeysləri yerə qənaət etmək və təmiz estetikanı qorumaq üçün tez-tez axtarış üçün böyüdücü şüşə və ya naviqasiya üçün hamburger menyusu kimi ikonlara güvənir. Görən istifadəçilər bu simvolları ənənəvi dizayn nümunələrinə əsasən dərhal tanısa da, ekran oxuyucuları kömək olmadan qrafik faylın və ya CSS üslublu elementin vizual mənasını şərh edə bilmirlər. aria-label əlavə etmək tərtibatçıya ekran oxuyucusu proqramının istifadəçiyə ucadan oxuduğu gizli mətn təsvirini daxil edərək bu boşluğu aradan qaldırmağa imkan verir.
Bu etiketlər olmadan, köməkçi proqram təminatına güvənən istifadəçi yalnız düymə və ya qrafik sözünü eşidə bilər ki, bu da həmin düymənin əslində nə etdiyi barədə heç bir kontekst təmin etmir. Bu, istifadəçilərin əlaqə formasını göndərmək və ya e-ticarət kataloqunu filtrləmək kimi əsas tapşırıqları yerinə yetirə bilmədiyi əhəmiyyətli bir maneə yaradır. Alien Road vurğulayır ki, əlçatanlıq saytın işə salınması artıq tamamlandıqdan və dizayn kilidləndikdən sonra əlavə edilən bir fikir deyil, qurma prosesinizdə standart bir parametr olmalıdır.
ARIA atributlarının istifadəsi ilə bağlı əsas qayda nədir?
Hər hansı bir tərtibatçı üçün ən vacib prinsip W3C təlimatlarının ARIA-nın yalnız yerli HTML elementləri lazımi əlçatanlıq məlumatını təmin edə bilmədikdə istifadə edilməli olduğunu bildirməsidir. Bu, tez-tez ARIA-nın birinci qaydası adlanır. Düymə, lövbər etiketi və ya forma etiketi kimi semantik elementdən istifadə edə bildiyiniz zaman, onları həmişə ümumi div və ya span elementinə aria-label əlavə etməkdən üstün tutun. Yerli HTML-dən istifadə brauzerin və köməkçi texnologiyanın qarşılıqlı əlaqəni necə idarə edəcəyini artıq bildiyini təmin edir.
ARIA-ya həddindən artıq etibar istifadəçilər üçün təcrübəni əslində pisləşdirə bilər. Əgər artıq əlçatan olan elementlərə lazımsız atributlar əlavə etsəniz, ekran oxuyucusu çıxışını artıq məlumatla qarışdırmaq riski ilə üzləşirsiniz. Struktur naviqasiya və interaktiv idarəetmələr üçün semantik HTML-ə sadiq qalın. ARIA etiketlərinə yalnız dizaynınız xüsusi vidcet, yalnız ikonlu düymə və ya standart teqlərin özbaşına dəqiq təmsil edə bilmədiyi interaktiv vəziyyət tələb etdikdə müraciət edin.
aria-label-i necə effektiv tətbiq etmək olar?
aria-label-in tətbiqi atributun birbaşa HTML teqinə yerləşdirilməsini tələb edir. Məsələn, yalnız axtarış ikonu olan bir düyməniz varsa, atributu belə tətbiq edərdiniz:
Etiketlərinizi qısa və təsviri saxlayın. ‘üçün düymə’ və ya ‘ikonu’ kimi ifadələrdən çəkinin, çünki ekran oxuyucusu çox güman ki, element növünü avtomatik elan edəcək. Yaxşı bir etiket funksional təsvirçi kimi çıxış edir. Əgər düyməniz alış-veriş səbətini açmaq üçün modal pəncərəni işə salırsa, sadəcə onu ‘Alış-veriş səbətini aç’ kimi etiketləyin. Məqsəd, görən istifadəçinin interfeysə bir saniyə baxmaqla əldə etdiyi eyni səviyyədə anlayışı təmin etməkdir.
Əlçatan etiketlərin tətbiqi üçün yoxlama siyahısı
- ARIA istifadə etməzdən əvvəl düymə və ya giriş kimi yerli HTML teqinin tapşırığı yerinə yetirə biləcəyini yoxlayın.
- Etiket mətninin elementin vizual görünüşünü deyil, hərəkəti və ya məqsədi təsvir etdiyinə əmin olun.
- Çıxışın faydalı olduğunu təsdiqləmək üçün NVDA və ya VoiceOver kimi faktiki ekran oxuyucusu proqramından istifadə edərək etiketlərinizi sınayın.
- Veb saytınız bir neçə dili dəstəkləyirsə, etiketlərinizin lokallaşdırıldığını yoxlayın.
- Artıq mətn məzmunu olan elementlərdə aria-label istifadə etməkdən çəkinin, çünki bu, görünən etiketi əvəz edə və çaşqınlıq yarada bilər.
Əlçatan naviqasiya və formalar üçün ümumi nümunələr
Tipik bir hesab və ya sayt quruluşunda naviqasiya panellərinin və forma girişlərinin əl ilə etiket düzəlişlərinə ən çox ehtiyac duyan yerlər olduğunu görəcəksiniz. Əgər keçid açarı kimi görünmək üçün CSS ilə üslublanmış xüsusi onay qutusundan istifadə edirsinizsə, ekran oxuyucusu onu forma girişi kimi tanıya bilməz. Düzgün rolu və aria-label-i tətbiq etmək cihazın elementi keçid kimi qəbul etməsini təmin edir və istifadəçiyə ‘Qaranlıq rejimi dəyiş, yoxlanıldı’ kimi vəziyyət barədə məlumat verir.
Naviqasiya menyuları üçün mobil dostu hamburger menyularınızın menyu vəziyyətini təsvir edən aria-label daxil etdiyinə əmin olun. Menyunu hazırda bağlıdırsa, etiket ‘Menyunu aç’ olmalıdır. İstifadəçi onu kliklədikdən və menyu genişləndikdən sonra etiketi ‘Menyunu bağla’ olaraq yeniləməlisiniz. Bu dinamik yeniləmə istifadəçilərə vizual rəyə ehtiyac duymadan sayt interfeysinizdəki mövqelərini və seçimlərini izləməyə kömək edən ümumi bir nümunədir.
Kodlaşdırma mərhələsində qarşısı alınmalı olan ümumi tələlər
Əsas səhv eyni səhifədəki müxtəlif elementlərə eyni etiketi təyin etməkdir. Əgər cədvəl sətrindəki hər bir ‘sil’ ikonu sadəcə ‘sil’ kimi etiketlənibsə, düymələr siyahısı ilə naviqasiya edən istifadəçinin hansı sətir üzərində hərəkət etdiyindən xəbəri olmayacaq. Etiketlərinizə həmişə ‘İstifadəçi John Doe-nu sil’ və ya ‘faktura 5432-ni sil’ kimi xüsusi kontekst daxil edin. Bu səviyyədə spesifiklik mürəkkəb idarə paneli səhifələrində istifadəyə yararlılığı qorumaq üçün çox vacibdir.
Digər bir ümumi tələ ARIA etiketlərinin gizli təbiətinə məhəl qoymamaqdır. Ekranı görə bilən istifadəçilər aria-label atributundakı mətni heç vaxt görməyəcəklər. Əgər etiketin bütün istifadəçilər üçün görünən olması lazımdırsa, standart HTML etiketi elementindən və ya görünən mətn aralığından istifadə edin. aria-label-dən yalnız vizual dizayn standart mətn etiketini daxil etməyi qeyri-mümkün etdikdə istifadə edin, məsələn, mətn əlavə etməyin tərtibatı pozacağı yüksək məhdudiyyətli yalnız ikonlu interfeyslərdə.
Yerli HTML və ARIA-nın müqayisəsi
- Yerli HTML: Brauzer səviyyəsində əlçatanlığı təmin etmək üçün standart keçidlər, düymələr, başlıqlar və siyahılar üçün istifadə edin.
- ARIA: Yalnız xüsusi vidcetlər, yalnız ikonlu düymələr və ya yerli elementlərin təmsil edə bilmədiyi mürəkkəb dinamik vəziyyətlər üçün istifadə edin.
- Yerli HTML: ARIA-nın avtomatik olaraq vermədiyi daxili klaviatura naviqasiyası dəstəyini təmin edir.
- ARIA: Ekran oxuyucusunun istifadəçiyə düzgün yeniləməni bildirməsini təmin etmək üçün hər vəziyyət dəyişikliyi üçün əl ilə sınaq tələb edir.
Saytınızı əlçatanlıq uğuru üçün necə sınaya bilərsiniz?
ARIA etiketlərinizin işləyib-işləmədiyini müəyyən etmək üçün yalnız avtomatlaşdırılmış əlçatanlıq alətlərinə güvənməməlisiniz. Avtomatlaşdırılmış skanerlər çatışmayan etiketləri tapmaqda əla olsa da, etiket mətninin insan istifadəçisi üçün həqiqətən faydalı olub-olmadığını mühakimə edə bilmirlər. Öz saytınızdan ekran oxuyucusu ilə istifadə etməyə vaxt ayırın. macOS istifadəçiləri üçün bu, Command + F5 istifadə edərək VoiceOver-i aktivləşdirmək deməkdir. Windows istifadəçiləri üçün NVDA sınaqdan keçirmək üçün pulsuz və etibarlı seçimdir.
Yalnız klaviaturanızdan və ekran oxuyucunuzdan istifadə edərək səbətə məhsul əlavə etmək və ya potensial müştəri yaratma formasını doldurmaq kimi əsas dönüşüm yolunuzla naviqasiya etməyə çalışın. Əgər özünüzü elan edilən məlumatlarla ilişib qalmış və ya çaşqın hiss edirsinizsə, etiketləriniz yəqin ki, daha çox təsviri mətə ehtiyac duyur. Bu əl ilə sınaq prosesi, saytınızın köməkçi texnologiyaya güvənən biri üçün həqiqətən əlçatan olub-olmadığının ən dürüst qiymətləndirilməsini təmin edir.
Bu həftə haradan başlamaq lazımdır
Bu həftə saytınızın ən çox istifadə olunan interaktiv elementləri üzərində fokuslanmış audit aparmaqla başlayın. Hər bir yalnız ikonlu düyməni müəyyən edin və onların hazırda aria-label-ə malik olub-olmadığını yoxlayın. Əgər yoxdursa, bu atributları əsas naviqasiyanıza, sosial media keçidlərinizə və forma göndərmə düymələrinələ əlavə etməyə üstünlük verin. Bu sadə, artan yanaşma istifadəçilərin geniş dairəsi üçün təcrübəni yaxşılaşdıracaq.
Aşağı asılan meyvələri həll etdikdən sonra şəkil karuselləri və ya xüsusi tarix seçiciləri kimi mürəkkəb komponentlərinizə baxın. Bunlar çox vaxt zəif əlçatanlıq ballarının arxasındakı günahkarlardır. Hər bir slaydın və ya seçim düyməsinin unikal və təsviri etiketi olduğundan əmin olun. Hər həftə bu xüsusi yeniləmələrə bir neçə saat ayırmaqla, saytınızın onu ziyarət edən hər kəs üçün istifadəyə yararlı qalmasını təmin edən əlçatanlıq vərdişi yaradırsınız.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn