WR Portfolio

Accessibility Plugin

</ >

Building a Accessibility Plugin for WordPress

Accessibility Helper is a WordPress plugin designed to make your website more accessible for everyone. It provides an easy-to-use panel that lets visitors adjust font size, switch to a dyslexia-friendly font, hear image descriptions read aloud, and apply color schemes for common types of color blindness — all with customisable colors and styles to match your site’s branding.

How does the Accessibility Plugin work

– The plugin wraps your page content in a container that scales with the font size controls.
– The panel is positioned in one of four corners based on your admin settings.
– The dyslexic font is loaded via CDN when toggled.
– For screen readers and visual aid, the alt text reader uses `speechSynthesis` to speak out image descriptions on hover.
– Color blind schemes are applied using the different sliders that adapt your theme for color blindness.
– There is a color contrast validation to ensure that there are no contrasting colors whilst customising the plugin between the background color, button color and text color.
– First time load up, a notification pops up that mentions about using keyboard shortcode to access panel.
Please note: This project is Academical
screenshot of showing the the accessibility panel

Features

Font size control Users can scale text up or down for better readability
screenshot of showing the font changed using open dyslexia font changed using the accessibility plugin

Readable Font

Switch to the Open Dyslexic font for easier reading

screenshot of showing the font size changed using the accessibility plugin

Image Alt Text Reader

Hovering over images shows the alt text and reads it out using speechSynthesis

screenshot of showing the text reader tooltip using the accessibility plugin

Color Filters

Apply brightness, contrast, saturation and hue color filters by using the sliders

screenshot of showing the different color sliders using the accessibility plugin

Color Blind Modes

Apply color blind schemes for Protanopia, Deuteranopia, Tritanopia and Achromatopsia

screenshot of showing the color blindness using the accessibility plugin

Fully Customisable Panel

Adjust button colors, panel color, text colors and panel position

Includes contrast warning for any colors that collide together

screenshot of showing the back end settings using the accessibility plugin

Other features

Remembers preferences – Uses ‘localStorage’ to remember user settings

Lightweight – Loads only what’s needed, and works on any theme

Keyboard shortcut – Pressing ALT, SHIFT and A will open the panel

Scroll to Top