Geçtiğimiz çeyrekte, Bengaluru'da bir müşteri dashboard'ını denetledim. İlk bakışta her şey mükemmeldi: temiz Tailwind kodları, akıcı animasyonlar, Lighthouse'da 90 üstü puanlar. Ancak iki dakika içinde temel klavye navigasyonunda başarısız oldu. Tab sırası rastgele atlıyor, modallar odaklanmayı engelleyemiyor ve sadece ikon içeren butonların hiçbir etiketi yoktu. WCAG 2.2, yalnızca kurumsal sözleşmeler için yasal bir onay kutusu değildir. Bu, herkes için çalışan React arayüzleri oluşturmanın yoludur: ekran okuyucu kullananlar, yalnızca klavye ile gezenler, yavaş 4G'de yakınlaştırma yapanlar ve saat 23:00'te hata ayıklayan siz. Bu rehber, her birleştirme işleminden önce uyguladığım WCAG 2.2 React kalıplarını kapsıyor.
WCAG 2.2, React uygulamalarını doğrudan etkileyen yeni kriterler ekledi: odaklanmanın gizlenmemesi, sürükleme hareketleri, hedef boyut minimumları ve tutarlı yardım. React'in bileşen modeli, erişilebilirliği hem kolaylaştırır hem de bozmayı kolaylaştırır — iyi kalıpları paylaşılan bir Dialog bileşeninde kapsülleyebilirsiniz, ancak onClick ile bir div'i kırk dosyaya kopyalayıp yapıştırabilirsiniz. Hindistan'daki yasal ortam da hızla değişiyor. Devlet portalları ve fintech ürünleri, lansman öncesinde giderek daha fazla erişilebilirlik denetimi talep ediyor. Kimse sormasa bile, kapsayıcı arayüzler destek biletlerini azaltır — belirsiz hata mesajları ve bozuk odak yönetimi, gerçek arka uç hatalarından daha fazla 'form çalışmıyor' e-postası oluşturur.
React, varsayılan olarak erişilebilir bileşenler sunmaz. Bir etiketi odaklanabilir; bir Peki, etkili bir focus trap nasıl oluşturulur? İlk olarak, modal açıldığında odağı içindeki ilk odaklanabilir öğeye (genellikle kapatma düğmesi) taşıyın. Ardından, Tab tuşuna basıldığında odağın modal içinde döngü yapmasını sağlayın: son öğeden sonra ilk öğeye atlayın. Shift+Tab için de aynı mantık tersine çalışsın. Ayrıca, modal kapatıldığında odağı önceki konuma geri getirin. React'te bunu useEffect ve ref'lerle kolayca uygulayabilirsiniz. Örneğin, useFocusTrap adlı özel bir hook, modal bileşeninize odak yönetimini ekler. Bu hook, modal açıldığında odaklanılacak ilk öğeyi bulur, kapatıldığında ise odağı eski haline döndürür. WCAG 2.2'nin getirdiği bir diğer önemli kriter, hedef boyut minimumlarıdır. Dokunmatik cihazlarda ve küçük ekranlarda, tıklanabilir öğelerin en az 24x24 piksel olması gerekir. React'te bu, buton, bağlantı ve input gibi etkileşimli öğelerin CSS'te min-width ve min-height ile güvence altına alınması anlamına gelir. Ayrıca, boşluk da önemlidir: öğeler arasında en az 24 piksel boşluk bırakmak, yanlış tıklamaları önler. Tailwind kullanıyorsanız, min-w-6 ve min-h-6 sınıflarını kullanabilirsiniz. Ancak ikon butonlar gibi küçük öğelerde, padding ile boyutu artırmak daha iyidir. Son olarak, ekran okuyucu uyumluluğu için ARIA etiketlerini doğru kullanmak kritik. Her etkileşimli öğenin bir aria-label veya aria-labelledby ile tanımlandığından emin olun. Özellikle ikon butonlar, görünür metin içermediğinden, aria-label='Menüyü aç' gibi bir etiket mutlaka eklenmelidir. Ayrıca, canlı bölgeler (live regions) ile dinamik içerik güncellemelerini bildirin. React'te useState ve useEffect ile yönetilen bildirimler, aria-live='polite' ile duyurulabilir. Unutmayın, erişilebilirlik bir özellik değil, temel bir gerekliliktir. Bu kuralları uygulayarak, hem kullanıcı deneyimini iyileştirir hem de yasal uyumluluğu sağlarsınız. Kaynak: dev.toDetaylar ve Etkileri
Sistem Güvenliği
