Figma
OpenCodeInput File
Synonyme: Upload, File input, File uploader, File upload
Ähnliche Komponenten: -
Kurzbeschreibung
Input File ermöglicht das Hochladen einer oder mehrerer Dateien.
Beispiele
Default
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="input-file">Datei hochladen</label>
<div class="kern-hint" id="input-file-hint">Erlaubte Formate: JPG, PNG, PDF. Maximale Dateigröße sind 350 MB.</div>
<input class="kern-form-input__input" id="input-file" name="inputFile" type="file" aria-describedby="input-file-hint">
</div>Disabled
Vermeide disabled, da es die Zugänglichkeit einschränkt. Weitere Informationen zur Barrierefreiheit
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="input-file4">Datei hochladen</label>
<div class="kern-hint" id="input-file-hint4">Erlaubte Formate: JPG, PNG, PDF. Maximale Dateigröße sind 350 MB.</div>
<input class="kern-form-input__input" id="input-file4" name="inputFile" type="file" disabled aria-describedby="input-file-hint4">
</div>Optional
Code anzeigen
<div class="kern-form-input">
<label class="kern-label" for="input-file6">Datei hochladen
<span class="kern-label__optional">- Optional</span>
</label>
<div class="kern-hint" id="input-file-hint">Erlaubte Formate: JPG, PNG, PDF. Maximale Dateigröße sind 350 MB.</div>
<input class="kern-form-input__input" id="input-file" name="inputFile" type="file" aria-describedby="input-file-hint">
</div>Fehlermeldung
Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-label" for="input-file5">Datei hochladen</label>
<div class="kern-hint" id="input-file-hint5">Erlaubte Formate: JPG, PNG, PDF. Maximale Dateigröße sind 350 MB.</div>
<input class="kern-form-input__input kern-form-input__input--error" id="input-file5" name="inputFile" type="file" aria-describedby="input-file-hint5 file-input-error">
<p class="kern-error" id="file-input-error" role="alert">
<span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
<span class="kern-body">Die Datei ist zu groß. Bitte laden Sie eine Datei mit maximal 350 MB hoch.</span>
</p>
</div>Beschreibung
Nutzende haben zwei Möglichkeiten, eine oder mehrere Dateien hochzuladen:
- Ziehen und Ablegen: Nutzende können Dateien mit der Maus über die Ablagefläche ziehen und dort ablegen. Sobald der Mauszeiger mit den Dateien über der Fläche ist, ändert sich die Anzeige, um zu signalisieren, dass die Dateien abgelegt werden können.
- „Datei auswählen“-Button: Mit Klick auf den Button öffnet sich der Datei-Browser und Nutzende können navigieren, um die richtige Datei auszuwählen. Wurde nur eine Datei ausgewählt, wird sie neben dem „Datei auswählen“-Button mit Name und Dateiendung angezeigt. Sind es mehrere Dateien, erscheint eine zusammenfassende Beschreibung, z. B. „4 Dateien ausgewählt“.
Das Label des Inputs sollte kurz, prägnant und eindeutig darauf hinweisen, welcher Inhalt hochgeladen werden soll. Zum Beispiel zeigt „Passbild hochladen“ unmittelbar, was erwartet wird. Neben dem Label kann bei Bedarf eine Kennzeichnung als „optional“ erfolgen. Im Hinweistext werden die möglichen Dateiformate und die maximale Dateigröße angegeben.
Hinsichtlich der Breite kann das Input File angepasst werden, um sich in das Gesamtdesign der Anwendung einzufügen, was zur Einheitlichkeit und Nutzerfreundlichkeit beiträgt.
Weitere Hinweise findest du unter Breite und Höhe der Eingabefelder. Input File kann alle unter Input beschriebenen Zustände, mit Ausnahme von „readonly“, annehmen.
Verwendungsregeln
Input File wird in Formularen verwendet. Fordere Nutzende nur dann auf, etwas hochzuladen, wenn es für den Dienst entscheidend ist. Frage dich zunächst:
- Sind die Informationen notwendig, um den Dienst durchzuführen?
- Können Nutzende die Dateien selber bereitstellen?
- Können die Informationen von einer API oder aus dem Profil des Nutzenden verwendet werden?
Wenn du Nutzende bitten musst, etwas hochzuladen, dann sollten dies Dinge sein, die nur sie selbst bereitstellen können. Beispiele:
- Vom Nutzenden gesammelte Daten
- Ein aktuelles Passfoto
- Dokumente, z. B. Belege für Leistungen
Sei flexibel bei den Formaten, die Nutzende hochladen dürfen. Sobald sie etwas hochladen, sollten die Daten automatisch auf Fehler geprüft werden. Wenn es Fehler gibt, beschreibe diese möglichst gut, damit die Nutzenden sie beheben können.
Dos und Don’ts
Gebe immer die erlaubten Dateitypen und die maximale Größe präzise an.
Weitere Hinweise
- Können mehrere Dateien hochgeladen werden, sollten diese thematisch zusammengehören. Andernfalls verwende mehrere Input File-Komponenten.
- Siehe auch allgemeine Dos und Don'ts für Input
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.1
Upload-Fehler werden klar identifiziert
WCAG 3.3.2
Datei-Upload hat eindeutige Beschriftungen und Anleitungen
WCAG 4.1.3
Upload-Status wird programmatisch vermittelt
Bestanden
Folgendes ist bereits geprüft und erfüllt, vorausgesetzt die Komponente wird wie in den Code-Beispielen gezeigt verwendet:
WCAG 1.3.1
File-Input ist programmatisch mit Label verknüpft
WCAG 1.3.1
Fehlermeldung ist programmatisch mit File-Input verknüpft
WCAG 1.4.1
Upload-Status wird nicht nur durch Farbe vermittelt
WCAG 1.4.6
Text im Datei-Upload erfüllt das minimale Kontrastverhältnis von 7:1
WCAG 1.4.11
Upload-Bereich hebt sich mit mindestens 3:1 Kontrast vom Umfeld ab
WCAG 2.1.1
Datei-Upload ist vollständig per Tastatur bedienbar
WCAG 2.4.3
Die Navigationsreihenfolge ist logisch und intuitiv
WCAG 2.4.13
Upload-Elemente haben einen sichtbaren Fokuszustand
WCAG 4.1.3
Fehlermeldung wird als Status-Nachricht gekennzeichnet