Nicolas Johnson

This plugin offers you the possibility to show people accessibility configurations in your menu. This means that everyone, including people with disabilities, will be able to configure the settings (contrast, font-size, coloration, …) that help them be able to use your website.
Here is a <a href="https://demo.wpinclusion.com/a11y-kit" rel="nofollow ugc">demo</a>. 
Follow the evolution of the plugin trough the <a href="https://github.com/multimedianj/a11y-kit" rel="nofollow ugc">Github repository</a>.
In order to make the plugin works, you need to create a menu first. 
In your menu, you simply need to add a CSS class in this way “wpak_DISABILITY_PROPERTY”.
Where to add the CSS class mentioned above ? 
– In the menu you’re in (Appearance > Menus > name_of_your_menu), you first click on an item you want to have the ability to change the state (accessibility menu item). 
– Then, you should have the field “CSS Classes (optional)”. Inside this field, you can add the class in this way : “wpak_DISABILITY_PROPERTY” (see examples from the pre-configured classes below). 
– If the field “CSS Classes (optional)” is not visible, you just have to look for the “Screen Options” button in the top-right corner of the page. Then, search for the checkbox “CSS Classes” which should be checked in order for the field to be visible. Finally, return to the field and add your class.
<h3>List of the pre-configured classes</h3>
<h4>Coloration</h4>
<ul>
<li>“wpak_color_normal” (normal state)</li>
<li>“wpak_color_dark” (dark mode)</li>
<li>“wpak_color_monochrome” (shades of gray, monochrome)</li>
<li>“wpak_color_highcontrast” (high contrast)</li>
<li>“wpak_color_lowsaturation” (low saturation)</li>
<li>“wpak_color_highsaturation” (high saturation)</li>
</ul>
<h4>Font size</h4>
<ul>
<li>“wpak_font_normal” (normal state)</li>
<li>“wpak_font_large” (large font-size, default: 30px)</li>
</ul>
<h4>Dyslexia</h4>
<ul>
<li>“wpak_dyslexia_normal” (normal state)</li>
<li>“wpak_dyslexia_comicsans” (Comic Sans font-family)</li>
<li>“wpak_dyslexia_arial” (Arial font-family)</li>
</ul>
<h4>Reset button</h4>
<ul>
<li>“wpakReset” (reset all the filters)</li>
</ul>
<h3>Add an icon instead of text</h3>
You can use the field for the title to add HTML code. With HTML code, it is possible to add 
– An image: <code><img src="link_of_your_image.png" alt="name_of_property" /></code> 
– An icon from FontAwesome or any library you want to include: <code></code>
<h3>Suggested FontAwesome icons</h3>
Here is a list of the suggested icons to use for each pre-configured accessibility settings.
<ul>
<li>Coloration: <code></code></li>
<li>Font-size: <code></code></li>
<li>Font-family: <code></code></li>
<li>Letter-spacing: <code></code></li>
<li>Line-height: <code></code></li>
<li>Reset button: <code></code></li>
</ul>
<h4>EXTRA</h4>
If you want to add a link to your accessibility statement page, we recommend using this icon that displays perfectly 
– <code></code>
<h3>Import a pre-generated menu</h3>
To import a pre-generated menu with already pre-configured accessibility settings, follow the instructions below.
<ol>
<li>First, download the file menu-a11y.json on your computer, available in the folder SAMPLE of the plugin</li>
<li>Install the plugin **Export Import Menus”, available <a href="https://wordpress.org/plugins/export-import-menus" rel="ugc">here</a></li>
<li>Activate the plugin</li>
<li>Go to Appearance > Export/Import Menus</li>
<li>Click on the tab Import Menus</li>
<li>Click on Choose a file and import the menu-a11y.json file you just downloaded on your computer</li>
<li>On the Menu Name field, feel free to name your menu (ex.: A11y topbar menu)</li>
<li>Click on the Import Menus button</li>
<li>Validate in Appearance > Menus that your menu has been imported correctly</li>
</ol>
<h4>EXTRA</h4>
If you want to use FontAwesome icons, install the plugin FontAwesome, available <a href="https://wordpress.org/plugins/font-awesome" rel="ugc">here</a>
<h3>Overwritte accessibility settings (styles)</h3>
In the plugin directory, there’s a file SAMPLE/style-a11y.css that contains all the CSS variables used to style the different accessibility settings of the plugin. It is possible to overwritte those variables by adding this file to the root of your theme.
<ol>
<li>You need to download the style-a11y.css</li>
<li>You add the file to the root of your theme (or child-theme)</li>
<li>You add this code to your style.css @import “style-a11y.css”;</li>
</ol>
This plugin was created and is maintained by WP inclusion, a <a href="https://wpinclusion.com" rel="nofollow ugc">glossary of Web accessibility terminologies</a>.
<h3>Compatibility</h3>
This plugin is multilingual ready.

A11y Kit

Make your website accessibility better by adding pre-configured and custom settings in your menu.

cartcoders

Cart Coders

Get started with Accessibility Assistant at no cost. 
The free plan includes essential accessibility features, simple widget control, supports 100+ languages and standard email support — perfect for instantly enhancing your website’s accessibility.
Ensure ADA, WCAG, and EAA compliance with Accessibility Assistant. Improve accessibility with features like Accessibility Profiles, keyboard navigation, text-to-speech, contrast settings, and font scaling. The fully customizable widget supports multiple languages to match your store’s branding for EAA, ADA, WCAG and AODA. Create an inclusive experience, reduce legal risks, and comply with global accessibility standards, no coding needed. You can just simply add the widget and it will be done.
1. Ease of Access for Visually Impaired Users 
Accessibility Assistant enhances the browsing experience for users with varying levels of visual impairment by allowing them to adjust contrast, text size, cursor visibility, and reading modes — supporting greater independence and digital inclusion.
2. Ease of Access for Elderly Users 
The plugin helps older adults overcome age-related vision or motor limitations by offering easy-to-use tools such as font resizing, high-contrast modes, large cursor, and keyboard navigation — making websites more readable and easier to interact with.
3. Ease of Access for Mobility-Impaired Users 
For users who experience difficulty using a mouse or trackpad, Accessibility Assistant provides full keyboard navigation and interaction support, allowing them to browse, fill forms, and navigate menus without relying on a pointing device.
4. Ease of Access for Users with Temporary or Situational Disabilities 
Whether due to temporary conditions like eye fatigue, injury, or environmental limitations, users can benefit from on-demand accessibility adjustments such as text-to-speech, spacing controls, and navigation enhancements — all without needing system-level changes.
5. Ease of Access for Blind and Screen Reader Users 
Accessibility Assistant offers assistive tools like text-to-speech, image alt text tooltips, and improved keyboard focus support, helping blind or severely visually impaired users better access, navigate, and interact with digital content independently.
6. Ease of Access for Users with Cognitive or Learning Disabilities 
Accessibility Assistant supports users with conditions such as dyslexia, ADHD, and other cognitive challenges by offering features like dyslexia-friendly fonts, reading masks, line-by-line reading guides, and simplified visual modes — helping them stay focused, reduce cognitive overload, and better comprehend website content.
Key Features – Designed for ADA, WCAG, EAA and AODA Accessibility Compliance
Accessibility Assistant for WordPress 
offers a full suite of accessibility tools that empower users to personalize their browsing experience while helping site owners move toward compliance with global accessibility laws and guidelines.
Multi-language Support (100+ languages) 
Ensures accessibility across global audiences by auto-detecting or manually setting the widget language, including support for EAA regions.
Text-to-Speech (TTS) 
Allows users with visual impairments or reading challenges to listen to on-page content, enhancing compliance with WCAG and ADA standards.
Font Resizing and Content Spacing Controls 
Helps users with low vision or cognitive needs adjust font size, line height, letter spacing, and word spacing for optimal readability.
Color Contrast and Brightness Adjustment 
Provides high-contrast modes and brightness controls to meet WCAG 2.1 minimum contrast ratios, supporting users with visual impairments.
Dark Mode, Light Mode, Grayscale, and High-Contrast Modes 
Enables quick visual theme toggles for users sensitive to light or color, aiding compliance with visual accessibility requirements under ADA and EAA.
Keyboard Navigation and Focus Indicators 
Enhances accessibility for users who rely on keyboard-only navigation, helping meet AODA and WCAG 2.1 guidelines.
Skip to Content and Quick Navigation Tools 
Improves user experience for screen reader and keyboard users by offering direct access to main content areas without unnecessary tabbing.
Link and Heading Highlights 
Visually highlights links and headings to assist users with cognitive disabilities or vision difficulties in navigating structured content.
Image ALT Tooltip Display 
Displays existing ALT text on image hover, helping users understand visual content and supporting WCAG-compliant media handling.
Pause Animations and Stop Motion Effects 
Allows users to disable motion-based content to avoid distractions or seizures, in accordance with WCAG success criteria for animations.
Reading Mask and Reading Guide 
Helps focus attention by highlighting one line or area at a time, improving accessibility for users with dyslexia or attention deficits.
Large Cursor Mode 
Provides an enlarged mouse pointer for better visibility and control, assisting users with vision or motor challenges.
Content Scaling and Layout Adjustment 
Offers global scaling of on-page content elements to make text, buttons, and layouts more accessible without zooming the browser.
Dyslexia-Friendly Fonts 
Replaces fonts with clean, readable alternatives to reduce letter confusion and improve comprehension for users with dyslexia.
Color-Blind Mode Profiles 
Enables preset profiles for common types of color blindness (e.g., red-green, blue-yellow), improving visual accessibility in EAA and WCAG contexts.
Responsive Widget for Mobile and Desktop 
Ensures the accessibility tools work seamlessly across screen sizes and devices, maintaining compliance across all platforms.
Customizable Widget Layout and Position 
Allows you to configure the placement, appearance, and branding of the accessibility widget to match your site’s UI/UX needs.
Supported Languages 
English (en), Svenska (sv), Suomi (fi), Deutsch (de), Español (es), Português (pt), Türkçe (tr), Français (fr), 日本語 (ja), 한국어 (ko), עברית (he), Latviešu (lv), Polski (pl), Ελληνικά (el), Dansk (da), Italiano (it), Română (ro), Български (bg), Hrvatski (hr), Čeština (cs), Nederlands (nl), Eesti (et), Magyar (hu), Gaeilge (ga), Lietuvių (lt), Malti (mt), Slovenčina (sk), Slovenščina (sl)
Compatible with Popular WordPress Themes & Page Builders
Accessibility Assistant works seamlessly with a wide range of WordPress themes and page builders. Below is the list of currently supported environments:
Supported Themes:
<ul>
<li>Astra</li>
<li>OceanWP</li>
<li>Flatsome</li>
<li>GeneratePress</li>
<li>Hello Elementor</li>
<li>Neve</li>
<li>Kadence</li>
<li>Sydney</li>
<li>Hestia</li>
<li>Blocksy</li>
<li>Zakra</li>
<li>Storefront (official WooCommerce theme)</li>
<li>WoodMart</li>
<li>Porto</li>
<li>Divi</li>
<li>Avada</li>
<li>TheGem</li>
<li>Salient</li>
<li>Enfold</li>
<li>X Theme</li>
<li>Bridge</li>
<li>Betheme</li>
<li>Shopkeeper</li>
<li>Rey</li>
<li>Electro</li>
</ul>
Supported Page Builders:
<ul>
<li>Elementor</li>
<li>WPBakery Page Builder</li>
<li>Bricks</li>
<li>Beaver Builder</li>
<li>Gutenberg (Block Editor)</li>
<li>Divi Builder</li>
<li>Brizy</li>
<li>SiteOrigin Page Builder</li>
<li>Thrive Architect</li>
<li>Visual Composer</li>
<li>Cornerstone</li>
<li>Oxygen Builder</li>
<li>Themify Builder</li>
<li>Fusion Builder</li>
<li>Muffin Builder</li>
<li>Avia Layout Builder</li>
<li>UX Builder</li>
</ul>
If you’re using a theme or page builder that is not listed above, feel free to contact us. Our team will be happy to assist you with setup and ensure full compatibility.
Visit Our Shopify App Page: 
<a href="https://apps.shopify.com/accessibility-assistant" rel="nofollow ugc">Accessibility Assistant on Shopify</a>
Visit Our Wix App Page: 
<a href="https://www.wix.com/app-market/web-solution/accessibility-by-cartcoders" rel="nofollow ugc">Accessibility Assistant on Wix</a>
Explore Our Website for More Details: 
<a href="https://accessibilityassistant.com/" rel="nofollow ugc">Accessibility Assistant Details</a>
Widget Demo 
<a href="https://adalive.myshopify.com/?_bt=BAh7BkkiC19yYWlscwY6BkVUewhJIglkYXRhBjsAVEkiGmFkYWxpdmUubXlzaG9waWZ5LmNvbQY7AEZJIghleHAGOwBUSSIdMjAyNS0wNi0yN1QxNTowOTozNS40NTZaBjsAVEkiCHB1cgY7AFRJIh5wZXJtYW5lbnRfcGFzc3dvcmRfYnlwYXNzBjsARg%3D%3D--2062c8001168c01e27be17a19fedd7c2cd1a6a46" rel="nofollow ugc">Widget Demo URL</a>
For assistance, contact us via: 
– In-App Chat Support from the plugin itself 
– Email Support: <a href="mailto:support@cartcoders.com" rel="nofollow ugc">support@cartcoders.com</a> 
– Phone Support: <a href="tel:+918469607787" rel="nofollow ugc">+91 84696 07787</a> 
– WhatsApp Support: <a href="https://wa.me/918469607787" rel="nofollow ugc">Chat on WhatsApp</a>

Accessibility Assistant – EAA ADA WCAG AODA

Enhance store inclusivity with Easy Web Accessibility Widget for EAA, ADA, WCAG & AODA compliance

A11y Kit vs Accessibility Assistant – EAA ADA WCAG AODA