Site banner

How to use it

Use for one informational, site-wide announcement that stays until the visitor dismisses it -- planned maintenance, a new feature, changed opening hours. Place it first inside <body>, keep it to one sentence plus one link, and point the link at a real page (replace ../about.html). Remember the dismissal yourself (cookie or account setting) if it should stay closed on the next page; for an urgent problem use the alert, and for a confirmation of the user's own action use a toast.

Accessibility

A <section> labelled "Site announcement" (a region landmark) holding plain text and a native link, so it is found by landmark navigation but -- unlike an alert -- not announced out of the blue on page load. The close control is a native <button> with aria-label="Dismiss announcement"; dismissing sets hidden, and .dcl-sitebanner[hidden] keeps it hidden despite its flex layout. White text and link on #1e3a8a are 10.4:1, 8.7:1 on the hovered button (#1e40af), and focus shows a 2px white outline.

Source (copy-ready)

Copy code

<section class="dcl-sitebanner" aria-label="Site announcement">
  <p class="dcl-sitebanner__text"><strong>Scheduled maintenance:</strong> checkout will be unavailable on Sunday 9 November from 02:00 to 04:00 GMT. <a class="dcl-sitebanner__link" href="../about.html">Read more</a></p>
  <button type="button" class="dcl-sitebanner__close" aria-label="Dismiss announcement">&times;</button>
</section>
<style>
.dcl-sitebanner { box-sizing: border-box; display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; padding: 0.625rem 1rem; font: inherit; color: #ffffff; background-color: #1e3a8a; }
.dcl-sitebanner[hidden] { display: none; }
.dcl-sitebanner__text { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; color: #ffffff; background-color: #1e3a8a; }
.dcl-sitebanner__link { font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; color: #ffffff; background-color: #1e3a8a; }
.dcl-sitebanner__link:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.dcl-sitebanner__close { flex: none; width: 2rem; height: 2rem; border: none; border-radius: 0.25rem; font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; color: #ffffff; background-color: #1e3a8a; }
.dcl-sitebanner__close:hover { color: #ffffff; background-color: #1e40af; }
.dcl-sitebanner__close:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
</style>
<script>
(function () {
  document.querySelectorAll(".dcl-sitebanner").forEach(function (root) {
    if (root.dataset.dclBound) { return; }
    root.dataset.dclBound = "true";
    var close = root.querySelector(".dcl-sitebanner__close");
    if (!close) { return; }
    close.addEventListener("click", function () {
      root.hidden = true;
    });
  });
})();
</script>