Accessibility

Accessibility widget

One floating ♿ button gives every visitor their own settings: contrast, dark mode, text size, a dyslexia-friendly font, colour-blind filters, reduced motion, larger targets and speak on focus. Choices are saved in the browser and restored on every page.

Live demo

Change this page from code

Each button calls yuktai.apply(…). Watch this page change, then reset.

Colour-blind filter

yuktai.getSettings()

"use client"
import { wcagPlugin } from "@yuktishaalaa/yuktai"

// The ♿ button comes from <YuktAIWrapper showAccessibility>. To change
// settings from your own UI, call the engine directly:
export function HighContrastButton() {
  return (
    <button onClick={() => wcagPlugin.execute({ enabled: true, highContrast: true })}>
      High contrast
    </button>
  )
}

// Settings are saved in localStorage ("yuktai-a11y-prefs"), the same key the npm package uses.
yuktai.apply({ highContrast: true })        // one or more settings
yuktai.apply({ fontSizeMultiplier: 1.2 })   // 0.8 – 1.3
yuktai.apply({ colorBlindMode: "deuteranopia" })
yuktai.getSettings()                        // current settings
yuktai.reset()                              // back to defaults
yuktai.open()                               // open the ♿ dialog
yuktai.openTools("qa")                      // open the 🛠 page tools on a tab

Set up the floating buttons

Choose the options; the code below updates as you go. Try it on this site applies your setup to every page here (this tab only), so you can see it before you copy it.

Builder

Position

Primary colour

Dialog title

Page tools opens on

Voice language

Options 🛠 page tools button Auto-fix on load Add skip links

app/YuktaiClient.tsx

// generated

index.html

<!-- generated -->

Next.js: the React wrapper takes position and engine config (for example autoFix). The page tools there are the 💬 Ask, 🤖 Agent and ⚡ Vibe Coder buttons; see Next.js setup for every button.

Reference

`window.YUKTAI_CONFIG` (set before the script tag)
Option	Default	What it does
position	"left"	Side for the floating buttons: "left" or "right"
primaryColor	"#0f766e"	Button colour; keep at least 4.5:1 against white
title	"Accessibility"	Settings dialog title
showPageTools	false	Adds the 🛠 button with the six page tools
defaultTab	"qa"	First tab of the page tools: copilot, qa, forms, design, ask, voice
voiceLang	"en-IN"	Speech recognition language, for example "te-IN"
generate(q, ctx), summarize(text)	—	Optional hooks for your own model (Ask tab)
config	—	Engine options, for example `{ autoFix: false, showSkipLinks: false }`
applyOnLoad	true	Run the engine on load (restores saved settings)
autoInit	true	Set false and call `yuktai.init()` yourself

Widget methods
Method	What it does
yuktai.open() / close()	Open or close the ♿ settings dialog
yuktai.openTools(tab) / closeTools()	Open the 🛠 page tools on a tab
yuktai.apply(settings)	Apply and save settings (returns a promise)
yuktai.reset()	Back to the defaults
yuktai.getSettings()	The current settings
yuktai.init()	Add the buttons (only with autoInit: false)

Settings
Key	Values
highContrast, darkMode, reduceMotion, largeTargets, dyslexiaFont, speechEnabled	true / false
fontSizeMultiplier	0.8, 0.9, 1, 1.1, 1.2, 1.3
colorBlindMode	none, deuteranopia, protanopia, tritanopia, achromatopsia