🚀 The Ultimate Guide to Adding the Accessibility Widget

Simple step-by-step guide to make your website accessible in minutes across various platforms

1
Add the Script Tag to Your HTML

Add this single line of code before the closing </body> tag in your HTML:

<script src="https://barrierefreie-web.de/plugin.php" async defer></script>

Complete example:

My Accessible Website

Welcome to My Website

This website is now accessible to everyone!

2
Test Your Website

That's it! Your website now has the accessibility widget. You should see:

✅ Success! Your website is now accessible to users with disabilities.

📋 Platform-Specific Instructions

WordPress

Method: Use a plugin like "Insert Headers and Footers" to add the script tag to your footer.

<script src="https://barrierefreie-web.de/plugin.php" async defer></script>

WooCommerce

Since WooCommerce is a WordPress plugin, you can add the script tag to your theme's footer.php file or use a plugin as described above.

<script src="https://barrierefreie-web.de/plugin.php" async defer></script>

Shopify

Add to your theme's theme.liquid file before </body>:

<script src="https://barrierefreie-web.de/plugin.php" async defer></script>

Joomla

Method: Go to Extensions → Modules → New → Custom, paste the script tag, and set the position to the footer.

<script src="https://barrierefreie-web.de/plugin.php" async defer></script>

TYPO3

Method: Go to the Template module, edit the TypoScript for your page, and add the script tag to the footer via a `page.footerData` block.

page.footerData.10 = TEXT page.footerData.10.value =

BigCommerce

Method: In your Admin Panel, go to Storefront → Script Manager, and add the script to your footer.

<script src="https://barrierefreie-web.de/plugin.php" async defer></script>

Wix

Go to Settings → Custom Code → Add Code to Body (end):

<script src="https://barrierefreie-web.de/plugin.php" async defer></script>

Squarespace

Go to Settings → Advanced → Code Injection → Footer:

<script src="https://barrierefreie-web.de/plugin.php" async defer></script>

Weebly

Method: Go to Settings → SEO → Footer Code, and paste the script tag into the text box.

<script src="https://barrierefreie-web.de/plugin.php" async defer></script>

Webflow

Method: Go to your Project Settings → Custom Code, and paste the script tag into the 'Footer Code' section.

<script src="https://barrierefreie-web.de/plugin.php" async defer></script>

PrestaShop

Method: Go to the Admin Panel, navigate to Design → Theme & Logo, and add the code to the `theme.tpl` file or a specific hook like `displayFooter`.

<script src="https://barrierefreie-web.de/plugin.php" async defer></script>

plentyshop

Method: Navigate to CMS → Webdesign → Layouts and add the script tag to your footer layout template.

<script src="https://barrierefreie-web.de/plugin.php" async defer></script>

Static Site Generators (Gatsby, Hugo, Jekyll)

Method: Add the script tag to your main layout file, which is often named `layout.html`, `base.html`, or a similar template that wraps all pages.

<body> <!-- Page content --> ... <!-- Add the script before the closing body tag --> <script src="https://barrierefreie-web.de/plugin.php" async defer></script> </body>

Vue.js / Angular / Svelte

Method: For these frameworks, you'll generally add the script tag to the main HTML file (e.g., `index.html`) that the application is mounted to.

<body> <div id="app"></div> <!-- Add the script tag here --> <script src="https://barrierefreie-web.de/plugin.php" async defer></script> </body>

React/Next.js

Add the script tag to your _document.js or within a component using a useEffect hook:

useEffect(() => { const script = document.createElement('script'); script.src = 'https://barrierefreie-web.de/plugin.php'; script.async = true; script.defer = true; document.body.appendChild(script); }, []);

🔧 Troubleshooting

⚠️ Widget not appearing?
  • Check if the script tag is before </body>
  • Check browser console for errors (F12)
  • Ensure you have an active internet connection
⚠️ Features not working?
  • Clear browser cache and refresh
  • Check for JavaScript conflicts
  • Ensure modern browser (Chrome 60+, Firefox 55+, Safari 12+)

🎯 See It in Action

This very page has the accessibility widget installed! Look for the floating button in the bottom-right corner.

✅ Try it now: Click the accessibility button to test all features!