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.

Sidharth Nayyar

<p><a href="https://www.webability.io/widget" rel="nofollow ugc">WebAbility Accessibility Widget</a> is a powerful yet simple plugin that adds a comprehensive accessibility toolbar to your WordPress website. Our widget helps make your site compliant with <a href="https://www.webability.io/compliance/wcag" rel="nofollow ugc">WCAG</a> 2.2 AA, <a href="https://www.webability.io/compliance/ada" rel="nofollow ugc">ADA</a>, <a href="https://www.webability.io/compliance/aoda" rel="nofollow ugc">AODA</a> and <a href="https://www.webability.io/compliance/eaa" rel="nofollow ugc">EAA</a> standards, ensuring equal access for all users.</p>
<ul>
<li>Fix compliance issues in minutes</li>
<li>WebAbility.io helps you meet accessibility standards without manual coding or expensive audits.</li>
<li>Auto-detect accessibility barriers across text, navigation, media, and forms</li>
<li>Apply AI-powered real-time fixes to alt text, structure, and keyboard navigation</li>
<li>Adapt to new standards like WCAG 2.2 with continuous updates</li>
</ul>
<h4>Key Features</h4>
<ul>
<li><strong>Easy Setup</strong>: One-click installation with automatic script generation</li>
<li><strong>Accessibility Scanner</strong>: Scan your site for WCAG violations powered by AI</li>
<li><strong>Native WordPress Fixes</strong>: Fix alt text, headings, skip navigation, and more directly in WordPress</li>
<li><strong>Customizable Position</strong>: Choose from 8 positions (corners, center sides, top/bottom center)</li>
<li><strong>Pixel-Perfect Positioning</strong>: Fine-tune widget placement with offset controls</li>
<li><strong>Domain Verification</strong>: Built-in verification system to ensure proper setup</li>
<li><strong>Lightweight</strong>: Minimal impact on your site’s performance</li>
<li><strong>Responsive Design</strong>: Works seamlessly on all devices</li>
<li><strong>Privacy Focused</strong>: No tracking, no data collection</li>
</ul>
<h4>Accessibility Features</h4>
<ul>
<li>Webability Accessibility Widget lets users adjust text size, color contrast, and cursor settings</li>
<li>Screen reader compatibility</li>
<li>Keyboard navigation support</li>
<li>Offer text-to-voice options for users who need auditory support</li>
<li>The widget is fully customizable to match your brand while giving users the accessibility tools they need.</li>
</ul>
<h4>Champion a more inclusive internet</h4>
<ul>
<li>Meet key compliance guidelines while staying welcoming to all users</li>
<li>Show customers your brand values inclusivity and accessibility</li>
<li>Create a safer, more respectful online space for every visitor</li>
<li>Making your website accessible shouldn’t be complicated–or expensive.</li>
</ul>
<p>With WebAbility.io, you can meet global standards, protect your brand, and welcome every visitor confidently.</p>
<p><strong>Learn More</strong>: <a href="https://www.webability.io/blog/how-to-make-my-wordpress-website-accessible-in-2025-a-complete-guide" rel="nofollow ugc">How to Make My WordPress Website Accessible in 2025: A Complete Guide</a></p>
<h3>Support</h3>
<p>Contact the Webability support team at support@webability.io</p>
<h3>Privacy Policy</h3>
<p>This plugin does not collect any personal data. The WebAbility widget respects user privacy and operates in compliance with GDPR and other privacy regulations.</p>


WebAbility Accessibility Widget

Easy-to-use accessibility widget that makes your website compliant with WCAG and ADA standards. Simple setup with customizable positioning.

A11y Kit vs WebAbility Accessibility Widget