Documentation

Complete guide to implementing and customizing the Accessly Toolbar

Contents
Quick Links
Live Demo Pricing Integration Guide

Getting Started

The Accessly Toolbar is a comprehensive solution to make your website more accessible to users with disabilities. It provides tools for text adjustment, color schemes, screen reader support, and more.

Quick Setup

Add two lines of code to your website and you're ready to go. No complex configuration required.

Customizable

Choose which features to enable, customize colors, and adjust settings to match your brand.

Analytics

Track which accessibility features your visitors are using most frequently.

Compliance

Helps meet WCAG 2.1, ADA, Section 508, and other accessibility standards.

Installation

Follow these simple steps to install the Accessly Toolbar on your website:

Step 1: Get Your License Key

Sign up for a plan and get your unique license key from the dashboard.

Step 2: Add the Script

Add the following code just before the closing </head> tag (updated format):

<script> (function () { window.accessibilityToolbarConfig = { licenseKey: "YOUR_LICENSE_KEY_HERE", floatIconPosition: "top-right", brandColor: "#28a745", showToolbarOnLoad: false, enableAnalytics: true }; // Load the toolbar script ONCE var script = document.createElement("script"); script.src = "https://accessly.website/assets/js/atb001_loader.min.js"; script.async = true; document.head.appendChild(script); })(); </script>
Step 3: Verify Installation

Refresh your website and look for the accessibility icon in the corner. Click it to test the features.

Configuration Options

Customize the toolbar with these configuration options:

Option Type Default Description
licenseKey String null Your unique license key (required for Premium/Enterprise)
enablePremium Boolean false Enable premium features
enableAnalytics Boolean true Track feature usage analytics
floatIconPosition String 'bottom-right' Position of the icon: 'bottom-right', 'bottom-left', 'top-right', 'top-left'
brandColor String '#007bff' Primary color for the toolbar (Enterprise only)
companyName String 'Accessibility Tools' Your company name (Enterprise only)

Comprehensive Configuration Options

Here's a complete list of all client-side script options you can use with the Accessly Toolbar:

Option 1: Basic Configuration (Minimum Required)
<script> (function () { window.accessibilityToolbarConfig = { licenseKey: "YOUR_LICENSE_KEY_HERE" }; // Load the toolbar script ONCE var script = document.createElement("script"); script.src = "https://accessly.website/assets/js/atb001_loader.min.js"; script.async = true; document.head.appendChild(script); })(); </script>
Option 2: Full Configuration with All Options
<script> (function () { window.accessibilityToolbarConfig = { // REQUIRED: Your license key licenseKey: "HRD2V-EXQCE-9NFKE-VZ976-JXXCR", // Toolbar Position Options: // "top-right", "top-left", "bottom-right", "bottom-left", "middle-right", "middle-left" floatIconPosition: "top-right", // Branding & Appearance: companyName: "Accessly Toolbar", // Custom name in toolbar header brandColor: "#28a745", // Primary brand color // Behavioral Options: showToolbarOnLoad: true, // Show toolbar immediately (default: false) enableProfessional: false, // Force Professional features (if license allows) enablePremium: false, // Force Premium features (if license allows) autoLoad: true, // Auto-load toolbar (default: true) debug: false, // Enable debug logging in console // URLs & Assets: websiteUrl: "https://accessly.website", // Your website URL assetsBaseUrl: "https://accessly.website", // Base URL for assets // Accessibility Feature Defaults: defaultZoom: 100, // Default zoom percentage defaultVoice: "female", // "female", "male", or "auto" defaultColorMode: "normal", // "normal", "dark", or "contrast" // Feature Toggles (enable/disable specific features): features: { zoom: true, // Enable zoom functionality darkMode: true, // Enable dark mode highContrast: true, // Enable high contrast bigCursor: true, // Enable big cursor hideImages: true, // Enable hide images lineHeight: true, // Enable line height adjustment monochrome: true, // Enable monochrome mode dyslexicFont: true, // Enable dyslexic-friendly font reduceMotion: true, // Enable reduce motion textToSpeech: true, // Enable text-to-speech voiceSelection: true, // Enable voice selection resetButton: true // Enable reset button }, // Professional Features (require Professional license): professionalFeatures: { speakHover: true, // Text-to-speech on hover keyboardShortcuts: true, // Keyboard navigation shortcuts customCss: true, // Allow custom CSS injection advancedAnalytics: true // Usage analytics }, // Localization: language: "en", // Default language availableLanguages: ["en", "es", "fr"], // Supported languages // Callback Functions: onReady: function() { console.log("Accessibility toolbar is ready!"); }, onSettingsChange: function(settings) { console.log("Settings changed:", settings); }, onFeatureToggle: function(feature, enabled) { console.log(feature + " is now " + (enabled ? "enabled" : "disabled")); }, // Storage Options: useLocalStorage: true, // Save settings locally sessionOnly: false, // Only save for current session // Performance Options: lazyLoad: true, // Lazy load toolbar resources deferLoading: false, // Wait for page to be fully loaded // SEO & Accessibility Compliance: ariaLabels: { toggleButton: "Accessibility Tools", panel: "Accessibility Settings", closeButton: "Close panel", resetButton: "Reset all settings" }, // Custom CSS Classes (for theming): customClasses: { toggleButton: "custom-toggle", panel: "custom-panel", button: "custom-btn", activeButton: "custom-btn-active" }, // Animation Settings: animations: { enable: true, // Enable animations duration: 300, // Animation duration in ms easing: "ease-in-out" // CSS easing function }, // Voice Settings: voiceSettings: { rate: 1.0, // Speech rate (0.5 to 2) pitch: 1.0, // Speech pitch (0.5 to 2) volume: 1.0 // Speech volume (0 to 1) }, // Zoom Settings: zoomSettings: { minZoom: 50, // Minimum zoom percentage maxZoom: 200, // Maximum zoom percentage zoomStep: 10 // Zoom increment/decrement step }, // Keyboard Shortcuts (Professional feature): keyboardShortcuts: { enable: true, togglePanel: "Alt+A", // Toggle toolbar panel zoomIn: "Alt+Plus", // Zoom in zoomOut: "Alt+Minus", // Zoom out resetZoom: "Alt+0", // Reset zoom darkMode: "Alt+D", // Toggle dark mode highContrast: "Alt+H" // Toggle high contrast }, // Analytics & Tracking (Professional feature): analytics: { enable: true, trackFeatureUsage: true, trackSessionDuration: true, anonymousTracking: true }, // Customization for Specific Elements: excludeElements: [ ".no-accessibility", // CSS selector for elements to exclude "[data-no-a11y]" // Data attribute for exclusion ], // Integration with Other Tools: integrations: { googleAnalytics: false, // Integrate with Google Analytics hotjar: false, // Integrate with Hotjar googleTagManager: false // Integrate with GTM }, // Advanced Configuration: advanced: { useShadowDOM: false, // Use Shadow DOM for isolation polyfillMissingFeatures: true, // Polyfill missing browser features compatibilityMode: true // Enhanced browser compatibility } }; // Load the toolbar script ONCE var script = document.createElement("script"); script.src = "https://accessly.website/assets/js/atb001_loader.min.js"; script.async = true; document.head.appendChild(script); })(); </script>

Available Color Options

#007bff Blue (Default)
#28a745 Green
#dc3545 Red
#ffc107 Yellow/Amber
#6f42c1 Purple
#17a2b8 Teal
#fd7e14 Orange
#e83e8c Pink
#343a40 Dark Gray
#20c997 Mint
Unlimited Color Customization

There is no limit to color customization! You can use any color you want:

  • Any HEX color code (e.g., #1a2b3c, #FF5733, #00AABB)
  • RGB/RGBA values (e.g., rgb(255, 87, 51), rgba(0, 170, 187, 0.8))
  • HSL/HSLA values (e.g., hsl(180, 100%, 37%), hsla(120, 100%, 50%, 0.5))
  • Color names (e.g., coral, darkcyan, goldenrod)
  • Brand-specific colors to match your exact branding

To customize your toolbar colors: Go to License Encoder → Enter your license key → Customize colors in the configuration → Generate your custom code.

Quick Reference - Most Common Options
<script> (function () { window.accessibilityToolbarConfig = { // REQUIRED licenseKey: "YOUR_LICENSE_KEY_HERE", // MOST COMMON OPTIONS floatIconPosition: "top-right", // Position brandColor: "#007bff", // Color companyName: "Your Company", // Custom name showToolbarOnLoad: true, // Auto-show // BASIC FEATURES features: { zoom: true, darkMode: true, highContrast: true, bigCursor: false, hideImages: false, lineHeight: true, monochrome: false, dyslexicFont: false, reduceMotion: false, textToSpeech: false }, // CALLBACKS (optional) onReady: function() { console.log("Toolbar ready!"); } }; // Load the toolbar script ONCE var script = document.createElement("script"); script.src = "https://accessly.website/assets/js/atb001_loader.min.js"; script.async = true; document.head.appendChild(script); })(); </script>
Important Notes:
  1. License Key is REQUIRED - Without it, the toolbar won't work
  2. Position Options: Choose from 6 positions based on your layout
  3. Color Options: Use any hex color for branding
  4. Feature Toggles: Enable/disable specific features as needed
  5. Professional Features: Only work with Professional licenses
  6. Mobile Considerations: Adjust settings for mobile users
  7. Performance: Use lazyLoad and autoLoad for better performance
  8. Updated Script Format: Now uses self-executing function with dynamic script loading

Choose the configuration that best fits your website's needs!

Features Guide

The Accessly Toolbar provides a comprehensive set of accessibility features. Here's a detailed guide to each feature and how it helps users:

Page Zoom

Allows users to increase or decrease text size up to 200% of the original size. This helps users with low vision or reading difficulties.

  • Default Range: 50% to 200% zoom
  • Increment: 10% per click
  • Keyboard Shortcuts: Alt+Plus (zoom in), Alt+Minus (zoom out), Alt+0 (reset)
  • Mobile Support: Works on mobile devices
  • WCAG Compliance: 1.4.4 Resize text (AA)
Dark Mode

Inverts colors to create a dark background with light text. Reduces eye strain and improves readability in low-light conditions.

  • WCAG Compliance: Helps meet contrast requirements
  • User Preference: Settings persist across sessions
  • Keyboard Shortcut: Alt+D to toggle
  • Auto-detection: Can follow system dark mode preference
  • WCAG Compliance: 1.4.6 Contrast (Enhanced) (AAA)
High Contrast Mode

Increases contrast between text and background elements. Essential for users with low vision or color blindness.

  • Multiple Themes: Dark, light, and colored contrast options
  • Customizable: Adjust contrast levels in Professional/Premium plans
  • Keyboard Shortcut: Alt+H to toggle
  • WCAG Compliance: 1.4.6 Contrast (Enhanced) (AAA)
Big Cursor

Increases cursor size for better visibility. Helps users with motor impairments or visual difficulties.

  • Multiple Sizes: Small, medium, and large cursor options
  • High Visibility: Contrasting color for better tracking
  • Mobile Consideration: Not applicable on touch devices
  • WCAG Compliance: 2.5.8 Target Size (Minimum) (Level AAA)
Hide Images

Temporarily hides images to reduce visual clutter and improve focus on text content. Useful for users with cognitive disabilities.

  • Selective Hiding: Can hide decorative images only
  • Alt Text Preservation: Keeps alt text accessible
  • Performance: May improve page load times
  • WCAG Compliance: 1.1.1 Non-text Content (Level A)
Line Height Adjustment

Increases spacing between lines of text for better readability, especially for users with dyslexia or reading disorders.

  • Adjustment Range: 1.0x to 2.5x line height
  • Increments: 0.25x per adjustment
  • Font Compatibility: Works with all font types
  • WCAG Compliance: 1.4.8 Visual Presentation (Level AAA)
Monochrome Mode

Converts all colors to grayscale. Helps users with color blindness distinguish content by brightness rather than hue.

  • Types Supported: Protanopia, Deuteranopia, Tritanopia simulations
  • Adjustable Intensity: From mild to complete grayscale
  • WCAG Compliance: 1.4.1 Use of Color (Level A)
Dyslexic-Friendly Font

Switches to OpenDyslexic font or similar dyslexia-friendly typefaces to improve readability for users with dyslexia.

  • Font Options: OpenDyslexic, Lexend, Comic Sans alternatives
  • Weight Adjustment: Can adjust font weight for clarity
  • Spacing Control: Letter and word spacing adjustments
  • WCAG Compliance: 1.4.8 Visual Presentation (Level AAA)
Reduce Motion

Minimizes or eliminates animations, transitions, and auto-playing media. Essential for users with vestibular disorders or motion sensitivity.

  • Animation Control: Reduces or disables CSS animations
  • Video Control: Pauses auto-playing videos
  • Parallax Effects: Disables parallax scrolling
  • WCAG Compliance: 2.3.3 Animation from Interactions (Level AAA)
Text-to-Speech

Converts on-screen text to spoken audio using browser's speech synthesis API. Supports multiple languages and voices.

  • Voice Options: Male, female, and child voices
  • Language Support: 50+ languages available
  • Speed Control: Adjustable speech rate
  • Selection Reading: Read selected text only
  • WCAG Compliance: 1.1.1 Non-text Content (Level A)
Voice Selection

Allows users to choose preferred voice characteristics for text-to-speech functionality.

  • Voice Types: Gender, age, and accent options
  • Pitch Control: Adjust voice pitch
  • Volume Control: Independent volume control
  • Preview Feature: Test voices before selection
Accessibility Standards Compliance

The Accessly Toolbar helps websites meet multiple WCAG 2.1 success criteria:

Level A (Basic Accessibility)
  • 1.1.1 Non-text Content
  • 1.3.1 Info and Relationships
  • 1.4.1 Use of Color
  • 2.1.1 Keyboard
Level AA/AAA (Enhanced Accessibility)
  • 1.4.4 Resize Text (AA)
  • 1.4.6 Contrast (Enhanced) (AAA)
  • 1.4.8 Visual Presentation (AAA)
  • 2.3.3 Animation from Interactions (AAA)

Note: While the toolbar provides significant accessibility improvements, it doesn't guarantee full compliance. We recommend conducting a professional accessibility audit for complete compliance verification.

Keyboard Shortcodes

Accessly Toolbar provides comprehensive keyboard shortcuts to enhance accessibility for keyboard-only users and improve efficiency for all users. These shortcuts are available when the toolbar is installed and active on your website.

Important Notes:
  • Keyboard shortcuts work only when the webpage is focused (not when typing in form fields)
  • Some shortcuts may conflict with browser or operating system shortcuts
  • Users can disable shortcuts in toolbar settings if needed
  • Shortcuts are designed to be intuitive and easy to remember

Complete Keyboard Shortcuts Reference

Toolbar Navigation & Control

Shortcuts for opening, closing, and controlling the toolbar interface.

Keyboard Shortcut Action Description
F12 Open/Close Toolbar Panel Toggles the main toolbar panel visibility
Escape (Esc) Close Panel Closes any open toolbar panels or dialogs
Ctrl + Shift + Alt + R Reset All Settings Resets all accessibility settings to defaults
Zoom & Text Adjustment

Shortcuts for controlling page zoom and text size adjustments.

Keyboard Shortcut Action Description
Ctrl + 1 Zoom In Increase page zoom by 10% increments
Ctrl + 2 Zoom Out Decrease page zoom by 10% increments
Ctrl + 0 Reset Zoom Reset zoom to default 100%
Ctrl + Shift + L Adjust Line Height Cycle through line height options
Color & Display Modes

Shortcuts for toggling between different color and display modes.

Keyboard Shortcut Action Description
Ctrl + Shift + D Dark Mode Toggle dark mode on/off
Ctrl + Shift + C High Contrast Mode Toggle high contrast mode on/off
Ctrl + Shift + N Normal Mode Return to normal color mode
Ctrl + Shift + H Hide Images Toggle image visibility on/off
Font & Reading Assistance

Shortcuts for font adjustments and reading assistance features.

Keyboard Shortcut Action Description
Ctrl + Shift + F Dyslexic Font Toggle dyslexia-friendly font on/off
Ctrl + Shift + S Speak on Hover Toggle text-to-speech on hover feature
Navigation & Interaction

Shortcuts for cursor and interaction enhancements.

Keyboard Shortcut Action Description
Ctrl + Shift + B Big Cursor Toggle enlarged cursor mode
Ctrl + Shift + M Reduce Motion Toggle reduced motion/animations

Technical Implementation

The keyboard shortcuts are implemented using the following JavaScript mapping in the toolbar code:

// Keyboard shortcuts mapping - UPDATED: Ctrl+Shift+M for reduce motion this.keyboardShortcuts = { 'F12': { action: 'toggle-panel', description: 'Open/Close panel' }, 'Escape': { action: 'close-panel', description: 'Close panel' }, 'Ctrl+1': { action: 'zoom-in', description: 'Zoom in' }, 'Ctrl+2': { action: 'zoom-out', description: 'Zoom out' }, 'Ctrl+0': { action: 'zoom-reset', description: 'Reset zoom' }, 'Ctrl+Shift+D': { action: 'color-dark', description: 'Dark mode' }, 'Ctrl+Shift+C': { action: 'color-contrast', description: 'High contrast' }, 'Ctrl+Shift+N': { action: 'color-normal', description: 'Normal mode' }, 'Ctrl+Shift+H': { action: 'hide-images', description: 'Toggle images' }, 'Ctrl+Shift+L': { action: 'line-height', description: 'Adjust line height' }, 'Ctrl+Shift+M': { action: 'reduce-motion', description: 'Toggle reduce motion' }, // CHANGED 'Ctrl+Shift+F': { action: 'dyslexic-font', description: 'Toggle dyslexic font' }, 'Ctrl+Shift+B': { action: 'big-cursor', description: 'Toggle big cursor' }, 'Ctrl+Shift+S': { action: 'speak-hover', description: 'Toggle speak hover' }, 'Ctrl+Shift+Alt+R': { action: 'reset', description: 'Reset all settings' } };

Configuration Options

You can configure keyboard shortcuts in your Accessly Toolbar setup:

Enable/Disable Keyboard Shortcuts
<script> (function () { window.accessibilityToolbarConfig = { licenseKey: "YOUR_LICENSE_KEY_HERE", // Enable keyboard shortcuts (Professional feature) professionalFeatures: { keyboardShortcuts: true }, // Customize keyboard shortcuts keyboardShortcuts: { enable: true, togglePanel: "F12", // Default: F12 zoomIn: "Ctrl+1", // Default: Ctrl+1 zoomOut: "Ctrl+2", // Default: Ctrl+2 resetZoom: "Ctrl+0", // Default: Ctrl+0 darkMode: "Ctrl+Shift+D", // Default: Ctrl+Shift+D highContrast: "Ctrl+Shift+C" // Default: Ctrl+Shift+C } }; // Load the toolbar script ONCE var script = document.createElement("script"); script.src = "https://accessly.website/assets/js/atb001_loader.min.js"; script.async = true; document.head.appendChild(script); })(); </script>
Disable Specific Shortcuts
<script> (function () { window.accessibilityToolbarConfig = { licenseKey: "YOUR_LICENSE_KEY_HERE", // Disable specific shortcuts keyboardShortcuts: { enable: true, togglePanel: null, // Disable F12 shortcut zoomIn: null, // Disable zoom in shortcut zoomOut: null // Disable zoom out shortcut } }; // Load the toolbar script ONCE var script = document.createElement("script"); script.src = "https://accessly.website/assets/js/atb001_loader.min.js"; script.async = true; document.head.appendChild(script); })(); </script>
Important Considerations
  • Browser Conflicts: Some shortcuts (like F12) may conflict with browser developer tools
  • Operating System Conflicts: OS-level shortcuts may take precedence
  • Accessibility: Ensure shortcuts don't interfere with screen reader shortcuts
  • User Education: Consider providing a cheat sheet or tooltips for users
  • Mobile Devices: Keyboard shortcuts are primarily for desktop/laptop users
Best Practices for Keyboard Shortcuts
  1. Consistency: Use consistent modifier key patterns (Ctrl+Shift+[key])
  2. Mnemonic: Choose keys that are easy to remember (D for Dark, F for Font)
  3. Documentation: Always document available shortcuts for users
  4. User Control: Allow users to disable or customize shortcuts
  5. Testing: Test shortcuts with different browsers and assistive technologies
  6. Fallbacks: Ensure all features remain accessible via mouse/touch if shortcuts are disabled

API Reference

The Accessly Toolbar exposes a global API for programmatic control:

Open Toolbar
window.accessibilityToolbarAPI.open()

Programmatically open the toolbar.

<button onclick="window.accessibilityToolbarAPI.open()"> Open Accessly Toolbar </button>
Enable Dark Mode
window.accessibilityToolbarAPI.enableDarkMode()

Switch to dark mode programmatically.

Get Settings
window.accessibilityToolbarAPI.getSettings()

Returns current toolbar settings and preferences.

Security Features

The Accessly Toolbar includes multiple security layers to protect your license and configuration. Choose the security level that fits your needs.

Security Warning

Your license key should be treated as sensitive information. Never share it publicly or commit it to public repositories.

Accessly Toolbar Encoder

We provide three encoding methods to balance security with compatibility:

Method 1: Plain Key
Basic Security • Full Compatibility
  • License key in plain text
  • Easiest to debug and implement
  • Works with all loader versions
  • Recommended for testing environments
<script> (function () { window.accessibilityToolbarConfig = { licenseKey: "HRD2V-EXQCE-9NFKE-VZ976-JXXCR" }; // Load the toolbar script ONCE var script = document.createElement("script"); script.src = "https://accessly.website/assets/js/atb001_loader.min.js"; script.async = true; document.head.appendChild(script); })(); </script>
Method 2: Encoded Key
Medium Security • Backward Compatible
  • Key encoded, configuration visible
  • Protects license key from casual viewing
  • Maintains configuration readability
  • Recommended for most production sites
<script> (function () { window.accessibilityToolbarConfig = { licenseKey: "aHR0cHM6Ly9hY2Nlc3NseS53ZWJzaXRlLw==", // Other config options remain readable floatIconPosition: "top-right", brandColor: "#28a745" }; // Load the toolbar script ONCE var script = document.createElement("script"); script.src = "https://accessly.website/assets/js/atb001_loader.min.js"; script.async = true; document.head.appendChild(script); })(); </script>
Method 3: Full Config
High Security • All Features
  • Everything encoded
  • Maximum protection for license and config
  • Requires newer loader version
  • Recommended for security-conscious organizations
<script> (function() { const SALT = "acc3ss1b1l1ty_t00lb@r_s@lt_2024_v3"; const encodedConfig = "eyJsaWNlbnNlS2V5IjoiSFJEMlYtRVhRQ0UtOU5GS0UtVlo5NzYtSlhYQ1IiLCJjb25maWciOnsiZmxvYXRJY29uUG9zaXRpb24iOiJ0b3AtcmlnaHQifX0="; function decodeConfig(encoded) { try { const decoded = atob(encoded); const parts = decoded.split("::"); if (parts.length === 3) { const [configJson, salt, domain] = parts; if (salt === SALT) { return JSON.parse(configJson); } } } catch(e) { console.error('Config decode error:', e); } return null; } const decoded = decodeConfig(encodedConfig); if (decoded) { window.accessibilityToolbarConfig = decoded; } // Load the toolbar script ONCE var script = document.createElement("script"); script.src = "https://accessly.website/assets/js/atb001_loader.min.js"; script.async = true; document.head.appendChild(script); })(); </script>

Method Comparison

Feature Method 1: Plain Key Method 2: Encoded Key Method 3: Full Config
License Key Visibility Visible Hidden Hidden
Configuration Visibility Visible Visible Hidden
Security Level Basic Medium High
Backward Compatibility Full Yes New Loader Only
Professional Features Limited Yes Full
Debugging Ease Easy Medium Hard
Recommended For Testing/Development Production Security-Conscious

How to Use the Encoder

Step 1: Access the Encoder

Visit the License Encoder Tool in your dashboard.

Step 2: Select Encoding Method
Method 1: Plain Key

License key in plain text

Basic Security • Full Compatibility • Easiest to Debug
Method 2: Encoded Key

Key encoded, config visible

Medium Security • Backward Compatible
Method 3: Full Config

Everything encoded

High Security • All Features
Step 3: Configure Your Settings

The encoder tool provides a user-friendly interface to configure:

  • Basic Configuration
    • License Key (automatically populated)
    • Position (6 options available)
    • Brand Color (any hex color)
  • Behavior Options
    • Show toolbar on page load
    • Enable analytics
  • Feature Management
    • Page Zoom
    • Dark Mode
    • High Contrast
    • Big Cursor
    • Hide Images
    • Line Height
    • Monochrome
    • Dyslexic Font
    • Reduce Motion
    • Text-to-Speech
    • Voice Selection
Step 4: Generate and Copy Code

Click the appropriate generation button based on your selected method:

<button class="btn btn-success">Generate Plain Key Script</button> <button class="btn btn-warning">Generate Encoded Key Script</button> <button class="btn btn-danger">Generate Full Config Script</button>

Copy the generated code and paste it before your closing </head> tag.

Best Practices
  • Development/Testing: Use Method 1 for easier debugging
  • Production Websites: Use Method 2 for balanced security
  • Enterprise/Sensitive Sites: Use Method 3 for maximum protection
  • Regular Updates: Re-encode your configuration when making changes
  • Backup: Save your plain configuration before encoding

Security Considerations

What We Protect
  • License Key Theft: Prevents unauthorized use of your license
  • Configuration Tampering: Protects settings from modification
  • Reverse Engineering: Obfuscates implementation details
  • Traffic Analysis: Encodes data in transit
What We Don't Protect
  • DOM Inspection: Users can still inspect rendered HTML/CSS
  • Network Sniffing: Encoded data can be intercepted (use HTTPS)
  • Client-Side Execution: Code runs in user's browser
  • License Sharing: Physical sharing of encoded keys
Additional Security Measures

For enhanced security, consider these additional measures:

// Option A: Load from secure endpoint <script src="https://secure.yourdomain.com/accessly-config.js"></script> // Option B: Dynamic injection via server-side <?php if ($userIsAuthenticated): ?> <script> (function () { window.accessibilityToolbarConfig = { licenseKey: "<?= $encryptedLicenseKey ?>" }; // Load the toolbar script ONCE var script = document.createElement("script"); script.src = "https://accessly.website/assets/js/atb001_loader.min.js"; script.async = true; document.head.appendChild(script); })(); </script> <?php endif; ?> // Option C: CDN with token authentication <script src="https://cdn.accessly.website/loader.min.js?token=<?= $secureToken ?>"></script>
Important Security Notes
  1. Always use HTTPS on your website for secure transmission
  2. Regularly rotate your license keys (contact support for assistance)
  3. Monitor usage analytics for suspicious activity patterns
  4. Never commit encoded configurations to public repositories
  5. Use environment variables for sensitive data in CI/CD pipelines
  6. Contact support immediately if you suspect license key compromise
Access License Encoder Tool

Available in your dashboard for all Professional and Premium plan subscribers

Troubleshooting

Common issues and solutions for the Accessly Toolbar installation and usage:

Toolbar Not Appearing

Possible causes and solutions:

  1. License Key Issues:
    • Verify your license key is correct and active
    • Check if your license has expired
    • Ensure the license key is for the correct domain
  2. Installation Errors:
    • Verify script is placed before the closing </head> tag (new location)
    • Check for JavaScript errors in browser console (F12)
    • Ensure no ad blockers are blocking the script
    • Verify the self-executing function is properly formatted
  3. Configuration Issues:
    • Verify autoLoad is set to true (default)
    • Check if showToolbarOnLoad is false
    • Ensure no conflicting CSS is hiding the toolbar
Features Not Working

Common feature-specific issues:

Feature Common Issue Solution
Text-to-Speech No audio output Check browser permissions for audio, ensure Web Speech API is supported
Dark Mode Elements not changing color Check for inline styles or !important CSS declarations
Zoom Zoom not affecting all elements Check for fixed pixel sizes in CSS
Big Cursor Cursor not changing on mobile Big cursor not supported on touch devices
High Contrast Colors look wrong Check for background images with text
JavaScript Conflicts

Identifying and resolving conflicts:

  1. Open Browser Console: Press F12 and check for red error messages
  2. Check Loading Order: Ensure Accessly script loads after jQuery/other libraries if needed
  3. Use Exclusion Rules: Add problematic selectors to excludeElements configuration
  4. Test in Isolation: Disable other scripts to identify conflicts
// Example: Excluding conflicting elements excludeElements: [ ".conflicting-widget", // CSS class "#problematic-element", // ID selector "[data-conflict='true']" // Data attribute ]
Mobile-Specific Issues

Common mobile problems and solutions:

  • Toolbar Icon Too Small: Use responsive design testing tools
  • Touch Targets Too Small: Ensure adequate spacing between buttons
  • Performance Issues: Reduce feature set on mobile or use lazy loading
  • Browser Compatibility: Test on multiple mobile browsers
Local Storage Issues

When user settings don't persist:

  • Browser Settings: User may have disabled local storage
  • Private Browsing: Some browsers limit storage in private mode
  • Storage Quota Exceeded: Clear browser cache and storage
  • Domain Changes: Settings are domain-specific
Debugging Checklist

Follow this checklist when troubleshooting:

  1. Check browser console for errors (F12)
  2. Verify license key is active and valid
  3. Test in incognito/private browsing mode
  4. Disable browser extensions one by one
  5. Verify script is loading (Network tab)
  6. Test on different browsers
  7. Check for CSS conflicts (z-index issues)
  8. Verify HTTPS is being used
  9. Clear browser cache and cookies
  10. Contact support with error details
Getting Help

When contacting support, please provide:

  • Your license key (first 5 characters only for security)
  • Browser name and version
  • Operating system
  • Console error messages (screenshots help)
  • URL where the issue occurs
  • Steps to reproduce the problem

Contact: support@accessly.website | Response time: 24-48 hours for Professional plan, 2-4 hours for Premium plan.

Frequently Asked Questions

The toolbar is optimized for performance. It loads asynchronously and has minimal impact on page load times. The entire script is less than 50KB gzipped.

We offer three levels of security through our License Encoder tool:

  • Method 1 (Plain Key): Basic security with full compatibility - license key visible in source code
  • Method 2 (Encoded Key): Medium security - license key encoded but configuration remains readable
  • Method 3 (Full Config): High security - entire configuration encoded for maximum protection

Security features include:

  • Base64 encoding/obfuscation of sensitive data
  • Domain validation to prevent unauthorized use
  • Usage monitoring and anomaly detection
  • Automatic license key rotation support
  • Secure transmission via HTTPS requirement

Recommendations: Use Method 1 for development/testing, Method 2 for production websites, and Method 3 for enterprise/security-sensitive applications. The encoder tool is available in your dashboard for Professional and Premium plan subscribers. Additional security consultation is available as a paid service for complex requirements.

Yes! The toolbar works with any CMS or framework including WordPress, Shopify, Joomla, Drupal, React, Angular, Vue.js, and plain HTML websites.

Customization options vary by plan:

  • Free Trial: No customization - fixed set of basic features
  • Professional Plan: Basic customization through configuration options
  • Premium Plan: White-label customization, brand removal, and custom feature requests included

For custom development work beyond what's included in your plan, additional charges may apply. Contact our sales team for custom requirements.

Yes, the toolbar works on mobile devices, but with some limitations:

  • Text-to-Speech: Works on most mobile devices, but note that male voice may not be available on some iOS devices
  • Big Cursor: Not functional on mobile devices as cursor control is handled differently
  • Zoom: Works well but may conflict with native browser zoom gestures
  • Color Modes: Dark mode, high contrast, and monochrome work perfectly
  • Font Adjustments: Dyslexic font and line height adjustments work as expected

Overall, the toolbar provides good functionality on mobile devices, though it's primarily optimized for desktop/laptop experiences. Some features may have limited functionality due to mobile browser restrictions.

Yes, the Accessly Toolbar is designed to help websites meet major accessibility standards:

  • WCAG 2.1: Supports AA level compliance across most success criteria
  • ADA Title III: Helps meet requirements for public accommodations
  • Section 508: Compliant with most technical requirements
  • EN 301 549: Supports European accessibility standards

Important: While our toolbar provides significant accessibility improvements, it doesn't guarantee full compliance. We recommend conducting a professional accessibility audit for complete compliance verification.

It depends on your subscription plan:

  • Free Trial: Single domain only (30 days)
  • Professional Plan: 1 domain only
  • Premium Plan: 3 domains included
  • Additional Domains: Available as add-ons for an extra fee

Each license key is tied to specific domain(s). Using the same key on unauthorized domains will result in disabled features. Contact our sales team for multi-domain licensing options beyond what's included in your plan.

If your license expires:

  • Free Trial: All features stop working after 30 days
  • Professional/Premium Plans: Premium features are disabled after expiration
  • Basic Features: May continue to work with limited functionality for 7-day grace period
  • Analytics: Stop recording new data immediately
  • Support: Limited to documentation only

You'll receive email reminders 30, 15, and 7 days before expiration. After renewal, all features are automatically restored. Your configuration settings are preserved during the grace period.

Generally no, but there can be occasional conflicts:

  • jQuery: No known conflicts
  • React/Angular/Vue: Compatible with all major frameworks
  • Google Analytics/Tag Manager: No conflicts
  • Other Accessibility Tools: May conflict if they modify similar DOM elements
  • Custom CSS/JavaScript: Rare conflicts with z-index or event handlers

We use namespaced JavaScript and CSS to minimize conflicts. If you encounter issues, use the excludeElements configuration option or contact our support team for conflict resolution (additional charges may apply for complex custom work).

Yes, you can change the toolbar position easily:

  • Configuration Update: Simply update the floatIconPosition in your configuration
  • Available Positions: "top-right", "top-left", "bottom-right", "bottom-left", "middle-right", "middle-left"
  • Mobile Optimization: The toolbar automatically adjusts position on mobile for better usability
  • Custom Positioning: Premium plans include custom positioning requests

Changes take effect immediately after the page reloads. No server-side changes are required. For advanced positioning beyond standard options, custom development may incur additional charges.

The text-to-speech feature supports multiple languages:

  • Default Language: Uses the browser's default language setting
  • Supported Languages: English, Spanish, French, German, Italian, Portuguese, Japanese, Chinese, Korean, Russian, Arabic
  • Voice Selection: Multiple voices per language where available
  • Speech Quality: Uses the browser's built-in speech synthesis API
  • Language Detection: Automatically detects content language when possible
  • Custom Language Support: Available as custom development work (additional charges apply)

Note: Available voices depend on the user's operating system and browser. Some languages may have limited voice options on certain platforms. For custom language requirements or specialized voice needs, custom development work may be required at an additional cost.

We prioritize user privacy and data protection:

  • Local Storage: User preferences are stored locally in browser storage
  • No Personal Data: We don't collect or store personal information
  • Anonymous Analytics: Professional and Premium plans collect anonymous usage statistics
  • GDPR Compliant: All data handling complies with GDPR requirements
  • Cookie-Free: The toolbar doesn't use cookies for tracking

For detailed information about our privacy practices, please refer to our Privacy Policy. Custom data handling configurations are available as additional paid services.

We offer a satisfaction guarantee:

  • 30-Day Money-Back Guarantee: Full refund within 30 days of purchase for Professional and Premium plans
  • Free Trial: No payment required, no refund needed
  • Technical Issues: Our support team will work with you to resolve any issues
  • Compatibility Issues: If we cannot resolve compatibility issues, you're eligible for a refund
  • Custom Development: Custom work may have different refund terms

Before requesting a refund, please try our live demo and consult our integration guide. Most issues can be resolved with proper configuration. Custom development work may require separate terms and conditions.

We maintain a regular update schedule:

  • Monthly Updates: Minor features and bug fixes for all plans
  • Quarterly Releases: Major feature additions for Professional and Premium plans
  • Security Updates: Patched immediately for all active licenses
  • Priority Updates: Premium plan receives updates first
  • Custom Features: Available as paid custom development

Updates are automatically delivered to all active licenses. You can opt for manual updates if preferred. View our changelog for recent updates and planned features. Custom feature development beyond the standard roadmap incurs additional charges.

The toolbar is designed for both technical and non-technical users:

  • Basic Installation: Copy-paste two lines of code
  • No-Code Solutions: Tag managers like Google Tag Manager supported
  • Technical Support: Email support included with Professional plan, 24/7 priority support with Premium
  • Installation Services: Available as an additional paid service for complex setups
  • Custom Configuration: Custom setup and configuration available at additional cost

Most users can get started in under 10 minutes with our simple installation process. For complex implementations or custom requirements, we offer paid installation and configuration services.

Yes, custom work beyond your plan's included features may incur additional charges:

  • Free Trial: No customizations available
  • Professional Plan: Standard configuration only - custom work billed separately
  • Premium Plan: Includes white-label customization and custom feature requests (within scope)
  • Additional Custom Work: Complex requirements, special integrations, or unique features billed hourly or as fixed-price projects
  • Examples of Custom Work: Special language support, custom UI designs, integration with proprietary systems, specialized compliance requirements

We provide free quotes for custom work based on your specific requirements. Contact our sales team to discuss your needs and get a custom quote. Standard support and updates are included in your plan price, but extensive custom development requires additional investment.

Support levels vary by plan:

  • Free Trial: Community/forum support only
  • Professional Plan: Email support with 48-hour response time
  • Premium Plan: Priority 24/7 email support with 24-hour response time
  • Additional Support: Phone support, dedicated account manager, or on-site training available as paid add-ons
  • Custom Development Support: Separate support agreements for custom work

All support covers standard installation, configuration, and troubleshooting. Complex custom implementations may require additional support contracts. Check our support page for detailed information on support hours and response times.

Need Help?

If you need assistance with installation or configuration: