FAIR

Federated and Independent Repositories

Quicksloth Accessibility Toolbar

Plugin Banner

Quicksloth Accessibility Toolbar

by quicksloth

Download
Description

Give your visitors a toolbar that makes your pages easier to read on their own terms: bigger text, more spacing, stronger contrast, a dyslexia-friendly font, a reading guide, paused animations and a visible keyboard focus.

The toolbar works as soon as you activate the plugin. Everything runs in the visitor’s browser: there is no account to create, no connection to external servers, no cookies, no tracking, and no logo or link to us on your pages.

An accessibility toolbar helps some visitors; it does not make a website conform to WCAG or to the law. Fix your content and code first.

What your visitors get

A button in a corner of the page opens a panel with 25 tools in four groups. Choices are remembered in the visitor’s browser across pages and visits.

Text

  • Text size: four steps, up to 175%, including text added later (sliders, infinite scroll).
  • Line height: three steps, for more space between lines.
  • Letter spacing: three steps.
  • Text align: left, center or right.
  • Bold text.
  • Readable font: switches the page to the visitor’s system sans-serif font.
  • Dyslexia-friendly font: OpenDyslexic, bundled with the plugin and loaded only when a visitor turns it on.
  • Underline links.
  • Highlight links.
  • Highlight headings.

Colors

  • High contrast, dark contrast or light contrast (one at a time).
  • Monochrome.
  • Saturation: low or high.
  • Invert colors (images and videos in the page keep their real colors).

Reading

  • Reading guide: a horizontal bar that follows the mouse.
  • Reading mask: darkens the page above and below the mouse.
  • Big cursor.
  • Hide images, including background images.
  • Stop animations, including video and audio.
  • Mute media.
  • Highlight on hover.

Navigation

  • Visible focus: a thick outline on the element that has keyboard focus.
  • Site map: up to 50 published pages, inside the panel.

The panel also has Reset all and Hide toolbar for this visit (it also switches the tools off in that browser tab; the visitor’s choices come back with the button on the next visit). A “Skip to content” link for keyboard users is added at the top of every page (you can turn it off).

What you can set

One page under Settings Accessibility Toolbar:

  • Button position (any corner), color, size and icon.
  • Which tools are shown, the pages where it does not load, hiding the button on small screens, or your own button instead of the floating one.
  • Skip link on or off, and where it jumps to.
  • Toolbar language: follow the language of each page, or a fixed locale.
  • An optional “Accessibility toolbar by Quicksloth” line in the panel, off by default.

How it is built

  • Light: one deferred script (about 9 KB gzipped) and the panel styles (about 2 KB); the page rules load only after a visitor turns a tool on. No jQuery.
  • Isolated from your theme: the panel lives in a Shadow DOM, so theme and page builder CSS cannot change its layout.
  • Keyboard and screen readers: the panel is a dialog that keeps Tab inside while open and closes with Esc, returning focus to the button. Every button exposes its name and state, for example “Text size, Level 2 of 4”.
  • Language of the page: labels follow the language WordPress uses for each page, and the panel mirrors itself on right-to-left pages.
  • Clean dashboard: no top-level menu and no dashboard notices; one review request on the plugin’s own settings page after 14 days, gone for good once dismissed.

What this plugin does not do

It does not scan or rewrite your site’s code, add missing alt text, or fix forms and headings. It changes how a page looks in one visitor’s browser while that visitor has a tool turned on, and nothing else.

Privacy

This plugin does not collect, send or share any personal data.

  • Visitor choices are stored only in the visitor’s own browser (localStorage key qsab:v1); “Hide toolbar for this visit” stores one flag in sessionStorage. Neither reaches your server or ours.
  • No cookies, no tracking, no telemetry, and no requests to external servers, on your site or in your dashboard.
  • On your server the plugin stores only its settings, its activation date and whether you dismissed the review request. Deleting the plugin removes them.

The plugin adds a suggested paragraph to Settings Privacy Policy Guide. The dyslexia-friendly font is OpenDyslexic (SIL Open Font License 1.1, in assets/fonts/OFL.txt).

  1. In your dashboard go to Plugins Add Plugin and search for “Quicksloth Accessibility Toolbar”.
  2. Click Install Now, then Activate.
  3. Visit your site: the toolbar button is in the bottom-right corner.
  4. Optional: change the button, the tools shown and the pages where it loads under Settings Accessibility Toolbar.

To install by hand, upload the plugin folder to /wp-content/plugins/ and activate it under Plugins.

  1. The toolbar button in the bottom-right corner of a page, with the default color and icon.

    The toolbar button in the bottom-right corner of a page, with the default color and icon.

  2. The open panel with the Text, Colors, Reading and Navigation groups, Reset all and Hide toolbar for this visit.

    The open panel with the Text, Colors, Reading and Navigation groups, Reset all and Hide toolbar for this visit.

  3. A page with High contrast turned on.

    A page with High contrast turned on.

  4. A page with the Dyslexia-friendly font and a larger Text size turned on.

    A page with the Dyslexia-friendly font and a larger Text size turned on.

  5. The settings page under Settings → Accessibility Toolbar.

    The settings page under Settings → Accessibility Toolbar.

Does this plugin make my site compliant with WCAG, the ADA or the European Accessibility Act?

No. An accessibility toolbar helps some visitors; it does not make a website conform to WCAG or to the law. Fix your content and code first.

The work that matters is in your content and theme: text alternatives for images, a logical heading order, enough color contrast, labels on form fields, and everything usable with a keyboard. Test with real assistive technology where you can. The toolbar is an extra that lets some visitors adjust the page to their needs.

Will it slow down my site?

No script or style of the plugin blocks the first paint. It loads about 9 KB of JavaScript and 2 KB of CSS (gzipped); the page rules (about 2.4 KB) and the dyslexia-friendly font (about 100 KB) load only when a visitor turns on a tool that needs them. In our Lighthouse test (mobile, a long page) the score stayed at 100 and Total Blocking Time at 0 ms.

Does it work with caching and optimization plugins?

Yes. The toolbar’s HTML is the same for every visitor and choices are applied in the visitor’s browser, so cached pages work. We tested WP Super Cache (Simple mode) and LiteSpeed Cache with JavaScript minify, combine and deferred loading and CSS combine turned on.

If your optimization plugin delays JavaScript until the first interaction (often called “Delay JavaScript execution”), the button appears only after the visitor scrolls, taps or presses a key. To show it right away, add quicksloth-accessibility-toolbar and QSAB_CONFIG to that feature’s exclusions.

Does it work with page builders?

The tools work through classes on the page’s <html> element and the panel lives in a Shadow DOM, so they do not depend on your builder. We tested the block editor on Twenty Twenty-Five and Elementor: text size and the readable fonts reach Elementor widgets, and the toolbar does not load inside the Elementor editor canvas.

If the toolbar shows up inside another builder’s editor, turn it off there with the qsab_should_load filter (example below).

Does it work on multilingual sites?

Yes. With the language setting on “auto”, the toolbar follows the language WordPress sets for each page, which is what multilingual plugins change. We tested Polylang in Italian and in Arabic, where the panel mirrors itself for right-to-left. WPML uses the same WordPress setting; we have not tested it ourselves.

All texts can be translated on translate.wordpress.org; until a translation for your language exists, the labels stay in English. You can also set a fixed locale, such as it_IT, under Settings Accessibility Toolbar.

What data does it store?

On your server: the plugin settings, the date the plugin was activated (for the one review request) and whether you dismissed that request. Deleting the plugin removes all three.

In the visitor’s browser: the tools the visitor turned on, in localStorage under the key qsab:v1, and, if they click “Hide toolbar for this visit”, one flag in sessionStorage. Nothing is sent to your server or to us. See the Privacy section.

Can I choose the tools, the pages and the button?

Yes, under Settings Accessibility Toolbar: untick the tools you do not want under Tools shown; list page or post IDs under Do not show on these pages; hide the button on screens narrower than 768 px; or enter a CSS selector under Use my own button (CSS selector) so your own button or menu item opens the panel instead of the floating button.

Developers can decide case by case with a filter, for example to hide the toolbar on WooCommerce checkout pages:

add_filter( 'qsab_should_load', function ( $load ) { return function_exists( 'is_checkout' ) && is_checkout() ? false : $load; } );

Does it need an account, show your logo or make external requests?

No account, no API key, no logo or link on your pages (unless you turn on the optional credit line) and no external requests: the script, the styles and the font are served from your own site. Your theme, page builder or other plugins may make their own external requests (for example web fonts); those are not part of this plugin.

0.1.2

  • Phones: the panel fits short landscape screens. Contrast modes no longer cover letters on tight titles.

Older versions: changelog.txt.

Back to top