Skip to content

Installation

Jump to bottom
Luc edited this page Nov 20, 2025 · 2 revisions

Installation Guide

This guide will walk you through installing the Accessibility Widget on your website.

📦 Installation Methods

There are two main ways to install the Accessibility Widget:

  1. CDN Installation (Recommended) - No file hosting required
  2. Manual Installation - Download and host files yourself

🌐 Option 1: CDN Installation (Recommended)

The easiest way to install the plugin is using the jsDelivr CDN. This requires no file hosting and ensures you always have the latest version.

Via npm Package

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website</title>
    
    <!-- Include Boxicons for icons (required) -->
    <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css">
    
    <!-- Include the CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-plugin.css">
    
    <!-- Include the config (optional - customize as needed) -->
    <script src="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-config.js"></script>
    
    <!-- Include the plugin (must be loaded last) -->
    <script src="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-plugin.js"></script>
</head>
<body>
    <!-- Your content here -->
</body>
</html>

Via GitHub

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website</title>
    
    <!-- Include Boxicons for icons (required) -->
    <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css">
    
    <!-- Include the CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/airforcerp/Website-Accessibility-Widget@latest/web/accessibility-plugin.css">
    
    <!-- Include the config (optional - customize as needed) -->
    <script src="https://cdn.jsdelivr.net/gh/airforcerp/Website-Accessibility-Widget@latest/web/accessibility-config.js"></script>
    
    <!-- Include the plugin (must be loaded last) -->
    <script src="https://cdn.jsdelivr.net/gh/airforcerp/Website-Accessibility-Widget@latest/web/accessibility-plugin.js"></script>
</head>
<body>
    <!-- Your content here -->
</body>
</html>

Using Specific Versions

For production use, it's recommended to use a specific version instead of @latest:

<!-- Use version 1.0.0 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/website-accessibility-filter@1.0.0/accessibility-plugin.css">
<script src="https://cdn.jsdelivr.net/npm/website-accessibility-filter@1.0.0/accessibility-config.js"></script>
<script src="https://cdn.jsdelivr.net/npm/website-accessibility-filter@1.0.0/accessibility-plugin.js"></script>

📁 Option 2: Manual Installation

If you prefer to host the files yourself, follow these steps:

Step 1: Download Files

Download the following files from the GitHub repository:

  • accessibility-plugin.js
  • accessibility-plugin.css
  • accessibility-config.js (optional)

Step 2: Upload to Your Server

Upload the files to your web server. You can place them in any directory, for example:

your-website/
├── js/
│   ├── accessibility-plugin.js
│   └── accessibility-config.js
├── css/
│   └── accessibility-plugin.css
└── index.html

Step 3: Include in Your HTML

Add the following code to your HTML pages:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website</title>
    
    <!-- Include Boxicons for icons (required) -->
    <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css">
    
    <!-- Include the CSS -->
    <link rel="stylesheet" href="path/to/accessibility-plugin.css">
    
    <!-- Include the config (optional) -->
    <script src="path/to/accessibility-config.js"></script>
    
    <!-- Include the plugin (must be loaded last) -->
    <script src="path/to/accessibility-plugin.js"></script>
</head>
<body>
    <!-- Your content here -->
</body>
</html>

✅ Verification

After installation, you should see:

  1. Accessibility Button: A button in the bottom-right (or bottom-left) corner of your page
  2. No Console Errors: Check your browser's developer console (F12) for any errors
  3. Widget Appears: Click the button to open the accessibility panel

Testing the Installation

  1. Open your website in a browser
  2. Look for the "Accessibility" button in the bottom-right corner
  3. Click the button to open the panel
  4. Try adjusting font size or contrast
  5. Check the browser console (F12) for any errors

🔧 Troubleshooting

Widget Not Appearing

Problem: The accessibility button doesn't appear.

Solutions:

  • Check that all files are loaded (view page source and verify links)
  • Check browser console for JavaScript errors
  • Ensure Boxicons CSS is loaded before the plugin CSS
  • Verify that accessibility-plugin.js is loaded last

Console Errors

Problem: JavaScript errors in the console.

Solutions:

  • Ensure all files are in the correct order
  • Check file paths are correct
  • Verify Boxicons is loaded
  • Check for conflicts with other scripts

Styles Not Applied

Problem: Widget appears but looks broken.

Solutions:

  • Ensure CSS file is loaded
  • Check for CSS conflicts with your site's styles
  • Verify Boxicons CSS is loaded
  • Check browser console for CSS errors

📝 Next Steps

After installation:

  1. Configure the plugin - Customize default settings
  2. Test features - Try out all accessibility options
  3. Customize appearance - Match your site's design

🆘 Need Help?

Getting Started

Documentation

Guides

Development

Support

Clone this wiki locally