Documentation

Everything you need to know about implementing and using Accessly

1Getting Started

Accessly is a comprehensive web accessibility solution that helps make your website accessible to all users. Our widget provides user-side accessibility adjustments while our professional services ensure WCAG compliance.

**Quick Start:**

Contact us to choose your plan
Receive your unique widget code
Add the code to your website
Configure settings (optional)
Your site is now more accessible!

2Installation Guide

**Step 1: Get your widget code**

After subscribing, you'll receive a unique JavaScript code that looks like this:

html

<script src="https://cdn-accessly.mnikolic.work/modular/loader.js" data-api-key="YOUR_UNIQUE_KEY" defer></script>

**Step 2: Add to your site**

•WordPress: Add to your theme's footer.php or use a plugin like "Insert Headers and Footers"
•HTML/Static sites: Paste before the closing `</body>` tag
•React/Next.js: Add to your _document.js or layout component
•Other platforms: Contact us for specific instructions

**Step 3: Verify installation**

After adding the code, refresh your site. You should see the Accessly widget icon in the corner of the page.

3Widget Features

The Accessly widget provides the following accessibility features:

**Visual Adjustments:**

•Contrast Enhancement: High contrast mode for better visibility
•Text Size: Increase or decrease text size
•Text Spacing: Adjust letter and line spacing
•Font Options: Readable font alternatives
•Color Adjustments: Invert colors, grayscale, monochrome modes
•Cursor Size: Larger cursor for easier tracking

**Navigation Aids:**

•Keyboard Navigation: Full keyboard support
•Focus Indicators: Clear visual focus states
•Skip Links: Jump to main content
•Reading Guide: Horizontal line to aid reading
•Reading Mask: Highlight current reading area

**Content Adjustments:**

•Image Descriptions: Alt text display
•Link Highlighting: Emphasize all links
•Pause Animations: Stop auto-playing content
•Screen Reader Optimization: Enhanced compatibility

**Language & Localization:**

•Multi-language interface support
•Right-to-left (RTL) text support

4Configuration Options

**Widget Position**

The widget appears on the left side of the screen by default. Users can:

•Switch sides: Using the built-in toggle switch in the widget to move between left and right sides
•Move vertically: Drag-and-drop functionality allows users to move the widget icon up or down along the vertical axis

The position is automatically saved in the user's browser and persists across visits.

**Color Customization**

Business plan subscribers can customize widget colors to match their brand. Contact us for more information about customization:

•Primary widget color
•Icon color
•Panel background color
•Text and accent colors

**Interface Language**

The widget automatically detects the site language and adapts the interface. Supported languages:

•English (en)
•Serbian (sr)
•German (de)
•Croatian (hr)
•Hungarian (hu)

Users can also manually change the language directly within the widget.

5WCAG Compliance Coverage

**What the Widget Covers**

The Accessly widget helps address many WCAG 2.1 Level AA criteria, including:

•1.4.3 Contrast (Minimum): Contrast enhancement tools
•1.4.4 Resize Text: Text scaling up to 200%
•1.4.8 Visual Presentation: Text spacing and formatting
•1.4.12 Text Spacing: Adjustable spacing controls
•2.1.1 Keyboard: Full keyboard navigation support
•2.4.7 Focus Visible: Enhanced focus indicators

**What Requires Additional Work**

The widget alone does not guarantee full WCAG compliance. You also need:

•Proper HTML Structure: Semantic markup, headings hierarchy
•Alt Text: Descriptive text for all images
•Form Labels: Properly labeled form fields
•ARIA Attributes: Where necessary for complex components
•Color Independence: Information not conveyed by color alone
•Video Captions: Captions and transcripts for multimedia

**Professional Audit Services**

Our Business plan includes a professional WCAG audit to identify and address these additional requirements. Contact us to learn more.

6Troubleshooting

**Widget Not Appearing**

•Verify the script is added before `</body>` tag
•Check browser console for JavaScript errors
•Ensure your unique ID is correct
•Clear browser cache and reload
•Check if Content Security Policy (CSP) is blocking the script

**Widget Not Working Properly**

•Update to the latest widget version (automatic)
•Check for JavaScript conflicts with other plugins
•Disable browser extensions temporarily
•Test in incognito/private browsing mode

**Styling Conflicts**

- Your website URL - Browser and version - Screenshot of the issue

•The widget uses isolated CSS to prevent conflicts
•If you experience issues, contact support with:

**Performance Concerns**

•The widget is optimized and loads asynchronously
•Typical load time: <50ms
•No impact on Core Web Vitals
•Lazy-loaded features activate only when used

**Still Having Issues?**

Contact our support team at support@accessly.net with:

•Your website URL
•Description of the issue
•Browser and device information
•Screenshots or screen recordings (if applicable)

7API Reference (Advanced)

**Programmatic Control**

For advanced users, you can control the widget via JavaScript:

```javascript // Open the widget window.Accessly.open();

// Close the widget window.Accessly.close();

// Toggle specific feature window.Accessly.toggle('highContrast');

// Get current settings const settings = window.Accessly.getSettings();

// Listen to widget events window.addEventListener('accessly:ready', function() { console.log('Accessly widget is ready'); });

window.addEventListener('accessly:change', function(e) { console.log('Setting changed:', e.detail); }); ```

**Available Methods:**

•`open()` - Open the widget panel
•`close()` - Close the widget panel
•`toggle(feature)` - Toggle a specific feature
•`enable(feature)` - Enable a feature
•`disable(feature)` - Disable a feature
•`reset()` - Reset all settings to default
•`getSettings()` - Get current user settings

**Events:**

•`accessly:ready` - Widget loaded and ready
•`accessly:open` - Widget panel opened
•`accessly:close` - Widget panel closed
•`accessly:change` - Setting changed

8Support & Resources

**Get Help**

•Email Support: support@accessly.net
•Response Time: Within 24 hours (Business plan: Priority support)
•Documentation: This page and our knowledge base
•Contact Form: Available on our website

**Additional Resources**

•WCAG Guidelines: https://www.w3.org/WAI/WCAG21/quickref/
•WebAIM: https://webaim.org/
•Accessibility Checklist: Contact us for our comprehensive checklist

**Training & Consulting**

We offer:

•Accessibility training for your team
•WCAG compliance consulting
•Custom accessibility solutions
•Ongoing accessibility monitoring

Get in Touch

Contact