İçerik · Summary list

Özet listesi

Kullanıcının girdiği bilgileri gönderim öncesinde tek sayfada gösterir.

CSS: kararlı
JavaScript: gerekmiyor
React: kararlı
Vue: kararlı

Örnekler

Cevaplarınızı kontrol edin Canlı örnek

Ad soyad: Ayşe Yılmaz; Değiştir ad soyad
Doğum tarihi: 27.03.1997; Değiştir doğum tarihi

HTML kodunu göster

<dl class="trds-ozet">
  <div class="trds-ozet__satir">
    <dt class="trds-ozet__anahtar">Ad soyad</dt>
    <dd class="trds-ozet__deger">Ayşe Yılmaz</dd>
    <dd class="trds-ozet__eylem"><a href="#">Değiştir<span class="trds-gorsel-gizli"> ad soyad</span></a></dd>
  </div>
  <div class="trds-ozet__satir">
    <dt class="trds-ozet__anahtar">Doğum tarihi</dt>
    <dd class="trds-ozet__deger">27.03.1997</dd>
    <dd class="trds-ozet__eylem"><a href="#">Değiştir<span class="trds-gorsel-gizli"> doğum tarihi</span></a></dd>
  </div>
</dl>

Ne zaman kullanılır

Her form akışının sonunda "Cevaplarınızı kontrol edin" sayfasında kullanın.
Her satır düzenleme bağlantısı taşır.

Erişilebilirlik

<dl>, <dt> ve <dd> etiketlerini kullanın.
Düzenleme bağlantısı hangi alanı düzenlediğini gizli metinle söyler.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 2.4.4 3.3.4

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: UK, FR, IE, JP, DE.