Günümüz internet dünyasında erişilebilirlik, artık "olsa iyi olur" denilecek bir lüks değil, tartışılmaz bir zorunluluk haline geldi. Ancak dijital dünyada gezinirken milyonlarca web sitesinin hâlâ görme engelli, disleksi veya okuma güçlüğü çeken kullanıcıları dışlayan bir yapıyla karşımıza çıktığını görüyoruz. Bir eğitimci ve teknoloji tasarımcısı olarak bu durum beni uzun süredir rahatsız ediyordu.
Peki; hantal, siteyi yavaşlatan ve yıllık yüzlerce dolar lisans ücreti isteyen sistemlere mahkum muyuz? Pratik, tamamen ücretsiz, yerli ve estetik bir çözüm sunmak mümkün mü? İşte bu soru, MEBİ Erişilebilirlik Paneli projesini geliştirmemdeki temel motivasyon oldu. Bu yazıda, sıfır bağımlılıkla nasıl profesyonel bir erişilebilirlik katmanı oluşturduğumu ve 7 farklı yapay zeka ile gerçekleştirdiğimiz o müthiş geliştirme sürecini tüm detaylarıyla anlatacağım.
Bu projeye başlarken çıkış noktam aslında çok basitti: MEBİ, okul siteleri ve kamu kurumları için kullanılabilecek pratik bir çözüm üretmek. İlk etapta İlçe Milli Eğitim Müdürlüklerinin (MEM) mevcut kodlarını ve internette dolaşan açık kaynak örnekleri inceledim. Ancak teknik bir inceleme yaptığımda acı bir gerçekle karşılaştım:
"Mevcut kodların çoğu, dünya standardı olan WCAG 2.1 (Web İçeriği Erişilebilirlik Yönergeleri) standartlarından çok uzaktı, hantaldı ve en önemlisi 'Erişilebilirlik Makyajı' yapmaktan öteye gidemiyordu."
İşi şansa bırakmamak için sıra dışı bir mühendislik yöntemi izledim. Kodu yazarken 7 farklı yapay zekayı (ChatGPT, Gemini, Claude, DeepSeek, Grok, Copilot ve Minimax) birbirleriyle "çapraz sorguya" soktum. Birinin yazdığı fonksiyonu diğerine denettirdim, birinin bulduğu güvenlik açığını diğerine kapattırdım. Tabiri caizse onları sanal bir arenada birbiriyle kapıştırdım.
Sonuç? Ortaya çıkan yazılım, yapay zekaların ortak görüşüyle; piyasadaki yıllık dolarla satılan rakiplerinden daha hafif, daha güvenli ve teknik olarak daha stabil bir yapıya kavuştu. Ben yapay zekaların yalancısıyım 😄
⚖️ Yasal Zorunluluk mu, Vicdani Sorumluluk mu?
Konuya elbette 5378 sayılı Erişilebilirlik Yasası gereği yasal zorunluluk veya dava riskleri açısından bakılabilir. Ancak ben olaya daha çok vicdani bir sorumluluk olarak bakıyorum. Dijital dünyada herkes eşittir. Bir görme engelli bireyin, bir disleksi hastasının veya yaşlı bir kullanıcının bilgiye erişim hakkını kısıtlamak, fiziksel dünyada bir binaya rampa koymamakla eşdeğerdir.
MEBİ Erişilebilirlik Paneli, bu eşitliği sağlamak için atılmış somut, yerli ve tamamen ücretsiz bir adımdır.
🛠 Teknik Mimari ve Tasarım Felsefesi: Neden Bu Araç?
Bu proje, diğerlerinden ayıran çok kritik teknik özelliklere sahiptir. İşte kaputun altındaki mühendislik:
1. Cerrahi Sesli Okuma (TreeWalker Teknolojisi) 🧠
Standart erişilebilirlik araçlarının en büyük hastalığı şudur: "Oku" komutunu verdiğinizde, sayfanın içeriğiyle birlikte kendi panellerini de ("Kapat düğmesi, Yazıyı Büyüt, Renk Değiştir" vb.) sesli olarak okurlar. Bu, görme engelli bir birey için tam bir kaostur.
MEBİ Çözümü: Kodumuz, tarayıcının TreeWalker API'sini kullanarak DOM (Sayfa Yapısı) üzerinde "cerrahi" bir tarama yapar. Panel içeriğini, gizli öğeleri ve kod bloklarını algılar ve onları okuma listesinden atar. Sadece saf içeriği okur. Ayrıca bunu yaparken Odak Hapsi (Focus Trap) özelliği sayesinde klavye odağı kaybolmaz.
2. Sıfır Bağımlılık & Ultra Performans ⚡
UserWay veya accessiBe gibi araçlar sitenize 600KB+ boyutunda harici dosyalar yükler, dış sunuculara bağlanır ve siteyi yavaşlatır.
MEBİ Çözümü: Tamamen Vanilla JavaScript ile yazılmıştır. React, Vue, jQuery gibi hiçbir kütüphaneye ihtiyaç duymaz. Dosya boyutu sadece ~22 KB'dır. Sitenizin açılış hızına etkisi "yok" denecek kadar azdır.
3. %100 Gizlilik ve KVKK Uyumu 🔒
Ücretsiz dağıtılan çoğu script veya ücretli servisler, kullanıcı verilerini toplayarak kendi sunucularına gönderir. Çerez (Cookie) bırakır.
MEBİ Çözümü: Bu kod "Offline-First" mantığıyla çalışır. Dışarıya veri göndermez. Çerez (Cookie) kullanmaz. Ayarları sadece kullanıcının kendi tarayıcısında (LocalStorage) tutar. Devlet kurumları ve okullar için en güvenli yöntemdir.
4. Glassmorphism Tasarım ve Modern İkonlar 🎨
Tasarımda Apple'ın tasarım dilinden ilham alan Glassmorphism (buzlu cam) efekti kullanılmıştır. Klasik ve itici duran "Tekerlekli Sandalye" ikonu yerine, yapay zekaya çizdirdiğim daha modern, kapsayıcı ve pozitif duran bir insan figürü tercih edilmiştir. Bu sayede sitenizin tasarımını bozmaz, aksine modern bir hava katar.
🥊 BÜYÜK KARŞILAŞTIRMA (MEBİ vs. Rakipler)
Neden UserWay veya diğer ücretli eklentiler yerine MEBİ kullanmalısınız? İşte kanıtı:
| Özellik | 🇹🇷 MEBİ (v19 Gold) | 🌎 Global Rakipler (UserWay vb.) | 📦 Sıradan Ücretsiz Scriptler |
|---|---|---|---|
| Maliyet | TAMAMEN ÜCRETSİZ | Yıllık 490$ - 990$ | Ücretsiz |
| Veri Gizliliği (KVKK) | %100 Güvenli (Veri Toplamaz) | Çerez Kullanır, Veri Toplar | Değişken |
| Dosya Boyutu | ~22 KB (Ultra Hafif) | 600 KB+ (Siteyi Yavaşlatır) | 50-100 KB |
| Sesli Okuma (TTS) | 🧠 Cerrahi (TreeWalker) | Standart Okuma | ❌ Yok veya Hatalı |
| Panel Okuma Sorunu | ✅ Asla Okumaz | Bazen Paneli de Okur | ❌ Paneli de Okur |
| Klavye Odağı (Focus) | ✅ Focus Trap Var | Var | ❌ Genelde Yok |
| Mobil Uyumluluk | ✅ Responsive (320px+) | Responsive | ⚠️ Taşma Yapabilir |
📦 Kurulum ve Entegrasyon Rehberi
Bu eklentiyi kullanmak için hiçbir teknik bilgiye veya yazılımcı olmanıza gerek yok. Tek bir JavaScript dosyasını sitenize çağırmanız yeterli.
1. Blogger Entegrasyonu
- Blogger panelinize giriş yapın.
- Sol menüden Tema > HTML'i Düzenle seçeneğine tıklayın.
- Kod penceresinde
CTRL+Fyaparak</body>etiketini bulun (Genellikle en alttadır). </body>etiketinin hemen üzerine şu kodu kopyalayıp yapıştırın:
<script src="https://teknolojitasarimci.github.io/ME-Accessibility/mebi-erisilebilirlik.js"></script>
Temayı kaydedin. Artık bloğunuz uluslararası standartlarda (WCAG 2.1) erişilebilir bir web sitesi oldu! 🎉
2. Standart HTML / PHP Siteler
Sitenizin ana dizinindeki index.html (veya tüm sayfalarda görünen footer.php) dosyasını açın. Sayfanın en altına inin ve </body> etiketinin hemen üzerine yukarıdaki script kodunu yapıştırın.
3. WordPress Siteler (En Kolay Yöntem)
- WordPress panelinden Eklentiler > Yeni Ekle deyin.
- "WPCode" veya "Insert Headers and Footers" eklentisini kurup etkinleştirin.
- Eklenti ayarlarından "Footer" (Alt Bilgi) bölümüne gelin.
- Yukarıdaki script kodunu yapıştırıp kaydedin.
🏁 Sonuç
Projem, benim için sadece bir kod egzersizi olmadı. Bu proje, web'in herkes için erişilebilir olması gerektiği inancının somut bir ürünü haline geldi. Dijital dünyada kapsayıcılık artık bir tercih değil, bir sorumluluktur.
Bu aracı açık kaynak olarak yayınlamamın amacı, daha erişilebilir bir web ekosistemi oluşturulmasına katkıda bulunmaktır. Kendi projelerinizde özgürce kullanabilir, geliştirebilir ve paylaşabilirsiniz.
İletişim: teknolojitasarimci@hotmail.com
Eğer bu proje hakkında düşünceleriniz veya önerileriniz varsa, yorumlar kısmında paylaşmanızı bekliyorum. Birlikte web'i daha kapsayıcı bir yer haline getirebiliriz.
#WebErişilebilirlik #Erişilebilirlik #DigitalAccessibility #MEB #WCAG #OpenSource #InclusiveDesign #EngelsizBilişim #Yazılım #Javascript
Hiç yorum yok:
Yorum Gönder