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.

Ada Tray

The Only WordPress Accessibility Plugin That’s Easy to Use and Keeps You Compliant!
ADA Tray® is a powerful, patent-pending accessibility WordPress WCAG plugin designed to help your WordPress website meet WCAG 2.1, ADA Title III, Section 508 compliance standards, and many more web accessibility solutions—without any recoding.
With Evergreen Technology, ADA Tray ensures your accessibility features stay up to date with automatic updates–reducing legal risks, boosting SEO, and enhancing user experience in real time.
Stay Free of Lawsuits and Stress
Most ADA compliance plugins meet just 20% of WCAG standards.
ADA compliance helps protect businesses—hotels, restaurants, retailers, healthcare providers, and more—from costly ‘click-by’ ADA lawsuits. ADA Tray® makes meeting ADA Title III, WCAG 2.1, and Section 508 standards easy with customizable accessibility features.
Boost SEO & Increase Website Users
An accessible website is easier for search engines to crawl and index, improving rankings. This could be your website with clear navigation, readable text, and structured content. It’ll further help boost visibility while making your site more user-friendly for all visitors.
Better User Experience, Better Retention
ADA Tray® ensures a seamless experience for everyone, including users with disabilities. With customizable features like font adjustments, color contrast, and keyboard navigation, your WordPress site becomes more inclusive and easy to navigate on any device.
Seamless Integration & Customization
Once installed, ADA Tray® instantly adds a floating accessibility widget to every webpage. Users can activate the widget through a customizable icon or by pressing the Escape key for quick access.
Manage your settings effortlessly through the My ADA Tray® portal, where you can: 
– Adjust the widget’s position and appearance 
– Customize accessibility tools for your users 
– Track engagement and usage metrics
Why Choose ADA Tray®?
Because Everyone Deserves Equal Access!
Making your website accessible shouldn’t be complicated—and with ADA Tray, it isn’t! Our innovative technology instantly enhances your site’s accessibility, ensuring a seamless experience for all visitors.
<ul>
<li>Instant Accessibility Upgrade – Improve usability the moment ADA Tray® is activated.</li>
<li>Evergreen Technology – Your website stays up-to-date and compliant with evolving standards.</li>
<li>Effortless Setup – Easy configuration means no headaches—just accessibility that works.</li>
<li>Customizable & User-Friendly – Tailor the experience with a dedicated accessibility statement and 30+ features.</li>
<li>Mobile-Optimized – Accessibility shouldn’t stop at desktops. ADA Tray works smoothly on all devices</li>
</ul>
This ADA compliance plugin for WordPress helps make your website inclusive and protects your business from costly accessibility lawsuits.
It’s a win-win!
Features of Customized ADA Tray® Tools 
– Individuals with disabilities can customize your website with 30+ features 
– Unlimited configuration of font sizes, spacing, and content surfacing 
– Improves conformity to Website Content Accessibility Guidelines (WCAG) 
– Supports color adjustment for the visually impaired 
– Easy-to-use audio translator 
– Keyboard users will easily be able to navigate your website
And much more!
Toolbar Highlights
ADA Tray® offers powerful accessibility tools to enhance user experience and ensure compliance: 
– Keyboard Navigation – Displays shortcuts against all functions, allowing effortless website browsing using only the keyboard. 
– Listen – Convert text to speech for improved readability and accessibility. 
– WCAG Contrast – Adjust the color contrast for better visibility and readability. 
– Accessibility Statement – Shows important accessibility features throughout our website.
ADA TRAY® MAKES IT EASY TO COMPLY WITH THE ADA Title III, WCAG 2.1 & Section 508 WEB ACCESSIBILITY STANDARDS.
So, why wait!?
Try ADA Tray® Free for 30 Days!
Experience the difference ADA Tray® can make for your website.
Sign up today for a 30-day free trial and see how easy it is to improve accessibility and compliance.
<a href="https://www.adatray.com/pricing" rel="nofollow ugc">Pricing</a> | <a href="https://www.adatray.com/how-it-works/platforms/wordpress" rel="nofollow ugc">Installation Guide</a>
START YOUR FREE TRIAL TODAY!
<iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/k_o-6uV2OG8?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe>

Ada Tray Accessibility Widget

ADA Tray® is a powerful, patent-pending accessibility WordPress WCAG plugin designed to help your WordPress website meet WCAG 2.

A11y Kit vs Ada Tray Accessibility Widget