Documentation

Introduction

BarrierFree is an accessibility widget that automatically adds accessibility features to your website. With just one line of code, you can offer your visitors the following features:

Adjust font size and letter spacing
Increase contrast and enable grayscale
Dyslexia-friendly font
Highlight and underline links
Reading ruler and reading mask
Text-to-speech
Large cursor

Installation

Installation is simple. Just add the following code before the closing </body> tag on your website:

<script src="https://barrierfree.site/widget/widget.php?key=YOUR_WIDGET_KEY" async></script>

Replace YOUR_WIDGET_KEY with your personal widget key, which you can find in the Dashboard.

Tip for WordPress Users

You can add the code in the WordPress Customizer under "Additional CSS/JS" or use a plugin like "Insert Headers and Footers".

Configuration

In the dashboard, you can customize the widget to your preferences:

Position

Choose where the widget button should appear: Bottom right, Bottom left, Middle right or Middle left.

Color

Match the widget color to your corporate design. Choose from predefined colors or enter a custom HEX value.

Size

Determine the size of the widget button: Small (50px), Medium (60px) or Large (70px).

Features

Enable or disable individual accessibility features according to your target audience's needs.

Features in Detail

Feature	Description
Font Size	Allows increasing or decreasing text size (50% - 200%)
Letter Spacing	Increases spacing between letters for better readability
Dyslexia Font	Enables OpenDyslexic, a font specially designed for dyslexia
High Contrast	Increases contrast between text and background
Grayscale	Converts all colors to grayscale
Invert Colors	Inverts all page colors
Highlight Links	Visually highlights all links
Reading Ruler	Shows a horizontal ruler that follows the mouse
Reading Mask	Darkens areas outside the current line
Large Cursor	Enlarges the cursor for better visibility
Read Page	Reads the entire page content aloud
Read Selection	Reads selected text aloud

Advanced Customization

The widget automatically adapts to your website's design. If you want to make additional CSS customizations, you can override the following CSS classes:

/* Widget Button */
.accessibility-toggle {
    /* Your customizations */
}

/* Widget Panel */
.accessibility-tools {
    /* Your customizations */
}

/* Active Buttons */
.accessibility-button.bf-active {
    /* Your customizations */
}

Note

Use !important to ensure your customizations override the default styles.

Frequently Asked Questions (FAQ)

The widget is not displayed. What can I do?

Check if the widget key is correct
Make sure your subscription is active
Check the browser console for JavaScript errors
Verify that other scripts are not blocking the widget

Can I use the widget on multiple websites?

Yes, you can create multiple widget configurations in the dashboard. Each configuration gets its own key that you can embed on the corresponding website.

Is the widget GDPR compliant?

Yes, the BarrierFree widget does not store any personal data of your visitors. Settings are stored locally in the user's browser (localStorage) and are not transmitted to our servers.

Does the widget affect my website's loading time?

The widget is optimized and loads asynchronously, so it does not noticeably affect your website's loading time. The file size is only a few kilobytes.

How can I cancel my subscription?

You can cancel your subscription at any time in your Account. The widget remains active until the end of the paid period.