Global Accessibility Tool Plugin

The Challenge

Websites in Europe and the US face heavy legal penalties if they are not accessible to everyone. The client needed a solution that would provide a wide range of accessibility features—like high contrast, dyslexia-friendly fonts, and keyboard navigation—without slowing down the site or relying on heavy third-party libraries that could compromise privacy or performance.

The Solution

I developed a high-performance Accessibility Toolbar built entirely with clean HTML5, CSS3, and Vanilla JavaScript.

Zero Dependencies: To ensure maximum speed and 100% Core Web Vitals score, I avoided jQuery or external libraries.
Persistent Settings: I implemented localStorage logic, allowing the website to “remember” a user’s visual preferences (like Dark Mode or Font Size) across different sessions.
Semantic Optimization: Beyond the UI, I optimized the underlying code to be fully Screen-Reader friendly, ensuring a truly inclusive experience.

Tech Stack & Tools

Frontend: Vanilla JavaScript (ES6+), HTML5, CSS3 (Custom Properties for Theme Toggling).
Storage: Browser LocalStorage API for persistent user settings.
Compliance: WCAG 2.1 Standards, German Accessibility Laws (Barrierefreiheit).
Architecture: Modular JS for easy integration into any WordPress theme.

Key Features Developed

Visual Enhancements: High Contrast, Grayscale, and Negative Contrast modes.
Reading Aids: Dyslexia-friendly font toggles, text spacing, and cursor enlargement.
Navigation Tools: Keyboard navigation improvements and automated page structure outlines (Heading Highlighting).
Control Center: A fully responsive, sleek toolbar UI that lives on the edge of the screen for instant access.