Erişilebilir web formları oluşturmak artık sadece bir uyumluluk kontrolü kutucuğu değil; kullanıcı deneyiminin temel bir yönüdür. Ekran okuyuculara güvenen kullanıcılar için, form gönderiminden sonra beliren statik doğrulama mesajları rahatsız edici olabilir veya tamamen kaçırılabilir. Sorunsuz erişilebilirliğin anahtarı ARIA Canlı Bölgelerinde yatar. React'ta bu bölgelerden yararlanarak geliştiriciler, kullanıcılar form öğeleriyle etkileşim kurarken onlara anında ve müdahaleci olmayan geri bildirim sağlayabilir; bu da yardımcı teknolojilerin hataları veya başarıları gerçek zamanlı olarak duyurmasını sağlar.
ARIA Canlı Bölgelerini Anlamak
Temelinde bir ARIA canlı bölgesi, aria-live özniteliğine sahip bir öğedir. Bu, yardımcı teknolojilere bu bölgedeki içeriğin dinamik olduğunu ve kullanıcı etkileşimi olmadan değişebileceğini bildirir. Ekran okuyucular bu değişiklikleri kullanıcıya otomatik olarak duyuracaktır. Öznitelik üç temel değer kabul eder:
off: Duyuru yok (varsayılan davranış).polite: Ekran okuyucu, değişikliği duyurmadan önce mevcut konuşmanın bitmesini bekler. Bu, genel doğrulama mesajları için idealdir.assertive: Ekran okuyucu, değişikliği hemen duyurmak için mevcut konuşmayı keser. Bunu nadiren kullanın; genellikle ödeme hataları gibi kritik hatalar için kullanılır.
React ve Dinamik İçerikle İlgili Zorluklar
Geleneksel bir DOM manipülasyonu senaryosunda, bir <div> öğesine aria-live özniteliğini eklemek basittir. Ancak React'ın render paradigmaları karmaşıklık getirir. Durum değiştiğinde React sanal DOM'u yeniden render eder. Bir hata mesajının görünürlüğünü CSS veya koşullu render kullanarak basitçe değiştirirsek, ekran okuyucular değişiklikleri her zaman algılamayabilir; özellikle de öğe DOM'dan tamamen kaldırılırsa veya DOM yapısı erişilebilirlik ağacında bir güncellemeyi tetikleyecek kadar önemli ölçüde değişmezse.
Ayrıca, yalnızca görsel ipuçlarına (örneğin kenarlığın kırmızıya dönmesi) güvenmek, ekranı göremeyen kullanıcıları dışarıda bırakır. Görsel stilden bağımsız olarak, durum değişikliklerini yardımcı teknoloji katmanına ileten özel bir mekanizmaya ihtiyacımız var.
Kullanılabilir Bir Doğrulama Hook'u Uygulama
İlgililik alanlarının temiz bir şekilde ayrılmasını ve uygulamamız genelinde tutarlılığı sağlamak için özel bir React hook'u oluşturalım. Bu hook, doğrulama mantığını yönetecek ve form bileşenlerimize gerekli ARIA özniteliklerini sunacaktır.
import { useState, useMemo } from 'react';
export const useFormValidation = (initialValue, rules) => {
const [value, setValue] = useState(initialValue);
const [touched, setTouched] = useState(false);
// Kurallara göre hata durumunu hesapla
const error = useMemo(() => {
if (!touched) return null;
for (const rule of rules) {
const result = rule.validator(value);
if (result !== true) return result; // Hata mesajını döndür
}
return null;
}, [value, touched, rules]);
return {
value,
setValue,
touched,
setTouched,
error,
ariaProps: {
'aria-invalid': !!error,
'aria-describedby': error ? 'error-message' : undefined
}
};
};Bu örnekte hook, girdinin değerini yönetir ve kullanıcının girdiyle etkileşime girip girmediğini (touched) izler. error dizesini yalnızca alan dokunulduğunda hesaplar. Kritik olarak, bir ariaProps nesnesi döndürür. Bu nesne, aria-invalid özniteliğini hatanın varlığına (truthiness) ve aria-describedby özniteliğini hata mesajını gösterecek öğenin kimliğine bağlar.
Form Bileşenini Oluşturma
Mantığımız hazır olduğuna göre, arayüzü oluşturalım. İki temel öğeye ihtiyacımız var: dinamik doğrulama özniteliklerini alan girdi alanı ve mesajı gösteren canlı bölge.
import { useFormValidation } from './useFormValidation';
const EmailField = () => {
const { value, setValue, touched, setTouched, error, ariaProps } = useFormValidation(
'',
[
{
validator: (val) => val.includes('@') || '@ sembolü içermelidir',
},
{
validator: (val) => val.includes('.') || 'Nokta içermelidir',
}
]
);
return (
<div className="form-group">
<label htmlFor="email">E-posta Adresi</label>
<input
id="email"
type="email"
value={value}
onChange={(e) => setValue(e.target.value)}
onBlur={() => setTouched(true)}
{...ariaProps}
/>
{error && (
<div
id="error-message"
aria-live="polite"
className="error-text"
>
{error}
</div>
)}
</div>
);
};Erişilebilirlik akışı şöyledir: Kullanıcı girdiden ayrıldığında (onBlur), touched true olur. Doğrulama başarısız olursa, error durumu güncellenir. React yeniden render eder ve <div id="error-message"> aria-live="polite" özniteliğiyle DOM'da görünür. Bu öğe artık bir mesajla mevcut olduğundan, ekran okuyucu "@ sembolü içermelidir" diye duyurur. Kullanıcı e-postayı düzeltirse, hata mesajı kaldırılır ve ekran okuyucu, ekran okuyucunun yapılandırmasına bağlı olarak girdinin geçerli olduğunu duyurabilir.
Üretim İçin En İyi Uygulamalar
Bu deseni daha büyük bir uygulamada uygularken aşağıdakileri göz önünde bulundurun:
- Aşırı Duyurudan Kaçının: Her tuş vuruşu için
aria-live="assertive"kullanmayın. Bu, ekran okuyucu kullanıcıları için gürültü kargaşası yaratır. Bunu yalnızca kritik ve zaman duyarlı hatalar için saklayın. - Açık Hata Özetleri: Satır içi doğrulamanın yanı sıra,
aria-live="polite"özniteliğine sahip ve tüm mevcut hataları listeleyen formun üst kısmında bir özet bölgesi düşünün. Bu, kullanıcıların hataları düzeltmeden önce sorunların kapsamını anlamalarına yardımcı olur. - Gerçek Yardımcı Teknolojilerle Test Edin: Görsel kontroller yetersizdir. Duyuru zamanlamasının doğal ve rahatsız edici olmadığını sağlamak için Windows'ta NVDA veya macOS'ta VoiceOver ile formlarınızı test edin.
Sonuç
Dinamik ARIA canlı bölgelerini React formlarına entegre etmek, görsel tasarım ile işlevsel erişilebilirlik arasındaki boşluğu doldurmanın güçlü bir yoludur. Doğrulama mantığını kullanıcı arayüzü sunumundan ayırarak ve durum değişikliklerini yardımcı teknolojilere açıkça ileterek, yalnızca uyumlu değil, herkes için gerçekten kullanılabilir formlar oluştururuz. Geliştiriciler olarak sorumluluğumuz piksellerin ötesine geçer; her etkileşimin tüm kullanıcılar tarafından algılanabilir, kullanılabilir ve anlaşılır olmasını sağlamayı kapsar.