Using Equalize

Opening the panel

Equalize adds a round “Aa” launcher, fixed to the bottom-right corner of every page. Clicking or activating it opens the preference panel as a native modal dialog: focus moves to the panel’s close button, background content is inert until the panel closes, and focus returns to whatever was focused before it opened.

• Preferences apply immediately as you toggle them — there is no separate “save” step.
• A Reset all button in the panel footer clears every preference back to the page default.
• Every change is announced to screen readers through a live region (for example, “High contrast on”).

Quick profiles

One tap bundles several preferences together for a common need. Picking a new profile replaces any profile-related settings already on, but leaves text size as you left it.

• Low vision — larger text (125%), taller line height, high contrast, a visible focus outline, and a larger cursor.
• Focus — pauses motion, highlights headings, adds a visible focus outline, and turns on the reading guide.
• Dyslexia — slightly larger text (112.5%), taller line height, extra letter/word spacing, and a plain readable font.
• Seizure safe — pauses motion and switches the page to grayscale.

Content preferences

• Text size — four ascending “A” buttons, from 112.5% up to 150%. Click one to jump straight to that level; click the active (orange) one again to return to the default size.
• Line height — increases line spacing to 1.8 for easier line-tracking.
• Text spacing — adds extra letter and word spacing.
• Readable font — switches body text to Arial/Verdana and turns off italics.
• Highlight titles — outlines every heading so page structure is easier to scan.
• Highlight links — gives every link a high-visibility background and underline.

Colour & contrast

• High contrast — boosts page contrast.
• Grayscale — removes colour from the page.
• Invert colours — inverts the page palette (useful for light sensitivity); can be combined with high contrast.

Navigation preferences

• Pause motion — stops animations, transitions, and smooth scrolling across the page.
• Large cursor — switches to a larger, higher-visibility cursor.
• Reading guide — a horizontal line that tracks the mouse to help follow a line of text.
• Focus outline — adds a thick, high-contrast outline around whatever element is focused.

Read aloud and screen readers

Equalize offers two related but different kinds of help: browser-powered read aloud for listening to page content, and platform-aware instructions for starting a full operating-system screen reader.

Browser read aloud

1. Open Screen reader and choose a voice. Available voices come from the visitor’s browser and operating system.
2. Adjust Volume, Rate, and Pitch. The value beside each slider updates immediately.
3. Press Start, then hover over page content or reach it with keyboard focus. Equalize reads headings, paragraphs, links, buttons, lists, labels, table cells, and labelled controls.
4. Use Pause, Resume, or Stop. Stop also turns off hover and focus reading.

Read aloud uses the Web Speech API and works only when the browser exposes speech synthesis. Available voices and sound quality vary by browser and operating system. Page content remains in the browser; Equalize makes no network request.

Operating-system screen readers

No website can detect or turn on a full screen reader—browsers deliberately protect that control. Equalize infers the likely OS and shows setup help for Narrator on Windows, VoiceOver on macOS/iOS, TalkBack on Android, ChromeVox on ChromeOS, or the device’s accessibility settings. The visitor can still use NVDA, JAWS, Orca, or another reader.

Keyboard shortcuts

Equalize doesn’t bind any global hotkeys — every control is a real, focusable element, so the panel works entirely with standard browser keyboard navigation.

Want your own shortcut to open it — for example Alt+A? Bind any key on your page to call window.Equalize.open(); see the API below.

Where preferences are stored

Visual and navigation preferences are stored under equalize-preferences-v1. Voice, volume, rate, and pitch are stored separately under equalize-reader-preferences-v1. Both use localStorageand are re-applied automatically on the visitor’s next visit. There are no cookies, no accounts, and no data sent to a server — preferences never leave the browser, and clearing site data or using a different device resets them.

Configure read aloud

Set optional defaults before loading the widget. Omit the configuration entirely to use system defaults, or set enabled: false to remove the Screen reader section.

<script>
  window.EqualizeConfig = {
    screenReader: {
      enabled: true,
      defaultVoice: "",
      defaultVolume: 1,
      defaultRate: 1,
      defaultPitch: 1,
      preferredLanguages: ["en-IN", "en-US"],
      hoverDelay: 280,
      maxCharacters: 500
    }
  };
</script>
<script src="/accessibility-widget.js" defer></script>

Browser API

Trigger the panel from your own page — for a custom button, a keyboard shortcut, or an onboarding flow.

window.Equalize.open();
window.Equalize.close();
window.Equalize.reset();

Equalize initializes itself as soon as its script tag runs. If you call the API from a script that may load first, wait for the ready event. Pass a section name to open() to focus that accordion directly:

window.addEventListener("equalize:ready", () => {
  window.Equalize.open("screenreader");
});