Interfeýsleri barlamak

1) Näme üçin we näme üçin "taýýar" hasaplaýarys?

• WCAG ölçegleri ýerine ýetirildi 2. 1/2. Maksatly platformalar üçin 2 AA derejesi;
• interfeýs klawiaturadan doly geçýär;
• skrinriderler bilen dogry işlemek;
• kontrastlar kadalara laýyk gelýär;
• ähli ýagdaýlar/ýalňyşlyklar/statuslar gözüň daşynda we syçansyz elýeterlidir;
• lokalizasiýa, RTL, reduce motion we ykjam aýratynlyklar göz öňünde tutulandyr.

2) Synag strategiýasy (piramidasy A11y)

1. Awtotestler/linterler (problema synplarynyň 40-60% -ine çenli çalt örtmek).
2. Patternleri el bilen barlamak (klawiatura, fokus, mazmun, logika).
3. Assistive Tech (AT) sessiýalary: skrinriderler, masştablar, reňk süzgüçleri.
4. Ulanyjylar bilen meýdan synaglary (mümkin boldugyça).

Maksat: fiçlerde köpelmezlik üçin komponentleriň/nusgalaryň derejesinde ulgamlaýyn kemçilikleri tutmak.

3) Esasy barlaglaryň çek-sanawy (çalt geçmek)

• Klawiatura: tab/oklar arkaly hemme zada ýetip bolýar; fokusyň tertibi mantykly; modalkalarda fokus duzagy bar; ESC/Enter/Space işleýär.
• Fokus görkezijisini islendik mowzukda/islendik fonda görýäris.
• Kontrast: tekst ≥ 4. 5:1 (adaty), ≥ 3:1 (uly), nyşanlar/gözegçilikler okalýar.
• Semantika: dogry bellikler ('button', 'a', 'label', 'ul/li', 'th/td'), rollar we 'aria-' diňe zerur bolanda.
• Ekran: iýerarhiýa boýunça sözbaşylar, düwmeleriň/baglanyşyklaryň semantik atlary, nyşanlar/şekiller üçin alternatiwalar.
• Formalar: aç-açan 'label', maslahatlar/ýalňyşlyklar baglanyşykly ('aria-describedby'), ýalňyşlyklaryň tekstleri anyk.
• Dinamika: tostlar/bannerler/ýalňyşlyklar 'aria-live' ('polite '/' assertive') arkaly yglan edilýär.
• Animasiýalara 'prefers-reduced-motion' hormat goýýar; interfeýssiz.
• Lokalizasiýa/RTL: esasy ekranlar deňleşdirildi, sanlar/seneler/walýutalar ulanyjylar tarapyndan formatlanýar.
• Hereketlilik: 44 × 44 px ≥, ululyk gadagan däl, ekrany öwürmek mazmuny bozmaýar.

4) Rollar, jogapkärçilik we artefaktlar

Dizaýn ulgamy: A11y-her komponentiň beýanynda talaplar.
Döredijiler: awtoprewerler, A11y-assertler bilen unit/interaction-testler.
QA: el ssenarileri + AT sessiýalary; çynlakaý/ýygylykly hasabat.
UX/Content: ýalňyşlyklaryň/statuslaryň mikrokopiýasy, sesli okamak ukyby.
Artefaktlar: çek-listler, ssenariler, AT skrinskastlary, WCAG-salgylanmalar bilen kemçilikleriň sanawy, teklipler.

5) Awtomatlaşdyrylan barlaglar

Linterler/analizatorlar: axe, eslint-plugin-jsx-a11y, pa11y, Lighthouse.
Paýplaynda: möhüm düzgün bozmalar ýüze çykan halatynda PR-ni bloklaýarys (role/label/kontrast/tab-duzaklar).
Kontrastyň snapshotlary: mowzuklaryň/ýagdaýlaryň wizual synaglary.

6) El bilen synag: ssenariýalar

6. 1 Klawiatura

Sahypany diňe klawiatura bilen geçiň (Tab/Shift + Tab/Enter/Space/Oklar).
Barlaň: fokusyň görünmegi, nobatlylygy, ähli hereketleriň elýeterliligi, "duzaklaryň" we "öli" elementleriň ýoklugy.
Modalkada: içindäki fokus, ýapylanda inisiatiwa gaýdyp gelýär.

6. 2 Ekranlar (iň az)

Desktop: NVDA/JAWS (Windows), VoiceOver (macOS).
Mobile: VoiceOver (iOS), TalkBack (Android).
Dogry sözbaşylary (H-iýerarhiýa), düwmeleriň/baglanyşyklaryň atlaryny, tablisalaryň okalmagyny ('th '/' scope'), statuslaryň yglan edilmegini, görnüşleriň düşnükli ýalňyşlyklaryny barlaýarys.

6. 3 Mazmun we microcopy

Tankydy tekstleri sesli okaýarys - düşnüksiz, "ýalňyşlyk 400".
Hata = "näme nädogry + nädip düzetmeli + çäklendirme/format".

6. 4 Dinamika we janly sebitler

Üstünlik tosty - 'aria-live = "polite"', ýalňyşlyk - 'assertive'.
Ösüş/göçürip almak tekstde düşündirilýär; skeleton spinnerden has gowudyr.

7) Görnüşler we ýalňyşlyklar (çuňňur)

Her meýdanda baglanan label bar (placeholder däl).
Hatalar:' aria-invalid =" true"',' aria-describedby =" [id]"'.
Formatlaryň formulalary (senesi, telefon) öňünden görkezilýär; maskalar giriş/goýmany bozmaýar.
Submit + auto-skroll-da umumy ýalňyşlyk banneri we ilkinji ýalňyşlyga ünsi jemläň.
Hatalaryň tekstleri: anyk, tehniki jargonsyz.

8) Tablisalar, sanawlar, grafikler

Tablisalar: başlyklar 'th' so 'scope = "col/row"', gollar, rezýume.
Sanawlar - hakyky 'ul/ol/li', diwanlar däl.
Grafikler - alternatiw tablisalar/düşündirişler; rowaýatlar bar; reňkler ≠ ýeke-täk signal.

9) Multimediýa we animasiýa

Wideo: subtitrler/transkript; klawiaturadan dolandyrmak; awtopleýsiz (ýa-da asuda).
GIF/mikro animasiýa: 'prefers-reduced-motion' -da öçürýäris; çyralardan gaça durýarys.
Titremeler/sesler - hökmany däl we wizual/tekst bilen köpeldilýär.

10) Ykjam elýeterlilik

Interaktiw ≥ 44 × 44 px, ýeterlik aralyklar.
Ölçegi gadagan etmäň (meta viewport 'user-scalable = no').
Form/klawiatura: Dogry görnüşler ('tel', 'email', 'number'), ulgam mümkinçiliklerini gizlemeýäris.
Garaňky temada we "has köp" ulgamlaýyn şriftlerde barlamak.

11) Lokalizasiýa, sanlar we RTL

Kontekstli i18n-açarlar arkaly setirler; uzyn diller (DE/TR) maketi bozmaýar.
Seneleriň/walýutalaryň formatlary setirler bilen däl-de, utilitlerdir.
RTL-re modeimi: nawigasiýa nyşanlaryny aýna, fokus we arabanyň tertibini barlaýarys, iki taraplaýyn giriş.

12) Kritiki flowlaryň aýratynlyklary (iGaming)

Tölegler/netijeler

Anyk görkezmeler, çäkler/möhletler/komissiýalar - tekst.
Üpjün edijiniň ýalňyşlyklary aç-açan, kodsyz yglan edilýär; hereket etmegiň alternatiwasy bar.
Amalyň tassyklanmagy: logiki CTA-a üns bermek, ýatyrmak mümkinçiligi.

KUS/tassyklama

Surat/resminamalara ädimme-ädim maslahatlar; ösüş we ETA.
"Bulanyk/ýagtylyk/kesilen" ýalňyşlyklar - düzediş mysallary bilen.
Bitarap äheň, degişme ýok.

13) Kemçilikleriň agyrlygyna baha bermek

Blocker: Esasy işi (klaviatura/ekran) tamamlamak mümkin däl.
Critical: möhüm funksiýa işleýär, ýöne çynlakaý päsgelçilikler bilen.
Major: päsgel berýär, aýlaw ýoly bar.
Minor: kosmetika/wezipä täsir etmezden gidlere laýyk gelmezlik.

Her bir kemçilik - WCAG kriteriýasyna we köpeldilýän ssenarisine salgylanma.

14) Kabul etmegiň ölçegleri (Definition of Done, A11y)

Klawiatura ssenarisini syçansyz geçirmek 100%.
axe/Lighthouse: hiç hili möhüm/ýokary düzgün bozmalar ýok.
Ähli temalarda/ýagdaýlarda AA kontrast.
Esasy ýollaryň (navbar, formalar, modallar, tostlar) skrinrideri.
Resminamalar täze komponentler/fiç üçin A11y (rol modeli, aria, fokus, mysallar).
A11y synagynyň regressiýasy CI-de ýaşyl.

15) Prosesler we awtomatlaşdyryş

Ösüşe çenli: A11y-wezipelerde kriteriýalar, fokus/ýalňyşlyk ýagdaýlary bolan maketler.
Ösüşde: lokal gurlanda linterler/ahe; kontrastlaryň/fokusyň wizual snapshotlary.
CI-de: pa11y/axe-skan möhüm sahypalar boýunça; Blocker/Critical döwründe bildiň ýykylmagy.
Goýberilenden soň: çärýekleýin barlaglar, ulanyjy şikaýatlaryna A11y-tag boýunça gözegçilik.

16) Anti-patternler

Label ýerine pleýsholder.
'button '/' a' ýerine 'div'.
"Gözellik üçin" kesilen fokus halkalary.
Reňk ýeke-täk status göteriji hökmünde.
Fokus-trap/ESC-siz modallar.
Mobilde ulalmagy gadagan et.
Adam düşündirişsiz "Ýalňyşlyk 400/500".

17) Synag ssenarileriniň şablonlary

Script 1 - Klawiatura nawigasiýasy (şekilli sahypa)

1. Birinji meýdana tab, maglumatlary giriziň.
2. Shift + Tab yza - Dogry tertibe göz aýlaň.
3. Tassyklamany (submit) çagyryň - fokus ilkinji ýalňyşlyga geçirilýär.
4. ESC düwmesini ýapyň, fokus inisiatora gaýdyp geldi.

2-nji ssenariýa - Ekran (töleg sahypasy)

1. Sahypanyň başlygyna geçiň (h1), bölümleri diňläň.
2. Usulyň saýlamagyny açyň - rollaryň/ýagdaýlaryň yglan edilmegi eşidilýär.
3. Bilkastlaýyn hata beriň - habar okaldy we meýdan bilen baglanyşykly.
4. Töleg hakynda üstünlikli tost 'polite' diýlip yglan edildi.

3-nji ssenariýa - Dinamika

1. Amaly garaşmak bilen başla> 3 s - proses/ETA barada tekst bar.
2. Torda ýalňyşlyk bar bolsa - 'assertive' banneri, klawiaturadan elýeterlidir, "gaýtalamak/kömek etmek" ýoly bar.

18) Peýdaly mikro-şablonlar

Tost üçin 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>

Hatanyň meýdan bilen baglanyşygy

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-amallary durmuşa geçirmegiň çalt meýilnamasy

1. Häzirki komponentleriň/nusgalaryň barlagy (kontrast/fokus/rol semantikasy).
2. Dizaýn-ulgam düzedişleri: Her komponente A11y bölümini goşuň.
3. Gurallar: lokal we CI-de/axe/pa11y/Lighthouse linterlerini sazlaň.
4. Okuw: dizaýnerler/işläp düzüjiler/göçürijiler üçin gysga ýollar.
5. Pilot: 3-5 sany iň ýygy kemçilikleri (modallar, formalar, tostlar) bejermek.
6. Düzgünnama: A11y-ölçegli DoD; çärýekleýin audit.

Jemleýji şpargalka

Klawiatura, fokus, kontrast, ekran, dinamikany barlaň.
Statuslaryňyzy aria-live arkaly yglan ediň; ýalňyşlyklar - meýdanlar bilen baglanyşykly.
Reduce hereketine hormat goýuň, ulalmagy gadagan etmäň.
"Görnüşi" däl-de, semantika (bellikler/rollar) bilen pikir ediň.
Barlaglary awtomatlaşdyryň, ýöne elmydama el bilen dolduryň.
WCAG, agyrlyk we oýnamak ssenarisine salgylanmak bilen kemçilikleri düzediň.