Boafo Accessibility Widget

Boafo Accessibility Widget is a lightweight embeddable tool that adds accessibility features to any website. This package provides a simple loader script that injects a floating accessibility button and a full-page widget into your site.

An easy-to-install accessibility widget to enhance your website's user experience for everyone. The Boafo widget provides a suite of tools that empower users to customize their browsing experience.

✨ Features

Easy Integration: Add it to any website with a single script tag or via npm.

Interface Controls: Allow users to adjust zoom levels and font sizes for better readability.

Text-to-Speech (TTS): Reads page content aloud for users with visual impairments or those who prefer auditory learning.

Content Summarizer: Provides a quick summary of the page content.

Modern UI: A clean, non-intrusive interface that integrates smoothly into your site's design.

🚀 Installation & Usage

You can add the Boafo widget to your site in two ways:

Method 1: Simple Script Tag (Recommended for static sites)

This is the fastest way to get started. Perfect for static HTML sites, WordPress, Webflow, Shopify, or any platform where you can add custom HTML.

Copy the following code snippet:

Paste it just before the closing tag of your website's HTML.

Replace YOUR_API_KEY with your actual Boafo API key.

Method 2: Using npm (Recommended for JS frameworks like React, Next.js, Vue, Svelte)

1. Install the package npm install boafo-accessibility-widget

or

pnpm add boafo-accessibility-widget

2. Import and initialize the widget

In your main application component (e.g., App.js in React or layout.tsx in Next.js), import the initializeBoafoWidget function and call it within a useEffect hook.

✅ Example: React App (App.js) import React, { useEffect } from "react"; import { initializeBoafoWidget } from "boafo-accessibility-widget";

function App() { useEffect(() => { const BOAFO_API_KEY = "YOUR_API_KEY"; initializeBoafoWidget(BOAFO_API_KEY); }, []);

return (

export default App;

✅ Example: Next.js (App Router — app/layout.tsx)

Since layout.tsx is a Server Component, you need a Client Component for the widget initialization:

app/components/BoafoWidgetInitializer.tsx

"use client";

import { useEffect } from "react"; import { initializeBoafoWidget } from "boafo-accessibility-widget";

export default function BoafoWidgetInitializer() { useEffect(() => { const BOAFO_API_KEY = "YOUR_API_KEY"; initializeBoafoWidget(BOAFO_API_KEY); }, []);

return null; // nothing to render }

app/layout.tsx

import type { Metadata } from "next"; import "./globals.css"; import Navbar from "./components/features/navbar"; import Footer from "./components/features/footer"; import BoafoWidgetInitializer from "./components/BoafoWidgetInitializer";

export const metadata: Metadata = { title: "My Website", description: "Accessibility powered by Boafo", };

export default function RootLayout({ children, }: { children: React.ReactNode; }) { return (

⚡ TypeScript Note

If you’re using TypeScript, you may see an error like:

Could not find a declaration file for module 'boafo-accessibility-widget'

Fix it by creating a src/types/global.d.ts file:

declare module "boafo-accessibility-widget" { export function initializeBoafoWidget(apiKey: string): void; }

Then add src/types to your tsconfig.json "include" array.

🔑 API Key

The Boafo Accessibility Widget requires an API key to function. This key authenticates your requests and connects the widget to your account.

You can obtain your API key from your Boafo dashboard. 👉 [Insert link to dashboard or sign-up page here]

📜 License

This project is licensed under the MIT License. See the LICENSE file for details.

Developed by Digital Drivers Technologies from Kumasi, Ghana 🇬🇭.