Merge branch 'next-35928/skip-to-content' into 'trunk'

NEXT-35928 - Implement skip to main content function to improve accessibility See merge request shopware/6/product/platform!14063
pweyck · Jul 19, 2024 · 78dceec · 78dceec
2 parents f7ae5a6 + d86d9e0
commit 78dceec
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 3 deletions.
diff --git a/changelog/_unreleased/2024-07-01-add-skip-to-content-function-to-improve-a11y.md b/changelog/_unreleased/2024-07-01-add-skip-to-content-function-to-improve-a11y.md
@@ -0,0 +1,28 @@
+---
+title: Add skip to content link to improve a11y
+issue: NEXT-26705
+---
+# Storefront
+* Added new block `base_body_skip_to_content` to `Resources/views/storefront/base.html.twig`
+___
+# Upgrade Information
+## Add skip to content link to improve a11y
+The `base.html.twig` template now has a new block `base_body_skip_to_content` directly after the opening `<body>` tag.
+The new block holds a link that allows to skip the focus directly to the `<main>` content element.
+This improves a11y because a keyboard or screen-reader user does not have to "skip" through all elements of the page (header, top-bar) and can jump straight to the main content if wanted.
+The "skip to main content" link will not be visible, unless it has focus.
+
+```html
+<body>
+    <div class="skip-to-content bg-primary-subtle text-primary-emphasis visually-hidden-focusable overflow-hidden">
+        <div class="container d-flex justify-content-center">
+            <a href="#content-main" class="skip-to-content-link d-inline-flex text-decoration-underline m-1 p-2 fw-bold gap-2">
+                Skip to main content
+            </a>
+        </div>
+    </div>
+
+    <main id="content-main">
+        <!-- Main content... -->
+    </main>
+```
diff --git a/src/Storefront/Resources/snippet/de_DE/storefront.de-DE.json b/src/Storefront/Resources/snippet/de_DE/storefront.de-DE.json
@@ -52,7 +52,8 @@
     "next": "Nächstes",
     "previous": "Vorheriges",
     "formSubmit": "Absenden",
-    "listPricePreviously": "vorher %price%"
+    "listPricePreviously": "vorher %price%",
+    "skipToContentLink": "Zum Hauptinhalt springen"
   },
   "header": {
     "logoLink": "Zur Startseite gehen",

diff --git a/src/Storefront/Resources/snippet/en_GB/storefront.en-GB.json b/src/Storefront/Resources/snippet/en_GB/storefront.en-GB.json
@@ -52,7 +52,8 @@
     "next": "Next",
     "previous": "Previous",
     "formSubmit": "Submit",
-    "listPricePreviously": "previously %price%"
+    "listPricePreviously": "previously %price%",
+    "skipToContentLink": "Skip to main content"
   },
   "header": {
     "logoLink": "Go to homepage",

diff --git a/src/Storefront/Resources/views/storefront/base.html.twig b/src/Storefront/Resources/views/storefront/base.html.twig
@@ -18,6 +18,16 @@
 {% block base_body %}
     <body class="{% block base_body_classes %}is-ctl-{% if controllerName is not empty %}{{ controllerName|lower }}{% endif %} is-act-{% if controllerAction is not empty %}{{ controllerAction|lower }}{% endif %}{% endblock %}">
 
+    {% block base_body_skip_to_content %}
+        <div class="skip-to-content bg-primary-subtle text-primary-emphasis visually-hidden-focusable overflow-hidden">
+            <div class="container d-flex justify-content-center">
+                <a href="#content-main" class="skip-to-content-link d-inline-flex text-decoration-underline m-1 p-2 fw-bold gap-2">
+                    {{ 'general.skipToContentLink'|trans|sw_sanitize }}
+                </a>
+            </div>
+        </div>
+    {% endblock %}
+
     {% block base_body_inner %}
         {% block base_noscript %}
             <noscript class="noscript-main">
@@ -69,7 +79,7 @@
         {% endblock %}
 
         {% block base_main %}
-            <main class="content-main">
+            <main class="content-main" id="content-main">
                 {% block base_flashbags %}
                     <div class="flashbags container">
                         {% for type, messages in app.flashes %}