In one sentence: AccessibilityDeck is a user preference layer. It lets a visitor adjust how your site looks and behaves to suit their own needs. It does not, and cannot, make a website WCAG, ADA, EAA or Section 508 compliant.
Please read this page before buying. If what you need is compliance, this component is not that, and no component is.
Why we lead with a disclaimer
The accessibility overlay category has a poor reputation, and largely a deserved one. A number of vendors have marketed automated widgets as one-line fixes for legal compliance. Hundreds of accessibility practitioners, including people who rely on assistive technology daily, have publicly objected to those claims. Websites using overlays have still faced legal action, because an overlay does not repair the underlying markup a screen reader actually reads.
AccessibilityDeck is built on the opposite premise. It makes no automatic corrections to your site, injects no ARIA into your content, and claims no compliance outcome. It gives visitors controls, and it only changes anything when a visitor asks it to. We would rather lose a sale than have a buyer believe they have solved a problem they have not.
What AccessibilityDeck is
A panel, opened from a floating button, offering nineteen controls that adjust presentation and interaction. Preferences are stored locally in the visitor's browser and reapply on their next visit.
It is designed for real conditions people browse in: low vision, dyslexia, migraine, glare, fatigue, vestibular sensitivity, colour vision deficiency, motor difficulty, ageing eyesight, and simple tiredness at the end of a long day. It is a comfort and control layer. That is the whole of the claim.
What AccessibilityDeck is not
Not a compliance solution. It does not deliver WCAG 2.1 or 2.2 conformance at any level, ADA compliance, European Accessibility Act conformance, or Section 508 conformance.
Not an audit tool. It does not detect or report accessibility defects. The page structure overlay is a visual aid for designers, not a test suite.
Not a remediation tool. It cannot add alt text, fix form labels, correct heading order, repair link text, add landmarks, or fix keyboard traps in your markup.
Not a screen reader. Read aloud is a convenience for sighted users who prefer listening. It is not assistive technology and is no substitute for one.
Not a legal defence. Installing it does not reduce your or your client's legal exposure.
What it cannot reach, whatever a visitor switches on
These live in your markup and your design. AccessibilityDeck has no access to them:
• Missing or meaningless image alt text
• Form inputs without associated labels
• Vague link text such as "click here" or "read more"
• Incorrect or skipped heading levels
• Missing landmark regions
• Insufficient colour contrast in your own design
• Keyboard traps and unreachable interactive elements
• Custom components without correct roles, names or states
• Video without captions, audio without transcripts
• Content that conveys meaning through colour alone
• Time limits without a way to extend them, and autoplaying media
• Reading order that does not match visual order
If these are wrong, they remain wrong. A visitor using a screen reader will encounter every one of them regardless of any setting in this panel.
The 18 tools, and the honest limits of each
Reading
Text size — Scales every text element from 100% to 180% of its original computed size. Limit: text inside images or SVG is unaffected, and tight layouts may reflow awkwardly at the top of the range.
Text spacing — Line height, letter spacing and word spacing across four levels, at the WCAG 1.4.12 metrics. Limit: fixed-height containers may clip at maximum spacing.
Readable font — Switches to Atkinson Hyperlegible or OpenDyslexic. Limit: fonts load from a CDN on first use, and evidence for dyslexia-specific typefaces is mixed. It helps some readers and not others.
Align left — Removes justified text.
Highlight links — Underlines and outlines every link. Limit: it cannot improve link text that is vague to begin with.
Highlight headings — Marks all headings. Limit: it only finds real heading elements, so a page whose headings are not marked up as headings will show nothing. That is itself a finding.
Reading mask — Dims everything but a horizontal band following the pointer. Limit: pointer-driven, so less useful on touch.
Reading guide — A line that follows the pointer. Same limit as the mask.
Colour and contrast
Contrast — Forced dark high contrast, smart inversion, or a contrast increase. Limit: applying a filter to the page makes fixed headers scroll with content. This is inherent to CSS filters and affects every widget of this type.
Saturation — Reduce, remove or increase colour. Limit: greyscale can remove meaning on pages that rely on colour coding.
Colour vision — Protan, deutan and tritan colour matrices. Limit: an approximation to aid perception, not a clinical simulation.
Low blue light — Warm tint for glare and migraine sensitivity. Limit: it alters the appearance of brand colours and photography.
Hide images — Hides images and background images for text-only reading. Limit: it removes decorative and informative images alike.
Navigation and motion
Focus outline — A strong, high-contrast focus ring for keyboard users. Limit: it cannot make an unreachable element reachable.
Big cursor — A large high-contrast pointer. Desktop only.
Pause motion — Freezes CSS animations and transitions. Limit: it cannot stop animation driven by JavaScript, video, or third-party embeds, and it may affect time-based scripts on some sites.
Page structure — Outlines headings and landmark regions with labels, and rings images missing alt text. Limit: a designer's aid. Some screen readers announce the generated labels while it is on, so it is not meant to be left enabled.
Section jump — Lists landmarks and headings, click to jump. Limit: it depends entirely on your page having real headings and landmarks.
Read aloud — Speaks headings and paragraphs, highlights the current block, with speed and voice control. Limit: it uses the browser's built-in speech engine, and availability and voice quality vary by device and operating system. Some browsers offer none.
Profiles
Seven one-tap presets — Low vision, Dyslexia, Focus, Seizure safe, Low glare, Motor and Senior — apply a combination of the above. They are convenience shortcuts, not diagnoses, and every individual control remains adjustable afterwards.
Who this genuinely helps
• Visitors with low vision who need larger text and stronger contrast than your design provides
• Visitors with dyslexia who benefit from wider spacing and a different typeface
• Visitors with migraine, photophobia or glare sensitivity who need warmth and reduced saturation
• Visitors with vestibular disorders who need motion stopped
• Visitors with colour vision deficiency navigating colour-coded interfaces
• Visitors with attention or reading difficulties who benefit from a mask or guide
• Visitors with motor difficulties who need a larger pointer and clearer focus
• Older visitors whose eyesight has changed
• Anyone reading in bright sunlight, on a poor screen, or when tired
There are a lot of people in that list. Helping them is worth doing on its own merits. It just is not the same thing as compliance.
Who this does not help
Screen reader users. Their software already provides text scaling, speech and navigation, and does it better. AccessibilityDeck is designed not to interfere with them: it adds no ARIA to your content, does not alter the accessibility tree, does not hijack focus, and does not modify your markup. But it offers them nothing they do not already have. What helps them is correct markup on your side.
What you still need to do
AccessibilityDeck complements accessible design. It does not replace any of this:
1. Meaningful alt text on informative images, empty alt on decorative ones
2. A visible, associated label on every form input
3. Descriptive link and button text
4. Correct, unskipped heading hierarchy
5. Proper landmark regions
6. Sufficient colour contrast in the design itself
7. Full keyboard operability with a visible focus state
8. Correct roles, names and states on custom components
9. Captions and transcripts for media
10. Meaning never conveyed by colour alone
11. Testing with real assistive technology and, ideally, real disabled users
12. A published accessibility statement
If you want a compliance outcome, commission an audit from a qualified accessibility professional and fix what it finds.
Technical notes and known limitations
• Fixed headers scroll under Contrast and Invert. A CSS filter on the page creates a containing block, so fixed elements become page-anchored. This is unavoidable for any filter-based contrast tool.
• Fonts load from a third-party CDN, and only when a visitor selects them. If your organisation has data-processing restrictions, disable the Readable font tool or self-host the fonts.
• Preferences are stored in the visitor's browser, local to their device. No account, no server, no cookies, no analytics. No data leaves the device.
• Read aloud depends on the browser. Some platforms provide many voices, some few, some none.
• Pause motion cannot reach JavaScript-driven animation, video, or third-party embeds.
• One instance per page. Additional instances stand down automatically, but the component must be added to each page.
• Panel text is a fixed size so the panel stays usable at any page text scale. Browser zoom scales it correctly; browser text-only zoom does not.
The panel's own accessibility
The interface is built to WCAG 2.2 AA: keyboard operable throughout, Escape closes and returns focus, correct disclosure and radiogroup patterns, aria-pressed state on toggles, a live region announcing changes, target sizes above the minimum, a visible focus indicator, an accent colour automatically contrast-corrected where used as text, state never signalled by colour alone, and reduced-motion support.
That is a claim about the panel. It is not a claim about your site.
Legal note
This component is provided without warranty of accessibility or legal compliance. Nothing here is legal advice. Accessibility obligations vary by jurisdiction, sector and organisation. If you have a legal requirement, consult a qualified professional. The developer accepts no liability for compliance outcomes arising from the use of this component.
In short
Accessibility is a property of your website, not of a widget added to it. AccessibilityDeck gives your visitors real, immediate control over how they read and navigate your content, and that is genuinely valuable. It is one useful layer on top of an accessible foundation, never a replacement for building one.