From d86d9e00f04a909525148edb0c864fbe7d6e51a9 Mon Sep 17 00:00:00 2001 From: Tobias Berge Date: Thu, 13 Jun 2024 16:36:34 +0200 Subject: [PATCH] NEXT-35928 - Implement skip to main content function to improve accessibility --- ...kip-to-content-function-to-improve-a11y.md | 28 +++++++++++++++++++ .../snippet/de_DE/storefront.de-DE.json | 3 +- .../snippet/en_GB/storefront.en-GB.json | 3 +- .../Resources/views/storefront/base.html.twig | 12 +++++++- 4 files changed, 43 insertions(+), 3 deletions(-) create mode 100644 changelog/_unreleased/2024-07-01-add-skip-to-content-function-to-improve-a11y.md 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 new file mode 100644 index 00000000000..0a2b822948f --- /dev/null +++ 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 `` tag. +The new block holds a link that allows to skip the focus directly to the `
` 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 + + + +
+ +
+``` diff --git a/src/Storefront/Resources/snippet/de_DE/storefront.de-DE.json b/src/Storefront/Resources/snippet/de_DE/storefront.de-DE.json index 823f4493afd..19484a7baae 100644 --- 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 index 3d7c230b751..a2b1dca9ce9 100644 --- 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 index ae7dbc18bfd..cf6714edaa9 100644 --- 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 %} + {% block base_body_skip_to_content %} + + {% endblock %} + {% block base_body_inner %} {% block base_noscript %}