Web Sitesine Erişilebilirlik Widget'ı (Butonu) Nasıl Eklenir? WordPress, HTML, Shopify

Web Sitesine Erişilebilirlik Widget'ı (Butonu) Nasıl Eklenir? WordPress, HTML, Shopify

Kısa cevap: Bir erişilebilirlik widget'ı (halk arasında "erişilebilirlik butonu", "engelli modu" veya "erişilebilirlik menüsü" olarak da anılır), sitenizin kapanış </body> etiketinden önce eklenen tek satır JavaScript kodu ile kurulur. Kurulum HTML sitede kopyala-yapıştır ile birkaç dakika sürer; WordPress, Shopify, Wix ve Google Tag Manager için de birer ekleme noktası vardır. Ancak önemli bir uyarı: widget eklemek siteyi otomatik olarak WCAG uyumlu yapmaz. Widget kullanıcıya yardımcı özellikler sunar; uyumun kendisi tarama, düzeltme ve belgeleme ile sağlanır.

Bu rehberde kurulumun platform platform adımlarını, "ücretsiz erişilebilirlik widget'ı" arayanlar için gerçekçi seçenekleri ve kurulum sonrası atmanız gereken adımları bulacaksınız.

İçindekiler

• Erişilebilirlik widget'ı (butonu) nedir?
• Neden eklemelisiniz? Yasal çerçeve
• Kurulum 1: HTML site (tek satır kod)
• Kurulum 2: WordPress
• Kurulum 3: Shopify
• Kurulum 4: Wix ve site kurucular
• Kurulum 5: Google Tag Manager (GTM)
• Ücretsiz erişilebilirlik widget'ı var mı?
• Widget eklemek yeterli mi?
• Sıkça Sorulan Sorular

Erişilebilirlik widget'ı (butonu) nedir?

Erişilebilirlik widget'ı, sitenin köşesinde duran bir butonla açılan ve ziyaretçinin sayfayı kendi ihtiyacına göre uyarlamasını sağlayan bir araçtır. Metin boyutu, kontrast, satır aralığı, animasyon durdurma, ekran okuyucu, okuma kılavuzu ve disleksi dostu font gibi özellikler sunar. Aynı araç farklı adlarla anılır:

• Erişilebilirlik butonu: ziyaretçinin gördüğü yüzen buton
• Engelli modu: halk arasında yaygın kullanım
• Erişilebilirlik menüsü: kamu kurumlarının tercih ettiği ad (Aile ve Sosyal Hizmetler Bakanlığı kendi sitesinde bu adı kullanır)
• Engelsiz web widget'ı: sektörde kullanılan bir diğer ad

Adı ne olursa olsun teknik mantık aynıdır: siteye eklenen küçük bir betik (script), sayfaya buton ve ayar panelini yerleştirir. İyi bir widget'ın ayırt edici özelliği mimaridir: Erişilebilir Çerez erişilebilirlik aracı Shadow DOM içinde çalışır, yani sitenizin tasarımını bozmaz ve ziyaretçinin kendi ekran okuyucusuyla çakışmaz. Kavramın bütünü için dijital erişilebilirlik rehberimize bakabilirsiniz.

Neden eklemelisiniz? Yasal çerçeve

Türkiye'de 5378 sayılı Engelliler Hakkında Kanun, erişilebilirliği genel bir yükümlülük olarak çerçeveler. Dijital tarafta ise somut takvim 2025/10 sayılı Cumhurbaşkanlığı Genelgesi ile geldi: kamu kurumları, belediyeler, bankalar, üniversiteler, hastaneler ve okullar için web erişilebilirliği zorunlu; son tarih 21 Haziran 2026 (e-ticaret için 2027), asgari seviye WCAG 2.2 Düzey A ve tespit başına 5.000–25.000 TL idari yaptırım öngörülüyor. Ayrıntı: 2025/10 Genelge rehberi. AB pazarına hizmet verenler için ayrıca EAA (2019/882) devrededir.

Yasal çerçevenin ötesinde pratik neden şudur: erişilemeyen bir menü veya okunamayan bir buton, hiçbir hata mesajı göstermeden ziyaretçi kaybettirir. Widget, kullanıcı tarafındaki engellerin bir kısmını anında azaltır; tarama ve raporlama ise kalıcı çözümün yolunu gösterir.

Kurulum 1: HTML site (tek satır kod)

Klasik HTML/PHP sitede kurulum en kısa yoldur:

1. Panelinizden size özel embed kodunu kopyalayın (Kurulum sayfasında hazır durur).
2. Kodu her sayfanın </body> kapanış etiketinden hemen önce yapıştırın. Şablon kullanıyorsanız (footer.php gibi) tek dosyaya eklemek yeterlidir.
3. Sayfayı yenileyin; sağ altta erişilebilirlik butonu görünür.

Kod tek satırdır ve eşzamansız (async) yüklenir; sayfanın açılışını bloklamaz. Erişilebilir Çerez'de aynı embed kodu hem çerez bandını hem erişilebilirlik aracını yönetir: iki uyum için iki ayrı entegrasyon gerekmez.

Kurulum 2: WordPress

WordPress'te "wordpress erişilebilirlik eklentisi" aramak yerine iki pratik yol vardır:

Yol A (eklenti ile): Erişilebilir Çerez'in WordPress eklentisini indirin (Kurulum sayfasında ZIP olarak hazır), Eklentiler > Yeni Ekle > Eklenti Yükle'den kurun, API anahtarınızı girin. Eklenti embed kodunu wp_head/wp_footer kancasıyla tüm sayfalara otomatik ekler.

Yol B (kod ile): Görünüm > Tema Dosyası Düzenleyicisi'nde (veya alt temada) footer.php dosyasına, </body> etiketinden önce embed kodunu yapıştırın. Tema güncellemesinde kaybolmaması için alt tema (child theme) veya "Insert Headers and Footers" tarzı bir eklenti kullanın.

İpucu: sayfa önbelleği (cache) eklentisi kullanıyorsanız kurulumdan sonra önbelleği temizleyin; buton ilk bakışta görünmüyorsa neden genelde budur.

Kurulum 3: Shopify

1. Yönetici panelinde Online Store > Themes > üç nokta > Edit code yolunu izleyin.
2. layout/theme.liquid dosyasını açın.
3. Embed kodunu </body> etiketinden hemen önce yapıştırıp kaydedin.

Tüm mağaza sayfalarında buton aktif olur. Tema değiştirirseniz kodu yeni temanın theme.liquid dosyasına yeniden eklemeniz gerekir.

Kurulum 4: Wix ve site kurucular

Wix, Squarespace, Webflow gibi kurucularda ortak desen "özel kod" alanıdır:

• Wix: Settings > Custom Code > + Add Custom Code; kodu yapıştırın, "Body - End" konumunu ve "All pages" kapsamını seçin.
• Squarespace: Settings > Advanced > Code Injection > Footer alanına yapıştırın.
• Webflow: Project Settings > Custom Code > Footer Code alanına yapıştırıp yayınlayın.

Not: bazı kurucularda özel kod alanı yalnızca ücretli planlarda açıktır; bu, kurucunun kendi kısıtıdır.

Kurulum 5: Google Tag Manager (GTM)

Siteye doğrudan dokunamıyorsanız (kurumsal onay süreçleri, dış ajans yönetimi) GTM pratik bir yoldur:

1. GTM'de yeni bir Custom HTML etiketi oluşturun ve embed kodunu içine yapıştırın.
2. Tetikleyici olarak All Pages seçin.
3. Önizleme ile doğrulayıp yayınlayın.

Uyarı: çerez onayı tarafında GTM üzerinden yükleme, onay sıralamasını (consent mode) doğru kurmayı gerektirir. Erişilebilir Çerez embed'i hem çerez hem erişilebilirlik katmanını tek kodda yönettiği için mümkünse doğrudan siteye eklemeyi öneririz; GTM'i ikinci seçenek olarak kullanın.

Ücretsiz erişilebilirlik widget'ı var mı?

"Ücretsiz erişilebilirlik widget'ı" aramasının gerçekçi cevabı üç katmandır:

1. Ücretsiz başlangıç: Erişilebilir Çerez'de hesap açmak ücretsizdir; kurulumu yapıp aracı sitenizde deneyebilirsiniz. Plan ve limitler için fiyatlandırma sayfasına bakın.
2. Ücretsiz araçlar: Sitenizin mevcut durumunu görmek için ücretsiz erişilebilirlik beyanı oluşturucuyu ve diğer ücretsiz araçları kullanabilirsiniz.
3. "Tamamen ücretsiz ve sınırsız" vaadi: Tarama, raporlama ve destek maliyetli işlerdir. Kalıcı olarak tamamen ücretsiz görünen çözümlerde ya özellik seti dardır ya da maliyet başka yoldan çıkar. Seçim yaparken erişilebilirlik aracı seçim rehberindeki 8 kriteri uygulayın.

Widget eklemek yeterli mi?

Hayır ve bunu açıkça söylüyoruz. Widget, ziyaretçiye yardımcı özellikler sunar; ancak eksik alt metin, bozuk başlık hiyerarşisi veya klavyeyle erişilemeyen menü gibi yapısal sorunlar kaynak kodda çözülür. Sağlıklı sıra şudur:

1. Widget'ı kurun (bu rehber): kullanıcı tarafındaki engelleri hemen azaltır.
2. Sitenizi taratın: WCAG 2.2 taraması 0-100 uyum skoru ve önem dereceli ihlal raporu üretir.
3. Düzeltin ve belgeleyin: ihlalleri önceliğe göre giderin, erişilebilirlik beyanınızı yayınlayın. Süreç detayı: erişilebilirlik denetimi rehberi.

"Tek tıkla erişilebilir site" vaat eden overlay araçlarından uzak durun; bu iddia hem teknik olarak gerçek dışıdır hem de yasal risk taşır.

Sıkça Sorulan Sorular

Engelli modu ile erişilebilirlik widget'ı aynı şey mi?

Evet. "Engelli modu", "erişilebilirlik butonu" ve "erişilebilirlik menüsü" aynı aracın halk arasındaki farklı adlarıdır: siteye eklenen betik, ziyaretçiye metin boyutu, kontrast, ekran okuyucu gibi ayarlar sunan bir panel açar.

WordPress'e erişilebilirlik eklentisi nasıl kurulur?

İki yol vardır: hazır eklenti ZIP'ini Eklentiler > Yeni Ekle > Eklenti Yükle'den kurup API anahtarını girmek, ya da embed kodunu footer.php dosyasına (veya bir header/footer eklentisiyle) </body> öncesine eklemek. Kurulumdan sonra önbelleği temizlemeyi unutmayın.

Widget siteyi yavaşlatır mı?

Doğru mimaride hayır. Erişilebilir Çerez embed kodu eşzamansız (async) yüklenir, sayfanın ilk açılışını bloklamaz ve widget Shadow DOM içinde çalıştığı için sitenizin CSS ve JavaScript'i ile çakışmaz.

Erişilebilirlik butonu eklemek yasal zorunluluğu karşılar mı?

Tek başına hayır. 2025/10 Genelgesi WCAG 2.2 uyumunu ister; widget kullanıcıya yardımcı olur ama yapısal ihlaller tarama ve kod düzeltmesiyle giderilir. Widget + tarama + beyan üçlüsü birlikte anlamlıdır.

Hangi platformlarda çalışır?

Embed kodu standart JavaScript olduğu için HTML, PHP, WordPress, Shopify, Wix, Squarespace, Webflow, React/Next.js dahil hemen her platformda çalışır; Google Tag Manager üzerinden de eklenebilir.

Kurulum ne kadar sürer?

HTML sitede kopyala-yapıştır ile birkaç dakika. WordPress ve Shopify'da 5-10 dakika. GTM üzerinden etiket + tetikleyici kurulumu da benzer sürededir.

Tek kodla iki uyum: Erişilebilir Çerez embed'i hem KVKK çerez bandını hem erişilebilirlik aracını aynı anda kurar. Ücretsiz hesap açın, embed kodunuzu alın ve birkaç dakika içinde sitenizde görün. Kurulumdan sonraki adım için erişilebilirlik aracı sayfasından ücretsiz WCAG taramanızı başlatın.

Kaynaklar:

• W3C WCAG 2.2 Dokümantasyonu
• Aile ve Sosyal Hizmetler Bakanlığı, erişilebilirlik duyuruları