---
title: "AccessibilityDeck — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Thewebheart Studio · Buttons. AccessibilityDeck adds a preference panel to your Framer site, giving visitors control over how they read your content."
canonical: "https://framer.elliotli.dev/component/accessibilitydeck"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/AccessibilityDeck

# AccessibilityDeck

WCAG-aligned Accessibility widget

[View on Framer](https://framer.com/marketplace/components/accessibilitydeck/?via=elliot-li)

![AccessibilityDeck preview image 1](https://framer.elliotli.dev/og/component/accessibilitydeck/4e6b06dff4d30acb/1600x1200.jpg)

## Summary

AccessibilityDeck adds a preference panel to your Framer site, giving visitors control over how they read your content.

## Description

**AccessibilityDeck** adds a preference panel to your Framer site, giving visitors control over how they read your content. Most people don't browse in ideal conditions — sunlight, migraine, dyslexia, ageing eyesight. One button opens nineteen controls, remembered next visit.

No widget can make a site WCAG compliant on its own, but AccessibilityDeck supports WCAG-aligned usability by improving readability, operability and user control.

### **18 tools**

**Reading:** Text size (100–180%) · Text spacing (WCAG 1.4.12 metrics) · Atkinson Hyperlegible and OpenDyslexic fonts · Align left · Highlight links · Highlight headings · Reading mask · Reading guide

**Colour:** Contrast (dark, invert, boost) · Saturation · Low blue light · Colour vision filters · Hide images

**Navigation and motion:** Focus outline · Big cursor · Pause motion · Page structure overlay · Section jump · Read aloud with speed and voice control

**Plus seven one-tap profiles:** Low vision · Dyslexia · Focus · Seizure safe · Low glare · Motor · Senior

### **Built differently**

The panel renders outside `<body>`, so page-wide contrast filters can't wash out the controls. Text scaling reads each element's original size instead of assuming rem units, so it works on pixel-built Framer sites. It claims scroll gestures before smooth-scroll components can swallow them, where other panels stall. The panel itself meets WCAG 2.2 AA.

Around 45 property controls, including an on/off switch for each tool. Preferences stay in the visitor's browser — no server, no cookies, no analytics.

### **Important notes**

AccessibilityDeck is a user preference layer. Your site still needs accessible structure, link text, form labels, colour contrast and alt text. Screen reader users get little from a panel like this; correct markup is what helps them. Contrast filters make fixed headers scroll. Read aloud voices vary by device.

Full scope and limitations: [https://accessibilitydeck.framer.website/details](https://accessibilitydeck.framer.website/details)

Setup: one instance per page, layer set to Position → Absolute.

## Rank history [How rankings work →](/terms#rankings)

-   All · #7128

## Details

- **Author**: Thewebheart Studio
- **Price**: $10.00
- **Published**: 2026-08-01
- **Updated**: 2026-10-26
- **Added**: 2026-08-01
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow