How to Install A11yCore on Wix Sites: The Complete Guide to Accessibility

Wix is a fantastic platform for building beautiful websites, but ensuring they are accessible to everyone can sometimes be a challenge. That's whereA11yCorecomes in. Our AI-powered widget seamlessly integrates with Wix to provide WCAG 2.2 compliance without breaking your design.

This guide will show you exactly how to install A11yCore on your Wix site using the "Custom Code" feature, followed by a look at the powerful technology working behind the scenes.

Part 1: Installation Guide for Wix

Note: You will need a connected domain and a Premium plan to use the "Custom Code" feature on Wix.

Step 1: Get Your License Key

First, log in to your A11yCore dashboard and copy your uniqueLicense Key. You’ll need this to activate the widget on your site.

Step 2: Go to Settings

1. Log in to yourWix Dashboard.
2. In the left-hand menu, scroll down toSettingsand click it.
3. Scroll down to theAdvancedsection and click onCustom Code.

Step 3: Add the A11yCore Script

1. Click the+ Add Custom Codebutton in the top right.
2. Paste the Code Snippet:Copy and paste the following code into the text box:

<!-- A11yCore Accessibility Widget -->
<script type="module">
  import A11yCore from 'https://cdn.a11ycore.org/a11ycore/dist/esm/core.js';
  A11yCore.init({ 
    licenseKey: 'YOUR_LICENSE_KEY_HERE' 
  });
</script>

3. Name It:Give it a name like "A11yCore Widget".
4. Add Code to:SelectAll pages(recommended) so the widget appears everywhere.
5. Place Code in:SelectBody - end. This is crucial for performance and ensures the widget loads correctly after your content.
6. ClickApply.

Don't forget to replaceYOUR_LICENSE_KEY_HEREwith your actual key!

Step 4: Publish and Test

Go to your live site (you might need to refresh). You should see the A11yCore icon appear, typically in the bottom-right corner. Click it to explore the accessibility menu!

Part 2: Why A11yCore is the Best Choice for Wix

Wix sites can sometimes be heavy on JavaScript. Adding more plugins often slows them down. A11yCore is engineered to avoid this common trap.

1. Ultra-Lightweight (ESM Bundles)

Unlike older widgets that load massive files, A11yCore uses modernESM (ECMAScript Modules). Our core file is only~14KB. This means it loads instantly and won't negatively impact your Wix site's loading speed or Core Web Vitals.

2. Shadow DOM Protection

Wix templates use complex styling. A11yCore usesShadow DOMto create a protective barrier around our widget.

• Your site's CSS won't break our widget.
• Our widget's CSS won't messy up your site.It’s a guaranteed pixel-perfect integration every time.

3. Advanced AI Features

We go beyond simple color adjustments. A11yCore provides:

• Flash Guard:Automatically pauses content that flashes too quickly, preventing seizures (WCAG 2.3.1 compliance).
• Neuro-Inclusion:Features likeFocus Mode,Dyslexia-Friendly Fonts, andReading Maskshelp users with cognitive differences navigate your content comfortably.
• Screen Reader Optimization:We automatically inject missingARIA labelstailored to your content, ensuring blind users get a meaningful experience, not just "Button, Button, Image."

Part 3: Customizing the Look

Want the widget to match your Wix template? No problem. In your A11yCore dashboard, you can:

• Change theBrand Colorto match your site's palette.
• Move the trigger button to theLeftorRight.
• Adjust theIcon Sizeto be subtle or prominent.

Make your Wix site inclusive today.Get started with A11yCoreand open your digital doors to everyone.