@blakfy/accessibility-widget

Native accessibility preferences panel for Next.js + vanilla sites. Auto-updates via jsDelivr CDN.

Overlay değil, kullanıcı tercih paneli. DOM patch yok, sahte WCAG iddiası yok, telemetri yok. Bundle ≤18 KB gz.

⚠️ Alpha: 2.0.0-alpha.x. Public API kilitli değildir, breaking change gelebilir. Üretim için 2.0.0 stabil sürümü bekleyin veya tam sürüm pinleyin.

Hızlı kurulum (CDN — önerilen)

<script
  src="https://cdn.jsdelivr.net/npm/@blakfy/[email protected]/dist/widget.js"
  data-locale="tr"
  data-theme="auto"
  data-position="bottom-left"
  defer
></script>

FAB sol-altta görünür; panel açılır; tercihler localStorage + cookie ile saklanır.

NPM ile

pnpm add @blakfy/accessibility-widget

import '@blakfy/accessibility-widget';
// auto-mount: window.BlakfyA11y global'i hazır olur

Custom Element (Wix / Webflow / Shopify)

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@blakfy/[email protected]/dist/widget-element.js"
></script>

<blakfy-a11y locale="tr" theme="auto" position="bottom-left"></blakfy-a11y>

Next.js helpers

Next.js App Router için ek paket: @blakfy/accessibility-widget-next — SSR FOUC koruması, <A11yScript /> ve <A11yServerHelper /> bileşenleri.

API özeti

BlakfyA11y.open();                        // paneli aç
BlakfyA11y.close();
BlakfyA11y.getPreferences();              // aktif tercihleri al
BlakfyA11y.setPreferences({ fontScale: 125 });
BlakfyA11y.onChange((prefs) => { /* ... */ });
BlakfyA11y.diagnostics();                 // destek için snapshot

Tam API + 7 tercih + 9 dil + tema değişkenleri için → GitHub README.

Anti-pattern'lar

❌ DOM patching · ❌ AI alt-text · ❌ Otomatik ARIA enjeksiyonu · ❌ "Profil" preset'leri · ❌ Telemetri · ❌ AT fingerprinting

Sebepler ve referanslar (FTC vs accessiBe 2025, Overlay Fact Sheet, WebAIM çalışmaları): GitHub README.

Lisans

MIT. Marka rozeti ("Powered by Blakfy Studio") gizlenemez.