A lightweight, dependency-free accessibility toolbar that any website can add to improve usability for people with visual and reading difficulties.
Note: This is an open demo project. Anyone who wants to add an accessibility feature to their own website is free to use, copy and adapt it. It was originally built as a sample/demo with the DST-CIMS, Banaras Hindu University website in mind, but it is not officially deployed there — whether it gets added to any institutional website depends on that site's own approval. Until then, treat this purely as a reusable demo widget.
- Text size controls (A+ / A / A-) and a font-size slider
- Letter spacing and line height sliders
- High contrast mode
- Dyslexia-friendly font mode
- Focus highlight for links and buttons (keyboard navigation friendly)
- Hide images mode (reduces distraction / data)
- Grayscale mode
- Reset all button
- Remembers user preferences using
localStorage - Fully keyboard accessible (Esc closes the panel) with ARIA labels
- HTML5
- CSS3 (namespaced, no framework)
- Vanilla JavaScript (no libraries, no build step)
web-accessibility-widget/
index.html # demo page + widget markup
accessibility.css # widget styles
accessibility.js # widget logic
README.md
- Download/clone this folder.
- Open
index.htmlin any browser (or use the VS Code "Live Server" extension). - Click the accessibility button at the bottom-right corner.
This widget is designed to drop into any website without breaking its design:
- Copy
accessibility.cssandaccessibility.jsinto your project. - In your page
<head>, add:<link rel="stylesheet" href="accessibility.css">
- Just before
</body>, paste the widget markup (the#a11y-btn,#a11y-overlayand#a11y-panelblocks fromindex.html) and then:<script src="accessibility.js"></script>
All selectors are namespaced (#a11y-*, .a11y-*), so the widget does not
affect the host site's existing styles, layout, or design — it only adds the
accessibility button and panel.
- Uses semantic ARIA roles/labels (
role="dialog",aria-label). - Effects are applied via classes on the
<html>element and are fully reversible. - No personal data is collected; preferences stay in the browser via
localStorage.
MIT — free to use, copy, modify and share. Attribution appreciated but not required.
Ashwin Dubey — ECE, Chandigarh University