Live Interactive Demo

The accessibility widget
your users deserve

Drop @glitchlab/accessify into any web app to give users control over font size, contrast, dyslexia aids, color filters, and more — with zero runtime dependencies. Use the sidebar to tweak every prop live.

npm install @glitchlab/accessify
Features
🔤

Font & Content

Font size, line height, letter spacing, readable font, text magnifier

🎨

Color Filters

Dark/light/high contrast, monochrome, invert, color blind (protanopia)

🌍

i18n — 6 langs

English, Spanish, French, German, Portuguese, Arabic (RTL)

⌨️

Keyboard Nav

Full focus trap, Escape to close, skip-to-main link injection

♿

8 Profiles

Seizure Safe, Vision Impaired, ADHD, Cognitive, Dyslexia and more

🔍

WCAG Scanner

One-click page scan with score, contrast, alt text, labels, headings

Sample Content

What is Web Accessibility?

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can perceive, understand, navigate, and interact with the web, and contribute to the web.

📸 Image placeholder — test alt text & contrast
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." — Tim Berners-Lee

Why it matters

Over 1 billion people worldwide live with some form of disability. Accessibility doesn't just benefit people with permanent disabilities — it helps everyone in situational or temporary limitations, like someone with a broken arm or bright sunlight on their phone screen.

Common barriers

  • Images without alternative text
  • Poor color contrast between text and background
  • Forms without proper labels
  • Keyboard traps preventing navigation
  • Videos without captions or audio descriptions

WCAG guidelines

The Web Content Accessibility Guidelines (WCAG) provide a shared standard for web content accessibility. The current version, WCAG 2.1, is organized around four principles: Perceivable, Operable, Understandable, and Robust (POUR).

  1. Perceivable — Information must be presentable to users in ways they can perceive
  2. Operable — UI components and navigation must be operable
  3. Understandable — Information and UI must be understandable
  4. Robust — Content must be robust enough to be interpreted by assistive technologies
Sample Form
Quick Start
// React
import { AccessifyWidget } from '@glitchlab/accessify/react'

export default function App() {
  return (
    <>
      <YourApp />
      <AccessifyWidget
        position="bottom-right"
        size="M"
        colorScheme="light"
        lang="en"
      />
    </>
  )
}