L
Leyla ƏliyevaMüəllif
leyla.aliyeva@example.comVeb Tətbiqlərdə Əlçatanlıq (a11y - WCAG) Standartları
Ekran oxuyucuları, klaviatura naviqasiyası və rəng kontrastı ilə hər kəs üçün bərabər rəqəmsal təcrübə qurulması.
Əlçatanlıq (Accessibility və ya a11y) çox vaxt layihənin son mərhələsində unudulan, lakin əslində proqram mühəndisliyinin ən vacib etik və texniki tələblərindən biridir. Dünyada milyonlarla insan internetdən yalnız klaviatura, səsli komandalar və ya ekran oxuyucuları (Screen Readers) vasitəsilə istifadə edir.
Bundan əlavə, a11y standartlarına uyğun qurulmuş saytlar Google tərəfindən daha yüksək SEO xalı ilə mükafatlandırılır.
📌 1. Semantik HTML — Uğurun 80%-i
Ən böyük səhv hər şeyi '<div>' və '<span>' ilə qurmaqdır. Məsələn:
- Kliklənən element üçün heç vaxt '<div onClick={...}>' istifadə etməyin. Həmişə '<button>' və ya '<Link>' istifadə edin. Brauzer düymə üçün daxili 'Space' və 'Enter' kliklərini avtomatik təmin edir.
- Başlıqların iyerarxiyasını qoruyun: Səhifədə yalnız bir dənə '<h1>' olmalı, ardınca '<h2>' və '<h3>' məntiqi ardıcıllıqla gəlməlidir.
📌 2. Formalarda ARIA Atributları
Form komponentlərində istifadəçiyə xətanı yalnız qırmızı rənglə bildirmək kifayət deyil, çünki görmə qabiliyyəti məhdud olan şəxslər bunu hiss etməyə bilər:
- 'aria-invalid={true}': Ekran oxuyucusuna bildirir ki, bu sahədə xəta var.
- 'aria-describedby="email-error"': Xəta mesajı olan paraqrafın ID-sini inputa bağlayır. İstifadəçi xanaya fokuslanan kimi ekran oxuyucu avtomatik olaraq xəta mətnini səsləndirir.
- 'role="alert"': Yeni çıxan bildirişləri dərhal istifadəçiyə elan edir.
📌 3. Rəng Kontrastı və Fokus İndikatorları
CSS yazarkən 'outline: none' yazaraq fokus çərçivəsini tamamilə silmək klaviatura istifadəçilərinin saytda harada olduğunu itirməsinə səbəb olur. Həmişə gözəçarpan 'focus:ring-2' və ya 'focus-visible' stilləri təyin edin. Mətn və arxa fon arasındakı kontrast nisbəti ən azı 4.5:1 olmalıdır.
←Bütün yazılara qayıtKateqoriya: Best Practices