FileDropzone

Rol ve anlam

Alanın içinde gerçek bir “Dosya seçin” düğmesi (Button) vardır; dosya seçiciyi açar ve açıklama ile hata aria-describedby ile ona da bağlıdır. Görsel olarak gizli yerel input type="file" etiketle adlandırılır ve dosyaları formla gönderir, ama sekme sırasında değildir. Alan yalnızca fareyle sürükleme ve tıklama içindir; klavye ve ekran okuyucu düğmeyi kullanır. Reddedilen dosyalar birden fazlaysa “Eklenemeyen dosyalar” adlı listede her biri ayrı satırdadır. Seçilen dosyalar “Seçilen dosyalar” adlı bir listededir; her Kaldır düğmesi dosya adını taşır.

Klavye

Tuş	Davranış
Tab	“Dosya seçin” düğmesine; sonra her Yeniden yükle ve Kaldır düğmesine.
Enter, Space	Dosya seçiciyi açar.

Odak

Odak halkası “Dosya seçin” düğmesinin çevresine çizilir. Bir dosya kaldırılınca ya da yüklemesi iptal edilince odak “Dosya seçin” düğmesine döner, böylece kaybolan düğmeyle birlikte kaybolmaz.

Ekran okuyucu

Örnek	Okunan
Düğme	“Dosya seçin, düğme, PDF ya da görsel, her biri en fazla 2 MB.”
Dosya eklenince	“2 dosya eklendi”
Kaldırınca	“a.pdf kaldırıldı”
Reddedilince	“a.txt: bu dosya türü kabul edilmiyor”
Yüklemeler bitince	“1 / 2 dosya yüklendi, 1 dosya yüklenemedi”
Yüklenirken kaldırma düğmesi	“Yüklemeyi iptal et: a.pdf, düğme”

Kontrast

Kesikli kenarlık zemine karşı 3:1, metinler 4,5:1 kontrast taşır.

WCAG 2.2

Ölçüt	FileDropzone nasıl karşılar	Ürün ekibi ne yapmalı
2.1.1 Klavye	Yerel dosya girişi.	—
2.5.7 Sürükleme hareketleri	Sürüklemek zorunlu değil; seçici her zaman var.	—
3.3.1 Hata tanımlama	Her reddedilen dosya için neden.	Sunucu hatalarını error ile yazın.
4.1.3 Durum mesajları	Ekleme ve kaldırma duyurulur.	Yükleme ilerlemesini duyurun.