Getting Started with Accessify

Accessify makes your website compliant with WCAG 2.2 Level AAaccessibility standards in under five minutes. Whether you're building a corporate website, an e-commerce store, or a SaaS application, Accessify's lightweight accessibility widget gives every visitor real-time control over 31 accessibility features and 14 disability profiles — with zero code changes required on your end. This guide walks you through account creation, widget installation, configuration, and verification so you can start serving accessible experiences to all your users today.

Prerequisites

Before you begin, make sure you have the following ready:

  • A live website— Accessify works on any publicly accessible website regardless of the technology behind it: static HTML, WordPress, Shopify, Next.js, Vue.js, Wix, Squarespace, and more.
  • An email address— you'll use this to create your Accessify account. You can also sign up with Google OAuth for faster onboarding.
  • Admin access to your website— you'll need the ability to add a <script>tag to your site's HTML, or install a plugin/app if you're using a CMS like WordPress or Shopify.
  • 5 minutes— that's all it takes from sign-up to a fully accessible website.

Step 1: Create Your Accessify Account

Head to /registerand create an account using your email address or Google sign-in. All plans include a 14-day free trial. After confirming your email you'll land on the Accessify dashboard where you can manage all your sites, review AI remediations, and configure your widget.

Accessify offers plans for every stage of your accessibility journey:

  • Starter — €390/year— perfect for a single website with up to 100,000 monthly page views. Includes 100 AI-generated image descriptions per month.
  • Business — €1,390/year— supports up to 3 websites with 500,000 monthly page views and unlimited AI remediations.
  • Enterprise — contact sales— unlimited sites, unlimited page views, white-label branding, dedicated support, and custom SLAs.

All plans include a 14-day free trial. You can upgrade or change your plan at any time from the Billing page in your dashboard.

Step 2: Add Your Site

From the Dashboard, click Add Site. Enter your website's domain (for example, www.example.com) and click Create. Accessify generates a unique account keyfor your site — a short identifier that links the widget on your website back to your Accessify configuration and analytics.

You can add multiple sites depending on your plan. Each site gets its own account key, independent configuration, AI remediation queue, and WCAG scanner results.

Step 3: Install the Widget

Copy the following snippet and paste it into your website's HTML, just before the closing </body> tag. Replace YOUR_ACCOUNT_KEY with the account key Accessify generated for your site in the previous step.

<script
  src="https://cdn.accessify.io/widget.js"
  data-account="YOUR_ACCOUNT_KEY"
  async>
</script>

That single script tag is everything you need. The widget JavaScript is served from Accessify's global CDN, loads asynchronously so it never blocks your page rendering, and weighs under 40 KB gzipped.

For platform-specific installation instructions — including one-click plugins for WordPress, Shopify, Drupal, Joomla, and PrestaShop, plus copy-paste guides for Wix, Squarespace, Webflow, React, Vue, and 20+ other platforms — see the Widget Installation Guide.

Verify Your Installation

After adding the script tag, visit your website in a browser and look for the accessibility icon in the bottom-right corner of the page (this is the default position — you can change it later). Click it to open the widget panel and confirm all features are working.

You can also verify the installation programmatically:

  1. Open your browser's DevTools(F12 or right-click → Inspect).
  2. In the Elements tab, search for #accessify-root. This is the Shadow DOM host element that contains the entire widget UI, fully isolated from your site's CSS.
  3. In the Console tab, listen for the ready event:
    window.addEventListener('accessify:ready', (e) => {
  console.log('Accessify loaded', e.detail);
});

If the accessify:ready event fires and you can see #accessify-root in the DOM, your installation is complete.

Step 4: Configure the Widget

Navigate to Sites → Your Site → Widgetin the Accessify dashboard to open the visual widget configurator. The left panel contains all configuration options while the right panel shows a live preview of your website with the widget active — every change you make is reflected in real time.

Here's what you can customize:

  • Button position— choose from 9 anchor positions using a visual grid picker (top-left, top-center, top-right, middle-left, middle-right, bottom-left, bottom-center, bottom-right, or hidden).
  • Button size— small, medium, or large to match your site's design.
  • Color and icon— pick a brand-matching accent color and choose from several accessibility icon styles.
  • Feature toggles— enable or disable any of the 31 accessibility features individually.
  • Default levels— set default font size, letter spacing, word spacing, and line height levels.
  • Profiles— enable, rename, or customize any of the 14 disability profiles (Visually Impaired, Blind, Motor Impaired, ADHD, Elderly, Dyslexia, Cognitive, Seizure Safe).
  • Language— select the widget's default language from 20+ supported languages including English, French, Arabic (RTL), German, Spanish, and more.
  • Accessibility statement URL— link to your organization's accessibility statement, displayed in the widget footer.
  • Oversized widget mode— enable by default for users who need a larger widget interface (scales the panel 1.4×).
  • White-label branding(Agency/Enterprise plans) — replace the Accessify logo and name with your own brand, custom header label, and logo URL.

All configuration changes are saved to Accessify's CDN and reflected on your live website within 5 minutes (the edge cache TTL). No redeployment or code changes are needed.

Step 5: You're Live

That's it. Your website now serves a fully functional accessibility widget to every visitor. Here's what your users get:

  • 31 accessibility features— contrast modes (invert, dark, light, smart AI), font scaling (4 levels), legible fonts, letter/word/line spacing, text alignment, saturation controls, link highlighting, big cursor, reading guide, stop animations, keyboard navigation, tooltips, text-to-speech, page structure navigation, mute sounds, and focus indicator enhancement.
  • 14 disability profiles— one-click presets for visually impaired, blind, motor impaired, ADHD, elderly, dyslexia, cognitive disabilities, and seizure-safe browsing. Each profile activates a curated combination of features optimized for that disability.
  • Persistent preferences — user settings are saved to localStorage and automatically restored on every subsequent visit, so users never have to reconfigure the widget.
  • Full keyboard accessibility— the widget panel itself is fully keyboard navigable with focus trapping, escape-to-close, and skip links.

What Happens Behind the Scenes

When a visitor loads your page, here's the sequence of events that Accessify performs automatically:

  1. CDN config fetch — the widget reads the data-account attribute from the script tag and fetches your site's configuration JSON from Accessify's global CDN. This response is edge-cached with a 5-minute TTL for near-instant delivery worldwide.
  2. State restoration — the widget checks localStorage for any previously saved user preferences and restores them immediately, so returning visitors see their preferred settings without delay.
  3. Shadow DOM mounting — the widget creates a closed Shadow DOM under #accessify-root. All widget HTML and CSS lives inside this shadow boundary, guaranteeing complete CSS isolation — the widget's styles never leak into your site, and your site's styles never break the widget.
  4. ART scanning (Automated Remediation Technology) — a MutationObserver watches document.body for DOM changes. On initial load and after every SPA navigation, ART scans the page for WCAG violations and patches them at runtime: missing alt text on images, absent ARIA labels, insufficient color contrast, unlabeled form inputs, and missing keyboard focus indicators.
  5. AI remediation — images with missing or empty alt attributes are batched (up to 20 per page) and sent to Accessify's AI endpoint. Claude's vision model analyzes each image and generates descriptive, contextual alt text that's injected back into the DOM. AI responses are cached in Redis to avoid redundant API calls.
  6. Ready event — once initialization is complete, the widget fires a accessify:ready custom event on the window object, which you can listen for in your own JavaScript to trigger any post-load logic.

Supported Platforms

Accessify works on every website, regardless of the framework, CMS, or hosting platform. Here are the platforms we provide dedicated installation guides or plugins for:

  • WordPress — one-click plugin from the WordPress plugin directory
  • Shopify — Shopify App Store app with automatic theme injection
  • Next.js / React — CDN script tag via Next.js <Script> component
  • Vue.js / Nuxt — CDN script tag in your layout
  • Wix — paste the script tag in Wix's custom code settings
  • Squarespace — add via Code Injection in site settings
  • Webflow — paste in Project Settings → Custom Code
  • Google Tag Manager — deploy via custom HTML tag
  • Drupal — official module with admin settings page
  • Joomla — official system plugin with configuration panel
  • PrestaShop — official module with admin settings form
  • Magento — extension via layout XML configuration
  • Weebly — paste in site footer code settings
  • BigCommerce — add via Script Manager
  • Duda — paste in site-wide HTML settings
  • HubSpot CMS — add via site footer HTML
  • Framer — paste in custom code settings
  • Ghost — add via Code Injection
  • Adobe Commerce — extension or manual template edit
  • Umbraco — add to master layout template

For detailed, step-by-step instructions for each platform, visit the Widget Installation Guide.

WCAG 2.2 Compliance Coverage

Understanding what Accessify covers — and what still requires manual attention — is essential for achieving full WCAG 2.2 Level AA compliance.

What the Widget Covers

Accessify's 31 accessibility features address needs across four disability categories defined by WCAG:

  • Visual— contrast modes, font scaling, legible fonts, link highlighting, big cursor, reading guide, saturation and grayscale controls, focus indicator enhancement.
  • Motor— keyboard navigation with skip links, enhanced focus indicators, big cursor for fine-motor difficulties.
  • Cognitive— stop animations, reduced saturation, legible fonts, tooltips, reading guide, text-to-speech.
  • Auditory— mute sounds for users sensitive to audio, page structure navigation for screen-reader-like browsing.

What ART (Automated Remediation) Covers

ART automatically scans and patches WCAG violations at runtime without modifying your source code:

  • AI alt text— generates descriptive alternative text for images missing altattributes using Claude's vision model.
  • ARIA labels — adds missing aria-label, role, aria-required, and aria-checked attributes to interactive elements.
  • Color contrast— detects text with insufficient WCAG contrast ratios (below 4.5:1) and applies inline color corrections.
  • Form labels — links orphaned <input> elements to their corresponding <label> elements.
  • Keyboard access — adds tabindex="0" to focusable elements missing keyboard accessibility.

What Still Needs Manual Work

No automated tool can achieve 100% WCAG compliance on its own. The following areas require human review and manual intervention:

  • Semantic HTML structure— proper use of headings (h1–h6), landmarks (<nav>, <main>, <aside>), and lists.
  • Reading order— ensuring the DOM order matches the visual presentation for screen reader users.
  • Complex interactive patterns— custom widgets like carousels, drag-and-drop interfaces, and rich text editors need manual ARIA implementation.
  • Content quality— meaningful link text (avoid "click here"), descriptive page titles, and clear error messages.
  • Media accessibility— captions and transcripts for video and audio content.

Accessify's WCAG Scanner helps you identify these remaining issues with detailed violation reports and remediation guidance.

Regulatory Frameworks

Accessify helps you meet compliance requirements across multiple accessibility regulations worldwide:

  • European Accessibility Act (EAA)— entered force June 2025, requiring all EU websites to comply with WCAG 2.2 AA.
  • RGAA(France) — France's national accessibility framework, closely aligned with WCAG 2.2.
  • BITV 2.0(Germany) — Germany's federal accessibility ordinance mandating WCAG compliance.
  • EN 301 549(EU) — the European standard for ICT accessibility.
  • ADA(United States) — the Americans with Disabilities Act, which courts have interpreted to require WCAG 2.2 AA compliance for websites.
  • Section 508(United States) — applies to federal agencies and their vendors, requiring WCAG conformance.

Common Issues After Installation

If the widget doesn't appear after installation, check these common causes:

Content Security Policy (CSP) Blocking the Script

If your site uses a Content Security Policy, you need to add Accessify's CDN to your script-src directive:

Content-Security-Policy: script-src 'self' https://cdn.accessify.io;

Without this, the browser will silently block the widget script. Check the browser console for CSP violation errors.

Incorrect Account Key

Make sure the data-account attribute in your script tag matches the account key shown in your Accessify dashboard under Sites → Your Site. A mismatched key will cause the config fetch to fail silently.

Cached Pages

If you just installed the widget or changed its configuration, it may take up to 5 minutes for changes to propagate due to the CDN's edge cache TTL. Try clearing your browser cache or appending ?v=2 to your URL to force a fresh load.

Widget Hidden Behind Other Elements

The Accessify widget uses a high z-index to stay above page content. However, if your site has elements with extremely high z-index values (e.g., cookie banners, chat widgets), they may overlap the Accessify button. You can adjust the button position in the widget configurator or contact support for custom z-index overrides.

Next Steps

Now that your widget is live, explore these resources to get the most out of Accessify:

  • Widget Configuration — deep dive into every configuration option, including advanced theming, feature presets, and conditional display rules.
  • JavaScript API Reference — programmatically control the widget with window.Accessify methods. Open, close, toggle features, apply profiles, and listen to events from your own code.
  • WCAG Scanner — run automated WCAG 2.2 scans on your site, get violation reports with severity levels, and track your compliance score over time.
  • White-Label Setup — for agencies: rebrand the widget and dashboard under your own domain, logo, and colors. Manage unlimited client sites from a single master account.