LogoLogo
SearchService PortalManualOthersDeutschRequest support
  • Welcome
  • Knowledge Base
    • Introduction
      • Testing ThemeWare®
      • Installing ThemeWare®
      • Activating ThemeWare®
      • Assigning ThemeWare®
      • ThemeWare® Utilities downloaden
      • Überblick Theme-Konfiguration
      • ThemeWare® bearbeiten
      • Themes kombinieren
      • Farben konfigurieren
      • Schriften konfigurieren
      • Logo einbinden
      • Logo konfigurieren
      • Text-Logo konfigurieren
      • Shop-Navigation konfigurieren
      • Texte im Theme bearbeiten
      • USP-Bar konfigurieren
      • Erlebniswelten verstehen
      • ThemeWare® Demoshops
      • Setting up the home page (ThemeWare® Shopping Experience)
      • Design der Kategorie-Seite anpassen
      • Shopseiten bearbeiten und anlegen
      • Service-Navigation konfigurieren
      • Footer-Navigation konfigurieren
      • Footer konfigurieren
      • Zahlungs- und Versandanbieter Logos
      • Mehrsprachigkeit mit ThemeWare®
      • Mehr als ein ThemeWare® Theme nutzen
      • ThemeWare® erwerben
      • Getting support
      • Updates and news
    • Tutorials
      • Administration
        • Testing ThemeWare®
        • Buying ThemeWare®
        • Renting ThemeWare®
        • Uploading ThemeWare®
        • Installing ThemeWare®
        • Activating ThemeWare®
        • Assigning ThemeWare®
        • Editing ThemeWare®
        • Resetting ThemeWare®
        • Rating ThemeWare®
        • Updating ThemeWare®
        • Cleaning up ThemeWare®
        • Deactivating ThemeWare®
        • Uninstalling ThemeWare®
        • Deleting ThemeWare®
        • Returning ThemeWare®
        • Determining the ThemeWare® version
        • Shopware Updates and ThemeWare®
      • Categories
        • Assign a category layout
        • Cooking pleasure & Provence (Demoshop)
        • Craft & Tradition (Demoshop)
        • Create a category
        • Create a category layout
        • Create a category layout with sidebar
        • Make product boxes more compact
        • Make product listings more compact
        • Mountain air & Adventure (Demoshop)
      • Configuration
        • Child theme
        • Color configuration field
        • Field types in the theme configuration
        • Font configuration field
        • Using SCSS functions in the configuration
        • Using theme variables in the configuration
        • ThemeWare® duplicates
        • Creating a ThemeWare® duplicate
        • Renaming a ThemeWare® duplicate
        • Orphaned configuration fields
      • Custom Fields
      • Debugging
        • Identifying the extension as the cause of the error
        • Debugging error messages
        • Narrowing down errors
        • Identifying the theme as the cause of error
        • Debug mode
      • Demoshops
        • Home page
        • Category "Mountain air & Adventure"
        • Category "Cooking pleasure & Provence"
        • Category "Craft & Tradition"
        • Configuration
      • Fonts
        • Embedding fonts locally
        • Embedding fonts locally using the ThemeWare® Customizing Plugin
        • Font configuration
        • Importing Google Fonts
      • Header
        • Configuring the Shopping Experiences Header
      • Individual customizations
        • Individual customizations by means of CSS
        • Individual customizations by means of SCSS
        • Individual template customizations (Twig, HTML)
        • Individual customizations with the ThemeWare® Customizing Plugin
        • Individual customizations with the ThemeWare® Customizing App (Cloud)
        • Embed custom JavaScript code
        • CSS hierarchy
        • Using Bootstrap in the Storefront
        • Show custom fields in the storefront
      • Landing pages
        • Create a landing page
        • Create a landing page layout
        • Assign a landing page layout
        • Create a home page
      • Miscellaneous
        • Clearing / warming up the Shopware cache
        • Clearing the browser cache
        • Compiling the theme
        • Refreshing the storefront
      • Product pages
        • Create a product layout
        • Create a product layout with sidebar
        • Assign a product layout
      • Shop pages
        • Creating a shop page layout
        • Linking shop pages in the storefront
        • Creating a contact page
        • Creating a GTC page
        • Creating a newsletter page
        • Creating a payment and shipping information page
        • Creating a privacy page
        • Creating a revocation notices page
        • Creating an imprint page
      • Shopping Experiences
        • ThemeWare® CMS styling for Shopping Experiences
        • ThemeWare® CSS classes for Shopping Experiences
        • Adjusting column spacings in CMS blocks
        • Adjusting gaps in CMS blocks
        • CSS classes for full-width sections
        • CSS spacing classes for Shopping Experiences
        • Designing headlines in CMS blocks
        • Designing Shopping Experiences with Bootstrap CSS classes
        • Designing Shopping Experiences with Bootstrap HTML code
        • Embellishing images in CMS blocks
        • Embellishing images in CMS blocks with hover effects
        • Embellishing Shopping Experiences with CSS animations
        • Hide CMS blocks on mobile devices
        • Mark CMS blocks as favourites to find them faster
        • Mark CMS elements as favourites to find them faster
        • Recreating category Shopping Experiences of the demoshops
        • Responsive Shopping Experiences
        • Responsive Shopping Experiences with Bootstrap
        • Show custom fields in Shopping Experiences
      • Shopware Account
        • Renew ThemeWare® Subscription
        • Switch to rental license
      • Shopware Store
        • Finding ThemeWare®
        • Testing ThemeWare®
        • Buying ThemeWare®
        • Renting ThemeWare®
        • Purchasing ThemeWare® after the trial period
        • Renting ThemeWare® after the trial month
      • Solving errors
        • Examining extensions or plugins
        • Examining individual customizations
        • Examining Shopware default theme
        • Performing a ThemeWare® Soft Reset
        • Fixing representation errors
        • Reinstalling ThemeWare®
        • Solving known errors by yourself easily
        • Update the shop
      • Texts: Edit and translate
    • Basic knowledge
      • Update guide
      • Color configuration
      • Font configuration
      • HTML code
      • Identifying the current ThemeWare® Version
      • Images
        • Display mode of images
        • Image sizes
      • Licences
      • Payment methods
      • Plugin Compatibility (HC-Architecture®)
      • Shipping methods
      • Shopping Experiences
        • CMS layout
        • CMS section
        • CMS block
        • CMS element
      • Shopware Compatibility
      • Snippets
      • Supported browsers
      • ThemeWare® data
    • Profi knowledge
      • The ultimate Professional Knowledge
      • Backup of the ThemeWare® configuration
      • Backing up and restoring the ThemeWare® configuration
      • Column CSS classes in ThemeWare® CMS elements
      • Deactivating ThemeWare® via the database
      • Debug mode
      • Editing the database with the Adminer
      • Establishing compatibility with ThemeWare® for Shopware 6
      • Expert mode
      • Expert settings in CMS elements
      • Expert settings in the theme configuration
      • Exporting and importing the ThemeWare® configuration
      • HTML Sanitizer
      • Installing ThemeWare® manually
      • Optimizing Shopping Experiences with Bootstrap CSS classes
      • Optimizing Shopping Experiences with Bootstrap HTML elements
      • Resetting the ThemeWare® configuration
      • SCSS
      • ThemeWare® in the database
      • ThemeWare® on the FTP server
      • Twig
      • Updating ThemeWare® manually
      • Uploading ThemeWare® via FTP
      • Using Bootstrap CSS classes
      • Using Bootstrap HTML code
    • Frequent questions
      • Frequently searched features in ThemeWare®
      • Can I extend the trial month?
      • Can I extend the trial period?
      • Do I have to purchase ThemeWare® again for another domain?
      • Do I have to purchase ThemeWare® again for another Sales Channel?
      • How can I change or translate a text (e.g. of widgets)?
      • How can I change the number of levels in the flyout?
      • How can I embed Google Fonts in a GDPR compliant manner locally?
      • How do I cancel a extension rent?
      • How can I customise snippets for individual Sales Channels?
      • How can I customise texts for individual Sales Channels?
      • How can I fix representation errors?
      • How can I hide CMS blocks on mobile devices?
      • How can I hide the product description in product boxes?
      • How can I make individual customisations?
      • How can I make the listing look more compact?
      • How can I make product boxes more compact?
      • How can I remove the border around a CMS block?
      • How can I remove the borders around CMS blocks?
      • How can I remove the spaces in the listing?
      • How can I use a different configuration for a Sales Channel?
      • How can I use an individual configuration for an additional Sales Channel?
      • How do I configure the autoplay in the image slider?
      • How do I use webfonts in a GDPR compliant manner?
      • How to delete licences correctly?
      • The subscription expires - what now?
      • What does "Already compatible" mean?
      • What does "Not compatible" mean?
      • What does "Now avaiable" mean?
      • What does "With new Shopware version" mean?
      • What does the "Extension Warning" window mean when opening my admin?
      • What image sizes should I use with ThemeWare®?
      • When does the trial month end?
      • When does the trial period end?
      • Why does the header overlay the Shopping Experience?
      • Why does the subscription have to be renewed for bought extensions?
      • Why is the new ThemeWare® version not available?
      • Why is ThemeWare® available several times in the Shopware store?
    • Common issues
      • Storefront
        • Branding is shown despite Licence Key
        • CMS blocks are not displayed in Shopping Experience
        • Gallery sliders have a wrong height on mobile devices
        • Header overlays the Shopping Experience on the home page
        • Listing subcategories are not displayed
        • Oops! An Error Occurred
        • Pop-up (e.g. privacy) is displayed without content
        • Privacy pop-up is displayed without content
        • Representation errors in the storefront
        • Representation errors with a theme duplicate after an update
        • Shipping costs pop-up is displayed without content
        • Sticky top navigation does not work
        • T&C pop-up is displayed without content
        • Unfortunately something went wrong on the product page
      • Administration
        • Administration not accessible
        • Allowed memory size of ... bytes exhausted
        • Bad Request...
        • $color: 0 is not a color
        • $color2: 0 is not a color
        • Configuration fields are missing
        • Configuration fields in the "General" tab
        • Configuration required. Please fill in data in all elements.
        • Error 400 / Theme cannot be saved
        • Error 500 / Themes cannot be saved
        • Error: argument '$color'
        • Error compiling theme
        • Errors occurred. Please check the error list in the editor.
        • Features or configurations are missing
        • New configuration fields are missing in a theme duplicate after update
        • Parse error: failed at $...
        • Preview images in the Shopping Experience editor show placeholder images
        • Saving the theme configuration takes a very long time
        • Simplified representation of the theme configuration
        • Some blocks were not configured sufficiently
        • Theme could not be assigned to sales channel
        • ThemeWare® cannot be updated
        • ThemeWare® update not available
        • Unable to compile theme
        • Unable to compile the theme...
        • Unable to deactivate or uninstall theme
        • Unable to find the theme
        • Undefined variable $...
    • Tips and tricks
      • Image optimization
      • Logo design tips
      • Recommended Extensions or Plugins
      • Technical terms explained
      • The top 10 tips
      • Useful Links
      • Ideales Vorgehen bei der Konfiguration
      • Konfigurationsfelder schnell finden
      • Wie du jede Farbe im Theme Manager findest
    • Shopware
      • Getting Started
        • System Requirements
      • Migration
      • Configuration
        • Shopping Experiences
          • Inserting images into text fields
        • Themes
          • Assign Shopware default theme
        • Extensions
          • Activate extensions
          • Deactivate extensions
          • Install extensions
          • Install extensions manually
          • Purchase extensions
          • Rate extensions
          • Remove extensions
          • Rent extensions
          • Return extensions
          • Uninstall extensions
          • Update extensions
          • Update extensions manually
        • Sales channel
          • Maintenance mode
        • Settings
          • Caches & Indexes
      • Cloud
      • Shopware Extensions
      • Tutorials
      • Update Guides
      • Support
      • Shopware Account
        • Linking up the Shopware Account with the shop
        • Moving Licenses in the Shopware Account to a different Domain
        • Registering the Shopware Account in the administration
        • Rename shop domain
        • Setting up the shop in the Shopware Account
        • Transfer licenses
  • More knowledge
    • ThemeWare® Extras
    • ThemeWare® Tools
      • ThemeWare® Customizing Plugin
      • ThemeWare® Customizing App (Cloud)
      • ThemeWare® Shopping Experiences Import (Plugin)
    • Lexicon
    • Accessibility
    • SEO & Pagespeed
      • PageSpeed Insights
  • Others
    • About ThemeWare®
    • ThemeWare® Demoshops
    • ThemeWare® Manual
    • ThemeWare® Video Tutorial
    • ThemeWare® Utilities
    • 🇩🇪Deutsch
Powered by GitBook
LogoLogo

ThemeWare®

  • About ThemeWare®
  • ThemeWare® Demoshops
  • ThemeWare® Service Portal
  • ThemeWare® Utilities

Informations

  • Legal notice
  • Newsletter
  • Privacy
  • Support

© 2024 by ThemeWare® | Made with 💙 by TC-Innovations GmbH

On this page
  • German implementation of the EAA (European Accessibility Act)
  • Making your website accessible
  • 1-click solutions (overlays) for accessibility
  • Colour contrasts
  • Accessible images
  • Accessible Links with Images
  • Accessible system
  • Further information

Was this helpful?

  1. More knowledge

Accessibility

PreviousLexiconNextSEO & Pagespeed

Last updated 1 month ago

Was this helpful?

ThemeWare® is already accessible according to the criteria of PageSpeed Insights, as you can see under the following link:

Note: Shopware currently does not yet fulfil the new WCAG 2.1 AA requirements. However, Shopware is already working on the necessary adjustments of the storefront and has already implemented some improvements. The aim of version 6.7 is to be fully prepared before the legally prescribed deadline of the Barrier-Free Accessibility Act.


German implementation of the EAA (European Accessibility Act)

The implementation of the Directive (EU) 2019/882 of the European Parliament and of the Council on the accessibility requirements for products and services (in German "Barrierefreiheitsstärkungsgesetz" – BFSG) will be transposed into national law by 28 June 2025.

Shopware plans to provide the necessary technical adaptations in Shopware Core by then. We will of course support these adaptations, optimise ThemeWare® and offer additional accessibility configurations in ThemeWare® for Shopware 6.7 if required.

In addition, we will provide instructions, tips and hints for the individual implementation of accessibility requirements to make the process as smooth as possible for you.

In Shopware 6.6, it will also be possible to activate the ACCESSIBILITY_TWEAKS feature flag to fulfil the new requirements. This feature flag will also be supported by ThemeWare® update in an upcoming update.


Making your website accessible

The theme itself only has a small part to play in the accessibility of your shop. Similar to SEO and PageSpeed, a large part is influenced by user-generated content, over which themes have no direct influence.

With ThemeWare®, we can do a lot for you, but not everything - because accessibility also depends on your settings and content. You are responsible for aspects such as alt texts, sufficient colour contrasts, accessible audio and video content, understandable abbreviations and a sensible heading structure. We have summarised the most important information for you so that you are well prepared.

  • 1-click solutions (overlays) for accessibility

  • Colour contrasts

    • When configuring colours, ensure that there is sufficient contrast between the text and the background. Too little contrast makes it difficult to read and can be problematic for people with visual impairments.

  • Accessible audio and video

    • Since audio and video files are difficult for people with visual or hearing impairments to use, the accessibility of this content is all the more important. Provide alternative content such as descriptive transcripts.

  • Accessible images

    • Check all images for meaningful alt texts. Exception: purely decorative images – these should have an empty alt="" attribute so that screen readers skip them.

  • Accessible texts

    • Use easy-to-understand language and avoid complicated words and sentences.

  • Accessible system

    • Keep Shopware and your theme, as well as all other extensions used, up to date.

1-click solutions (overlays) for accessibility

Colour contrasts

Tip: Also note the images in which you have placed text.

Accessible images

For meaningful images that are added via the Shopware Media Manager, you should include a descriptive alt text directly in the media settings.

The alt text is read aloud by screen readers and should describe the content or purpose of the image for users who cannot see it.

Example:

<img src="dhl-logo.svg" alt="Shipping with DHL">

Special case: Image with visible adjacent text

If the image is purely decorative or if there's a visible descriptive text next to it, the alt attribute should still be present, but intentionally left empty:

Example:

<img src="dhl-logo.svg" alt="">
<span>Shipping with DHL</span>

This ensures the image is ignored by screen readers and only the visible text is announced — preventing redundancy or confusion.

Tip: In doing so, also maintain the title attribute.

Accessible Links with Images

If a link contains only an image (e.g. a logo or icon without visible text), using an alt attribute on the image alone is not enough. In this case, you should add an aria-label to the <a> tag, clearly describing the purpose of the link.

The image itself gets an empty alt="" so that screen readers will announce only the aria-label and the picture is only decorative.

Example:

<a href="/shipping" aria-label="Learn more about our shipping with DHL">
    <img src="dhl-logo.svg" alt="">
</a>

This way, screen reader users hear only:

"Link: Learn more about our shipping with DHL"

and not an additional “Image: DHL”, which could be redundant or unclear.

Why not just use alt?

The alt attribute belongs to the image — not to the link. Images alone often don’t provide enough context to describe where the link goes. The aria-label, on the other hand, describes the function of the link and ensures a clear, complete message for all users.

Note: Even a well-written alt text cannot fully convey the purpose of a link when the image is the only content inside the link. Only an aria-label on the <a> element ensures that screen reader users understand both the function and the destination of the link, regardless of the image content.

Accessible system

Shopware plans to fully fulfil the requirements of WCAG 2.1 AA with version 6.7 before the legally prescribed deadline of the Accessibility Improvement Act. There will then also be a compatible and compliant version of your ThemeWare® theme for Shopware 6.7

In addition, ThemeWare® for Shopware 6.6 will also support the ACCESSIBILITY_TWEAKS feature flag with an upcoming release.


Further information

We have put together more information on the topic of "BFSG" for you in a news article in our Service Portal:

Tip: For the latest announcements on planned releases, regularly check the "" block in the ThemeWare® Service Portal.

1-click solutions are currently being advertised by many providers. We recommend for this. You can test Eye-Able® for 30 days free of charge and get an additional month for free with the keyword "ThemeWare".

Numerous free and paid tools help you to test accessibility. To provide you with the best possible support, we have brought on board as an expert who will guide you with innovative tools and clear recommendations. You can test Eye-Able® for 30 days free of charge and get an additional month for free with the keyword "ThemeWare".

When configuring colours, ensure that the contrast between text and background is sufficiently high (at least 4.5:1). It is best to use online tools (e.g. the ) to check the contrast to ensure that your colours comply with current accessibility standards.

News and Announcements
Eye-Able®
Eye-Able®
WebAIM Contrast Checker
LogoPageSpeed InsightsPageSpeed Insights
LogoAccessibility Reinforcement Act (BFSG) | ThemeWare® Service Portal