ARIA etiketləri, saytlarının ekran oxuyucuları kimi köməkçi texnologiyalara güvənən istifadəçilər üçün əlçatan olmasını təmin etmək istəyən veb-tərtibatçılar və dizaynerlər üçün vacib alətlərdir. W3C WAI-ARIA təlimatlarına görə, aria-label interfeysdə vizual etiketlər olmadıqda elementlər üçün əlçatan bir ad təmin etməlidir. Bu atributdan düzgün istifadə etdikdə, ekran oxuyucularına düymələrin, keçidlərin və ya naviqasiya sahələrinin məqsədini elan etməyə imkan verirsiniz, əks halda bunlar istifadəçi üçün səssiz və ya çaşdırıcı qala bilər. Bu təcrübə inklüziv veb dizaynın təməlidir.
ARIA etiketləri nədir və niyə vacibdir?
ARIA etiketi, HTML elementinin məqsədini köməkçi proqram təminatına açıq şəkildə müəyyən edən bir mətn sətiri kimi çıxış edir. Bir çox rəqəmsal dizaynda tərtibatçılar yerə qənaət etmək üçün axtarış çubuğu üçün böyüdücü şüşə və ya bağlama düyməsi üçün ‘X’ kimi nişanlara güvənirlər. Görən istifadəçi bu simvolları dərhal başa düşsə də, ekran oxuyucusu istifadəçisi funksiyanı şərh etmək üçün mətn ekvivalentinə ehtiyac duyur. aria-label əlavə etməklə, veb səhifənizin vizual tərtibatını dəyişdirmədən həmin xüsusi konteksti təmin edirsiniz. Bu, kod ilə istifadəçi arasındakı ünsiyyət boşluğunu aradan qaldırmaq üçün birbaşa yoldur.
Əlçatanlıq yalnız uyğunluqla bağlı deyil; bu, hər bir ziyarətçi üçün istifadə edilə bilən bir təcrübə təmin etməkdir. Saytda düzgün etiketləmə olmadıqda, ekran oxuyucularından istifadə edənlər üçün naviqasiya təxmin oyununa çevrilir. Məsələn, alış-veriş səbəti nişanı olan bir düymənin etiketi yoxdursa, proqram ‘səbətə əlavə et’ əvəzinə sadəcə ‘düymə’ elan edə bilər. Bu kiçik səhv istifadəçilərin alış-verişi tamamlamasına mane olan bir baryer yaradır. Düzgün etiketləmə, istifadəçinin səhifəyə necə baxmasından asılı olmayaraq, saytınızdakı hər bir interaktiv elementin məqsədinin aydın və dəqiq çatdırılmasını təmin edir.
aria-label-dən nə vaxt istifadə etməlisiniz?
aria-label üçün ən çox yayılmış istifadə halı, interaktiv elementin görünən mətn təsviri olmadıqda baş verir. Yalnız şəkil, SVG nişanı və ya fon qrafikası olan bir düyməniz varsa, aria-label funksionallığı çatdırmaq üçün əsas yol kimi xidmət edir. Siz həmçinin onu mürəkkəb naviqasiya vidjetləri və ya yan menyular üçün istifadə etməyi düşünməlisiniz, burada keçid düyməsinin məqsədi təkcə nişandan aydın olmaya bilər. O, standart HTML təcrübələrini əvəz etmək üçün deyil, əlavə atribut kimi nəzərdə tutulub, ona görə də komponentlər qurarkən bu fərqi nəzərə alın.
Artıq kifayət qədər vizual etiketləri olan standart mətn elementlərində aria-label istifadə etməkdən çəkinin. Əgər düymə artıq düz mətndə ‘Göndər’ yazısını göstərirsə, aria-label əlavə etmək artıqdır və bəzi ekran oxuyucusu proqramları ilə problemlərə səbəb ola bilər. Məqsəd çatışmayan məlumatı təmin etməkdir, ekranda artıq mövcud olan məlumatı təkrarlamaq deyil. Həddindən artıq etiketləmə, səhifə məzmununun sürətli xülasəsini istəyən istifadəçiləri tez-tez narahat edən uzun-uzadı çıxışa səbəb ola bilər. Bu etiketlərdən yalnız vizual dizayn funksiyanı görməyən istifadəçilər üçün qeyri-müəyyən etdikdə istifadə edin.
aria-label-ləri effektiv şəkildə necə tətbiq etmək olar
Bu etiketlərin tətbiqi HTML işarələməyinizə ardıcıl yanaşma tələb edir. Atributun dəyəri istifadəçiyə elementlə qarşılıqlı əlaqədə olduqda nə baş verəcəyini dəqiq deyən qısa, təsviri bir sətir olmalıdır. Sadəcə ‘Menyu’ əvəzinə ‘Naviqasiya menyusunu aç’ kimi hərəkəti təsvir edən sadə dildən istifadə edin. Dinamik tətbiq üzərində işləyirsinizsə, elementin vəziyyəti dəyişərsə, etiketin yeniləndiyinə əmin olun. Məsələn, ‘Səssiz’ və ‘Səssizliyi ləğv et’ arasında keçid edən bir keçid düyməsi, cari vəziyyəti əks etdirmək üçün JavaScript vasitəsilə aria-label-ini yeniləməlidir.
- İstifadəçini yormamaq üçün etiket mətnini qısa və təsviri saxlayın.
- Etiketin elementin hərəkətini aydın şəkildə müəyyən etdiyinə əmin olun.
- Ekran oxuyucuları element növünü avtomatik elan etdiyi üçün etiketin içərisində ‘düymə’ və ya ‘keçid’ kimi sözlərdən istifadə etməyin.
- İnteraktiv elementin vəziyyəti dəyişərsə, etiketi dinamik şəkildə yeniləyin.
- Elan edilmiş çıxışı yoxlamaq üçün ekran oxuyucusundan istifadə edərək etiketlərinizi sınaqdan keçirin.
ARIA etiketlərindən həddindən artıq istifadə edə bilərsinizmi?
Bəli, bu etiketlərdən həddindən artıq və ya yanlış istifadə əhəmiyyətli əlçatanlıq problemlərinə səbəb ola bilər. Ümumi səhvlərdən biri paraqraf və ya başlıq kimi interaktiv olmayan elementə aria-label əlavə etməkdir. Ekran oxuyucuları ümumiyyətlə fokuslanmayan elementlərdə bu atributları nəzərə almır, ona görə də səyləriniz boşa çıxacaq. Digər bir ümumi səhv, görünən mətnə zidd olan aria-label istifadə etməkdir. Bu, istifadəçinin bir şeyi eşidib başqa bir şeyi gördüyü çaşdırıcı bir təcrübə yaradır. ARIA atributlarınızda təqdim olunan məlumatın ümumi məzmunla ziddiyyət təşkil etmək əvəzinə onu dəstəklədiyinə həmişə əmin olun.
Tipik bir veb layihəsində ümumi bir nümunə, ARIA-ya müraciət etməzdən əvvəl semantik HTML-ə üstünlük verməkdir. Düymələr üçün button etiketlərindən və keçidlər üçün anchor etiketlərindən istifadə edin. Semantik elementlər çox vaxt əlavə etiketlərə ehtiyacı aradan qaldıran daxili əlçatanlıq xüsusiyyətləri ilə gəlir. Əgər hər şeyə aria-label əlavə etməli olduğunuzu görürsünüzsə, bu, çox güman ki, əsas HTML strukturunuzun təkmilləşdirilə biləcəyinin əlamətidir. Əvvəlcə yerli etiketlərdən istifadə etməyə diqqət yetirin və aria-label-i vizual dizaynın üslub səbəblərinə görə yalnız nişanlı yanaşma tələb etdiyi xüsusi hallar üçün saxlayın.
Alien Road aria etiketlərini necə tətbiq edir
Alien Road-da əlçatanlığa yanaşmamız müştərinin mövcud komponent kitabxanasının hərtərəfli auditi ilə başlayır. Tipik bir iş zamanı biz etiketlərin çatışmadığı sahələri müəyyən etmək üçün düymələr, naviqasiya menyuları və forma girişləri üçün kodu nəzərdən keçiririk. Daha sonra nişanlara və ya qeyri-standart interaktiv nümunələrə əsaslanan komponentlərə aria-label-ləri daxil etmək üçün inkişaf komandası ilə işləyirik. Bu proses hər hansı saytın istifadəyə verilməsindən əvvəl standart keyfiyyət təminatı fazamızın bir hissəsidir. Biz səhifədəki hər bir xüsusi düymənin və ya vidjetin ekran oxuyucusu istifadəçiləri üçün aydın, hərəkətə keçirilə bilən bir etiket təmin etdiyinə əmin oluruq.
Məsələn, elektron ticarət müştərisi üçün son layihədə biz onların xüsusi ‘sürətli baxış’ məhsul düymələrinin ekran oxuyucuları üçün tamamilə səssiz olduğunu müəyyən etdik. Biz bu elementləri məhsulun adını və ‘Qaçış ayaqqabıları üçün sürətli baxış’ kimi hərəkəti göstərən aydın aria-label-lər əlavə etməklə yenilədik. Bu sadə dəyişiklik bütün istifadəçilər üçün alış-veriş təcrübəsini əhəmiyyətli dərəcədə yaxşılaşdırdı. Bu təcrübələri sonradan düşünülmüş bir şey kimi deyil, inkişaf dövrünə inteqrasiya etməklə, rəqəmsal layihələrimizin işə düşdüyü andan etibarən funksional və inklüziv olmasını təmin edirik.
Qaçınmaq lazım olan ümumi səhvlər hansılardır?
Əsas səhvlərdən biri aria-label-i kontekst olmadan müxtəlif dillərə tərcümə etməkdir. Etiket proqram təminatı tərəfindən oxunduğu üçün istifadəçinin dil parametrlərinə uyğun olaraq düzgün lokallaşdırılmalıdır. Fransız dilinə tərcümə edilmiş saytda ingiliscə etiket təqdim etsəniz, ekran oxuyucusu ingiliscə mətni fransız vurğusu ilə oxumağa cəhd edə bilər ki, bu da onu başa düşülməz edir. Digər bir səhv, ‘Bura klikləyin’ və ya ‘Daha çox’ kimi çox qeyri-müəyyən etiketlərdən istifadə etməkdir. Bunlar, xüsusən də istifadəçi interaktiv elementlər arasında tullanaraq səhifədə naviqasiya edərkən heç bir kontekst təmin etmir.
- Konteksti olmayan ‘Bura klikləyin’ və ya ‘Daha çox oxu’ kimi qeyri-müəyyən etiketlərdən çəkinin.
- ‘Düymə’ artıq olduğu üçün etiketin içərisində element növünü daxil etməyin.
- Veb saytınız bir neçə dili dəstəkləyirsə, etiketin tərcümə olunduğundan əmin olun.
- İstifadəçi qarşılıqlı əlaqəsi tələb etməyən statik elementlərdə aria-label-lərdən istifadə etməyin.
- Etiketin səhifədəki elementin görünən məqsədinə uyğun olduğunu yoxlayın.
Bu həftə haradan başlamaq lazımdır
Veb saytınızda nişanlara əsaslanan ən çox istifadə olunan beş interaktiv elementi müəyyən etməklə başlayın. Brauzerinizin tərtibatçı alətlərini açın və hazırda əlçatan adlarının olub-olmadığını görmək üçün bu elementləri yoxlayın. Əgər yoxdursa, hər biri üçün qısa, təsviri bir etiket yazın və kodunuza əlavə edin. Bu dəyişiklikləri etdikdən sonra saytınızda naviqasiya etmək və səhifənin necə elan edildiyini dinləmək üçün pulsuz ekran oxuyucusu alətindən istifadə edin. Bu məşq ziyarətçilərinizin təcrübəsini başa düşməyə kömək edəcək və təkmilləşdirilməyə ehtiyacı olan digər sahələri vurğulayacaqdır. Yeniləmələrinizi kiçik saxlayın, onları hərtərəfli sınaqdan keçirin və daha əlçatan bir veb mövcudluğu qurmağa davam edin.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn