AccessKit Studio

One campaign brief becomes an accessible marketing kit — with a live WCAG score and human review before export.

Comment

Inspiration

A small nonprofit posted a beautiful event poster — and a blind supporter replied that they had no idea what it said. No alt text, no plain-language version, no captions. The team cared about inclusion; they just didn't have the time, budget, or expertise to check every asset. Accessibility felt like a separate, expert-only job that came after publishing. We built AccessKit so accessibility is in the draft, not bolted on at the end.

What it does

Type a campaign brief and AccessKit generates a complete kit: social post, caption with CamelCase hashtags, poster preview in your brand colors, real alt text, a plain-language version, and a 30-second captioned video script. It then audits the kit with 7 real checks — WCAG contrast math, reading level, alt text quality, hashtag casing, emoji count, caption planning, plain-language presence — and shows a 0–100 score with a before/after comparison. Export unlocks only after a human confirms 4 review checks.

How we built it

Single-file HTML + CSS + vanilla JavaScript (zero install). Built-in generation engine by default, with optional Google Gemini 2.0 Flash draft mode via a user-supplied key stored only in browser local storage. Accessibility engine uses real WCAG 2.1 relative-luminance contrast math, a Flesch-Kincaid-style reading-level estimate, and platform hashtag/caption rules. Static hosting on GitHub Pages; no user data leaves the browser except the optional Gemini request.

Challenges we ran into

Making the audit honest. A fake "100/100" badge would be easy, but a score that actually moves when you edit the copy is what makes the tool trustworthy. We made every check recompute live from the edited text — including the CamelCase hashtag rule, which needed an extra pass to handle single-word tags correctly.

Accomplishments that we're proud of

The audit score actually moves when you edit the copy — a sample brief scores 100/100, and editing the alt text drops it in real time. Export stays locked until a human confirms all four review checks.

What we learned

Accessibility is mostly unglamorous details: hashtag casing, contrast ratios, caption planning. The teams that need it most don't need another awareness poster; they need the details handled by default, with a human still in charge.

What's next for AccessKit Studio

One-click PNG poster export with embedded alt text, more platforms and languages, team workspaces with saved brand kits, and automated .srt caption files for the video script.

Built With

  • a-flesch-kincaid-style-reading-level-estimate
  • css
  • html
  • javascript
  • vanilla
  • wcag
  • with-optional-google-gemini-2.0-flash-draft-mode-via-a-user-supplied-key-stored-only-in-browser-local-storage.-accessibility-engine-uses-real-wcag-2.1-relative-luminance-contrast-math
Share this project:

Updates

Submission history