Komponenten

Das Design System liefert die zur Umsetzung der Oberflächen benötigten Designs und Codes. Dabei spezifiziert es zunächst die kleinsten, nicht mehr weiter teilbaren UI-Elemente, die Sie in den jeweiligen Abschnitten zur Typografie oder zu Formularelementen finden.

Aus diesen werden wiederum größeren Einheiten bis hin zu Design Patterns zusammengesetzt, die Sie beispielhaft dem Abschnitt Muster entnehmen können. Gleichzeitig definiert das Design System ein Gestaltungsraster, welches dann in Kombination mit den Mustern die Masken ergibt. In diese werden dann die ebenso fertig vorliegenden standardisierten Seitenabschnitte wie Header und Footer eingebunden, die gemeinsam die jeweiligen Seiten bilden.

Dabei ist das Design System bewusst als lebendes System angelegt, das anhand der aktuellen und zukünftigen Bedarfe ständig weiterentwickelt wird. Anwender des Design Systems sind daher zur aktiven Mitarbeit eingeladen, falls die bisher ausgearbeiteten Elemente und Muster nicht alle Bedarfe abdecken, sodass diese seitens des Design Systems ausgearbeitet und geliefert werden können.

Grundsätzlich gelten die DESY-Regeln für alle Komponenten und Inhalte sämtlicher Anwendungen, die zur Nutzung dieses Design Systems angehalten sind. Die Verwendungszwecke und Qualitätsanforderungen sind bewusst Technologie- und Plattform-agnostisch formuliert, die Gestaltung erfolgt immer nach dem Mobile-First-Prinzip.

Das bedeutet, dass die Prinzipien, Designs & Codes für alle Komponenten nicht nur für das stationäre Web gelten, sondern auch für mobile Nutzungskontexte anwendbar sind. Bitte beachten Sie, dass wir aber zu mobilen Komponenten keine Codes liefern können, da diese höchst Plattform-spezifisch sind.

Es wird vorausgesetzt, dass JavaScript aktiviert und ausführbar ist, um alle Funktionen der Komponenten nutzen zu können. Weitere Mindest-Voraussetzungen sind in „Betriebssysteme, Geräte, Browser und Bildschirmgrößen“ beschrieben.

Der grundlegende Seitenaufbau wird über HTML-Strukturelemente erreicht. Diese gliedern Seiten in voneinander abgrenzbare Bereiche, die jeweils einem dedizierten übergeordneten Zweck dienen und die ihre eigenständige Gestaltung erhalten.

Bestimmte Bereiche wie die Header und Footer der Seiten sollen aus Gründen der Lernbarkeit und Wiedererkennbarkeit über alle Seiten hinweg einen gleichen Aufbau haben. Selbstverständlich ist es aber hier möglich, Inhalte anhand der jeweiligen Bedarfe hinzuzufügen oder zu entfernen, wie z. B. eigene Links je nach Notwendigkeit im Header und Footer der Seiten.

Andere Bereiche wie der eigentliche Seiteninhalt (main) sind im Rahmen der gestalterischen Vorgaben für Gestaltungsraster, Farben, Formen, Typografie etc. frei zu gestalten, so wie es den fachlichen Anforderungen der jeweiligen Maske entspricht.

»Webdesign ist zu 95% Typografie«

Die meisten digitalen Angebote des Zolls sind eher an Formular-Prozessen und der Darstellung und Bearbeitung strukturierter Daten orientiert. Dennoch gelten hier die gleichen Regeln zur guten Lesetypografie und der damit einhergehenden Förderung des Textverständnisses wie bei eher Textinhalts-getriebenen Webseiten.

Formular-Elemente ermöglichen die Ein- und Ausgabe von Daten in der jeweiligen Anwendung. Dabei basiert die verständliche Nutzerführung auf der stets konsistenten Darstellung und dem vorhersehbaren Verhalten der Interaktionselemente innerhalb der gesamten Anwendung. Das bedingt, dass die Oberfläche gleiche Aktionen mit gleichen Interaktionselementen darstellt, aber auch dass die Betätigung identischer Interaktionselemente zu identischen Ergebnissen führt.

Zur schnellen Erlernbarkeit der Nutzerschnittstelle und zur Wiedererkennbarkeit gehört, dass der Wortlaut aller Beschriftungen eines Interaktionselementes über die gesamte Anwendung hinweg eindeutig und identisch ist. Beispielweise wird die Schaltfläche zum Speichern der eingegebenen Daten konsequent „Speichern“ benannt und nicht beliebig zwischen den Wörtern „Speichern“ und „Sichern“ gewechselt. Hierdurch wird Nutzenden die Sicherheit gegeben, wie sich die Anwendung beim Auslösen einer Aktion verhält.

Auf kleineren Bildschirmgrößen können Probleme mit dem zur Verfügung stehenden Platz für die Darstellung von beschrifteten Interaktionselementen auftreten. In solchen Fällen ist es möglich, zum Beispiel in Datentabellen mit einem responsiven Pattern den Text eines Buttons durch ein äquivalentes Icon zu ersetzen.

Submit-Buttons

Laut HTML-Spezifikation ist es möglich, Formulare auch ohne Submit-Button nur durch die Enter-Taste abzusenden, wenn das Formular aus einem einzigen, einzeiligen Eingabefeld <input type=text"> besteht (vgl. HTML 4.10.21.2 Implicit submission). Ein Beispiel hierfür ist die Suche in diesem Design System, die theoretisch auch ohne Submit-Button funktionieren würde. Allerdings wäre dies ein Verstoß gegen WCAG 3.2.2 und wird daher nicht empfohlen.

Zulässige und unzulässige Formularelemente

Das Design System definiert alle Formular-Elemente die geeignet sind, den aktuell bekannten Bedarf des Zoll-Portals und der angeschlossenen Fachverfahren abzudecken. Eine Reihe von mit HTML5 möglichen Formular-Elementen halten wir aber für ungeeignet, da sie Probleme in der barrierefreien Nutzung verursachen können.

input type="number" wird in relevanten Screenreadern leider nur unzureichend unterstützt, daher verzichten wir aus Gründen der Barrierefreiheit auf die Verwendung und spezifizieren dieses Element nicht weiter.

input type="date" wird in relevanten Screenreadern ebenso unzureichend unterstützt und bietet in verschiedenen Browsern und assistiven Hilfsmitteln nur mangelnde Unterstützung für Tastatur- oder Sprachbedienung. Daher verzichten wir aus Gründen der Barrierefreiheit auf die Verwendung und spezifizieren dieses Element nicht weiter.
Für Datumseingaben benutzen Sie bitte den input type="text", idealerweise kombiniert mit einem geeigneten Regulären Ausdruck in der Formular-Validierung. Für Datumseingaben mit kalendarischer Ansicht benutzen Sie bitte die Datepicker-Komponente.

datalist und eine Reihe anderer in der Ausschlußliste genannten Elemente reagieren nicht auf benutzerdefinierte Farben oder Textgrößen und führen so zu Problemen für Menschen mit Sehbehinderung.