Erişilebilirlik — EMA Standardı

EMA'nızın karşılaması gereken asgari erişilebilirlik (WCAG AA) standardı: kontrast, klavye, iframe-içi odak yönetimi, form etiketleri ve dil.

EMA'nız bir veli, öğretmen veya personelin ekranında — çoğu zaman bir ekran okuyucu, klavye veya düşük-görüş kullanıcısının önünde — çalışır. Emofy platformu WCAG AA hedefler; ekosistemden yüklenen EMA'lar da bu asgari standardı karşılamalıdır. Bu sayfa pratik gereksinimleri listeler; uygulama EMA sahibinin sorumluluğudur.

EMA, host uygulamanın içine bir iframe olarak gömülür ve host ile @emofy/sdk (penpal köprüsü) üzerinden konuşur. Erişilebilirlik iframe belgesinin içinde sizin sorumluluğunuzdadır — host yalnız çerçeveyi ve odağın çerçeveye girip çıkmasını sağlar.

Asgari standart

1. Kontrast (AA)

Metin kontrastı ≥ 4.5:1, büyük/kalın metin ve UI kenarlıkları ≥ 3:1.
Renk tek başına anlam taşımasın (hata yalnız kırmızı ile değil, metin/ikon ile de).
Açık ve koyu zeminde ayrı ayrı doğrulayın — host teması değişebilir.

2. Klavye erişimi

Her etkileşim (buton, alan, menü) yalnız klavye ile tamamlanabilmeli.
Doğal tab sırasını koruyun; pozitif tabindex kullanmayın.
Odağı hapsetmeyin (focus trap yok). Kullanıcı Tab ile EMA'nızın son öğesinden sonra host çerçevesine geri çıkabilmeli. Modal açtıysanız kapanınca odağı tetikleyen öğeye geri verin.
Görünür focus göstergesi bırakın — outline: none yalnız görünür bir alternatif varsa.

3. iframe-içi odak yönetimi

Route/görünüm değişiminde odağı yeni içeriğin başına (ör. sayfa başlığı h1 veya ana bölge) taşıyın; ekran okuyucu kullanıcısı iframe içinde nerede olduğunu bilsin.
İçeriği anlamlı bir başlık (<h1>) ve landmark (<main>, <nav>) hiyerarşisiyle yapılandırın — iframe, host'un başlık ağacını miras almaz.
Yeni açılan panel/dialog'a odağı taşıyın; Esc ile kapanış sağlayın.

4. Form etiketleri ve hatalar

Her alanın programatik bir etiketi olsun: görünür <label htmlFor> veya aria-label.
Placeholder etiket YERİNE geçmez.
Hataları aria-invalid + aria-describedby ile alana bağlayın; hata özetini aria-live="polite" ile anons edin ve odağı ilk hatalı alana taşıyın.

5. Dil (`lang`)

EMA belgenizin kök <html lang="tr"> (veya içeriğin gerçek dili) olsun — ekran okuyucu Türkçe karakterleri (İ ı ğ ü ş ö ç) ve okunuşu doğru seslendirir.
Dil karışıksa bölüm bazında lang işaretleyin.

Hızlı kontrol listesi

Kontrast AA (açık + koyu), renk tek başına anlam taşımıyor.
Tüm akış klavye ile tamamlanıyor; focus trap yok; görünür focus ring var.
Görünüm değişiminde odak yönetiliyor; başlık + landmark hiyerarşisi var.
Form alanları etiketli; hatalar aria-live ile anons ediliyor.
Kök <html lang> doğru; görünür metin yerelleştirilmiş.

Store moderasyonu erişilebilirliği bir yayın kriteri olarak değerlendirebilir. AA'yı karşılamayan EMA'lar geri çevrilebilir — geliştirme sırasında bir eksen tarayıcısı (axe) ile kendi iframe belgenizi taramanız önerilir.