Pattern — Accessibility (WCAG 2.1 AA)
Nexberry hedef: WCAG 2.1 AA. Türkiye'de EN 301 549 kamu sektörü ihalelerinde zorunlu — B2B SaaS olarak müşteri uyum talepleri geldiğinde hazır olmamız gerek.

1 · Kontrast oranları

Kurye Ata 5.04 ✓ AA
Body 16px 17.4 ✓ AAA
Caption 12px 5.74 ✓ AA
Disabled 2.85 ✗
Hazırlanıyor pill 8.15 ✓ AA
Kural: body text ≥4.5:1, large (18px+ veya 14px bold) ≥3:1. Disabled metin AA istisna ama yine de ≥3:1 olmalı.

2 · Focus ring (klavye)

Token: --nb-focus-ring = 2px offset + 2px #10b981 ring. :focus-visible kullan, :focus değil — fare tıklamasında ring çıkmaz, sadece klavye Tab'da çıkar.

3 · Klavye navigasyonu

Tab / Shift+TabSıradaki / önceki interactive element
EnterButon, link tıkla; form submit
SpaceButon tıkla, checkbox toggle
EscModal/dropdown/sidebar kapat
↑ ↓Dropdown / select / radio grup içi gezinme
← →Tabs, segmented control içi gezinme
Home / EndListe başı / sonu

4 · ARIA pattern'leri

// Modal
<div role="dialog"
     aria-modal="true"
     aria-labelledby="t1">
  <h2 id="t1">Siparişi iptal et?</h2>

// Toast
<div role="status"
     aria-live="polite">Kurye atandı.

// Pill (sadece renk yetmez)
<span aria-label="Durum: Hazırlanıyor">
  Hazırlanıyor

5 · Form etiketi

// ✓ Doğru: label for + id eşleşmesi
<label for="phone">Telefon</label>
<input id="phone"
       aria-describedby="ph-help" />
<span id="ph-help">+90 olmadan, 10 hane

// ✗ Yanlış: placeholder = label
<input placeholder="Telefon" />
Placeholder asla label değildir — kullanıcı yazmaya başlayınca kaybolur, screen reader okumaz.

6 · Renk değil, anlam

Aktif
Pasif
Uyarı
Kural: renk her zaman ikinci sinyalle desteklenir — metin etiketi, ikon ya da pattern. Renk körü kullanıcı (~%8 erkek) sadece dot'tan durumu çözemez.

7 · Screen reader checklist (geliştirici PR şablonu)