React'te Erişilebilir Yükleme: Sıçramalar ve Kafa Karışıklığı Olmadan

Bir düğme "Yükleniyor..." olarak değişmesi küçük bir detay gibi görünse de, formun güvenilir mi yoksa bozuk mu olduğunu belirler. Giriş ve doğrulama arayüzlerinde gördüğüm asıl sorun HTTP isteği değil: kullanıcı eyleminin alındığını bilmiyor, içerik sıçrıyor ve ekran okuyucu hiçbir sinyal almıyor.

React'te yükleme durumunu arayüz sözleşmesinin bir parçası olarak ele almalısın. Ekran şeklini korumalı, neler olduğunu açıklamalı ve işlem uzun sürerse çıkış sunmalısın. Bu, iletişim formu için de, geçici e-posta doğrulaması için de geçerli.

Sağlam bir yükleme deneyimi en az dört açık duruma sahip olmalı:

Hazır: Denetimler etkileşime açık, kullanıcı harekete geçebilir.

Gönderiliyor: İstek işleniyor, düğme devre dışı, metin değişti, aria-busy veya aria-live bölgesi durumu duyuruyor.

Başarı: Yanıt geldi, geri bildirim gösterildi, form sıfırlandı veya yönlendirme başladı.

Hata: Sorun bildiriliyor, kullanıcı yeniden deneyebilir, mesaj erişilebilir.

Praktik olarak, yükleme sırasında düğmenin genişliğini sabit tutarak sıçramaları engelle. `width` ve `min-height` belirle. Ekran okuyucu için `aria-live="polite"` ve `aria-busy` ekle. Zaman aşımı koy, 5 saniye sonra kullanıcıya "Biraz uzun sürüyor" diye uyar veya iptal seçeneği sun.

Bu, Silviu'nun dev.to yazısında detaylı şekilde açıklanmış. Erişilebilirlik ve tasarım ayrı şeyler değil; yükleme durumu ikisinin de merkezinde.