Back to all articles
Design

A11yCore Setup Guide: Install in 5 Minutes

Getting your website ADA and WCAG 2.1 AA/AAA compliant shouldn't require a developer or weeks of work. A11yCore was designed to be installed in under 5 minutes on any website platform—from WordPress and Shopify to custom React applications. This comprehensive guide walks you through every step of the installation process, troubleshooting common issues, and optimizing your configuration for maximum accessibility coverage.

15 min read
AccessibilityBest PracticesTutorialDesign SystemsReactTestingWCAG 2.2

Complete A11yCore Setup Guide: Install in 5 Minutes on Any Platform

Getting your website ADA and WCAG 2.1 AA/AAA compliant shouldn't require a developer or weeks of work. A11yCore was designed to be installed in under 5 minutes on any website platform—from WordPress and Shopify to custom React applications. This comprehensive guide walks you through every step of the installation process, troubleshooting common issues, and optimizing your configuration for maximum accessibility coverage.

Table of Contents

  1. Prerequisites
  2. Quick Start: 3-Step Installation
  3. Platform-Specific Guides
  4. Configuration Options
  5. Verifying Installation
  6. Troubleshooting
  7. Advanced Features
  8. Next Steps

Prerequisites

Before you begin, ensure you have:

✅An A11yCore Account:Sign up for a free 7-day trial(no credit card required)

✅Website Access: Admin or developer access to your website's code or CMS

✅5 Minutes: That's genuinely all the time you need

What You'll Receive After Signup

Once you create your account, you'll immediately receive:

  1. Unique API Key: Your personal identifier for the A11yCore script
  2. Dashboard Access: Real-time compliance monitoring and reporting
  3. Installation Code: Pre-configured script snippet ready to paste

No waiting, no approval process, no complicated onboarding.

Quick Start: 3-Step Installation

The fastest way to get A11yCore running on any website:

Step 1: Get Your API Key

  1. Sign up for A11yCoreor log in to your existing account
  2. Navigate to your dashboard
  3. Copy your unique API key (looks like:a11y_xxxxxxxxxxxx)

Step 2: Add the Script to Your Website

Copy this code snippet and add it to your website's<head>section:

<script src="https://cdn.a11ycore.org/widget.js"
  data-key="YOUR_API_KEY"
  async>
</script>

Important: ReplaceYOUR_API_KEYwith your actual API key from Step 1.

Step 3: Verify Installation

  1. Visit your website in a browser
  2. Open your browser's developer console (F12 or Cmd+Option+I on Mac)
  3. Look for the message:✓ A11yCore accessibility widget loaded successfully
  4. Check yourA11yCore dashboardto see scanning begin automatically

That's it! Your website is now protected and being monitored 24/7.

Platform-Specific Installation Guides

Different platforms require slightly different approaches. Choose your platform below for detailed instructions.

WordPress

WordPress powers 43% of all websites, making it our most common installation platform.

Method 1: Using a Plugin (Recommended for Non-Technical Users)
  1. Install theInsert Headers and Footersplugin (or similar)
  2. Go toSettings → Insert Headers and Footers
  3. Paste the A11yCore script in theScripts in Headersection
  4. ClickSave
Method 2: Editing Your Theme (Recommended for Developers)
  1. Go toAppearance → Theme File Editor
  2. Select yourheader.phpfile (orfunctions.phpfor child themes)
  3. Find the</head>closing tag
  4. Paste the A11yCore script just before</head>
  5. ClickUpdate File
Method 3: Using functions.php (Best for Child Themes)

Add this code to your theme'sfunctions.php:

function a11ycore_accessibility_script() {
    ?>
    <script src="https://cdn.a11ycore.org/widget.js"
      data-key="YOUR_API_KEY"
      async>
    </script>
    <?php
}
add_action('wp_head', 'a11ycore_accessibility_script');
WordPress Multisite

For WordPress Multisite installations:

  1. Add the script to yournetwork-wide header
  2. Or use anetwork-activated pluginto inject the code
  3. Each site will be tracked separately in your dashboard

WordPress-Specific Tips:

  • ✅ Works withall WordPress themesincluding Divi, Elementor, Avada
  • ✅ Compatible withpage builderslike Gutenberg, Beaver Builder
  • ✅ No conflicts withcaching plugins(WP Rocket, W3 Total Cache)
  • ✅ Works withsecurity plugins(Wordfence, Sucuri)

View WordPress-specific configuration options.

Shopify

Shopify stores require accessibility compliance for legal protection and better customer experience.

Installation Steps:
  1. From your Shopify admin, go toOnline Store → Themes
  2. ClickActions → Edit Codeon your active theme
  3. Find thetheme.liquidfile in the Layout folder
  4. Locate the</head>tag (usually around line 20-40)
  5. Paste the A11yCore script just before</head>
  6. ClickSave
Shopify Liquid Variable (Optional):

For better organization, you can create a snippet:

  1. Create new snippet:snippets/a11ycore.liquid
  2. Add the A11yCore script to this file
  3. Intheme.liquid, add:{% render 'a11ycore' %}before</head>
Shopify Plus Customers:

If you're on Shopify Plus with checkout customization:

  1. Go toSettings → Checkout
  2. Scroll toOrder Processing → Additional Scripts
  3. Add the A11yCore script there as well to ensure checkout accessibility

Shopify-Specific Benefits:

  • ✅ Ensures product pages meet accessibility standards
  • ✅ Makes checkout process keyboard navigable
  • ✅ Provides alt text for product images automatically
  • ✅ Improves color contrast on CTAs and buttons
  • ✅ Critical for ADA compliance in e-commerce (69% of lawsuits target online stores)

View e-commerce specific features.

Wix

Wix's visual editor requires a different approach for code injection.

Installation Steps:
  1. From your Wix dashboard, clickSettingsin the left sidebar
  2. Scroll down and clickCustom Codeunder Advanced Settings
  3. Click+ Add Custom Code
  4. Paste your A11yCore script
  5. Configure these settings:
    • Name: A11yCore Accessibility Widget
    • Add Code to Pages: All Pages
    • Place Code in: Head
    • Load code once: Leave unchecked
  6. ClickApply
Wix Editor X:

For Wix Editor X (now called Wix Studio):

  1. Go toSettings → Tracking & Analytics
  2. UnderNew Tools, click+ New Tool
  3. ChooseCustom Code
  4. Paste A11yCore script and selectAll Pages

Wix-Specific Notes:

  • ⚠️ Wix's own accessibility wizard can conflict with A11yCore—we recommend disabling it
  • ✅ A11yCore provides superior coverage compared to Wix's built-in tools
  • ✅ Works with all Wix templates and Velo (Wix's development platform)

Squarespace

Squarespace offers clean templates but limited code access.

Installation Steps:
  1. Go toSettings → Advanced → Code Injection
  2. Paste your A11yCore script in theHeadersection
  3. ClickSave
Squarespace 7.1 (Current Version):

No special considerations—the above method works perfectly.

Squarespace 7.0 (Legacy):

Same process, but you can also add to individual pages:

  1. Edit a page
  2. ClickSettings(gear icon)
  3. Go toAdvanced → Header Code Injection
  4. Paste script and save

Squarespace-Specific Benefits:

  • ✅ Fixes Squarespace's notoriously poor heading hierarchy
  • ✅ Improves keyboard navigation in navigation menus
  • ✅ Ensures contact forms are properly labeled
  • ✅ Addresses color contrast issues in default templates

React, Vue, Angular

Modern JavaScript frameworks require special consideration for single-page applications (SPAs).

React Installation:

Add to yourpublic/index.htmlbefore</head>:

<script src="https://cdn.a11ycore.org/widget.js"
  data-key="YOUR_API_KEY"
  async>
</script>

Or install via npm for better control:

npm install @a11ycore/react

Then in your main App component:

import { A11yCoreProvider } from '@a11ycore/react';

function App() {
  return (
    <A11yCoreProvider apiKey="YOUR_API_KEY">
      {/* Your app components */}
    </A11yCoreProvider>
  );
}
Vue Installation:

Add to yourpublic/index.htmlor use the Vue plugin:

npm install @a11ycore/vue

In yourmain.js:

import { createApp } from 'vue';
import A11yCore from '@a11ycore/vue';
import App from './App.vue';

const app = createApp(App);
app.use(A11yCore, { apiKey: 'YOUR_API_KEY' });
app.mount('#app');
Angular Installation:

Add to yoursrc/index.htmlor install via npm:

npm install @a11ycore/angular

Import in yourapp.module.ts:

import { A11yCoreModule } from '@a11ycore/angular';

@NgModule({
  imports: [
    A11yCoreModule.forRoot({ apiKey: 'YOUR_API_KEY' })
  ]
})
export class AppModule { }

SPA-Specific Considerations:

  • ✅ A11yCore automatically detects route changes in SPAs
  • ✅ Re-scans content when components mount/unmount
  • ✅ Maintains focus management during navigation
  • ✅ Announces page changes to screen readers
  • ⚠️ For optimal performance, use our framework-specific packages

View JavaScript framework documentation.

Static HTML Sites

For traditional HTML websites, installation is straightforward.

Installation Steps:
  1. Open your HTML file(s) in a text editor
  2. Find the</head>closing tag
  3. Paste the A11yCore script just before it
  4. Save and upload to your server
Multi-Page Sites:

For sites with multiple HTML files:

Option 1: Add to each file individually

Option 2(Recommended): Use a template/include file if your site supports it:

<!-- header.html or include/header.php -->
<script src="https://cdn.a11ycore.org/widget.js"
  data-key="YOUR_API_KEY"
  async>
</script>
Server-Side Includes (SSI):

If your server supports SSI:

<!--#include virtual="/includes/a11ycore.html" -->

Static Site Generators:

For Jekyll, Hugo, Gatsby, Next.js, etc.:

  • Add to your layout template or header partial
  • The script loads once and works across all pages
  • Check your specific generator's documentation for template locations

Configuration Options

Customize A11yCore's behavior with data attributes:

Basic Configuration:

<script src="https://cdn.a11ycore.org/widget.js"
  data-key="YOUR_API_KEY"
  data-position="bottom-right"
  data-theme="light"
  data-language="en"
  async>
</script>

Available Options:

| Attribute | Options | Default | Description | |-----------|---------|---------|-------------| |data-position|bottom-right,bottom-left,top-right,top-left|bottom-right| Widget position on screen | |data-theme|light,dark,auto|auto| Widget color scheme | |data-language|75+ language codes|auto| Interface language | |data-auto-scan|true,false|true| Automatic scanning on load | |data-show-widget|true,false|true| Show accessibility toolbar | |data-compliance-level|AA,AAA|AA| Target WCAG level |

Advanced Configuration:

For more control, use JavaScript configuration:

<script>
  window.a11yCoreConfig = {
    apiKey: 'YOUR_API_KEY',
    position: 'bottom-right',
    theme: 'light',
    features: {
      textToSpeech: true,
      cursorAdjustment: true,
      colorContrast: true,
      keyboardNav: true
    },
    excludePages: ['/checkout', '/admin'],
    scanInterval: 3600 // seconds
  };
</script>
<script src="https://cdn.a11ycore.org/widget.js" async></script>

View complete configuration reference.

Verifying Installation

1. Visual Verification

Visit your website and look for the A11yCore accessibility widget icon (typically in the bottom-right corner, unless you've configured a different position).

2. Console Verification

  1. Open browser developer tools (F12 or Cmd+Option+I)
  2. Go to the Console tab
  3. Look for:✓ A11yCore accessibility widget loaded successfully
  4. Check for your API key in the message

3. Dashboard Verification

  1. Log in to yourA11yCore dashboard
  2. You should see your website listed
  3. Initial scan begins within 2 minutes
  4. First compliance report generates within 5-10 minutes

4. Network Tab Verification

  1. Open developer tools → Network tab
  2. Filter by "widget"
  3. You should seewidget.jsload successfully (Status: 200)
  4. Check Headers to confirm it's loading fromcdn.a11ycore.org

5. Accessibility Toolbar Test

Click the A11yCore widget icon to open the toolbar. Try these features:

  • ✅ Text size adjustment
  • ✅ Color contrast modes
  • ✅ Keyboard navigation highlighting
  • ✅ Screen reader announcements
  • ✅ Text-to-speech functionality

Troubleshooting

Widget Not Appearing

Possible Causes:

  1. ❌ Incorrect API key
  2. ❌ Script placed in wrong location (not in<head>)
  3. ❌ Conflicting JavaScript errors
  4. ❌ Ad blockers or privacy extensions blocking script

Solutions:

  • Verify your API key in the dashboard
  • Check browser console for errors
  • Temporarily disable ad blockers to test
  • Ensure script is in<head>, not<body>
  • Try addingdeferinstead ofasyncattribute

Script Not Loading

Check:

// In console, type:
window.a11yCore

// If undefined, script didn't load
// If object, script loaded successfully

Common Fixes:

  • Clear browser cache
  • Check Content Security Policy (CSP) headers
  • Verify CDN is not blocked by firewall
  • Ensure HTTPS is enabled on your site

Dashboard Shows "Not Connected"

Likely Issues:

  1. API key mismatch (check for typos)
  2. Website not yet visited after installation
  3. Script blocked by security settings

Resolution:

  • Copy-paste API key directly from dashboard (avoid typing)
  • Visit your website to trigger first connection
  • Check with hosting provider about script restrictions

Performance Issues

If you notice page speed degradation:

  1. Verify async loading: The script should haveasyncattribute
  2. Check script size: Open Network tab, widget.js should be <50KB
  3. Review configuration: Disable unnecessary features if not needed
  4. Contact support: Emailsupport@a11ycore.org

Conflicts with Existing Accessibility Tools

If you have other accessibility widgets installed:

UserWay, AccessiBe, AudioEye: Remove these before installing A11yCore

  • Multiple accessibility overlays create conflicts
  • Users will experience confusing duplicate toolbars
  • Performance suffers with multiple scanning scripts

Remove conflicting tools:

  1. Find and delete their script tags
  2. Uninstall their plugins (WordPress/Shopify/etc.)
  3. Cancel their subscriptions
  4. Install A11yCore as replacement

Content Security Policy (CSP) Issues

If your site has strict CSP headers, add:

Content-Security-Policy: 
  script-src 'self' https://cdn.a11ycore.org;
  connect-src 'self' https://api.a11ycore.org;

View complete troubleshooting guide.

Advanced Features

White-Label Configuration (Professional & Enterprise Plans)

Hide the A11yCore branding and use your own:

<script src="https://cdn.a11ycore.org/widget.js"
  data-key="YOUR_API_KEY"
  data-white-label="true"
  data-custom-logo="https://yoursite.com/logo.svg"
  data-custom-brand="Your Company"
  async>
</script>

Custom Styling

Override default styles to match your brand:

/* Add to your stylesheet */
.a11ycore-widget {
  --primary-color: #your-brand-color;
  --secondary-color: #your-accent-color;
  --border-radius: 8px;
}

API Integration

For developers who want programmatic access:

// Initialize with custom callbacks
window.a11yCore.on('scanComplete', function(results) {
  console.log('Accessibility scan complete:', results);
  // Send data to your analytics
});

// Manually trigger scan
window.a11yCore.scan();

// Get current compliance score
window.a11yCore.getScore().then(score => {
  console.log('Compliance:', score);
});

Multi-Domain Setup

If you manage multiple domains on one account:

  1. Generate separate API keys for each domain in dashboard
  2. Or use domain wildcards:*.yourdomain.com
  3. View all sites in unified dashboard
  4. Get consolidated reporting

Explore API documentation.

Next Steps

Now that A11yCore is installed and running:

1. Review Your First Compliance Report

  • Check yourdashboardafter 10 minutes
  • Review identified issues by severity
  • Understand your WCAG compliance score
  • Identify high-priority improvements

Learn how to read compliance reports.

2. Generate Your Accessibility Statement

A11yCore automatically generates a legally-compliant accessibility statement:

  1. Go toDashboard → Accessibility Statement
  2. Customize with your contact information
  3. Copy the generated statement
  4. Add to your website footer or dedicated/accessibilitypage

View accessibility statement generator.

3. Set Up Automated Reporting

Configure automatic reports to stakeholders:

  1. Navigate toSettings → Reporting
  2. Add recipient email addresses
  3. Choose frequency (daily, weekly, monthly)
  4. Select report format (PDF, HTML, CSV)

4. Train Your Team

Share these resources with your team:

5. Consider Manual Audits for Complex Sites

While A11yCore provides comprehensive automated coverage, some situations benefit from expert human review:

  • Complex web applications with custom interactions
  • Government websites with strict compliance requirements
  • E-commerce sites with high transaction volumes
  • Healthcare and financial services portals

Contact our teamfor Enterprise plans with manual audit services.

6. Monitor Ongoing Compliance

Accessibility is a journey, not a destination:

  • ✅ Review weekly compliance reports
  • ✅ Address new issues as they're detected
  • ✅ Train content creators on accessibility basics
  • ✅ Test with actual assistive technology users
  • ✅ Stay updated on WCAG standard changes

7. Showcase Your Commitment

Display your accessibility commitment:

  1. Add the A11yCore compliance badge to your footer
  2. Create an/accessibilitypage explaining your efforts
  3. Include accessibility in your company values/about page
  4. Share your compliance score in marketing materials

Download accessibility badges.

Frequently Asked Questions

Do I need to reinstall after website updates?

No. A11yCore continues working automatically after website updates. The script re-scans your site every 24 hours and after detecting major changes.

Will this work with my hosting provider?

Yes. A11yCore works with all hosting providers: Bluehost, SiteGround, GoDaddy, WP Engine, Kinsta, AWS, Google Cloud, and more. It's a client-side script that doesn't depend on server configuration.

Can I use A11yCore on a subdomain?

Yes. You can use the same API key across subdomains (e.g.,www.site.com,blog.site.com,shop.site.com) or generate separate keys for independent tracking.

Does this comply with GDPR?

Yes. A11yCore does not collect, store, or process any personal data from your website visitors. We only monitor technical accessibility compliance. Our services are fully GDPR compliant.Read our privacy policy.

What happens if I exceed my visitor limit?

Your accessibility features continue working for all visitors. We'll email you suggesting an upgrade to the next plan tier. There are no surprise charges or service interruptions.

Can I test on a staging site first?

Absolutely. Install on your staging site, verify everything works, then add to production. Your API key works on any domain during the trial period.

How do I cancel my subscription?

Cancel anytime fromSettings → Billing → Cancel Subscription. No questions asked, no cancellation fees. Your service remains active until the end of your billing period.

Get Help

Need assistance with installation?

Support Options:

📧 Email Support:support@a11ycore.org

  • Response time: Within 4 hours (Professional/Enterprise plans)
  • Response time: Within 24 hours (Starter plans)

💬 Live Chat: Available in your dashboard

  • Monday-Friday: 9 AM - 5 PM EST
  • Professional/Enterprise: 24/7 priority support

📚 Documentation:docs.a11ycore.org

  • Complete guides and references
  • Video tutorials
  • Code examples

🎓 Video Tutorials:View installation videos

👥 Community:Join our Slack community

  • Connect with other A11yCore users
  • Share tips and best practices
  • Get peer support

Additional Resources

Internal Links

External Resources

Installation complete!Your website is now protected with A11yCore's comprehensive accessibility coverage. Check your dashboard to see your first compliance report.

View Your Dashboard|Contact Support|Read Documentation

Last updated: January 14, 2026

Share this article

Related Articles

Design

10 Common Accessibility Mistakes & How to Fix Them | A11yCore

WebAIM's 2024 analysis revealed that 94.8% of websites contain detectable WCAG violations. Most accessibility barriers aren't complex technical challenges—they're simple oversights that are remarkably straightforward to fix. Learn the 10 most common accessibility mistakes found on business websites and get specific, actionable solutions you can implement today.

Read article