Nicolas Johnson

<p>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.</p>
<p>Here is a <a href="https://demo.wpinclusion.com/a11y-kit" rel="nofollow ugc">demo</a>.<br />
Follow the evolution of the plugin trough the <a href="https://github.com/multimedianj/a11y-kit" rel="nofollow ugc">Github repository</a>.</p>
<p>In order to make the plugin works, you need to create a menu first.<br />
In your menu, you simply need to add a CSS class in this way <strong>“wpak_DISABILITY_PROPERTY”</strong>.</p>
<p>Where to add the CSS class mentioned above ?<br />
– 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).<br />
– Then, you should have the field “CSS Classes (optional)”. Inside this field, you can add the class in this way : <strong>“wpak_DISABILITY_PROPERTY”</strong> (see examples from the pre-configured classes below).<br />
– 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.</p>
<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>
<p>You can use the field for the title to add HTML code. With HTML code, it is possible to add<br />
– An image: <code><img src="link_of_your_image.png" alt="name_of_property" /></code><br />
– An icon from FontAwesome or any library you want to include: <code><i class="fas fa-adjust"></i></code></p>
<h3>Suggested FontAwesome icons</h3>
<p>Here is a list of the suggested icons to use for each pre-configured accessibility settings.</p>
<ul>
<li>Coloration: <code><i class="fas fa-adjust" title="Change the coloration of the site"></i></code></li>
<li>Font-size: <code><i class="fas fa-font" title="Change the font-size of the site"></i></code></li>
<li>Font-family: <code><i class="fas fa-pencil-alt" title="Change the font-family of the site"></i></code></li>
<li>Letter-spacing: <code><i class="fas fa-text-width" title="Change the letter-spacing of the site"></i></code></li>
<li>Line-height: <code><i class="fas fa-text-height" title="Change the line-height of the site"></i></code></li>
<li>Reset button: <code><i class="fas fa-undo" title="Reset all the accessibility configurations"></i></code></li>
</ul>
<h4>EXTRA</h4>
<p>If you want to add a link to your accessibility statement page, we recommend using this icon that displays perfectly<br />
– <code><i class="fas fa-child" title="Go to the accessibility statement page"></i></code></p>
<h3>Import a pre-generated menu</h3>
<p>To import a pre-generated menu with already pre-configured accessibility settings, follow the instructions below.</p>
<ol>
<li>First, download the file <strong>menu-a11y.json</strong> on your computer, available in the folder <strong>SAMPLE</strong> 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 <strong>Appearance > Export/Import Menus</strong></li>
<li>Click on the tab <strong>Import Menus</strong></li>
<li>Click on <strong>Choose a file</strong> and import the <strong>menu-a11y.json</strong> file you just downloaded on your computer</li>
<li>On the <strong>Menu Name</strong> field, feel free to name your menu (ex.: A11y topbar menu)</li>
<li>Click on the <strong>Import Menus</strong> button</li>
<li>Validate in <strong>Appearance > Menus</strong> that your menu has been imported correctly</li>
</ol>
<h4>EXTRA</h4>
<p>If you want to use FontAwesome icons, install the plugin FontAwesome, available <a href="https://wordpress.org/plugins/font-awesome" rel="ugc">here</a></p>
<h3>Overwritte accessibility settings (styles)</h3>
<p>In the plugin directory, there’s a file <strong>SAMPLE/style-a11y.css</strong> 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.</p>
<ol>
<li>You need to download the <strong>style-a11y.css</strong></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 <strong>@import “style-a11y.css”;</strong></li>
</ol>
<p>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>.</p>
<h3>Compatibility</h3>
<p>This plugin is multilingual ready.</p>


A11y Kit

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

tabnav1212

<p><strong>Web accessibility widget by tabnav</strong> is an AI-powered solution that enhances your website’s accessibility, helps meet WCAG 2.1 AA standards, and creates a better browsing experience for people with disabilities. Designed for simplicity, performance, and full customization, it takes just one click to activate.</p>
<p>Whether you’re a developer, agency, or business owner, Tabnav helps you stay compliant and user-friendly—without slowing down your site.</p>
<h3>🎯 Key Features (Free Plan)</h3>
<ul>
<li>✅ Screen Reader: Reads content aloud for visually impaired users.</li>
<li>✅ Keyboard Navigation: Navigate without a mouse.</li>
<li>✅ Voice Navigation: Control the site with voice commands.</li>
<li>✅ Text Reader: Convert text to speech instantly.</li>
<li>✅ Contrast Options: Switch between light/dark contrast modes.</li>
<li>✅ Saturation & Monochrome: Adjust for visual comfort.</li>
<li>✅ Content Adjustments: Text size, line spacing, letter spacing, etc.</li>
<li>✅ Text Alignment: Align text left, right, or center.</li>
<li>✅ Highlight Links and Titles: Emphasize important content.</li>
<li>✅ Readable Fonts: Enable clear, accessible typography.</li>
<li>✅ Bigger Cursor: Improve pointer visibility.</li>
<li>✅ Stop Animations: Pause moving content for focus.</li>
<li>✅ Language Switcher: 44+ languages built-in.</li>
<li>✅ Customize widget position (left/right) and size (normal/small).</li>
<li>✅ One-click install, no setup required.</li>
<li>✅ Built-in Accessibility Statement.</li>
<li>✅ Issue Report Form (email-based).</li>
<li>✅ 24/7 support included.</li>
</ul>
<h3>🚀 Pro Features (Paid Plan)</h3>
<ul>
<li>🔒 Accessibility Profiles:
<ul>
<li>Motor Impaired</li>
<li>Dyslexia</li>
<li>ADHD</li>
<li>Cognitive</li>
<li>Visual Impairments</li>
<li>Seizures</li>
</ul>
</li>
<li>🔒 Monthly accessibility scans</li>
<li>🔒 Assistive technologies support</li>
<li>🔒 Team collaboration tools</li>
<li>🔒 Custom feedback form integration</li>
</ul>
<p><strong>All paid plans include everything in Free + premium features.</strong></p>
<h3>🌍 Languages of the Toolbar</h3>
<p>🇺🇸 English (US)<br />
🇬🇧 English (UK)<br />
🇨🇦 English (Canada)<br />
🇦🇺 English (Australia)<br />
🇪🇸 Español (Spain)<br />
🇲🇽 Español (Mexico)<br />
🇫🇷 Français (France)<br />
🇨🇦 Français (Canada)<br />
🇩🇪 Deutsch (German)<br />
🇮🇹 Italiano (Italian)<br />
🇵🇹 Português (Portugal)<br />
🇧🇷 Português (Brazil)<br />
🇳🇱 Nederlands (Dutch)<br />
🇷🇺 Русский (Russian)<br />
🇨🇳 中文 (Simplified Chinese)<br />
🇹🇼 漢語 (Traditional Chinese)<br />
🇯🇵 日本語 (Japanese)<br />
🇰🇷 한국어 (Korean)<br />
🇸🇦 العربية (Arabic)<br />
🇮🇱 עברית (Hebrew)<br />
🇮🇳 हिन्दी (Hindi)<br />
🇵🇱 Polski (Polish)<br />
🇸🇪 Svenska (Swedish)<br />
🇹🇭 ภาษาไทย (Thai)<br />
🇨🇿 Čeština (Czech)<br />
🇫🇮 Suomi (Finnish)<br />
🇷🇴 Română (Romanian)<br />
🇮🇩 Bahasa Indonesia (Indonesian)<br />
🇩🇰 Dansk (Danish)<br />
🇳🇴 Norsk (Norwegian)<br />
🇬🇷 Ελληνικά (Greek)<br />
🇺🇦 Українська (Ukrainian)<br />
🇭🇺 Magyar (Hungarian)<br />
🇮🇷 فارسی (Persian)<br />
🇵🇭 Tagalog (Filipino)<br />
🇸🇰 Slovenský (Slovak)<br />
🇸🇮 Slovenščina (Slovenian)<br />
🇲🇪 Crnogorski (Montenegrin)<br />
🇪🇪 Eesti (Estonian)<br />
🇧🇬 Български (Bulgarian)<br />
🇱🇹 Lietuvių (Lithuanian)<br />
🇱🇻 Latviešu (Latvian)<br />
🇭🇷 Hrvatski (Croatian)<br />
🇲🇹 Malti (Maltese)<br />
🇹🇷 Türkçe (Turkish)</p>
<h3>External Service Notice</h3>
<p>This plugin loads JavaScript from <a href="https://tabnav.com/" rel="nofollow ugc">https://tabnav.com/</a> to enable accessibility functionality. The script is delivered via secure CDN and does <strong>not</strong> collect personal data without user consent.</p>
<h3>GDPR Compliance</h3>
<p>Tabnav is fully GDPR-compliant. We do not collect or store any personal data through our accessibility widget without the user’s explicit consent.</p>
<p>All accessibility features are delivered via secure HTTPS from our EU-based CDN, and no tracking or identifiable information is recorded during use. Your users’ data and privacy remain protected at all times.</p>
<p>This makes Tabnav a safe and compliant solution for businesses and organizations operating within the European Union, including under the EAA (European Accessibility Act) and local data protection laws.</p>
<h3>Privacy Policy</h3>
<p>By using this plugin, you agree to load content from <a href="https://tabnav.com/" rel="nofollow ugc">https://tabnav.com/</a>. This includes:<br />
– Accessibility interface scripts<br />
– No personal data collection without consent<br />
– HTTPS-secured delivery<br />
– Optimized for performance and privacy</p>
<p>For full privacy details: <a href="https://tabnav.com/privacy-policy" rel="nofollow ugc">https://tabnav.com/privacy-policy</a></p>
<h3>Support</h3>
<p>Questions or feedback?<br />
– 📩 Email: info@tabnav.com<br />
– 🌐 Website: <a href="https://tabnav.com/contact-us" rel="nofollow ugc">https://tabnav.com/contact-us</a><br />
– 🛠 WordPress Support Forum: <a href="https://wordpress.org/support/plugin/tabnav-accessibility-widget/" rel="ugc">https://wordpress.org/support/plugin/tabnav-accessibility-widget/</a></p>
<p>We’re here to help 24/7.<br />
<a href="https://tabnav.com/" rel="nofollow ugc">https://tabnav.com/</a></p>


Web accessibility widget by tabnav


I’ve tested a lot of WordPress plugins over the years, but this plugin absolutely stands out. It’s not just a small helper – it’s an incredibly well-made, powerful plugin that brings real accessibility improvements to any site.



Setup was effortless, and everything worked flawlessly from the start. The configuration options are smart, flexible, and designed with real-world use in mind. You can tell this was built by someone who truly understands both accessibility and user experience.



And honestly, the developer support is outstanding. Communication was fast, friendly, and super helpful. I had a few customization requests — they responded immediately and implemented the changes within no time. That level of commitment is rare and deserves real credit.



If you care about accessibility and want a top-tier solution with excellent support, this plugin is an easy recommendation. Absolutely first-class work.


A Must-Have Plugin for Real Accessibility

Fix accessibility issues and keep your site accessible with tabnav’s AI-powered accessibility service.

A11y Kit vs Web accessibility widget by tabnav