Änderungsprotokoll
DESY steht ab sofort unter der Open-Source-Lizenz der Europäischen Union (EUPL) und ist damit unter bestimmten Bedingungen öffentlich und frei verfügbar. Weitere Details hierzu finden Sie im Abschnitt „Lizenz und Urheberrecht“.
Das Design System wird als lebendes Dokument entwickelt. Es gilt immer der letzte veröffentlichte Stand, dieser kann und wird regelmäßig aktualisiert werden. Um eine stabile und referenzierbare Version zu bieten, gibt es die Long-Term Support-Version v10.2 LTS.
Version 11.2 (2025-10-24) 
Um Anwender des Design Systems noch besser in ihrer täglichen Arbeit zu unterstützen, haben wir in der Navigation einen neuen Menüpunkt „Konzeption & Redaktion“ eingeführt. Dort finden Sie ab sofort die zusammengefassten Hilfen zu inhaltlichen Aspekten, von bürgernaher Sprache bis hin zur allgemeinen Usability.
Wichtige Bug-Fixes & Änderungen
| Thema | Änderung | Link |
|---|
| HTML | Fehlende Labels für Tri-State-Checkboxes ergänzt. Leere th-Elemente wurden entweder mit einem visuell versteckten Text versehen oder durch td-Elemente ersetzt. | Tabelle |
| CSS | In den Farbdefinitionen hatte sich bei Light Blue – 40 eine falsche Abbildung eingeschlichen. Wir bitten dies zu entschuldigen und haben das Bild gegen das korrekte ausgetauscht. | Farben |
| HTML CSS Javascript | Das Tab-Interface verfügt jetzt über Scroll-Buttons, die das horizontale Scrollen der Tab-Liste erleichtern. Die Klassennamen wurden überarbeitet. | Tab-Interface |
Aktualisierungen
| Thema | Änderung | Link |
|---|
| HTML CSS | Zusätzliche Variante von lokalen Sprung-Links, um aus Inhaltsabschnitten längerer Seiten wie z. B. FAQs wieder an den Seitenanfang oder eine Übersicht zu verlinken. | Skip Links |
| Regeln | Die bisherigen Regeln zur Verwendung von Filtern in Datentabellen wurden allgemeiner gefasst, um sie universeller anwendbar für weitere Arten von strukturierten Daten zu machen. | Filter |
| Design CSS | Design-Dokumentation für Zustände von Bannern vervollständigt. Neues Interaction Design im Code umgesetzt. | Banner |
| Design CSS | Design-Dokumentation für Zustände von Pills vervollständigt. | Pill |
| Design CSS | Design-Dokumentation für Zustände von Tags vervollständigt. Neues Interaction Design im Code umgesetzt. | Tag |
| HTML CSS | Das Design für Buttons mit Login-Option wurde im Code umgesetzt. | Buttons mit Login-Option |
| HTML CSS | Neues Interaction Design für die Komponente Linkliste im Code umgesetzt. | Linklist |
| HTML CSS Javascript | Neues Interaction Design für die Komponente Upload im Code umgesetzt. Interaktionsverhalten über Javascript optimiert. | Upload |
| CSS | Neues Interaction Design für die Komponente Fortschrittsnavigation im Code umgesetzt. | Fortschrittsnavigation |
| HTML CSS Javascript | Neues Interaction Design für die Komponente Breadcrumbs im Code umgesetzt. Entfernung der Klassen .btn-secondary und .breadcrumb__btn-link vom Collapse-Button. Entfernung des Setzens und Entfernens der Klasse .breadcrumb__btn-link im Javascript. | Breadcrumbs |
| CSS | Neues Interaction Design für die Komponente Fußnote im Code umgesetzt. | Fußnote |
| CSS | Neues Interaction Design für die Komponente Bewertung im Code umgesetzt. | Bewertung |
Version 11.1 (2025-09-30)
In diesem Zwischen-Release wurde die Beschreibung unseres Liefermodells ergänzt und das neue Interaction-Design bei drei weiteren Komponenten umgesetzt.
Wichtige Bug-Fixes
| Thema | Änderung | Link |
|---|
| Javascript | Fehler eines aria-activedescendant Attributs ohne Wert wurde behoben. | Combobox |
| HTML CSS | Bei der Ausprägung "readonly" der Select-Komponente wurde das Chevron entfernt und der Beispieltext geändert. | Select |
Aktualisierungen
| Thema | Änderung | Link |
|---|
| Regeln | Die Beschreibung unseres Liefermodells wurde um wissenswerte Hintergrund-Informationen zum Prozeß der Erarbeitung neuer Komponenten ergänzt. | Wie erstellen wir die Komponenten? |
| HTML CSS | Zustände für interaktive Pills wurden hinzugefügt. | Pill |
| CSS | Für die Komponente Seitennavigation wurde das neue Interaction Design im Code umgesetzt. | Seitennavigation |
| CSS | Für die Komponente Input File wurde das neue Interaction Design im Code umgesetzt. | Input File |
| CSS | Für die Komponente Akkordeon wurde das neue Interaction Design im Code umgesetzt. | Akkordeon |
Version 11.0 (2025-09-23)
In dieser Version wurde das Design System unter EUPL gestellt.
Version 10.10 (2025-09-22)
In diesem Zwischen-Release wurden die Design-Dokumentation von einigen Komponenten vervollständigt.
Aktualisierungen
| Thema | Änderung | Link |
|---|
| Design CSS | Vervollständigung der Design-Dokumentation für Banner / Karussell, Bewertung, Blog-Artikel, Footer, Fortschrittsnavigation, Header & Navigation, Kacheln / Cards, Seitennavigation. | Komponenten |
Version 10.9 (2025-09-19)
In diesem Zwischen-Release wurden einige Fehler in der Dokumentation behoben und die Design-Dokumentation von Komponenten vervollständigt.
Wichtige Bug-Fixes
| Thema | Änderung | Link |
|---|
| HTML | Irrtümlicherweise hatten wir für verschiedene Komponenten wie Select einen readonly-Zustand definiert, der aber lt. HTML-Spezifikation nicht erlaubt ist. Wir haben die Dokumentation dahingehend geändert, dass in solchen Fällen ein nur darstellendes Textfeld mit readonly benutzt werden muss. | Select |
Aktualisierungen
| Thema | Änderung | Link |
|---|
| HTML CSS | Präzisierung der Vorgaben für Skip Links und Vervollständigung der Designs. | Skip Links |
| HTML | Präzisierung der Vorgaben zur Verwendung von title-Attributen in Icon-Buttons. | Button |
| CSS | Fehlerbehebungen in der Dokumentation und Vervollständigung der Design-Spezifikationen für Comboboxen, Checkboxen, Tri-State-Checkboxen, Radiobuttons, Select sowie kombiniertes Select mit Textfeld. | Komponenten |
Version 10.8 (2025-09-08)
Fehlerbehebungen
| Thema | Änderung | Link |
|---|
| CSS | Eine fehlerhafte Verteilung der Breakpoints bei der Komponente Seitennavigation wurde behoben. Der Breakpoint lg wurde auf xl gesetzt und machte die Anpassung von zwei Helfer-Klassen im Markup erforderlich. | Seitennavigation |
Aktualisierungen
| Thema | Änderung | Link |
|---|
| HTML CSS | Neue Varianten von Kacheln / Cards, die zusätzlich eine Action Bar oder eine Kombination aus Akkordeon und Action Bar beinhalten, wurden im Code umgesetzt. | Kacheln / Cards |
| CSS | Im CSS der Komponente Kacheln / Cards wurden die ergänzenden Modifier-Klassen "card--transparent" und "card--compact-vertical" für das Wrapper-div mit der Klasse "card" gesetzt. Das neue Interaction Design wurde im Code umgesetzt. | Kacheln / Cards |
| HTML CSS | Die neue Komponente Select mit Textfeld wurde einschließlich neuem Interaction Design im Code umgesetzt. | Select mit Textfeld |
| CSS | Für die Komponenten Textarea, Input Text, Input Password und Input Search wurde das neue Interaction Design im Code umgesetzt. | Textarea, Input Text, Input Password, Input Search |
| CSS | Für die Komponenten Input Checkbox und Input Radio wurde das neue Interaction Design im Code umgesetzt. | Input Checkbox, Input Radio |
| CSS | Für die Komponente Select wurde das neue Interaction Design im Code umgesetzt. | Select |
| CSS | Für die Komponente Header wurde das neue Interaction Design im Code umgesetzt. | Header |
| CSS | Für die Komponente Kontextmenü wurde das neue Interaction Design im Code umgesetzt. | Kontextmenü |
| CSS | Für die Komponente Paginierung wurde das neue Interaction Design im Code umgesetzt. | Paginierung |
| CSS | Vereinheitlichung des Verhaltens von Elementen mit den Klasse "current" bzw. "active" in den Komponenten Breadcrumbs, Header und Fortschrittsnavigation. Alle sind nun Links mit dem "aria-current" Attribut. | Breadcrumbs, Header, Fortschrittsnavigation |
| Komponenten | Neue Komponente mit einer nach Art einer Schublade herausfahrenden Seitenleiste z. B. für Filter. | Modal Drawer |
| Komponenten | Neue Komponente für QR-Codes. | QR-Code |
| Komponenten | Zusätzliche Variante von Akkordeons / Collapsibles, die nach oben öffnen. | Akkordeon |
| HTML | Die vorher getrennten Seiten zu Main, Section, Article & Aside wurden zu einer Seite zusammengefasst. | Strukturelemente |
| CSS | Vorgaben zur vertikalen Ausrichtung von Text- und Formularelementen zueinander in Tabellenzellen präzisiert. | Tabelle |
| Barrierefreiheit | Vorgaben zur Skalierbarkeit von Texten und responsiven Interfaces präzisiert. | Komponenten |
| Design | Fehlerbehebungen im Aufbau von Datentabellen und der Nummerierung von Punkten in den Design-Tabs. | Komponenten |
Version 10.7.1 (2025-08-14)
In diesem Zwischen-Release wurden im wesentlichen nur einige Fehler im CSS behoben und die Dokumentation einiger Komponenten vervollständigt.
Fehlerbehebungen
| Thema | Änderung | Link |
|---|
| CSS | Fehler in der Einbindung des Webfonts für die BundesSerif behoben. | Typografie |
| HTML | Nicht anwendbare Zustände von Texteingabefeldern entfernt. | Textarea, Input Text |
Aktualisierungen
| Thema | Änderung | Link |
|---|
| Komponenten | Neue Komponente mit der Kombination aus Select und zugeordnetem Textfeld. | Select mit Textfeld |
| HTML CSS | Zusätzliche Design-Spezifikationen für Inputs, die einen Button enthalten, z.B. zum Einblenden von Passwörtern oder zum Kopieren von Werten. | Input Text |
| Barrierefreiheit | Unnötig redundante versteckte Texte entfernt, die sich nur an Screenreader richteten. | Fortschrittsnavigation |
Version 10.7 (2025-08-08)
Wichtige Änderungen
| Thema | Änderung | Link |
|---|
| CSS JavaScript | Fehler in der Darstellung der Breadcrumbs auf mobilen Breakpoints behoben. | Breadcrumbs |
| JavaScript | Fehler bei der Bedienung der Combobox auf mobilen Endgeräten behoben. | Combobox |
| CSS | Falschen Abstand zwischen einzelner Checkbox und Info- oder Fehlertext behoben. | Checkbox |
| JavaScript | Fehler beim Pausieren und erneuten Starten der Banner/Karussell Komponente behoben. | Beispiel-Karussell |
Aktualisierungen
| Thema | Änderung | Link |
|---|
| CSS | Für die Button-Komponente wurde das neue Interaction Design im Code umgesetzt. | Buttons |
| HTML JavaScript | Implementierung der Funktionalität von Tri-State-Checkboxes zur Auswahl von Datensätzen in Tabellen. | Beispiel-Tabelle |
| HTML JavaScript | Beispielhafte Implementierung der Funktionalität einer Sortierung in Tabellen. | Beispiel-Tabelle |
| HTML CSS | Änderung des Bildformats zu .jpg zur Verringerung der Datengröße der Bilder und CSS-Anpassungen über bestehende Klassen zur Optimierung der Banner/Karussell-Komponente. | Beispiel-Karussell |
| Regeln | Neues Kapitel zur Verwendung und Barrierefreiheit von Animationen. | Animationen |
| Regeln | Überarbeitete Vorgaben für Paginierungen von Datentabellen. | Paginierung |
| Design | Design-Spezifikation für Tabellen vervollständigt. | Tabelle |
| Design | Design-Spezifikation für Banner und Karussells vervollständigt. | Banner |
| Design | Design-Spezifikation für Seitennavigation vervollständigt. | Seitennavigation |
| Design | Design-Spezifikation für Fortschrittsnavigation vervollständigt. | Fortschrittsnavigation |
| Design | Design-Spezifikation für Fußnoten vervollständigt. | Fußnoten |
| Design | Design-Spezifikation für input type="file" vervollständigt. | Input File |
| Design | Design-Spezifikation für Footer vervollständigt. | Footer |
| Design | Design-Spezifikation für Verifizierungscode vervollständigt. | Verifizierungscode |
| Design | Design-Spezifikation für Toggle Switches vervollständigt. | Toggle Switch |
Version 10.6 (2025-07-04)
Wichtige Änderungen
| Thema | Änderung | Link |
|---|
| HTML JavaScript | In der Header-Komponente wurde die Option eines Dropdown-Untermenüs entfernt. | Header |
Aktualisierungen
| Thema | Änderung | Link |
|---|
| CSS | Für die Link-Komponente wurde das neue Interaction Design im Code umgesetzt. | Link |
| CSS | Im CSS der Komponente Input Checkbox wurde die ergänzende Modifier-Klasse "form-check--single" für das Wrapper-div gesetzt. Bei einer einzelnen Checkbox werden Info-Text und Fehlertext oder ein Link (neues Beispiel) eingerückt. Ein weiteres neues Beispiel zeigt eine Verlinkung innerhalb des Labels. | Input Checkbox |
| HTML CSS | Das Design der Komponente „Hinweisboxen“ wurde im Code implementiert. | Hinweisboxen |
| Design | Design-Spezifikationen für Buttons mit Login-Optionen vervollständigt. | Buttons mit Login-Optionen |
Version 10.5 (2025-06-18)
| Thema | Änderung | Link |
|---|
| Content | Kontaktmöglichkeiten zum Servicedesk Zoll auf Fehlerseiten aktualisiert. | Fehlerseiten |
| CSS | Zusätzliche Styles für Haarlinien (<hr>), Radii und Schatten von Elementen und Komponenten. | Rahmen & Radius |
| HTML CSS | Weitere Fehlerzustände für input type="file" ergänzt. | Input File |
| HTML CSS | Designs für destruktive Zustände Zustände von Buttons ergänzt. | Button |
| Komponenten | Neue Komponente für Blog-Artikel und aktuelle Meldungen hinzugefügt. | Blog-Artikel |
| Design | Design-Spezifikation für Toggle Switches hinzugefügt. | Toggle Switch |
Version 10.4 (2025-06-05)
Der Hauptaugenmerk dieses Zwischen-Releases lag auf der Code-Stabilisierung und Bugfixes sowie dem Schließen von Lücken in der Dokumentation.
Wichtige Bug-Fixes
| Thema | Änderung | Link |
|---|
| Icons | Darstellungsfehler im Icon-Font wurden behoben und eine neue Version eingebunden. | Icons |
| CSS | Anpassungen im CSS, damit Überschriften in Akkordeon-Buttons dem vorgegebenen Design entsprechen. | Akkordeon |
| CSS | Anpassungen im CSS für den Fehlerzustand von Inputs mit Buttons in Kombination mit disabled und readonly. | Inputs mit Button |
| Komponenten | Entfall einer separaten mobilen Banner-Komponente, da identisch zur responsiven Desktop-Variante. | Banner / Karussell |
Änderungen und Aktualisierungen
| Thema | Änderung | Link |
|---|
| Design | Redaktionelle Überschriften außerhalb von Komponenten sind nun für die Ebenen H1 – H4 in der BundesSerif gesetzt. Die konkreten Auswirkungen der Änderungen können Sie hier bei der Nutzung des Design Systems beobachten, da hier dieselben Regeln angewendet werden. | Überschriften |
| Komponenten | Grundlegende Überarbeitung der Komponente aufgrund geänderter fachlicher Anforderungen. | Verifizierungscode |
| Komponenten | Weitere Ergänzung zu Verwendung, Code und Barrierefreiheit. | Loading Spinner |
| HTML CSS | Zusätzlicher Button mit Loading Spinner. | Button |
| HTML | Hinweise zur Reihenfolge von Werten in ID-Attributen ergänzt, Präzisierung der Vorgaben für Längenbegrenzungen bei Inputs per maxlength. | Formular-Elemente |
| HTML JavaScript | Änderungen im Code des Zeichenzählers, Hinweise zur Barrierefreiheit ergänzt. | Textarea |
Version 10.3 (2025-04-30)
Der Fokus dieses Releases lag im wesentlichen auf klareren Regeln zur Verwendung von Komponenten und inhaltlichen Ergänzungen sowie Fehlerbehebungen.
Wichtige Bug-Fixes
| Thema | Änderung | Link |
|---|
| HTML | In der vorherigen Version 10.2 befand sich der untere Skip Link im Footer an einer falschen Position im Layout und im Markup. Wir bitten diesen Fehler zu entschuldigen und haben ihn so korrigiert, dass der untere Skip Link nun wieder das letzte interaktive Element im Seitenbaum ist. | Footer |
| HTML | Markup-Struktur so geändert, dass das <nav>-Element die gesamte Komponente umfasst. | Fortschrittsnavigation |
Neuerungen & Aktualisierungen
| Thema | Änderung | Link |
|---|
| Barrierefreiheit | Erklärung zur Barrierefreiheit um Hinweise auf die Norm EN 17161 zur prozessualen Verankerung der Anforderungen im gesamten Projektlebenszyklus und die DIN SPEC 66336 zum Servicestandard der öffentlichen Verwaltung ergänzt. | Erklärung zur Barrierefreiheit |
| Komponenten | Weitere Hinweise zur Verwendung von Akkordeons als mögliche Alternative zu Tooltips. | Akkordeon |
| Komponenten | Neue Banner- und Karussell-Komponente, Code-Implementierung in den Ausprägungen „statisch“ und „dynamisch“. | Banner |
| HTML | Hinweise zur Verwendung von aria-current="page" zur Vermeidung rekursiver Links ergänzt. | Breadcrumbs |
| Komponenten | Ergänzungen zur Verwendung und zum responsiven Verhalten von Standard-Buttons; Entfernung obsoleter Vorgaben aus dem alten Benutzerschnittstellenkonzept (BSK). | Button |
| Beispiele | Anpassung der Fehlerseiten an den neuen Seitenrahmen des Redesigns. | Fehlerseiten |
| Design | Hinweise zum Interaction Design bei interaktiven Komponenten wie Akkordeon, Bewertung, Combobox, Fortschrittsnavigation, Kontextmenü, Subnavigation, Tab-Interface, Tooltip, Upload und Verifizierungscode ergänzt. | Komponenten / Muster |
| Komponenten | Inhaltliche Anforderungen für Lade-Animationen. Code-Implementierung des Loading Spinner Designs. Beispielhafte Einbindung des Loading Spinners in einem Button. | Loading Spinner, Button |
| Komponenten | Entfall der Blätter-Funktion für mobile Breakpoints. | Paginierung |
| Regeln | Weitere Einträge zu erwünschten und unerwünschten Formulierungen. | Kontrolliertes Vokabular |
| Barrierefreiheit | Wichtige Hinweise zur Verwendung von colspan und rowspan bei mehrdimensionalen Tabellen im Tab Barrierefreiheit ergänzt. | Tabellen |
| Komponenten | Grundlegende gestalterische und technische Überarbeitung der Komponente, geändertes Interaction Design; Präzisierung der Regeln zu erlaubten und nicht erlaubten Inhalten von Tooltips, expliziter Ausschluss der Verwendung von Markup aus Sicherheitsgründen. | Tooltip |
| Design | Neuer Abschnitt mit Regeln zu Silbentrennung und der Steuerung von Textumbrüchen. | Typografie |
| HTML CSS | Code-Implementierung des Redesigns von News-Artikeln. | News-Artikel |
| HTML CSS | Code-Implementierung des Redesigns von Fußnoten. | Fußnote |
| CSS | CSS Anpassung: Die Komponente passt sich in der Breite ihrem Eltern-Element an. Die klickbaren Elemente der Komponente haben nur noch eine Mindestbreite. | Bewertung |
| HTML | Code-seitige Anpassung des Beispiels für die Passwort-Anforderungen. | Input Password |
| HTML CSS | Code-Implementierung des Redesigns von Inputs mit Icon-Button. Ausprägungen: default, readonly sowie mit Erfolgs- und Fehlermeldung. | Input Text |
| CSS | CSS Anpassung: Keine Farbänderung bei :visited-Zuständen. | Link |
| Beispiele | Neue Beispielseiten: Aktuelle Meldungen, Tabelle, Karussell. | Aktuelle Meldungen, Tabelle, Karussell |
Version 10.2 (2025-01-22) LTS
Die Version 10.2 ist als Long-Term Support-Version angelegt, mit der dieser Stand dauerhaft „eingefroren“ wird. Diese Version kann unter desy@itzbund.de angefragt werden.
Der Hauptaugenmerk der Änderungen lag auf der Code-Stabilisierung und Bugfixes sowie dem Schließen von Lücken in der Dokumentation.
Der weitere Ausbau des Design Systems wird weiterhin wie gewohnt an dieser Stelle stattfinden.
Wichtige Änderungen
| Thema | Änderung | Link |
|---|
| Barrierefreiheit | Aktualisierung der BITV-Konformität. | Erklärung zur Barrierefreiheit |
| Design | In allen Komponenten musste der Schriftschnitt Medium durch Fett ersetzt werden, da die Medium in Zukunft nicht mehr als Webfont zur Verfügung steht. Vgl. hierzu auch die Anmerkung in Version 10.1. | Komponenten |
| Design | Abweichende Schriftgrade für Überschriften auf mobilen Breakpoints ergänzt. | Überschriften |
Aktualisierungen
| Thema | Änderung | Link |
|---|
| CSS | Zusätzlichen Breakpoint SM in der Design-Dokumentation ergänzt. | Akkordeon |
| HTML | Ergänzung des title-Attributs bei Badges ohne Text. | Badge |
| Komponenten | Design & Code für eine neue Komponente zur Bewertung von Dienstleistungen durch Nutzende. | Bewertung (Star Rating) |
| CSS | hover-Styles vom aktuellen Schritt entfernt | Breadcrumbs |
| HTML | Hinweise zur Verwendung von Submit-Buttons in Formularen ergänzt, Modifier-Klasse für Login-Button ergänzt, title-Attribut bei Icon-Buttons ergänzt. | Formularelemente |
| Komponenten | Code (HTML/CSS/JS) für das Redesign des Footers fertiggestellt. | Footer |
| Komponenten | Umsetzung des Redesigns, Entfall der Headline in der Komponente. | Fortschrittsanzeige |
| Komponenten | Die Hinweisboxen sind nun eine eigenständige Komponente. | Hinweisboxen |
| Komponenten | Code (HTML/CSS/JS) für das Redesign des Kontextmenüs fertiggestellt. | Kontextmenü |
| Komponenten | Code (HTML/CSS/JS) für das Redesign der Paginierung fertiggestellt, hover- und focus-Styles wurden für disabled entfernt. | Paginierung |
| Komponenten | Code (HTML/CSS/JS) für das Redesign der Seitennavigation fertiggestellt. | Seitennavigation |
| Komponenten | Umsetzung des Redesigns. | Tabellen |
| Komponenten | Code (HTML/CSS/JS) für das Redesign des Tab-Interfaces fertiggestellt. | Tab-Interface |
| Komponenten | Code (HTML/CSS) für das Redesign von Tags fertiggestellt, hover- und focus-Styles wurden für disabled entfernt. | Tag |
| Komponenten | Code (HTML/CSS/JS) für das Redesign der Tri-State-Checkbox fertiggestellt. | Tri-State-Checkbox |
| HTML | Hinweise zur erlaubten Verwendung von Hyperlinks in Labels ergänzt. | Label |
| HTML | Regeln zur Verwendung destruktiver Buttons präzisiert. | Buttons |
| Barrierefreiheit | Anforderungen präzisiert, dass Formularelemente mit ihren dazugehörigen Info- und Fehlertexten über aria-describedby verknüpft sein müssen. | Formular-Elemente |
| Barrierefreiheit | Hinweise zur Verwendung von differenzierenden aria-labels bei der Verwendung mehrerer gleichartiger Landmarks wie z. B. <nav> ergänzt; Dokumentation zu erforderlichen ARIA-Attributen in Menüs und Dialogen ergänzt; Abgrenzung implizit vorhandene vs. explizit zu setzende Attribute. | Komponenten |
| Barrierefreiheit | Weitere benötigte ARIA-Rollen und -Attribute bei Kontextmenüs ergänzt. | Kontextmenü |
| Barrierefreiheit | Weitere benötigte ARIA-Rollen und -Attribute im Header ergänzt. | Header |
| Barrierefreiheit | Weitere Hinweise zur erlaubten Verwendung von aria-label oder aria-labelledby, Ausschluss der Verwendung bei generischen Elementen wie div oder span. | Komponenten |
| Content | Ergänzung der Regeln zur Formulierung von Titeln und Benennungen bei Verfahren oder Zuständen von Prozessschritten. | Kontrolliertes Vokabular |
| Design | Die vormalig getrennten Seiten zu Überschriften und Textelementen wurden in die Seite Typografie konsolidiert. | Typografie |
| HTML | Regeln zur erlaubten und nicht erlaubten Verwendung von title-Attributen präzisiert. | Komponenten |
Version 10.1 (2024-11-06)
Wichtige Bug-Fixes
| Thema | Änderung | Link |
|---|
| Design | Update der Fonts auf die neueste Version der BundesSansWeb in der Version 3.014, damit konform zu den Vorgaben der DIN 91379. Anwender des Design Systems sind aufgefordert, die Schriftpakete ebenfalls auszutauschen. | Typografie |
| CSS | Back-to-Top Button: btn--icon-only Klasse ergänzt | Skip Links |
| HTML JavaScript | Entfernung des aria-checked Attributs und Anpassungen im JavaScript für das checked-Attribut | Tristate checkbox |
| CSS | Styles von Akkordeons angepasst, die nur ein einziges Akkordeon-Panel enthalten | Akkordeon |
| CSS | Innenabstand des Zoll-Logos (padding) im Header verringert | Header |
| CSS | Abstand zwischen Schritt und temporärem Unterschritt verringert | Fortschrittsnavigation |
Aktualisierungen
| Thema | Änderung | Link |
|---|
| Icons | Überarbeitung aller Elemente in der Icon-Bibliothek inklusive des Icon-Fonts, geänderte Struktur und Darstellung der einzelnen Icons, weitere Hinweise zur eindeutigen Zuordnung der Funktionen hinter Icons | Icons |
| PDF | Weitere Hinweise zur Maschinenlesbarkeit von Dokumenten | PDF-Dokumente |
| Design | Design-Spezifikation für Tri-state Checkboxes ergänzt. | Input Checkbox Tristate |
| Content | Präzisierung der Anforderungen für Fehlermeldungen bei Formularelementen | Komponenten |
| HTML CSS | Code-Implementierung des Redesigns von Systemmeldungen | Systemmeldung |
| HTML CSS | Code-Implementierung des Redesigns von Linklisten | Linkliste |
| HTML CSS | Code-Implementierung des Redesigns von Badges | Badge |
| Regeln | Bei allen Komponenten mit interaktiven Funktionen wurden weiterführende Links zu einer Handreichung der Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik hinzugefügt, in der Abnahmekriterien beschrieben werden. | Komponenten |
| Regeln | Verbesserte interne Verlinkung aller Bestandteile von Komponenten untereinander | Komponenten |
| Regeln | Aktualisierte Liste der vom Design System unterstützten Betriebssysteme, Geräte, Browser und Bildschirmgrößen | Device Scope |
Version 10.0 (2024-10-07)
| Thema | Änderung | Link |
|---|
| Design | Akkordeons sind nun an den Seiten geschlossen | Akkordeon |
| CSS | Abstände wurden angepasst, Positionierung der Bullets auf der horizontalen Ansicht wurden verschoben. | Fortschrittsanzeige |
| CSS | Feinarbeiten an Abständen, Backdrop-Verhalten, CSS-Transitions, Icon für Hilfe ausgetauscht. | Header |
| JavaScript | Bug Fix bei drag‘n‘drop: hover-Style wird beim dragleave-Event ohne drop entfernt. | Upload |
| CSS | :active Zustände wurden unter anderem bei Akkordeon, Combobox und Fortschrittsnavigation ergänzt. | div. Komponenten |
| Regeln | - Hinweise zur Verwendung aktualisiert
- Design-Dokumentation vervollständigt und aktualisiert (bitte beachten Sie, dass sich der Code noch in Überarbeitung befindet)
| Tabellen |
| PDF | - Umfangreiche Ergänzungen zur Barrierefreiheit von PDF-Dokumenten inklusive Hilfen und Werkzeugen
- Standangaben und exakte Bemaßungen für Inhalte von PDF-Dokumenten nach DIN 5008
| PDF-Dokumente |
| Bilder | Bessere Übersichtlichkeit des Entscheidungsbaums zur Vergabe von Alternativtexten für visuelle Inhalte | Alternativtexte |
| Regeln | Erste Vorab-Version eines Leitfadens zur Verwendung des Design Systems (wird laufend ergänzt werden) | Schnelleinstieg |
| Regeln | Neue Systematik in der Darstellung dieses Changelogs | Änderungsprotokoll |
Version 9.0 (2024-09-11)
Die Einladung zur 14-tägigen DESY-Sprechstunde ist nun für alle Interessierten auf der Startseite verfügbar.
Breaking Changes & wichtige Bug-Fixes
| Thema | Änderung | Link |
|---|
| Komponenten | - Anpassung des Dropdown-Attributes für die Art des Schließen-Mechanismus
- Anpassung des JavaScripts für das Backdrop-Verhalten im Zusammenspiel mit dem Dropdown
- Ergänzung der Klassen des nav-items in der Hauptnavigation
- Ergänzung der Klassen für die Zeitanzeige
| Header & Navigation |
Aktualisierungen
| Thema | Änderung | Link |
|---|
| Barrierefreiheit | Weitere Erläuterung zu implizit und explizit verknüpften Formular-Labels. | Label |
| Barrierefreiheit | Weitere Akzeptanzkriterien zur Sprachbedienung von Formularen in den Barrierefreiheits-Anforderungen aller Komponenten mit interaktiven Inhalten. | Komponenten |
| Content | Redaktionelle Ergänzungen bei Hilfen, Fehlerhinweisen und Meldungen. | Hilfen, Fehlerhinweise und Meldungen |
Version 8.0 (2024-09-02)
Breaking Changes & wichtige Bug-Fixes
| Thema | Änderung | Link |
|---|
| CSS | Neue Utility-Klassen zum Anpassen der Icon-Größen (icon--xs, icon--sm, icon--md, icon--xxl) | Style Sheets |
| HTML | Bug-Fix: Wert des aria-expanded Attributs bei initial geöffnetem Akkordeon korrigiert | Akkordeon |
| JavaScript | Bug-Fix: JavaScript-Funktion für die Sichtbarkeit des Togglers angepasst | Breadcrumbs |
| HTML | Bug-Fix: Anpassung / Ergänzung notwendiger Attribute für das Melden eines Fehlers für Screenreader | Drag'n'Drop / Upload |
| CSS | Bug-Fix: Anpassung Selektor für Fehlertext | Input File |
Aktualisierungen
| Thema | Änderung | Link |
|---|
| Design | Design der Paginierung | Paginierung |
| CSS | Zusätzliches horizontales Layout für Definitionslisten | Textlemente |
| HTML | Weitere Erklärungen zum Code von Upload und input type="file" | Upload, Input File |
| Beispiele | Neue und aktualisierte Beispielseiten, noch nicht überarbeitete Beispielseiten wurden temporär entfernt. | Beispielseiten |
| CSS | Neue Klasse für Cards ohne Interaktion | Kacheln (Cards) |
Version 7.0 (2024-08-15)
Breaking Changes & wichtige Bug-Fixes
| Thema | Änderung | Link |
|---|
| HTML JavaScript | Anpassungen in Markup und Scripting | Upload / Drag'n'Drop |
| HTML | Anpassungen im Markup, angepasste und ergänzte Klassen | Kacheln (Cards) |
| HTML CSS | - Breakpoints von "lg" auf "xl" umgestellt, hiervon sind Utility Classes im Markup betroffen
- Geändertes Scroll-Verhalten
- Änderung im Markup: Backdrop-Element entfernt; Umsetzung nun mit Bootstrap-Backdrop
- Anpassungen im JavaScript: Verwendung von Bootstrap-JavaScript; Entfernen von nicht mehr benötigten JavaScripts
| Header |
| HTML CSS | Breakpoints von "lg" auf "xl" umgestellt, hiervon sind Utility Classes im Markup betroffen | Fortschrittsnavigation |
Aktualisierungen
| Thema | Änderung | Link |
|---|
| Regeln | Verwendungshinweise und Design für weitere Anwendungszwecke von Kacheln | Kacheln (Cards) |
| Regeln | Verwendungshinweise und Design für Fieldset & Legend | Fieldset & Legend |
| Beispiele | Beispielseiten Formular und Upload wurden hinsichtlich der Breakpoints angepasst, Seitenrahmen des Design Systems wurde entfernt; Logo im Header verweist auf die Startseite des Design Systems. | Beispielseiten |
Version 6.0 (2024-08-07)
Breaking Changes & wichtige Bug-Fixes
| Thema | Änderung | Link |
|---|
| Komponenten | - Notification Badge anstatt Pill
- Geändertes Markup
- Geänderte Klassen
- Geänderte Icon-Namen
| Header |
| Komponenten | - Temporäre Unterseite ergänzt
- Angepasste Klassen für den Fall, wenn der aktuelle Schritt nicht dem zuletzt bearbeiteten Schritt entspricht
| Fortschrittsnavigation |
| CSS | - Neue Klassennamen
- Keine Pill für Notifications mehr
| Pill |
Aktualisierungen
Version 5.0 (2024-07-31)
Breaking Changes & wichtige Bug-Fixes
| Thema | Änderung | Link |
|---|
| CSS | - Variante "notification" wurde entfernt, wird durch Badge ersetzt
- Geänderte Varianten- und Klassennamen entsprechend der Design-Dokumentation
| Pill |
| HTML | - Geänderte HTML-Struktur der
<li> für Schritte - Veränderte Klassen
| Fortschrittsnavigation |
Neue Komponenten
Aktualisierungen
| Thema | Änderung | Link |
|---|
| Design | Editierbare mobile Variante hinzugefügt | Kacheln (Cards) |
| Barrierefreiheit | Zusätzliche Anforderungen an Zielgrößen ergänzt | Links und Linklisten |
| Barrierefreiheit | Wichtige Hinweise zum Fokus-Management ergänzt | Modaler Dialog |
| Regeln | Hinweise zur Verwendung ergänzt | Pills |
| CSS | Weitere Zustände hinzugefügt | Upload |
Version 4.0.2 (2024-07-15)
Neue bzw. verbesserte Komponenten
Version 4.0.1 (2024-07-10)
Neue bzw. verbesserte Komponenten
| Thema | Änderung | Link |
|---|
| Design | Ergänzungen zu Design und Verwendung des Session-Timers in der Header-Komponente | Session-Timer |
| Regeln | Spezifikationen zu Modalen Dialogen ergänzt. | Modaler Dialog |
| Regeln | Spezifikationen zu Tab-Interfaces ergänzt. | Tab-Interfaces |
| Regeln | Spezifikationen zur Seitennavigation ergänzt. | Seitennavigation |
Version 4.0 (2024-07-08)
Breaking Changes & wichtige Bug-Fixes
| Thema | Änderung | Link |
|---|
| CSS | Utility-Klassen für Abstände: Abstände / Spacings haben sich im Rahmen des aktuellen Redesigns geändert, dadurch gibt es nun mehr Klassen und bisherige Klassen haben andere (kleinere) Werte; diese entsprechen den dokumentierten Abständen (siehe Abstände in den jeweiligen Design-Tabs)
Beispiel: pb-3
Alt: padding-bottom: 1rem;
Neu: padding-bottom: .25rem; | Utility-Klassen |
| Icons | Icon-Namen wurden teilweise geändert, z.B .ds-icon-chevron-up heißt nun .ds-icon-fold-up | Icons |
| HTML | - ARIA-Attribute stehen nicht mehr am Toast selbst, sondern am Container, der auch mehrere Meldungen enthalten kann
- Ergänzte Werte für role und aria-live für Status- und Alert-Rollen
- Veränderte HTML-Struktur
- Angepasste Klassen / neue Modifier-Klassen
| Globale Meldungen (Toasts) |
| HTML | Kein Value mehr auf den List Items, da nicht valide | Combobox |
| HTML | Kein required-Attribut auf input type=hidden, da nicht benötigt und nicht valide | Verifizierungscode |
| HTML | Leerer Wert für die placeholder-Option | Select |
| CSS | Veränderte Klassen (default + rahmenlose Variante des Akkordeons) | Akkordeon |
| HTML | Angepasstes HTML & Klassen | Input file |
| CSS | Klassen angepasst:- btn--borderless heißt nun btn--tertiary, btn-sm heißt nun btn--icon-only
- Angepasste Klassen für Buttons mit dem Aussehen eines Links
| Button |
| CSS | Angepasste Klassen für Links mit dem Aussehen von Buttons | Links |
| HTML | Verändertes HTML bei Hinweis- und Fehlertexten in Formularen | Formulare |
Neue bzw. aktualisierte Ressourcen
| Thema | Änderung | Link |
|---|
| DESY | | |
| Komponenten | - Banner, Checkboxen, Fortschrittsnavigation, Globale Meldungen (Toasts), Header & Hauptnavigation, Hinweisbox, Kontextmenü, Modaler Dialog, Paginierung, Radiobutton, Seitennavigation, Systemmeldung (Alert), Tag, Textelemente, Tooltip
- Aufgrund der geänderten Informationsarchitektur eine zusammengefasste Übersicht aller Komponenten mit weiteren Hinweisen zur Verwendung
| Komponenten |
Versionen 3.11.0 (2024-05-31), 3.11.1 (2024-06-04) und 3.11.2 (2024-06-10)
Neue bzw. aktualisierte Ressourcen
| Thema | Änderung | Link |
|---|
| Barrierefreiheit | Neue Muster-Vorlage zur Erstellung von Erklärungen zur BITV-Konformität | Muster-Vorlage |
| Design | | Styles |
| HTML | - Verknüpfungen von Hinweis- und Fehlertexten zu ihren Formularelementen über
aria-describedby hinzugefügt
| Formulare |
| Design | - Typografie, Abstände, Farben, Rahmen, Radius und Schatten
- Detaillierte Spezifikationen zu Verwendung und Design für Akkordeon, Badges, Breadcrumbs, Buttons, Combobox, Input Checkbox, Input E-Mail, Input File, Input Password, Input Radio, Input Search, Input Text, Kontextmenü, Linklisten, Links, Pills, Select, Tags, Textarea, Textelemente, Überschriften und Upload / Drag'n'Drop
| Komponenten |
| Barrierefreiheit | Neue bzw. ergänzte Anforderungen zur Barrierefreiheit von Badges, Banner, Linklisten, Pills, Tags, Upload | Komponenten |
| Regeln | Regeln zur Verwendung, Design und Barrierefreiheit: Abstände, Bottom Navigation Bar, Buttons, Cards, Fortschrittsanzeige, Input Text, Label, Links, Linkliste, Modale, Seitenrahmen und Hintergründe, Splash Screen, Stepper, Tab Bar, Title, Toasts und Typografie | Komponenten |
