Installation

Method 1: Upload via WordPress

1. Download the plugin ZIP file from your client area
2. Access the WordPress administration panel
3. Go to Plugins → Add New
4. Click on Upload Plugin
5. Select the ZIP file and click Install Now
6. Activate the plugin

Method 2: Upload via FTP

1. Extract the plugin ZIP file
2. Connect to your server via FTP
3. Upload the usabilis folder to /wp-content/plugins/
4. Access the WordPress panel and go to Plugins
5. Find Usabilis and click Activate

Post-installation

After activating the plugin:

• Go to Settings → Usabilis
• Enter your license key
• Configure the widget settings
• Verify that the widget appears correctly on the frontend

Configuration

License activation

1. Access Settings → Usabilis
2. Enter the license key in the appropriate field
3. Click on Save License
4. Verify that the status shows "Active License"

Widget configuration

Button position

You can choose where to position the widget opening button:

• Bottom right (default)
• Bottom left
• Center right
• Center left

Support email

Enter the email that will be shown in the accessibility statement to allow users to contact you.

Enable/Disable the widget

You can temporarily disable the widget by unchecking the "Show accessibility panel in frontend" option.

New Visibility Options (v3.3.0+)

Hide on Mobile

This option allows you to completely hide the widget on mobile devices. Useful if:

• You have a dedicated mobile app with integrated accessibility features
• Your mobile design uses different approaches for accessibility
• You want to optimize performance on devices with limited resources

Section Management

You can now choose exactly which widget sections to show to your users:

How to configure:

1. Go to Settings → Usabilis
2. Find the "Widget Configuration" section
3. Check/uncheck the checkboxes for each section
4. Click on "Save Configuration"

Widget Features

Accessibility profiles

Content controls

Color controls

Orientation tools

Advanced accessibility tools

The Accessibility Widget

How it works

The widget is automatically loaded on all pages of your WordPress site. Users can:

1. Click on the accessibility button to open the panel
2. Select a pre-configured profile or customize individual settings
3. Settings are saved in the browser and automatically applied on subsequent visits

"Read the page" feature

How speech synthesis works

When the user activates the "Read the page" function:

1. The mouse cursor turns into a reading indicator
2. Clicking on any text element, the content is read aloud
3. A mini player appears showing the reading status
4. The element being read is visually highlighted
5. Reading can be stopped at any time

Supported content types

• Normal text: Paragraphs, titles, lists
• Links: Announces "Link:" followed by text
• Buttons: Announces "Button:" followed by text
• Images: Reads alternative text if present
• Forms: Reads field labels

Keyboard shortcuts

Browser compatibility

The widget is compatible with all modern browsers:

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Speech synthesis support by browser

Customization

Color customization (Pro/Enterprise)

With a Pro or Enterprise license you can customize:

• Main color: The color of the button and active elements
• Icon size: Small, Medium, Large or Very Large

// Settings are automatically saved
// and applied to the widget in real time

Custom CSS (Enterprise)

With an Enterprise license you can add custom CSS to completely modify the widget appearance:

/* Example: Change widget border radius */
.wpap-section {
    border-radius: 0 !important;
}

/* Example: Custom font for title */
.wpap-sidebar-header h2 {
    font-family: 'Montserrat', sans-serif !important;
}

/* Example: Custom animation for button */
.wpap-toggle-button {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Example: Customize reading mini player */
.wpap-reading-mini-player {
    background: #1a202c !important;
    border-radius: 20px !important;
}

/* Example: Style for highlighted text during reading */
.wpap-reading-active {
    background: rgba(52, 179, 228, 0.2) !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
}

White Label (Enterprise)

Enterprise licenses automatically remove the "Developed by STUDIO 09" branding from the widget.

Visibility and Sections Control

Device Visibility

Hide on Mobile

The widget can be completely hidden on mobile devices. This is useful for:

• Mobile Apps: If you have an app with integrated accessibility features
• Responsive Design: If your mobile design uses different approaches
• Performance: To optimize loading on devices with slow connections

How does mobile detection work?

The system uses three methods to identify mobile devices:

1. User Agent: Detects Android, iOS, Windows Phone, etc.
2. Touch Screen: Verifies touch capabilities
3. Screen Size: Considers mobile devices with width ≤ 768px

// The widget automatically checks if it's on mobile
if (config.hideOnMobile && isMobileDevice()) {
    // Widget is not loaded
    return;
}

Granular Section Control

Why control sections?

Not all sites have the same needs. Some examples:

• Minimalist blog: You might only want text controls
• Corporate site: Only preset profiles for simplicity
• E-commerce: Focus on contrast and readability
• Educational portal: All features active

Best Practices

Configuration Examples

"Essential" Configuration

✓ Accessibility Profiles
✗ CONTENT Section
✗ COLORS Section
✗ ORIENTATION Section

Ideal for: Sites with already optimized design that only want to offer quick profiles.

"Reading" Configuration

✗ Accessibility Profiles
✓ CONTENT Section
✗ COLORS Section
✓ ORIENTATION Section

Ideal for: Blogs, news sites, documentation portals.

"Visual" Configuration

✗ Accessibility Profiles
✗ CONTENT Section
✓ COLORS Section
✗ ORIENTATION Section

Ideal for: Galleries, portfolios, sites with strong visual component.

Frequently Asked Questions

Troubleshooting

The widget doesn't appear on the site

1. Verify that the plugin is active
2. Check that the license is valid and active
3. Make sure the "Show accessibility panel" option is active
4. Clear site and browser cache
5. Check the browser console for JavaScript errors

"Invalid license" error

• Verify you have correctly copied the license key
• Check that the license hasn't expired
• Make sure the domain is authorized for this license
• Try clicking "Verify Now" to update the status

The "Read the page" function doesn't work

• Verify that the browser supports Web Speech API (see compatibility table)
• Check that audio is not muted in the browser
• On some mobile browsers, speech synthesis requires user interaction before working
• Make sure there are no browser extensions blocking speech synthesis

Conflicts with other plugins

If you encounter compatibility issues:

1. Temporarily deactivate other plugins one by one
2. Identify which plugin causes the conflict
3. Contact support with conflict details

Performance issues

• Verify that your hosting meets minimum requirements
• Use a caching plugin (W3 Total Cache, WP Rocket)
• Enable GZIP compression on the server
• Consider using a CDN
• If you use "Disable animations", some features like reading line and magnifier might be automatically disabled

Debug mode

To enable debug mode and get more information:

// wp-config.php
define('WPAP_DEBUG', true);

Changelog