Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
Accessibility Nedir ve Neden Zorunlu? WCAG 2.2, POUR, A/AA/AAA ve Türkiye ile AB'deki Yükümlülükler
Accessibility, bir ürünün engeli olan insanlar dahil herkes tarafından kullanılabilmesidir ve bugün Türkiye'de 2025/10 sayılı Genelge, AB'de European Accessibility Act ile hukuki bir yükümlülük; ikisinin de teknik ölçütü pratikte WCAG 2.2 AA. WCAG'in POUR, guideline, success criterion ve seviye yapısını, 2.2'deki değişiklikleri ve Genelge ile EAA'nın geliştiriciye etkisini anlatıyor; Bookstore için seri boyunca kullanacağımız lab'ı kurup ilk axe taramasını yapıyoruz.
WCAG 2.2'yi Geliştirici Gözüyle Okumak: En Sık Düşülen Kriterler ve Bookstore Audit'i
Lighthouse'un 100 accessibility puanı yalnız otomatik ölçülebilen kısmın temiz olduğunu söyler; non-text contrast, autocomplete, placeholder'ın label sayılması ve focus yönetimi gibi sorunları ancak manuel audit bulur. WebAIM Million 2026 verisiyle en sık düşülen sorunları, 100 puanlı Bookstore'da bulunan on iki sorunu, ilk düzeltmeleri, WCAG 2.2'nin yeni kriterlerinin ölçümünü ve bir accessibility statement sayfası taslağını anlatıyor.
Keyboard Navigation ve Focus Yönetimi: Tab Sırası, :focus-visible, Skip Link, Focus Trap, inert ve Roving Tabindex
Klavye kullanıcısı için focus her zaman görünür olmalı, mantıklı sırayla ilerlemeli ve odaktaki element kaybolduğunda bilinçli olarak bir yere taşınmalı. Bookstore'u yalnız klavyeyle kullanıp ölçüyoruz: SPA'da skip link'in base href tuzağı, sticky header'ın focus'u örtmesi ve scroll-padding, native dialog'un focus trap'i ve silinen satırdan sonra focus, native radio ile roving tabindex, Angular router'da route değişiminde focus ve sayfa başlığı.
WAI-ARIA'yı Doğru Kullanmak: Role, State, Property, Accessible Name ve "Kötü ARIA'dan Hiç ARIA İyidir"
ARIA bir element'in accessibility tree'deki adını, role'ünü ve durumunu değiştirir ama davranış eklemez; native element varsa önce o kullanılır. Chromium'dan accessible name kaynaklarını ölçüyor, aynı adı taşıyan butonlara 2.5.3'e uygun bağlam veriyor, aria-hidden, aria-expanded, aria-current, aria-invalid ve aria-describedby'ı Bookstore'da uyguluyor ve state ile ekranın ayrıştığı bir CSS hatasını yakalıyoruz.
Dinamik İçerik ve Screen Reader Bildirimleri: Live Region'lar, ariaNotify(), Form Hataları, Toast ve Loading State'leri
Focus'u taşımayan mesajlar (sonuç sayısı, "sepete eklendi", hata sayısı) screen reader'a live region ya da ariaNotify() ile bildirilir ve live region değişiklikten önce DOM'da olmalıdır. Bookstore'da @if içindeki role="status" tuzağını ölçüyor, sonuç sayısını aria-busy ile duyuruyor, ariaNotify()'ı CDK LiveAnnouncer yedeğiyle kullanıyor, hata özetine ve sipariş onayına focus veriyor, toast'ları 2.2.1 ve 4.1.3 açısından değerlendiriyoruz.
Screen Reader ile Test Etmek: NVDA, VoiceOver ve TalkBack Temel Komutları, Accessibility Tree Okumak
Screen reader kullanıcıları sayfayı çoğu zaman heading, landmark ve link listelerinden gezer; bu yüzden test, browse mode ile focus mode farkını bilmek ve tree'den beklenen konuşmayı önceden yazmakla başlar. NVDA, VoiceOver ve TalkBack'in temel komutlarını, WebAIM 2026 anketini, Chromium tree'sinden element listeleri çıkarmayı, Bookstore'a search landmark'ı ve kitap heading'leri eklemeyi ve manuel oturum için bir test script'i üretmeyi anlatıyoruz.
Angular'da Accessible Component'ler: Angular Aria, CDK a11y, Material ve Kendi Combobox'ını Yazmamak
Combobox, tabs gibi karmaşık widget'lar için sıra şudur: native element, sonra Angular Material, sonra headless Angular Aria (22.0.0'dan beri stabil), en son CDK primitive'leri. Bookstore'a Angular Aria ile arama önerileri ve kitap sekmeleri ekliyor, kütüphanenin bize bıraktığı üç kararı ve gizli panel CSS'ini ölçüyor, Signal Forms'un aria-invalid yazmadığını gösterip hata bağlantısını kuruyoruz.
Accessibility Test Otomasyonu: axe-core, Lighthouse, Playwright ve ESLint ile CI'da a11y Kontrolü ve Otomasyonun Sınırları
Accessibility'yi CI'da tek bir araçla değil katmanlarla korursun: angular-eslint, component test'te axe, gerçek tarayıcıda sayfa ve state taraması, regression alarmı olarak Lighthouse ve hâlâ gerekli olan manuel test. Bookstore'da yalnız bir state'te görünen gerçek bir ihlali buluyor, mevcut borcu baseline'layıp yeni ihlalde build'i kıran bir GitHub Actions kapısı kuruyor ve Bakanlık kontrol listesi için A seviyesi bir rapor üretiyoruz.