diff --git a/assets/critical.css b/assets/critical.css index cdb1ae1aa..434e8e52c 100644 --- a/assets/critical.css +++ b/assets/critical.css @@ -97,7 +97,8 @@ body { calc(100% - var(--page-margin) * 2) ); --content-margin: minmax(var(--page-margin), 1fr); - --content-grid: var(--content-margin) var(--content-width) var(--content-margin); + --content-grid: var(--content-margin) var(--content-width) + var(--content-margin); /* This is required to make elements work as background images */ position: relative; @@ -115,3 +116,13 @@ body { .shopify-section > .full-width { grid-column: 1 / -1; } + +/* Visually hide content while keeping it available in the accessibility tree. */ +.visually-hidden:not(:focus):not(:active) { + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} diff --git a/layout/theme.liquid b/layout/theme.liquid index 0e3fd39ca..8f7963465 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -29,7 +29,9 @@ {% sections 'header-group' %} - {{ content_for_layout }} +
+ {{ content_for_layout }} +
{% sections 'footer-group' %} diff --git a/locales/en.default.json b/locales/en.default.json index 3a43570d9..93f614393 100644 --- a/locales/en.default.json +++ b/locales/en.default.json @@ -30,6 +30,9 @@ "collections": { "title": "Collections" }, + "general": { + "skip_link": "Skip to main content" + }, "gift_card": { "add_to_apple_wallet": "Add to Apple Wallet", "card": "Gift card", diff --git a/sections/header.liquid b/sections/header.liquid index d873bdda7..d9d37a314 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -1,4 +1,8 @@
+ +

{{ shop.name | link_to: routes.root_url }}

@@ -55,6 +59,14 @@ display: flex; gap: 1rem; } + + header .skip-link { + position: absolute; + top: 0; + left: 0; + padding: var(--page-margin); + background-color: var(--color-background); + } {% endstylesheet %} {% schema %}