Blog
Mert Özen'in yazılım geliştirme, backend, frontend ve DevOps üzerine blog yazıları.
CDK Drag and Drop: cdkDrag, cdkDropList, Sıralanabilir Liste ve Listeler Arası Taşıma
CDK Drag and Drop'ta cdkDropList ve cdkDrag sürüklemeyi yönetir, array'i sen değiştirirsin: moveItemInArray ve transferArrayItem'ı kopyaya uygulayıp signal'e set et, satırları kimlikle track et. CDK klavyeyle sıralama sunmaz; Bookstore'da okuma listesi ve kurumsal sevkiyat planına buton alternatifi ekliyor, taşınan satırda kaybolan focus'u, tutamak ve touch-action ile dokunmatik davranışı ve 500 satırda yeniden render maliyetini ölçüyoruz.
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.
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.
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.
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.
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.
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ığı.
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.
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.
Form Tasarımı: Label Yerleşimi, Hata Mesajları, Inline Validation ve Uzun Form'ları Bölmek
İyi bir form az alan sorar, label'ı alanın üstünde görünür tutar, kullanıcı yazmayı bitirmeden hata göstermez ve hatada ne olduğunu ve nasıl düzeleceğini söyleyip focus'u özete taşır. Bookstore'un teslimat formunu 16 alandan 6'ya, yazılacak 150 karakterden 54'e indiriyor; floating label, yıldız, her tuşta doğrulama, "Invalid" mesajı ve paste engelini ölçüp düzeltiyor, WCAG 2.2'nin Redundant Entry ve Accessible Authentication kriterlerini forma uyguluyoruz.
Color ve Contrast: Palet Kurmak, Semantic Renkler, OKLCH ve WCAG Contrast Oranları
Bir arayüz paleti marka rengi, nötr skala ve semantic renklerden oluşur; OKLCH ile aynı açıklık adımlarını kullanınca her rengin aynı numaralı tonu beyaza karşı neredeyse aynı kontrastı verir. Bookstore kataloğunda WCAG 2.2 oranlarını kendi script'imiz ve axe-core ile ölçüyor, 8 başarısız metni ve yalnız renkle gösterilen stok durumunu düzeltiyor, dark mode'u ters çevirmeden yeniden ayarlıyor ve APCA'nın bugünkü durumunu anlatıyoruz.