Geri bildirim · Error summary
Hata özeti
Sayfadaki tüm hataları en üstte toplar ve her birine bağlantı verir.
- CSS
- kararlı
- JavaScript
- odak yönetimi
- React
- kararlı
- Vue
- kararlı
Örnekler
T.C. kimlik numarası 11 hane olmalıdır
Doğum tarihi bugünden sonra olamaz
HTML kodunu göster
<div class="kiris-hata-ozeti" data-kiris="hata-ozeti" role="alert" tabindex="-1">
<h2 class="kiris-hata-ozeti__baslik">Bir sorun var</h2>
<ul class="kiris-hata-ozeti__liste">
<li><a href="#kimlik">T.C. kimlik numarası 11 hane olmalıdır</a></li>
<li><a href="#dogum">Doğum tarihi bugünden sonra olamaz</a></li>
</ul>
</div>
<div class="kiris-alan kiris-alan--hata">
<label class="kiris-etiket" for="kimlik">T.C. kimlik numaranız</label>
<p class="kiris-hata" id="kimlik-hata">T.C. kimlik numarası 11 hane olmalıdır</p>
<input class="kiris-girdi kiris-girdi--11" id="kimlik" name="kimlik" type="text" inputmode="numeric" value="1234" aria-describedby="kimlik-hata" aria-invalid="true">
</div>
<div class="kiris-alan kiris-alan--hata">
<label class="kiris-etiket" for="dogum">Doğum tarihiniz</label>
<p class="kiris-hata" id="dogum-hata">Doğum tarihi bugünden sonra olamaz</p>
<input class="kiris-girdi kiris-girdi--10" id="dogum" name="dogum" type="text" inputmode="numeric" value="01.01.2090" aria-describedby="dogum-hata" aria-invalid="true">
</div>
Ne zaman kullanılır
- Sunucu doğrulaması hata döndüğünde sayfanın en üstüne koyun.
- Hataları sayfadaki alan sırasına göre listeleyin.
Erişilebilirlik
- Sayfa yüklendiğinde odak hata özetine gider.
role="alert"ile duyurulur.- Her madde hatalı alana giden bir bağlantıdır.
- Sayfa başlığı da "Hata: " ile başlar.
Karşılanan WCAG 2.2 ölçütleri 2.4.33.3.14.1.3
Kaynak
Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, DK, NO.
Bu bileşenin kodu depoda:
- Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
- CSS katmanları,
kiris-error-summaryile başlayan sınıflar - Davranış betiği,
data-kiris="hata-ozeti"başlatıcısı