FigmaOpenCode

Task List

Synonyme: Aufgabenliste, Todo-Liste
Ähnliche Komponenten: Summary

Kurzbeschreibung

Zeigt alle Aufgaben, die von den Nutzenden erledigt werden müssen und kennzeichnet den jeweiligen Status der Aufgabe.

Beispiele

Default TaskList

Code anzeigen

<div class="kern-tasklist">
<div class="kern-tasklist__header">
  <h2 class="kern-heading">Aufgabengruppe 1</h2>
</div>

<ul class="kern-tasklist__list">
  <li class="kern-tasklist__item">
    <span class="kern-number"></span>
    <div class="kern-tasklist__title" id="task1-title">
      <a href="#" class="kern-link" aria-describedby="task1-status">Aufgabe xy erledigen</a>
      <div class="kern-tasklist__status" id="task1-status">
        <span class="kern-badge kern-badge--success">
          <span class="kern-icon kern-icon--success kern-icon--sm" aria-hidden="true"></span>
          <span class="kern-badge__title">Erledigt</span>
        </span>
      </div>
    </div>
  </li>
  
  <li class="kern-tasklist__item">
    <span class="kern-number"></span>
    <div class="kern-tasklist__title" id="task2-title">
      <a href="#" class="kern-link" aria-describedby="task2-status">Aufgabe xy erledigen</a>
      <div class="kern-tasklist__status" id="task2-status">
        <span class="kern-badge kern-badge--warning">
          <span class="kern-badge__title">Warning</span>
        </span>
      </div>
    </div>
  </li>
  
  <li class="kern-tasklist__item">
    <span class="kern-number"></span>
    <div class="kern-tasklist__title" id="task3-title">
      <p class="kern-text">Aufgabe xy erledigen</p>
      <div class="kern-tasklist__status" id="task3-status">
        <span class="kern-badge kern-badge--info">
          <span class="kern-badge__title">Noch nicht zu bearbeiten</span>
        </span>
      </div>
    </div>
  </li>
</ul>

<div class="kern-tasklist__header">
  <h2 class="kern-heading">Zusammenfassung</h2>
</div>

<ul class="kern-tasklist__list">
  <li class="kern-tasklist__item">
    <span class="kern-number"></span>
    <div class="kern-tasklist__title" id="task3-title">
      <p class="kern-text">Wenn Sie alle Angaben gemacht haben, können Sie diese noch einmal prüfen.</p>
      <div class="kern-tasklist__status" id="task3-status">
        <span class="kern-badge kern-badge--info">
          <span class="kern-badge__title">Noch nicht zu bearbeiten</span>
        </span>
      </div>
    </div>
  </li>
</ul>
</div>

Unordered TaskList

Code anzeigen

<div class="kern-tasklist">
<div class="kern-tasklist__header">
  <h2 class="kern-heading">Aufgabengruppe 1</h2>
</div>

<ul class="kern-tasklist__list">
  <li class="kern-tasklist__item">
    <div class="kern-tasklist__title" id="task1-title">
      <a href="#" class="kern-link" aria-describedby="task3-status">Aufgabe xy erledigen</a>
      <div class="kern-tasklist__status" id="task3-status">
        <span class="kern-badge kern-badge--success">
          <span class="kern-icon kern-icon--success kern-icon--sm" aria-hidden="true"></span>
          <span class="kern-badge__title">Erledigt</span>
        </span>
      </div>
    </div>
  </li>
  
  <li class="kern-tasklist__item">
    <div class="kern-tasklist__title" id="task2-title">
      <a href="#" class="kern-link" aria-describedby="task4-status">Aufgabe xy erledigen</a>
      <div class="kern-tasklist__status" id="task4-status">
        <span class="kern-badge kern-badge--warning">
          <span class="kern-badge__title">Warning</span>
        </span>
      </div>
    </div>
  </li>
  
  <li class="kern-tasklist__item">
    <div class="kern-tasklist__title" id="task3-title">
      <p class="kern-text">Aufgabe xy erledigen</p>
      <div class="kern-tasklist__status" id="task3-status">
        <span class="kern-badge kern-badge--info">
          <span class="kern-badge__title">Noch nicht zu bearbeiten</span>
        </span>
      </div>
    </div>
  </li>
</ul>

<div class="kern-tasklist__header">
  <h2 class="kern-heading">Zusammenfassung</h2>
</div>

<ul class="kern-tasklist__list">
  <li class="kern-tasklist__item">
    <div class="kern-tasklist__title" id="task3-title">
      <p class="kern-text">Wenn Sie alle Angaben gemacht haben, können Sie diese noch einmal prüfen.</p>
      <div class="kern-tasklist__status" id="task3-status">
        <span class="kern-badge kern-badge--info">
          <span class="kern-badge__title">Noch nicht zu bearbeiten</span>
        </span>
      </div>
    </div>
  </li>
</ul>
</div>

Beschreibung

Eine Task List besteht aus einer Überschrift und einem oder mehreren Task List-Elementen. Meistens macht es Sinn, eine Task List-Gruppe zu verwenden. Es werden dann mindestens zwei Task Lists gruppiert. Dies ist zu empfehlen, wenn man ans Ende des Prozesses noch eine Zusammenfassung stellen möchte.

Das Task List-Element enthält die Beschreibung einer Aufgabe. Die Beschreibung verlinkt zum Aufgaben-Formular. Daneben kann sie optional folgende Bestandteile haben:

• eine Nummerierung,
• eine Information über den Status.

Der Status der Aufgabe kann sein:

• neu: die Aufgabe wurde bisher noch nicht bearbeitet und kann bearbeitet werden. Dieser Status wird nicht mit einem Badge angezeigt.
• unvollständig: die Aufgabe wurde bereits bearbeitet, aber unterbrochen. Das Task List-Element beinhaltet ein Badge im Status „Warnung“ und kann bearbeitet werden.
• erledigt: die Aufgabe wurde erfolgreich abgeschlossen, keine Fehler wurden validiert. Das Task List-Element beinhaltet ein Badge im Status „Erfolgreich“ und kann bearbeitet werden.
• noch nicht zu bearbeiten: um die Aufgabe zu bearbeiten, fehlen noch Informationen. Das Task List-Element beinhaltet ein Badge im Status „Information“ und kann nicht angeklickt werden.

Verwendungsregeln

Eine Task List oder Task List-Gruppe ist für längere Prozesse wie z.B. in Online-Diensten einzusetzen, in denen Nutzende über mehrere Schritte hinweg Aufgaben erledigen müssen. Unter einer Aufgabe wird die Eingabe von bestimmten Informationen verstanden. Platziere die Task List oder die Task List-Gruppe dabei auf einer eigenen Seite, die von jeder Stelle des Online-Dienstes aus schnell und leicht erreichbar ist.

Die Task List oder die Task List-Gruppe sollte eingesetzt werden, wenn

• die benötigten Informationen so umfangreich sind, dass sie nicht auf einer Seite eingegeben werden können, oder wenn es mehrere Aufgaben gibt
• für die Erledigung mehrere Sitzungen notwendig sind.
• die Aufgaben in einer beliebigen Reihenfolge erledigt werden können.

Fasse mehrere Aufgaben in Gruppen zusammen, um Nutzenden bei einer großen Anzahl von Aufgaben die Übersicht zu erleichtern. Wenn die Aufgaben durchnummeriert sind, wird es für Nutzende einfacher, sie abzuarbeiten. Erst wenn alle Aufgaben der Task List-Gruppe erledigt wurden, können die Nutzenden weiter fortschreiten, z.B. zu einer Zusammenfassung, um ihre Angaben zu überprüfen. Die letzte Gruppe der Task List-Gruppe sollte daher immer auf die Zusammenfassung verweisen.

Dos und Don’ts

• Es sollten nicht mehr als 7 Aufgaben in einer Task List sein.
• Halte auch die Anzahl der Gruppen in der Task List-Gruppe überschaubar.
• Formuliere die Bezeichnung der Gruppen und die Aufgaben kurz und verständlich. Für Nutzende mit Screenreadern könnte es sonst zu schwer werden, die Task List zu bedienen.
• Kommuniziere den korrekten Status, erfinde keine Status dazu.
• Verwende keine anderen Buttons/Aktionen innerhalb der Task List.
• Nummeriere die Aufgaben über die ganze Liste hinweg und fange nicht bei jeder Aufgabengruppe von vorne an. In Nutzertests wurde festgestellt, dass die durchlaufende Nummerierung in der Formularansicht sehr hilfreich ist, um die Übersicht zu behalten.

Barrierefreiheit

Diese Komponente erfüllt die formalen Eigenschaften (Größe, Kontrastverhältnis) für barrierefreie Dienste. Achte in der angewandten Nutzung darauf, dass die Aufgaben auch für Menschen mit kognitiven Beeinträchtigungen verständlich sind.

• Verwende das <ul>- oder <ol>-Element, um die Liste zu erstellen, und die <li>-Elemente, um die Aufgaben darzustellen.
• Stelle sicher, dass alle Aufgaben klar und prägnant beschrieben sind.
• Verwende keine Sonderzeichen als Icons innerhalb der Aufgaben, da diese vom Screenreader als Schrift interpretiert und vorgelesen werden können.
• Falls Sonderzeichen zwingend genutzt werden müssen, sollten diese über ein aria-hidden="true" für den Screenreader versteckt werden.
• Verwende das aria-describedby-Attribut, um zusätzliche Informationen mit den entsprechenden Aufgaben zu verknüpfen.