Test arayüzü kullanılabilirliği

1) Neden ve ne "hazır" olduğunu düşünüyoruz

• WCAG 2 kriterleri karşılandı. 1/2. Hedef platformlar için 2 AA seviyesi;
• arayüz tamamen klavyeden geçirilir;
• Ekran okuyucularla doğru çalışma;
• Kontrastlar normlara uygundur;
• Tüm durumlar/hatalar/durumlar görüş alanı dışında ve fare olmadan kullanılabilir;
• yerelleştirme, RTL, hareket azaltma ve mobil özellikler dikkate alınır.

2) Test stratejisi (piramit A11y)

1. Autotests/linters (problem sınıflarının %40-60'ına kadar hızlı kapsama alanı).
2. Manuel desen denetimi (klavye, odak, içerik, mantık).
3. Yardımcı Teknoloji (AT) oturumları: ekran okuyucular, ölçeklendirme, renk filtreleri.
4. Kullanıcılarla saha testleri (mümkünse).

Amaç: Bileşen/desen düzeyinde sistemik kusurları yakalamak, böylece özelliklerde çoğalmamak.

3) Temel kontrollerin kontrol listesi (hızlı çalışma)

• Klavye: sekme/oklarla her şeye ulaşılabilir; Odaklanma sırası mantıklıdır; Modellerde hile tuzağı var; ESC/Enter/Space çalışıyor.
• Odak göstergesi herhangi bir konu/arka planda görülebilir.
• Kontrast: metin ≥ 4. 5:1 (normal), ≥ 3:1 (büyük), simgeler/kontroller okunabilir.
• Anlambilim: doğru etiketler ('düğme','a ',' etiket ','ul/li', 'th/td'), roller ve 'aria-' sadece gerekirse.
• Ekran okuyucu: hiyerarşiye göre başlıklar, düğmelerin/bağlantıların anlamlı isimleri, simgeler/görüntüler için alternatifler.
• Formlar: açık 'etiket', ipuçları/hatalar ilişkilidir ('aria-describby'), hata metinleri özeldir.
• Dinamikler: Tostlar/afişler/hatalar 'aria-live' ('kibar'/' iddialı') aracılığıyla duyurulur.
• Animasyonlar 'prefers-reduced-motion' saygı; Arayüzü "sallamadan".
• Yerelleştirme/RTL: tuş ekranları hizalanır, sayılar/tarihler/para birimleri yardımcı programlarla biçimlendirilir.
• Hareketlilik: 44 ≥ 44 piksel × dokunmatik hedefler, zoom yasak değildir, ekran döndürme içeriği kırmaz.

4) Roller, sorumluluklar ve eserler

Tasarım sistemi: Her bileşenin açıklamasında A11y gereksinimleri.
Geliştiriciler: Otomatik kontroller, A11y-asserts ile birim/etkileşim testleri.
QA: manuel komut dosyaları + AT oturumları; Şiddet/sıklıkta rapor verin.
UX/İçerik: Hataların/durumların mikro kopyası, yüksek sesle okunabilirlik.
Artifaktlar: kontrol listeleri, komut dosyaları, AT screencasts, WCAG referanslı kusurların listesi, öneriler.

5) Otomatik kontroller

Linters/analizörler: axe, eslint-plugin-jsx-a11y, pa11y, Lighthouse.
Boru hattında: PR'yi kritik ihlaller için engelliyoruz (rol/etiket/kontrast/sekme tuzakları).
Kontrast anlık görüntüler: temaların/durumların görsel testleri.

6) Manuel test: senaryolar

6. 1 Klavye

Sayfayı yalnızca klavyeyle (Sekme/Shift + Sekme/Enter/Boşluk/oklar) gözden geçirin.
Kontrol: odak görünürlüğü, öncelik, tüm eylemlerin kullanılabilirliği, "tuzaklar've" ölü "öğelerin yokluğu.
Bir modalde: içerideki odak, kapatıldığında başlatıcıya geri döner.

6. 2 Ekran okuyucular (minimum set)

Masaüstü: NVDA/JAWS (Windows), VoiceOver (macOS).
Mobil: VoiceOver (iOS), TalkBack (Android).
Kontrol ediyoruz: doğru başlıklar (H-hiyerarşisi), düğme/bağlantı adları, okuma tabloları ('th'/' scope'), durum bildirme, anlaşılabilir form hataları.

6. 3 İçerik ve mikrokopi

Kritik metinleri yüksek sesle okuruz - belirsizlik olmadan, "hata 400" olmadan.
Error = "what's wrong + how to fix + constraint/format".

6. 4 Dinamikler ve yaşam bölgeleri

Başarının tostu 'aria-live =' kibar ', hata' iddialı'dır.
Metinle açıklanan ilerleme/indirme; İskelet spinner tercih edilir.

7) Formlar ve hatalar (derinlemesine)

Her alanın ilişkili bir etiketi vardır (yer tutucu değil).
Hatalar şu alanla ilişkilidir:' aria-invalid =" true"',' aria-describby =" [error id]"'.
Format formülleri (tarih, telefon numarası) önceden belirtilmiştir; Maskeler giriş/sokmayı bozmaz.
Gönderirken hataların özet afişi + otomatik kaydırma ve ilk hataya odaklanın.
Hata metinleri: spesifik, teknik jargon olmadan.

8) Tablolar, listeler, grafikler

Tablolar: 'scope = "col/row'ile' th 'başlıkları, imzalar, özgeçmiş.
Listeler gerçek'ul/ol/li ', divalar değil.
Grafikler - alternatif tablolar/açıklamalar; Efsaneler mevcuttur; Renkler tek bir sinyal ≠.

9) Multimedya ve animasyonlar

Video: altyazı/transkript; Klavye kontrolü; Otomatik oynatma olmadan (veya sessiz).
GIF/mikroanimasyonlar: 'prefers-reduced-motion' olduğunda kapatın; Salgınlardan kaçınmak.
Titreşimler/sesler - isteğe bağlı ve çoğaltılmış görsel/metin.

10) Mobil erişilebilirlik

İnteraktif ≥ 44 × 44 piksel, yeterli aralıklarla.
Ölçeklemeyi yasaklamayın ('user-scalable = no' olmadan meta viewport).
Form/klavye: doğru türler ('tel','e-posta ',' sayı '), sistem yeteneklerini gizlemeyin.
Karanlık temayı ve sistem yazı tiplerini'daha fazla'ile kontrol edin.

11) Yerelleştirme, sayılar ve RTL

Bağlam ile i18n tuşları aracılığıyla dizeleri; Uzun diller (DE/TR) düzeni bozmaz.
Tarih/para birimi biçimleri - yardımcı programlar, dizeler değil.
RTL modu: navigasyon simgelerini yansıtır, odak ve taşıma sırasını, çift yönlü girişi kontrol eder.

12) Kritik akışın özgüllüğü (iGaming)

Ödemeler/Sonuçlar

Açık talimatlar, sınırlar/son tarihler/komisyonlar - metin içinde.
Sağlayıcı hataları açıkça, kodsuz olarak ilan edilir; Eylemin alternatifi vardır.
Operasyon onayı: mantıksal CTA, iptal edilebilirliğe odaklanın.

CCM/doğrulama

Fotoğraflar/belgeler için adım adım ipuçları; İlerleme ve ETA.
Bulanık/parlama/kesilmiş hatalar - düzeltme örnekleriyle.
Nötr ton, mizah yok.

13) Kusur ciddiyeti değerlendirmesi

Engelleyici: Anahtar görevi (klavye/ekran okuyucu) tamamlanamıyor.
Kritik: kritik işlevsellik çalışır, ancak ciddi engellerle.
Binbaşı: araya giriyor, geçici bir çözüm var.
Küçük: kozmetik/görevi etkilemeden kılavuzlara uyulmaması.

Her kusur, WCAG kriterine ve yeniden üretilen komut dosyasına bir referanstır.

14) Bitti Tanımı (A11y)

Klavye komut dosyasını fare olmadan geçirmek %100'dür.
Balta/Deniz Feneri: Kritik/yüksek ihlal yok.
Tüm temalar/durumlar arasında AA kontrastı.
Ekran okuyucu-anahtar yolların çalıştırılması (navbar, kalıplar, modaller, tost).
Yeni bileşenler/özellikler için A11y dokümantasyon (rol modeli, arya, odak, örnekler).
A11y testlerinin gerilemesi CI'da yeşil.

15) Süreçler ve otomasyon

Geliştirmeden önce: Görevlerde A11y-criteria, odak/hata durumlarına sahip düzenler.
Geliştirme aşamasında: linters/ahe yerel montaj sırasında; Kontrast/odak görsel anlık görüntüler.
CI'de: Kritik sayfalara göre pa11y/axe-scan; Blocker/Critical altında damla oluşturun.
Yayınlandıktan sonra: üç aylık denetimler, kullanıcı şikayetlerinin A11y-tag tarafından izlenmesi.

16) Anti-desenler

Etiket yerine yer tutucu.
'div' yerine 'button'/'a'.
Engelli odak halkaları "güzellik uğruna".
Tek durum taşıyıcısı olarak renk.
Odak tuzağı/ESC olmadan modaller.
Mobilde ölçeklendirme yok.
"Hata 400/500" insan açıklaması olmadan.

17) Test komut dosyası şablonları

Senaryo 1 - Klavye Gezinme (Form Sayfası)

1. İlk alana sekme yapın, verileri girin.
2. Shift + Sekme geri - Doğru sırayı kontrol edin.
3. Çağrı doğrulama (gönder) - odak ilk hataya geçer.
4. Modülatörü ESC tuşuyla kapatın, odak başlatıcıya geri döndü.

Senaryo 2 - Ekran Okuyucu (Ödeme Sayfası)

1. Sayfa başlığına (h1) gidin, bölümleri dinleyin.
2. Yöntemin seçimini açın - rollerin/durumların beyanı duyulur.
3. Kasıtlı olarak bir toplam hatası yapın - mesaj okunur ve alanla ilişkilendirilir.
4. Başarılı ödeme tost 'kibar'ilan etti.

Senaryo 3 - Dinamikler

1. İşlemi> 3 saniye bekleterek başlatın - işlem/ETA hakkında metin var.
2. Bir ağ hatası durumunda - klavyeden erişilebilen 'iddialı' banner, bir 'tekrarla/yardım' yolu vardır.

18) Yararlı mikro şablonlar

Roller/tost için arya

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>

Alana bağlantı hatası

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 (anlamsal nitelikler)

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 uygulamalar için hızlı uygulama planı

1. Mevcut bileşenlerin/modellerin denetimi (kontrast/odak/rol semantiği).
2. Tasarım Sistemi Düzenlemeleri: Her bileşene A11y bir bölüm ekleyin.
3. Araçlar: up/axe/pa11y/Lighthouse çizgilerini yerel olarak ve CI'da ayarlayın.
4. Eğitim: Tasarımcılar/geliştiriciler/metin yazarları için kısa kılavuzlar.
5. Pilot: En yaygın kusurların 3-5'ini düzeltin (modaller, formlar, tost).
6. Düzenleme: A11y kriterlerle DoD; Üç aylık denetim.

Son hile sayfası

Klavyeyi, odağı, kontrastları, ekran okuyucuyu, dinamikleri kontrol edin.
Durumları aria-live aracılığıyla duyurun; Hatalar - alanlarla ilgili.
Saygı hareketi azaltmak, ölçeklendirme yasaklamayın.
Anlambilimi (etiketler/roller) düşünün, "neye benzediğini'değil.
Kontrolleri otomatikleştirin, ancak her zaman manuel olanlarla tamamlayın.
WCAG, önem derecesi ve oynatma komut dosyasına başvurarak hataları düzeltin.