ARIA Label nədir və necə istifadə etməliyik?

codex

Web saytlarının daha əlçatan və istifadəçi yönümlü olması üçün a11y (accessibility) yanaşması vacib rol oynayır. Bu yanaşmanın əsas hissələrindən biri də aria-label atributudur. Bəs bu atribut nə üçündür və onu hansı hallarda istifadə etməliyik?

`aria-label` nə işə yarayır?

aria-label atributu elementin görmə qabiliyyəti məhdud olan istifadəçilər üçün ekran oxuyucular vasitəsilə səsləndiriləcək mətnini təyin edir. Yəni, bu atribut vizual olaraq istifadəçiyə göstərilməsə də, ekran oxuyucu proqram bu məlumatı səsləndirir.

Məsələn, təkcə ikonası olan bir düyməni götürək:

<button aria-label="Sil">
  <TrashIcon />
</button>

Bu halda ekran oxuyucu “Sil düyməsi” kimi səsləndirəcək. Halbuki istifadəçi ekranda yalnız zibil qutusunu görür.

Nə zaman istifadə olunmalıdır?

Görünən mətn olmayan ikonalı düymələrdə
Təkcə simvol və ya şəkil olan linklərdə
Özəl dizayn edilmiş (custom) checkbox, switch və ya radio komponentlərində
Form elementlərində label etiketi olmayan hallarda
Mobil tətbiqlərdəki Floating Action Button (FAB) tipli düymələrdə

Nə zaman istifadə olunmamalıdır?

aria-label atributu, əgər həmin elementdə artıq görünən mətn varsa, istifadə edilməməlidir. Çünki bu halda aria-label həmin mətnin əvəzində oxunacaq və istifadəçini çaşdıra bilər.

Yanlış nümunə:

<button aria-label="Təsdiqlə">Formu Göndər</button>

Ekran oxuyucu burada “Təsdiqlə” deyəcək, halbuki istifadəçi “Formu Göndər” yazısını görür.

Əgər artıq mətn varsa, aria-label deyil, ehtiyac olarsa aria-describedby və ya aria-labelledby istifadə etmək daha məqsədəuyğundur.

`aria-*` atributlarının fərqləri

Atribut	Təyinatı
`aria-label`	Görünməyən, lakin ekran oxuyucular üçün vacib qısa ad
`aria-labelledby`	Başqa elementin ID-sinə əsaslanaraq adı təyin edir
`aria-describedby`	Əlavə izahat və ya köməkçi mətnləri ekran oxuyucular üçün göstərmək üçündür

Tövsiyələr və yaxşı təcrübələr (best practices)

Dekorativ ikonalar üçün aria-hidden="true" istifadə edin.
Əgər komponent daxilində mətn varsa, əlavə aria-label verməyin.
İmkan daxilində semantic HTML komponentlərdən istifadə edin (<button>, <label> və s.).
Kodunuzu test etmək üçün axe, lighthouse, eslint-plugin-jsx-a11y kimi alətlərdən istifadə edin.
Screen reader ilə canlı testlər edin (NVDA, VoiceOver və s.).

aria-label — sadə görünməsinə baxmayaraq, vəzifəsi kritik olan bir xüsusiyyətdir. Əlçatanlıq məqsədilə istifadə olunan bu atribut, düzgün tətbiq olunduqda saytınızı daha inklüziv və bütün istifadəçilər üçün uyğun hala gətirir.

Unutmayın:

Accessibility — sadəcə məhdudiyyətləri olan insanlar üçün deyil, hər kəs üçün daha yaxşı təcrübə yaratmaqdır.