Interfeyslərin mövcudluğunu test edin

1) Niyə və nəyi «hazır» hesab edirik

• WCAG 2 meyarları yerinə yetirilmişdir. 1/2. Hədəf platformalar üçün 2 AA səviyyəsi;
• interfeys tam klaviatura keçir;
• skrinriderlərlə düzgün işləmək;
• kontrastlar normalara uyğundur;
• bütün hallar/səhvlər/statuslar gözdən kənar və siçan olmadan mövcuddur;
• lokalizasiya, RTL, reduce motion və mobil xüsusiyyətləri nəzərə alınır.

2) Test strategiyası (piramida A11y)

1. Avtotestlər/linterlər (problem siniflərinin 40-60% -ə qədər sürətli örtük).
2. Nümunələrin əl ilə yoxlanılması (klaviatura, fokus, məzmun, məntiq).
3. Assistive Tech (AT) sessiyaları: ekran, ölçü, rəng filtrləri.
4. Sahə sınaqları (mümkün qədər).

Məqsəd: Fitlərdə çoxalmamaq üçün komponentlər/nümunələr səviyyəsində sistem qüsurlarını tutmaq.

3) Əsas yoxlamaların yoxlama siyahısı (sürətli qaçış)

• Klaviatura: hər şey tab/ok ilə əldə edilə bilər; fokus qaydası məntiqlidir; modalkalarda fokus tələsi var; ESC/Enter/Space işləyir.
• Focus göstərici hər hansı bir mövzuda/hər hansı bir fonda görünür.
• Kontrast: mətn ≥ 4. 5:1 (adi), ≥ 3:1 (böyük), nişanlar/nəzarət oxunur.
• Semantika: düzgün etiketlər ('button', 'a', 'label', 'ul/li', 'th/td'), rollar və 'aria-' yalnız lazım olduqda.
• Ekran: iyerarxiya başlıqları, düymələrin/linklərin semantik adları, ikonlar/şəkillər üçün alternativlər.
• Formalar: aydın 'label', ipuçları/səhvlər bağlıdır ('aria-describedby'), səhv mətnləri spesifikdir.
• Dinamika: tost/banner/səhvlər 'aria-live' ('polite '/' assertive') vasitəsilə elan edilir.
• Animasiyalar 'prefers-reduced-motion'; «titrəmədən» interfeys.
• Lokalizasiya/RTL: açar ekranlar hizalanır, ədədlər/tarixlər/valyutalar utilitlərlə formatlanır.
• Mobillik: 44 ≥ 44 px × toxunma hədəfləri, zoom qadağan deyil, ekranı çevirmək məzmunu pozmur.

4) Rollar, məsuliyyət və artefaktlar

Dizayn sistemi: Hər komponentin təsvirində A11y tələbləri.
Tərtibatçılar: auto-testlər, A11y-assertləri ilə unit/interaction testləri.
QA: əl ssenariləri + AT sessiyaları; ciddilik/tezlik ilə hesabat.
UX/Content: microcopy səhvlər/statuslar, oxuculuq səsli.
Artefaktlar: çek vərəqləri, ssenarilər, AT ekran görüntüləri, WCAG referansları ilə qüsurların siyahısı, tövsiyələr.

5) Avtomatlaşdırılmış yoxlamalar

Linterlər/analizatorlar: axe, eslint-plugin-jsx-a11y, pa11y, Lighthouse.
Payplaynda: kritik pozuntular (role/label/kontrast/tab tələləri) üçün PR bloklayın.
Kontrast snapshotları: mövzu/halların vizual testləri.

6) Əl testi: ssenarilər

6. 1 Klaviatura

Səhifəni yalnız klaviatura ilə keçin (Tab/Shift + Tab/Enter/Space/Oxlar).
Yoxlayın: fokusun görünürlüyü, növbə, bütün hərəkətlərin mövcudluğu, «tələ» və «ölü» elementlərin olmaması.
Modalkada: daxili fokus, bağlandıqda inisiatora qayıdır.

6. 2 Ekran (minimum dəst)

Desktop: NVDA/JAWS (Windows), VoiceOver (macOS).
Mobile: VoiceOver (iOS), TalkBack (Android).
Düzgün başlıqlar (H-iyerarxiya), düymələrin/bağlantıların adları, cədvəllərin oxunması ('th '/' scope'), status elanları, forma səhvləri.

6. 3 Məzmun və microcopy

Tənqidi mətnləri yüksək səslə oxuyuruq - qeyri-müəyyənlik olmadan, «səhv 400» olmadan.
Səhv = «nə deyil + necə düzəltmək + məhdudiyyət/format».

6. 4 Dinamika və canlı bölgələr

Uğur tostu - 'aria-live = «polite»', səhv - 'assertive'.
Tərəqqi/yükləmə mətnlə izah olunur; skeleton spinner üstünlük.

7) Formalar və səhvlər (dərin)

Hər bir sahədə bağlı bir label var (placeholder deyil).
Səhvlər:' aria-invalid =» true»',' aria-describedby =» [id]»' sahəsi ilə bağlıdır.
Formatların formulları (tarix, telefon) əvvəlcədən göstərilir; maskalar giriş/insert qırmaq deyil.
submit + auto-scroll zamanı ümumi səhv banner və ilk səhv diqqət.
Səhv mətnləri: texniki jarqon olmadan xüsusi.

8) Cədvəllər, siyahılar, qrafiklər

Cədvəllər: başlıqlar 'th' so 'scope = «col/row»', imzalar, CV.
Siyahılar - real 'ul/ol/li', diva deyil.
Qrafiklər - alternativ cədvəllər/təsvirlər; əfsanələr mövcuddur; rəng ≠ tək siqnal.

9) Multimedia və animasiya

Video: altyazılar/transkript; klaviatura ilə nəzarət; avtoplay olmadan (və ya sakit).
GIF/mikro animasiya: 'prefers-reduced-motion' -da söndürün; flaşlardan qaçırıq.
Vibrasiya/səslər - isteğe bağlıdır və vizual/mətnlə təkrarlanır.

10) Mobil mövcudluq

İnteraktivlər ≥ 44 × 44 px, kifayət qədər intervallar.
Ölçmək qadağan deyil (meta viewport 'user-scalable = no' olmadan).
Forma/klaviatura: düzgün tiplər ('tel', 'email', 'number'), sistem imkanlarını gizlətmirik.
Qaranlıq mövzuda və «daha çox» sistem şriftləri ilə yoxlama.

11) Lokalizasiya, ədədlər və RTL

Kontekstli i18n-açarları vasitəsilə sətirlər; uzun dillər (DE/TR) maketi pozmur.
Tarix/valyuta formatları - utilitlərlə, sətirlərlə deyil.
RTL rejimi: naviqasiya nişanlarını güzgü, fokus və faytonun qaydasını yoxlayın, iki yönlü giriş.

12) Kritik flow xüsusiyyətləri (iGaming)

Ödənişlər/nəticələr

Dəqiq təlimatlar, limitlər/şərtlər/komissiyalar - mətnlə.
Provayderin səhvləri açıq, kodsuz elan edilir; fəaliyyət üçün alternativ var.
Əməliyyatın təsdiqi: məntiqi CTA-ya diqqət, ləğv etmək imkanı.

KUS/yoxlama

Foto/sənədlərə addım-addım ipuçları; tərəqqi və ETA.
Səhvlər «bulanıq/parıltı/kəsilmiş» - düzəliş nümunələri ilə.
neytral ton, heç bir yumor.

13) Qüsurların şiddətinin qiymətləndirilməsi

Blocker: əsas vəzifəni (klaviatura/ekran) tamamlamaq mümkün deyil.
Kritik: kritik funksionallıq işləyir, lakin ciddi maneələrlə.
Major: mane olur, yan yol var.
Minor: kosmetika/vəzifəyə təsir etmədən qaydalara uyğunsuzluq.

Hər bir qüsur - WCAG kriteriyasına və oynaya bilən ssenariyə istinad.

14) Qəbul meyarları (Definition of Done, A11y)

Siçan olmadan klaviatura ssenarisinin 100% keçməsi.
axe/Lighthouse: heç bir kritik/yüksək pozuntular.
Bütün mövzularda/vəziyyətlərdə AA kontrastı.
Əsas yolların (navbar, formalar, modallar, tostlar) skrinrider-qaçışı.
Sənədləşdirmə yeni komponentlər/fich (rol modeli, aria, fokus, nümunələr) üçün A11y.
CI-də A11y testlərinin reqressiyası yaşıldır.

15) Proseslər və avtomatlaşdırma

İnkişaf etməzdən əvvəl: Tapşırıqlarda A11y kriteriyaları, fokus/səhv vəziyyətləri olan maketlər.
Inkişafda: lokal montaj zamanı linter/ahe; kontrast/fokus vizual snapshot.
CI-də: kritik səhifələr üzrə pa11y/axe-scan; Blocker/Critical.
Buraxıldıqdan sonra: rüblük auditlər, A11y etiketindəki xüsusi şikayətlərin monitorinqi.

16) Anti-nümunələr

Pleysholder əvəzinə label.
'button '/' a' əvəzinə 'div'.
«Gözəllik naminə» off fokus halqaları.
Rəng yeganə status daşıyıcısı kimi.
Focus-trep/ESC olmadan Modales.
Mobile miqyaslı qadağan.
«Səhv 400/500» insan izahı olmadan.

17) Test ssenarilərinin şablonları

Script 1 - Klaviatura naviqasiyası (forma səhifəsi)

1. Birinci sahəyə tab, məlumatları daxil edin.
2. Shift + Tab geri - düzgün qaydada əmin olun.
3. Validasiya (submit) çağırın - fokus ilk xətaya keçir.
4. ESC klaviş modalını bağlayın, fokus inisiatora qayıtdı.

Script 2 - Ekran (ödəniş səhifəsi)

1. Səhifənin başlığına keçin (h1), bölmələri dinləyin.
2. Metodun seçimini açın - rolların/vəziyyətlərin elanı eşidilir.
3. Şüurlu şəkildə məbləğ səhvinə yol verin - mesaj oxundu və sahə ilə bağlıdır.
4. Ödəniş haqqında uğurlu tost 'polite' elan edilmişdir.

Ssenari 3 - Dinamika

1. Gözləmə əməliyyatını başlatın> 3 s - proses/ETA haqqında mətn var.
2. Şəbəkə səhv olduqda - 'assertive' banner, klaviatura ilə mövcuddur, «təkrar/yardım» yolu var.

18) Faydalı mikro şablonlar

Tost üçün rollar/aria

html
<div role = "status" aria-live = "polite"> Payment accepted. Balance updated. </div>
<div role = "alert" aria-live = "assertive"> The payment was denied. Try another method. </div>

Sahə ilə səhv əlaqəsi

html
<label for = "amount "> Amount </label>
<input id="amount" aria-invalid="true" aria-describedby="amount-error">
<div id = "amount-error "> Minimum 100 UAH. Please enter a larger amount. </div>

Modalka (semantik atributlar)

html
<div role="dialog" aria-modal="true" aria-labelledby="m-title">
<h2 id =" m-title "> Confirm Payment </h2>
<! -- content -->
<button> Confirm </button>
<button> Cancel </button>
</div>

19) A11y tətbiqinin sürətli planı

1. Cari komponentlərin/nümunələrin auditi (kontrast/fokus/rol semantikası).
2. Dizayn sistemi düzəlişləri: hər komponentə A11y bölməsi əlavə edin.
3. Alətlər: lokal və CI-də/axe/pa11y/Lighthouse linterlərini konfiqurasiya edin.
4. Təlim: dizaynerlər/tərtibatçılar/kopirayterlər üçün qısa bələdçilər.
5. Pilot: 3-5 ən çox rast gəlinən qüsurları (modallar, formalar, tostlar) təmir edin.
6. Reqlament: A11y-meyarları ilə DoD; rüblük audit.

Yekun şparqalka

Klaviatura, fokus, kontrast, ekran, dinamikanı yoxlayın.
Statusları aria-live vasitəsilə elan edin; səhvlər - sahələrlə bağlıdır.
reduce motion hörmət, miqyaslı qadağan etməyin.
Semantika ilə düşünün (etiketlər/rollar), «göründüyü kimi» deyil.
Yoxlamaları avtomatlaşdırın, lakin həmişə əl ilə tamamlayın.
WCAG, ciddilik və oynatma ssenarisinə istinad edərək qüsurları düzəldin.