Figma
OpenCodeList
Synonyme: Liste, Aufzählung, Auflistung
Ähnliche Komponenten: Table, Accordion
Die Komponente kann jedoch bereits genutzt werden. Wir arbeiten daran, die Dokumentation so schnell wie möglich zu vervollständigen.
Kurzbeschreibung
Listen strukturieren verwandte Inhalte in geordneten, ungeordneten oder beschreibenden Listen für bessere Lesbarkeit und Übersichtlichkeit.
Beispiele
Nummerierte Liste
Code anzeigen
<ol class="kern-list kern-list--number">
<li>Wir wollen den digital zugänglichen Staat: barrierefrei, transparent und intuitiv nutzbar für alle Bürger:innen, Institutionen und Unternehmen im Land.</li>
<li>Darum arbeiten wir länderübergreifend an einem technologisch unabhängigen Open Source Design System für Kommunal- bis Bundesebene.</li>
<li>So befähigen wir Umsetzende, effizient digitale Verwaltungslösungen zu entwickeln, die durch die Qualität und Vereinheitlichung auf das Serviceerlebnis und Vertrauen der Nutzer:innen einzahlen.</li>
</ol>Kleine Liste
Code anzeigen
<ul class="kern-list kern-list--bullet kern-list--small">
<li>Wir wollen den digital zugänglichen Staat: barrierefrei, transparent und intuitiv nutzbar für alle Bürger:innen, Institutionen und Unternehmen im Land</li>
<li>Darum arbeiten wir länderübergreifend an einem technologisch unabhängigen Open Source Design System für Kommunal- bis Bundesebene</li>
<li>So befähigen wir Umsetzende, effizient digitale Verwaltungslösungen zu entwickeln, die durch die Qualität und Vereinheitlichung auf das Serviceerlebnis und Vertrauen der Nutzer:innen einzahlen</li>
</ul>Große Liste
Code anzeigen
<ul class="kern-list kern-list--bullet kern-list--large">
<li>Wir wollen den digital zugänglichen Staat: barrierefrei, transparent und intuitiv nutzbar für alle Bürger:innen, Institutionen und Unternehmen im Land</li>
<li>Darum arbeiten wir länderübergreifend an einem technologisch unabhängigen Open Source Design System für Kommunal- bis Bundesebene</li>
<li>So befähigen wir Umsetzende, effizient digitale Verwaltungslösungen zu entwickeln, die durch die Qualität und Vereinheitlichung auf das Serviceerlebnis und Vertrauen der Nutzer:innen einzahlen</li>
</ul>Link-Liste
Code anzeigen
<ul class="kern-list">
<li>
<a class="kern-link" href="#">
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
Ein weitere Link
</a>
</li>
<li>
<a class="kern-link" href="#">
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
Dataport Homepage
</a>
</li>
<li>
<a class="kern-link" href="#">
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
Link zu Dokumentation
</a>
</li>
<li>
<a class="kern-link" href="#">
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
More
</a>
</li>
</ul>Kleine Link-Liste
Code anzeigen
<ul class="kern-list kern-list--small">
<li>
<a class="kern-link" href="#">
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
Ein weitere Link
</a>
</li>
<li>
<a class="kern-link" href="#">
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
Dataport Homepage
</a>
</li>
<li>
<a class="kern-link" href="#">
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
Link zu Dokumentation
</a>
</li>
<li>
<a class="kern-link" href="#">
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
More
</a>
</li>
</ul>Horizontale Link-Liste
Code anzeigen
<ul class="kern-list kern-list--horizontal">
<li>
<a class="kern-link" href="#">
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
Ein weitere Link
</a>
</li>
<li>
<a class="kern-link" href="#">
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
Dataport Homepage
</a>
</li>
<li>
<a class="kern-link" href="#">
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
Link zu Dokumentation
</a>
</li>
<li>
<a class="kern-link" href="#">
<span class="kern-icon kern-icon--arrow-forward" aria-hidden="true"></span>
More
</a>
</li>
</ul>Beschreibung
Listen sind ein fundamentales Element zur Strukturierung von Inhalten. Sie helfen dabei, zusammengehörige Informationen übersichtlich zu präsentieren und die Lesbarkeit zu verbessern.
Verwendungsregeln
Folgt...
Do's and Don'ts
Folgt...
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:
WCAG 3.3.2
Link-Texte in Listen sind aussagekräftig
Bestanden
Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:
WCAG 1.1.1
Icons in Listen haben korrekte ARIA-Behandlung
WCAG 1.3.1
Listen verwenden semantische HTML-Strukturen
WCAG 1.3.1
Verschachtelte Listen sind korrekt strukturiert
WCAG 1.4.1
Listen-Marker werden nicht nur durch Farbe unterschieden
WCAG 1.4.6
Listen-Text erfüllt das minimale Kontrastverhältnis
WCAG 2.1.1
Interaktive Listen-Elemente sind per Tastatur bedienbar
WCAG 2.4.3
Fokusreihenfolge in Listen verläuft logisch
WCAG 2.4.13
Fokuszustände in Listen sind deutlich sichtbar
WCAG 2.5.5
Interaktive Listen-Elemente haben ausreichende Mindestgröße
WCAG 4.1.1
Listen haben valide HTML-Struktur
Listen müssen semantisch korrekt strukturiert sein, um für alle Nutzer:innen zugänglich zu sein. Screenreader erkennen Listen automatisch und geben deren Struktur wieder.