Kesso Accessibility Widget
Custom accessibility widget for WordPress, providing a clean UI for visitors to adapt the site to their accessibility needs.
Tech Stack
About This Project
Kesso Accessibility is an open-source WordPress plugin we publish under our Kesso brand. It renders a toolbar in the site footer so visitors can adapt the page themselves: resize text in steps up to a fixed cap, switch between grayscale, high-contrast, negative-contrast and light-background modes, underline links, force a readable font stack, pause animations, plus a skip-to-content link. The front end makes no third-party request, no account and no external API, and the toolbar icons are inline SVG. The admin screen is built on the WordPress Settings API, with a sanitize callback on every field. Owners enable or hide each button, rewrite every label, and set the widget's corner, size, radius and colors, which PHP compiles into inline CSS. Front-end JS is one small dispatcher keyed on data-action attributes, and rendering is skipped inside the Bricks, Elementor, Beaver Builder, Divi and Visual Composer editors. It is a preference layer for visitors, not an audit or remediation tool.
Challenges & Solutions
Two things needed care. A toolbar injected on wp_footer will happily render inside a page builder's own editing canvas, so enqueueing and output are skipped whenever Bricks, Elementor, Beaver Builder, Divi or Visual Composer is in edit or preview mode, detected from both their runtime flags and their query parameters. The styling controls also have to accept color in whatever form the owner pastes in. Rather than lean on the bundled WordPress picker, we wrote a canvas-based one with hue and alpha sliders and paired hex/rgba inputs, and validate on the server: hex or rgb/rgba only, channels clamped, anything else rejected. PHP helpers then derive the toolbar's rgba box-shadow from whichever format was saved.