İçerik · Process list

Süreç listesi

Bir işin adımlarını numaralı ve açıklamalı anlatır. Başvurudan önce okunur.

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

Örnekler

Üç adım Canlı örnek

Belgeleri hazırlayın
Kimlik kartı ve ikametgâh belgesi. İkisi de e-Devlet’ten alınır.
Başvuruyu doldurun
Form 10 dakika sürer. Kaydedip sonra devam edebilirsiniz.
Sonucu bekleyin
Sonuç 15 iş günü içinde e-Devlet’e düşer.

HTML kodunu göster

<ol class="trds-surec">
  <li class="trds-surec__adim"><h3 class="trds-surec__baslik">Belgeleri hazırlayın</h3><p class="trds-surec__metin">Kimlik kartı ve ikametgâh belgesi. İkisi de e-Devlet’ten alınır.</p></li>
  <li class="trds-surec__adim"><h3 class="trds-surec__baslik">Başvuruyu doldurun</h3><p class="trds-surec__metin">Form 10 dakika sürer. Kaydedip sonra devam edebilirsiniz.</p></li>
  <li class="trds-surec__adim"><h3 class="trds-surec__baslik">Sonucu bekleyin</h3><p class="trds-surec__metin">Sonuç 15 iş günü içinde e-Devlet’e düşer.</p></li>
</ol>

Ne zaman kullanılır

"Nasıl başvururum?" sayfalarında kullanın.
Form içinde ilerleme için adım göstergesi kullanın.

Erişilebilirlik

Sıralı liste kullanılır. Numara CSS ile gelir, ekran okuyucu listeden sayar.
Her adımın başlığı bir başlık ögesidir.

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

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: US, FR.