EZ Accessibility documentation

Everything you need to install EZ Accessibility on a WordPress site, set it up to match your brand, and get the most out of it.

By Shaurya, Greyteck · Published · 8 min read

Before you start

EZ Accessibility needs:

  • WordPress 6.5 or later
  • PHP 8.0 or later

It works with any theme, with page builders like Elementor, and with multilingual plugins such as WPML, Polylang and TranslatePress. It is free under the GPLv2 licence, with no paid version.

Install the plugin

The plugin is on GitHub today. A WordPress.org listing, with one-click install from your dashboard, is on the way.

  1. Open the EZ Accessibility repository on GitHub.
  2. Click Code, then Download ZIP, and save the file.
  3. In WordPress, go to Plugins, then Add New, then Upload Plugin.
  4. Choose the zip file, click Install Now, then Activate.

A small accessibility button now appears in the bottom right corner of every page. Everything after this point is optional: the defaults work on most sites.

Once it is listed on WordPress.org, you will be able to go to Plugins, then Add New, search for “EZ Accessibility” and install it from there.

The settings page

Open EZ Accessibility in the WordPress admin sidebar. The settings are grouped into five sections, and a live preview shows every change before you save.

SectionWhat you can change
AppearanceButton colour, icon, size, corner and distance from the edge
FeaturesWhich tools visitors see in the panel
VisibilityThe whole site, or only the pages and posts you pick
LanguagesAny label in any language, extra languages and the fallback language
AdvancedThe stacking order (z-index) of the button and panel

Only administrators can change these settings. If you leave the page with unsaved changes, WordPress asks you first.

Appearance

Brand colour. Pick a preset or enter your own colour for the button and the panel’s highlights. The settings page checks the contrast between your colour and the icon colour, and warns you if the button would be hard to see.

Button icon. Choose one of five built-in icons: Figure, Figure in circle, Eye, Text or Adjust. Or choose Your image to use your own (see Use your own button icon).

Size and position. Choose a small, medium or large button, any of the four corners, and how far it sits from the edges of the screen (20 pixels by default).

Visitor tools

Under Features, turn each tool on or off. Visitors see only the tools you leave on.

ToolWhat it does for the visitor
Text sizeScales text up or down in steps, including text sized by page builders
High contrastWhite text on black, with yellow links
Invert coloursFlips the colour scheme, while photos and video stay natural
GrayscaleRemoves colour to reduce visual noise
Highlight linksOutlines and underlines every link on the page
Readable fontSwitches to a highly legible typeface, in every language
Letter spacingAdds space between letters, in three steps
Pause animationsStops animations and transitions across the page
Large cursorShows a bigger, high-contrast mouse pointer

Invert colours and grayscale can be used together. The panel also has a Reset all button, and the floating button shows a small count of how many changes are active.

A visitor’s choices are saved in their own browser, so they stay in place as they move between pages and when they come back later.

Choose where it appears

Under Visibility, choose:

  • Entire site to show the button on every page, or
  • Selected pages only, then tick the pages and posts where it should appear.

Languages

The panel speaks 28 languages. It reads the lang attribute of each page and uses the closest match, so pt-BR uses Portuguese and zh-TW uses Traditional Chinese. On right-to-left pages, such as Arabic or Hebrew, the button and panel mirror on their own.

Under Languages you can:

  • Edit any label. Change the wording of any button or heading, in any language. Edited labels are marked so you can restore the defaults later.
  • Add a language. Click Add language, enter the code your pages use (for example sw for Swahili), its name and its direction, then type your labels. You can also add a regional version, like pt-br, which takes priority over the general one.
  • Pick a fallback. If a page’s language has no labels, the panel uses the fallback language you choose. English is the default.

If your site switches language without reloading the page, call window.EZAccessibility.refresh() after the switch (see For developers).

Use your own button icon

Under Appearance, then Button icon, choose Your image, then upload an image or pick one from the media library.

  • PNG, JPEG and WebP images are accepted, up to 512 KB.
  • SVG files are refused, because they can contain code that runs in your visitors’ browsers.
  • When you save, the plugin checks the file itself to confirm it is a real image under the size limit.

A square image with some space around the symbol looks best.

Fix a covered button

Some sticky headers, cookie banners and chat widgets sit on top of everything else on the page. If one covers the accessibility button or panel, open Advanced and raise the z-index (it is 99999 by default). If the button and a chat bubble share a corner, move the button to another corner under Appearance instead.

For developers

You can control the panel from your theme or another plugin with a small JavaScript API:

window.EZAccessibility.open();    // Open the panel
window.EZAccessibility.close();   // Close the panel
window.EZAccessibility.toggle();  // Open or close it
window.EZAccessibility.reset();   // Undo every adjustment
window.EZAccessibility.refresh(); // Detect the page language again

For example, you can add an “Accessibility” link to your footer menu that opens the panel.

The panel is drawn inside a Shadow DOM, so your theme’s CSS cannot change it and its CSS cannot leak into your theme. Page adjustments are applied as classes on the <html> element. The plugin loads one small script and two small stylesheets, with no libraries and no requests to other servers.

Privacy and data

EZ Accessibility collects nothing. A visitor’s choices are saved only in their own browser, using localStorage, and nothing is sent to any server. It sets no cookies and loads nothing from other websites, so it does not need to be listed in a cookie banner.

When you delete the plugin from Plugins, its settings are removed from your database, on every site of a multisite network.

Troubleshooting

A tool does not change an embedded map or video. Browsers do not let a page restyle content inside an iframe from another website, such as a YouTube video or a Google map. This is a browser security rule.

The panel shows the wrong language. Check the lang attribute on your page’s <html> tag, which most themes take from Settings, then General, then Site Language. If no language matches, the panel uses the fallback language under Languages.

The button does not appear. Check Visibility: if it is set to selected pages only, the button shows only on the pages you ticked. If you use a caching plugin, clear its cache after you change settings.

Text size does not change some text. Text inside images cannot be resized. For everything else, the tool reads each element’s real size when the page loads, so text set by page builders scales too.

A note on compliance

An accessibility toolbar helps visitors adjust your site to how they read, but it does not on its own make a website compliant with WCAG, the ADA or similar laws. Clear content, proper markup and accessible design still matter. Our guide to website accessibility explains what to fix first, and we can help with that too.

Keep reading

Website accessibility for businesses: ADA, WCAG and what to fix first What a toolbar does and does not do for compliance. Read more WordPress website development Need the rest of your site made accessible? We can help. Read more

Want help with this?

Tell us about your site or store. We reply within 1 business day.

Start a project