Banner sind gestaltete statische Elemente mit werblichem Charakter, die zum Beispiel auf Neuerungen bei Dienstleistungen hinweisen und die Navigation zu weiterführenden Inhalten ermöglichen.
Banner enthalten immer nur ein Bild, einen begleitenden Text und idealerweise eine Überschrift, sowie bei Bedarf einen oder mehrere Call to Action-Links oder Linkbuttons. Texte und Bildinhalte müssen so prägnant gewählt werden, dass sie den zur Verfügung stehenden, fest bemaßten Raum nicht überfrachten.
Bilder müssen einen hellen Hintergrund haben, sodass sie nach links in die Hintergrundfarbe des Banners ausblenden können. Bedeutungstragende Texte und Bildinhalte dürfen sich nicht überlagern, da ansonsten bei der responsiven Darstellung keine ausreichenden Kontraste mehr gewährleistet werden können.
Karussell
Eine Abfolge von Bannern wird zum Karussell, wenn mehrere Banner an gleicher Stelle in einer linearen Reihenfolge navigiert werden können. Slides in einem Karussell stehen in keinem inhaltlichen Bezug zueinander.
Banner und insbesondere auch Banner in Karussells enthalten niemals Formular-Eingabeelemente oder tabellarische Daten. Wenn komplexere Funktionalitäten oder Inhalte abgebildet werden müssen, dann muss hier ein geeigneteres Muster wie z. B. ein Tab-Interface verwendet werden.
Positionierung
Ab dem Breakpoint XS (≥ 0px)
Das Banner nimmt die volle Breite des Viewports ein.
Die Inhalte des Banners und die Navigation liegen zwischen der ersten und letzten Gridspalte.
Ab dem Breakpoint MD (≥ 768px)
Die Inhalte des Banners sind linksbündig an der ersten Gridspalte ausgerichtet und haben eine Maximalbreite.
Das Bild des Banners kann auf der rechten Seite des Banners angezeigt werden.
Ab dem Breakpoint XL (≥ 1200px)
Das Banner erstreckt sich von der ersten bis zur letzten Gridspalte.
Best Practices
Mehrere Karussells pro Seite dürfen nicht verwendet werden. Bei einer Vielzahl von Bannern müssen diese in einem gemeinsamen Karussell zusammengeführt werden.
Karussells enthalten nie nur eine Abfolge von reinen Text-Slides, hierfür kann ein geeigneteres Muster wie z. B. ein Akkordeon verwendet werden.
In den Slides dürfen keine aufeinanderfolgenden Prozeßschritte abgebildet werden, jede Slide hat ihren eigenen Kontext.
Design
Typografie
Ab dem Breakpoint XS (≥ 0px)
Spalte 1 enthält die Ziffern 1 bis 2 aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
Über die Dauer, die eine Slide sichtbar ist, füllt sich das aktuelle Navigationselement linear auf.
Animation
animation-duration
10s
animation-timing-function
linear
Media-Query: Reduced Motion
Keine Animation des Fortschrittsbalkens, wenn ‘prefers reduced motion’ aktiviert wurde. Das aktuelle Navigationselement wird direkt zu 100% ausgefüllt; der Slide-Wechsel muss manuell ausgeführt werden.
Spalte 1 enthält die Ziffern aus der Abbildung zu den nach Elementen gruppierten Regeln in Spalten 2 bis 4.
Beim Wechsel blenden die zwei Slides kurzfristig übereinander (Crossfade).
Animation
animation-duration
.6s
animation-easing
ease-in-out
Code
Die Beispielseite Karussell zeigt, wie sich der Banner hinsichtlich seiner Breite auf kleinen und großen Breakpoints verhält. Dies kann hier auf Grund des Layouts der Komponenten-Seiten nicht veranschaulicht werden. Für das korrekte Verhalten befindet sich der Banner am besten außerhalb eines Containers.
JavaScript
Um die Funktionalitäten der dynamischen Banner Ausprägung zu verwenden, muss die carousel.js oder die gesamte main.js-Datei eingebunden werden.
Banner - statisch
Erhalten Sie Ihre Bescheide digital in Ihrem Postkorb
Wechseln Sie zur digitalen Bereitstellung Ihrer Bescheide, um diese schnell und einfach in Ihrem Posteingang abzurufen. Wir informieren Sie per E-Mail, wenn ein neuer Bescheid bereitsteht.
<sectionclass="ds-carousel container-xl mt-5 mb-5"aria-label="Banner aktuelles Thema"> <divclass="ds-carousel__slide ds-carousel__slide--bg-1"> <divclass="ds-carousel__image-container px-lg-0"><imgclass="d-block ds-carousel__image"src="/assets/images/pictures/tokens/Banner_Slide-1_Elektr-Bescheide_h540_1.jpg"alt=""></div> <divclass="container ds-carousel__content"> <divclass="row align-items-center flex-nowrap"> <divclass="col-12 col-md-7 px-6"> <h3class="pt-0">Erhalten Sie Ihre Bescheide digital in Ihrem Postkorb</h3> <p>Wechseln Sie zur digitalen Bereitstellung Ihrer Bescheide, um diese schnell und einfach in Ihrem Posteingang abzurufen. Wir informieren Sie per E-Mail, wenn ein neuer Bescheid bereitsteht.</p> <divclass="row row-cols-1 row-cols-sm-auto gx-0 gap-6"><ahref=""class="btn btn--secondary"><spanclass="btn__text">Mehr Informationen</span></a><ahref=""class="btn btn--primary"><spanclass="btn__text">Jetzt aktivieren</span></a></div> </div> </div> </div> </div> </section>
Banner - dynamisch
Erhalten Sie Ihre Bescheide digital in Ihrem Postkorb
Wechseln Sie zur digitalen Bereitstellung Ihrer Bescheide, um diese schnell und einfach in Ihrem Posteingang abzurufen. Wir informieren Sie per E-Mail, wenn ein neuer Bescheid bereitsteht.
Sicher & schnell im Zoll-Portal anmelden - so geht's: App einrichten, QR-Code scannen und einfach das Zoll-Portal nutzen.
Halten Sie Ihre persönlichen Daten aktuell
Bitte halten Sie Ihre Daten auf dem neusten Stand oder vervollständigen Sie diese. In den Konto-Einstellungen können Sie außerdem festlegen, zu welchen Themen Sie Meldungen erhalten möchten.
Interaktive Elemente erhalten bei Tastaturfokus zusätzlich zum Farbwechsel eine 2px breite abgesetzte Outline bzw. einen deutlichen visuellen Fokus-Indikator bei Swipe auf Touch-UIs.
Aktion:
Erreichbar per Tab-Taste bzw. Swipe auf Touch-UIs, Blättern der Slides per Leerschritt- oder Enter-Taste (wenn fokussiert), Klick oder Tap (bzw. Doppel-Tap bei Touch-UIs mit aktiviertem Screenreader).
Keine besonderen Anforderungen, die über die enthaltenen Element wie Texte, Bilder und Links und deren Anforderungen an Inhalt, Gestaltung und Code hinausgehen.
Testhinweise & Akzeptanzkriterien Karussell
Das Karussell enthält Maus-, Touch- und Tastaturbedienbare Buttons zum Blättern in den Slides. Tab und Shift-Tab bewegen den Fokus durch die interaktiven Elemente des Karusells in der logischen Reihenfolge, die sich aus der Abfolge im Quelltext ergibt.
Bei jeglichen Interaktionen mit dem Karussell (inkl. :hover) soll die Animation sofort angehalten werden, um Nutzenden genügend Zeit zum Lesen der Inhalte zu geben.
Wenn Nutzende das automatische Blättern zwischen den Slides über den Play/Pause-Button angehalten haben, dann darf die Animation erst wieder starten, wenn Nutzende sie über ebendiesen Button wieder aktivieren.
Reduced Motion Settings im Browser bzw. Betriebssystem der Nutzenden müssen respektiert werden und über die entsprechenden Media Queries alle automatischen Animationen deaktiviert werden. Die einzelnen Slides bleiben weiterhin über die beschriebenen Maus- und Tastaturbefehle oder Gesten erreichbar.
Die Inhalte von zurzeit nicht angezeigten Slides dürfen für Hilfsmittel wie Screenreader nicht erreichbar sein und müssen mit geeigneten Mitteln aus dem Dokumentenbaum bzw. der Tastaturreihenfolge entfernt werden.
WAI-ARIA
In Ermangelung eines nativen HTML-Elements bzw. einer entsprechenden ARIA-Rolle für Karussells erhält dieses eine menschenlesbare Bezeichnung in Form eines aria-roledescription-Attributs, z. B. aria-roledescription="Karussell".
Optional: Ein Element, das den Satz der Slides umfasst, erhält die Attribute aria-atomic="false" sowie aria-live mit den möglichen Werten:
off, wenn das Karussell automatisch rotiert,
polite, wenn das Karussell nicht automatisch rotiert.
