Skip to content

Quick Start Guide

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

Get the Accessibility Widget up and running in 5 minutes!

🚀 5-Minute Setup

Step 1: Add the Files (2 minutes)

Copy and paste this code into the <head> section of your HTML page:

<!-- 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 plugin (must be loaded last) -->
<script src="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-plugin.js"></script>

Step 2: Test It (1 minute)

  1. Save your HTML file
  2. Open it in a browser
  3. Look for the "Accessibility" button in the bottom-right corner
  4. Click it to open the panel

Step 3: Try Features (2 minutes)

Try these features:

  • ✅ Click "Font Size" and change it to 150%
  • ✅ Click "Contrast" and try "High Contrast"
  • ✅ Select some text and try "Read Selected Text"
  • ✅ Try a color blindness filter

That's it! The widget is now working on your site.

📝 Complete Example

Here's a complete HTML example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Accessible Website</title>
    
    <!-- Accessibility Widget -->
    <link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-plugin.css">
    <script src="https://cdn.jsdelivr.net/npm/website-accessibility-filter@latest/accessibility-plugin.js"></script>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This website now has accessibility features! Look for the button in the bottom-right corner.</p>
</body>
</html>

🎯 Next Steps

  1. Customize Settings - Adjust default settings
  2. Learn the API - Control the widget programmatically
  3. Customize Appearance - Match your site's design

✅ Verification Checklist

  • Widget button appears on page
  • Button opens panel when clicked
  • Font size changes work
  • Contrast modes work
  • No errors in browser console (F12)

🆘 Having Issues?

🎉 You're Done!

The Accessibility Widget is now installed and ready to use. Users can now customize their browsing experience to meet their accessibility needs.

Getting Started

Documentation

Guides

Development

Support

Clone this wiki locally