FigmaOpenCode

Task List

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

Kurzbeschreibung

Eine Task List zeigt alle Aufgaben, die von den Nutzenden erledigt werden müssen, und kennzeichnet den jeweiligen Status der Aufgabe.

Beispiele

Default

Code anzeigen

<div class="kern-task-list">
<div class="kern-task-list__header">
  <h2 class="kern-heading-medium">Persönliche Daten</h2>
</div>

<ul class="kern-task-list__list">
<li class="kern-task-list__item">
	<span class="kern-number">1</span>
	<div class="kern-task-list__title" id="task1-title">
		<a href="#" class="kern-link kern-link--stretched" aria-describedby="task1-status">
			Angaben zur Person machen
		</a>
		<div class="kern-task-list__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-label kern-label--small">Erledigt</span>
			</span>
		</div>
	</div>
</li>
<li class="kern-task-list__item">
	<span class="kern-number">2</span>
	<div class="kern-task-list__title" id="task2-title">
		<a href="#" class="kern-link kern-link--stretched" aria-describedby="task2-status">
			Aktuelle Meldeadresse angeben
		</a>
		<div class="kern-task-list__status" id="task2-status">
			<span class="kern-badge kern-badge--warning">
				<span class="kern-label kern-label--small">Unvollständig</span>
			</span>
		</div>
	</div>
</li>
<li class="kern-task-list__item">
	<span class="kern-number">3</span>
	<div class="kern-task-list__title" id="task3-title">
		<p class="kern-body">Versandadresse meiner Briefwahlunterlagen angeben</p>
		<div class="kern-task-list__status" id="task3-status">
			<span class="kern-badge kern-badge--info">
				<span class="kern-label kern-label--small">Noch nicht zu bearbeiten</span>
			</span>
		</div>
	</div>
</li>
</ul>

<div class="kern-task-list__header">
<h2 class="kern-heading-medium">Zusammenfassung</h2>
</div>

<ul class="kern-task-list__list">
  <li class="kern-task-list__item">
  <span class="kern-number">4</span>
    <div class="kern-task-list__title">
      <p class="kern-body">Wenn Sie alle Angaben gemacht haben, können Sie diese hier noch einmal prüfen.</p>
      <div class="kern-task-list__status">
        <span class="kern-badge kern-badge--info">
          <span class="kern-label kern-label--small">Noch nicht zu bearbeiten</span>
        </span>
      </div>
    </div>
  </li>
</ul>
</div>

Ohne Nummerierung

Code anzeigen

<div class="kern-task-list">
<div class="kern-task-list__header">
  <h2 class="kern-heading-medium">Persönliche Daten</h2>
</div>

<ul class="kern-task-list__list">
<li class="kern-task-list__item">
	<div class="kern-task-list__title" id="task1-title">
		<a href="#" class="kern-link kern-link--stretched" aria-describedby="task3-status">
			Angaben zur Person machen
		</a>
		<div class="kern-task-list__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-label kern-label--small">Erledigt</span>
			</span>
		</div>
	</div>
</li>
<li class="kern-task-list__item">
	<div class="kern-task-list__title" id="task2-title">
		<a href="#" class="kern-link kern-link--stretched" aria-describedby="task4-status">
			Aktuelle Meldeadresse angeben
		</a>
		<div class="kern-task-list__status" id="task4-status">
			<span class="kern-badge kern-badge--warning">
				<span class="kern-label kern-label--small">Unvollständig</span>
			</span>
		</div>
	</div>
</li>
<li class="kern-task-list__item">
	<div class="kern-task-list__title" id="task3-title">
		<p class="kern-body">Versandadresse meiner Briefwahlunterlagen angeben</p>
		<div class="kern-task-list__status" id="task3-status">
			<span class="kern-badge kern-badge--info">
				<span class="kern-label kern-label--small">Noch nicht zu bearbeiten</span>
			</span>
		</div>
	</div>
</li>
</ul>

<div class="kern-task-list__header">
<h2 class="kern-heading-medium">Zusammenfassung</h2>
</div>

<ul class="kern-task-list__list">
  <li class="kern-task-list__item">
    <div class="kern-task-list__title" id="task3-title">
      <p class="kern-body">Wenn Sie alle Angaben gemacht haben, können Sie diese hier noch einmal prüfen.</p>
      <div class="kern-task-list__status" id="task3-status">
        <span class="kern-badge kern-badge--info">
          <span class="kern-label kern-label--small">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

Die Barrierefreiheit unserer Komponenten wird nach der Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) geprüft, die auf der europäischen Norm EN 301 549 basiert. Diese legt Anforderungen an die Zugänglichkeit von Informations- und Kommunikationstechnologien (IKT) fest und orientiert sich an den WCAG 2.1. Die für Webinhalte relevanten Kriterien sind in Kapitel 9 der EN 301 549 beschrieben und übernehmen die Nummerierung der WCAG-Kriterien, ergänzt um eine führende 9 – z. B. wird aus WCAG 2.4.3 „Focus Order“ das Kriterium 9.2.4.3.

Da bereits an einer Aktualisierung der EN 301 549 gearbeitet wird, haben wir uns entschieden, alle dort referenzierten Kriterien schon jetzt anhand der WCAG 2.2 zu prüfen und zu dokumentieren. So stellen wir sicher, dass unser Design-System den kommenden europäischen Standards voraus ist und langfristig barrierefrei bleibt.

Implementierungsabhängig

Unsere Komponenten wurden einzeln auf Barrierefreiheit geprüft und sind für sich genommen barrierefrei. Bei der Nutzung bzw. Kombination mehrerer Komponenten müssen jedoch bestimmte Aspekte beachtet werden, um die Barrierefreiheit im Gesamtkontext sicherzustellen:

Implementierungsabhängig

WCAG 3.3.2

Tasks sind eindeutig beschriftet und verständlich

Bestanden

Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:

Bestanden

WCAG 1.3.1

Taskliste ist programmatisch als Liste erkennbar

Bestanden

WCAG 1.4.1

Task-Status wird nicht nur durch Farbe vermittelt

Bestanden

WCAG 1.4.6

Text in der Taskliste erfüllt das minimale Kontrastverhältnis von 7:1

Bestanden

WCAG 1.4.11

Task-Indikatoren heben sich mit mindestens 3:1 Kontrast ab

Bestanden

WCAG 2.1.1

Taskliste ist vollständig per Tastatur bedienbar

Bestanden

WCAG 2.4.3

Die Navigationsreihenfolge in der Liste ist logisch

Bestanden

WCAG 2.4.13

Fokussierbare Elemente haben einen sichtbaren Fokuszustand

Bestanden

WCAG 4.1.2

Links und Status-Badges sind programmatisch verknüpft