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

Temel Canlı örnek

Bir sorun var

T.C. kimlik numarası 11 hane olmalıdır
Doğum tarihi bugünden sonra olamaz

HTML kodunu göster

<div class="trds-hata-ozeti" data-trds="hata-ozeti" role="alert" tabindex="-1">
  <h2 class="trds-hata-ozeti__baslik">Bir sorun var</h2>
  <ul class="trds-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>

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.3 3.3.1 4.1.3

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, DK, NO.