Erişilebilirlik Hizmeti
Herkes için erişilebilir.
WCAG 2.1 AA standartlarına tam uyumlu, Radix UI tabanlı, ekran okuyucu destekli, klavye navigasyonlu ve hareket duyarlılığı olan arayüzler. Dijital ürünleriniz herkese açık olsun.
Erişilebilirlik neden bu kadar önemli?
Dünya Sağlık Örgütü verilerine göre dünya nüfusunun %16'sı bir engelle yaşıyor. Bu, yaklaşık 1.3 milyar insan demektir. Dijital ürünleriniz erişilebilir değilse, bu devasa kullanıcı kitlesini tamamen dışlamış olursunuz. Üstelik erişilebilirlik sadece kalıcı engeller için değil: geçici yaralanmalar, yaşlılık veya durumsal kısıtlamalar (örneğin tek elle telefon kullanma) da erişilebilirlikten faydalanır.
Hukuki açıdan da erişilebilirlik giderek zorunlu hale geliyor. Avrupa Birliği'nin European Accessibility Act (EAA) 2025'te yürürlüğe girdi. ABD'de ADA davaları her yıl artıyor. Türkiye'de de 5378 sayılı Engelliler Hakkında Kanun dijital erişilebilirliği kapsıyor. Erişilebilirliği ihmal etmek hukuki risk taşır.
Ticari açıdan bakarsak, erişilebilir siteler daha iyi SEO performansı gösterir. Anlamlı HTML yapısı, doğru başlık hiyerarşisi ve alt text'ler arama motorlarının içeriği daha iyi anlamasını sağlar. Ayrıca erişilebilir arayüzler tüm kullanıcılar için daha iyi bir deneyim sunar: bu da daha yüksek dönüşüm oranları ve müşteri memnuniyeti demektir.
Neler sunuyoruz?
Her detay düşünülmüş, her adım planlanmış.
WCAG 2.1 AA Tam Uyumluluk
Perceivable, Operable, Understandable ve Robust: WCAG'in dört temel ilkesine tam uyumluluk. Her başarı kriterini (success criterion) tek tek değerlendiriyoruz: metin alternatifleri (1.1.1), altyazı desteği (1.2), uyarlanabilir içerik (1.3), ayırt edilebilirlik (1.4), klavye erişimi (2.1), yeterli zaman (2.2), nöbet güvenliği (2.3), navigasyon kolaylığı (2.4), okunabilirlik (3.1), tahmin edilebilirlik (3.2), girdi yardımı (3.3) ve uyumluluk (4.1). Her kriter için test senaryoları oluşturuyor ve doğruluyoruz.
Radix UI Primitifleri ile Erişilebilir Bileşenler
Radix UI, erişilebilirlik için sıfırdan tasarlanmış headless UI primitifleridir. Dialog, Dropdown Menu, Select, Tooltip, Tabs, Accordion, Toggle, Popover ve daha fazlası: her biri ARIA pattern'lerine tam uyumlu, klavye navigasyonu dahili, focus yönetimi otomatik. Radix UI kullanarak baştan doğru yapılmış erişilebilir bileşenler oluşturuyoruz. Stil esnekliği sayesinde tasarımınızdan ödün vermeden tam erişilebilirlik sağlıyoruz.
ARIA Rolleri ve Etiketleri
Doğru ARIA (Accessible Rich Internet Applications) kullanımı, yardımcı teknolojilerin arayüzünüzü anlamasını sağlar. aria-label, aria-labelledby, aria-describedby, aria-live, aria-expanded, aria-hidden, role='alert', role='dialog', role='navigation' gibi ARIA özelliklerini anlamlı ve doğru şekilde uyguluyoruz. Gereksiz ARIA kullanımından kaçınıyoruz. İlk kural: doğal HTML elementi yeterliyse ARIA kullanma.
Focus Yönetimi ve Klavye Navigasyonu
Tab sırası mantıklı ve öngörülebilir. Focus görünür ve belirgin (minimum 2px outline, yüksek kontrastlı). Modal açıldığında focus modal içine kilitlenir (focus trap), kapatıldığında tetikleyici elemente geri döner. Skip navigation linkleri sayfa başında yer alır. Tüm etkileşimli elementler Enter ve Space ile çalışır. Dropdown menülerde ok tuşları ile navigasyon desteklenir. Custom bileşenler roving tabindex pattern'i kullanır.
Renk Kontrastı ve Görsel Erişilebilirlik
Normal metin için minimum 4.5:1, büyük metin için minimum 3:1 kontrast oranı. UI bileşenleri ve grafik elementler için minimum 3:1 kontrast. Renk tek başına bilgi taşımaz: her renk kodlu bilgi yanında ikon veya metin alternatifi bulunur. Dark mode ve light mode'da kontrast oranları ayrı ayrı doğrulanır. Forced colors mode (Windows Yüksek Kontrast) desteği sağlanır.
Hareket Duyarlılığı ve Animasyon Kontrolü
prefers-reduced-motion medya sorgusu ile kullanıcının işletim sistemi tercihine saygı gösteriyoruz. Animasyonlar azaltılır veya tamamen devre dışı bırakılır. Otomatik oynatılan içerik yoktur: tüm hareket kullanıcı tarafından tetiklenir. Paralaks efektleri, sonsuz kaydırma ve büyük ölçekli geçiş animasyonları reduced-motion modunda kaldırılır. Vestibular bozuklukları olan kullanıcılar için güvenli bir deneyim sunuyoruz.
Otomatik ve Manuel Erişilebilirlik Testleri
axe-core entegrasyonu ile CI/CD pipeline'ında otomatik erişilebilirlik testleri. Her pull request'te erişilebilirlik ihlalleri kontrol edilir. Lighthouse Accessibility skoru izlenir. Ancak otomatik testler tüm sorunların sadece %30-40'ını yakalar. Bu nedenle NVDA, VoiceOver ve JAWS ekran okuyucularıyla manuel testler gerçekleştiriyoruz. Gerçek klavye navigasyonu testi, zoom testi (400%'e kadar) ve mobil erişilebilirlik testi yapıyoruz.
Erişilebilirlik Bildirimi ve Dokümantasyon
WCAG 2.1 AA uyumluluk bildirimi (Accessibility Statement) hazırlıyoruz. Bildirimde desteklenen standartlar, bilinen kısıtlamalar, test metodolojisi ve geri bildirim mekanizması yer alır. VPAT (Voluntary Product Accessibility Template) dokümanı oluşturuyoruz. Geliştirici ekibiniz için erişilebilirlik rehberi ve bileşenler için erişilebilirlik notları hazırlıyoruz. Sürdürülebilir erişilebilirlik için ekibinizi eğitiyoruz.
Neler dahil?
Teknik Altyapı
- WCAG 2.1 AA uyumluluk denetimi
- Radix UI bileşen entegrasyonu
- ARIA rol ve etiket uygulaması
- Focus yönetimi ve tab sırası
- Skip navigation linkleri
- Semantic HTML yapılandırması
Görsel ve Etkileşim
- Renk kontrastı düzeltmeleri (4.5:1)
- Focus göstergesi tasarımı
- prefers-reduced-motion desteği
- Dark/light mode kontrast doğrulaması
- Responsive zoom desteği (400%)
- Forced colors mode uyumluluğu
Test ve Dokümantasyon
- axe-core CI/CD entegrasyonu
- Ekran okuyucu ile manuel test
- Klavye navigasyon testi
- Erişilebilirlik bildirimi (VPAT)
- Geliştirici erişilebilirlik rehberi
- Aylık erişilebilirlik raporu
Nasıl çalışıyoruz?
Tipik proje süreci: İlk 2 hafta kapsamlı denetim, 4. haftaya kadar bileşen düzeltmeleri, 6. haftada tam AA uyumluluk ve dokümantasyon.
Erişilebilirlik Denetimi
Mevcut sitenizi veya uygulamanızı WCAG 2.1 AA kriterlerine göre kapsamlı bir şekilde denetliyoruz. axe-core, Lighthouse ve WAVE ile otomatik tarama, NVDA ve VoiceOver ile manuel test. Her sayfa ve bileşen için ihlal raporu çıkarıyoruz. Sorunları kritik, yüksek, orta ve düşük olarak önceliklendiriyoruz.
Strateji ve Yol Haritası
Denetim sonuçlarına dayanarak erişilebilirlik yol haritası oluşturuyoruz. Hangi sorunlar önce düzeltilecek, hangi bileşenler yeniden yazılacak, hangi alanlar Radix UI ile değiştirilecek. Her adım net. Zaman çizelgesi, kaynak ihtiyacı ve beklenen uyumluluk seviyeleri belirlenir.
Bileşen Geliştirme ve Düzeltme
Erişilebilirliği ihlal eden bileşenler Radix UI primitifleri ile yeniden oluşturulur veya mevcut bileşenler düzeltilir. ARIA rolleri, klavye navigasyonu, focus yönetimi ve renk kontrastı her bileşende tek tek uygulanır. Her düzeltme birim testleri ile doğrulanır.
Ekran Okuyucu ve Klavye Testi
Tüm sayfalar ve etkileşim akışları gerçek ekran okuyucularla test edilir. NVDA (Windows), VoiceOver (macOS/iOS) ve TalkBack (Android) ile kullanıcı senaryoları yürütülür. Klavye ile tüm sayfa navigasyonu, form doldurma ve etkileşimler doğrulanır.
Dokümantasyon ve Eğitim
Erişilebilirlik bildirimi, VPAT dokümanı ve geliştirici rehberi hazırlanır. Ekibinize erişilebilirlik eğitimi verilir: ARIA kullanımı, bileşen tasarımı, test metodları. Yeni bileşenlerin erişilebilir geliştirilmesi için checklist ve şablonlar sunulur.
Sürekli İzleme ve İyileştirme
CI/CD pipeline'ına axe-core entegrasyonu ile her deploy öncesi otomatik erişilebilirlik kontrolü. Aylık erişilebilirlik raporu: yeni sorunlar, düzeltilen ihlaller, uyumluluk seviyesi. WCAG güncellemeleri ve yeni tarayıcı/ekran okuyucu sürümleri takip edilir. Erişilebilirlik sürekli bir süreçtir, biz bu süreci yönetiriz.
Fark nerede?
Megis Erişilebilirlik Yaklaşımı
- WCAG 2.1 AA tam uyumluluk, kriter kriter doğrulama
- Radix UI ile baştan doğru yapılmış bileşenler
- Otomatik + manuel test (axe-core + ekran okuyucu)
- Focus yönetimi, skip nav, roving tabindex
- prefers-reduced-motion ve forced colors desteği
- Erişilebilirlik bildirimi ve ekip eğitimi
Geleneksel Yaklaşım
- Sadece Lighthouse skoru kontrolü
- Custom bileşen, ARIA eksik veya yanlış
- Sadece otomatik test, manuel doğrulama yok
- Focus görünmez, tab sırası kaotik
- Animasyonlar kontrol edilemez
- Dokümantasyon ve eğitim yok
Başarı hikayeleri
Fintech Uygulaması: Sıfırdan WCAG 2.1 AA Uyumluluk
E-Ticaret Platformu: Erişilebilir Alışveriş Deneyimi
Sık sorulan sorular
Dijital ürünlerinizi herkese açın.
Ücretsiz analiz ve danışmanlık için iletişime geçin. Projenizi birlikte büyütelim.
Ücretsiz Erişilebilirlik Taraması Alın