İçerik · Task list

Görev listesi

Çok parçalı bir başvuruda hangi bölümün tamamlandığını gösterir.

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

Örnekler

Temel Canlı örnek

Kişisel bilgiler Tamamlandı
Belgeleri yükleyin Başlanmadı

HTML kodunu göster

<ol class="trds-gorev-listesi">
  <li class="trds-gorev-listesi__oge">
    <a href="#" aria-describedby="g1">Kişisel bilgiler</a>
    <span class="trds-etiket trds-etiket--yesil" id="g1">Tamamlandı</span>
  </li>
  <li class="trds-gorev-listesi__oge">
    <a href="#" aria-describedby="g2">Belgeleri yükleyin</a>
    <span class="trds-etiket trds-etiket--gri" id="g2">Başlanmadı</span>
  </li>
</ol>

Ne zaman kullanılır

Kullanıcı başvuruyu birden çok oturumda tamamlıyorsa kullanın.
Kısa ve doğrusal bir formda kullanmayın.

Erişilebilirlik

Durum etiketi aria-describedby ile göreve bağlanır.
Durumu yalnız renkle göstermeyin. Metin de yazın.

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

Kaynak

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