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.

Lorna Timbah

CookieYes

<p>AccessYes Accessibility Widget is a free, lightweight, and user-friendly plugin that adds an accessibility overlay to your WordPress website.</p>
<p>The accessibility widget provides tools to help your site better align with accessibility standards such as the Web Content Accessibility Guidelines (WCAG) 2.1 AA, as well as accessibility laws like the Americans with Disabilities Act (ADA) and the European Accessibility Act (EAA).</p>
<p>With just a few clicks, your website visitors can customise font size, color contrast, spacing, and more to create a browsing experience that fits their accessibility needs.</p>
<p><strong>Disclaimer:</strong></p>
<p>AccessYes Accessibility Widget is intended to support your accessibility efforts. It does not guarantee conformance with WCAG or compliance with laws such as the ADA, EAA, or other regulations. Full compliance may still require a comprehensive audit and remediation.</p>
<h3>Why accessibility matters</h3>
<p>Over 1 billion people globally live with some form of disability. This makes web accessibility essential to ensure your content is usable for everyone, including those with visual, cognitive, motor, and neurological impairments.</p>
<p>With WordPress powering over 43% of all websites in 2026, improving accessibility on WordPress sites can make a big difference in creating a more inclusive web.</p>
<p>AccessYes Accessibility Widget helps you take a step in that direction by giving visitors simple tools to adjust how your WordPress website looks and behaves based on their needs.</p>
<h3>Features</h3>
<h4>Content adjustments</h4>
<ul>
<li><strong>Font size controls:</strong> Enable users to adjust the font size for enhanced readability.</li>
<li><strong>Highlight title:</strong> Emphasise page titles to aid scanning and comprehension.</li>
<li><strong>Highlight features:</strong> Highlight all links and/or page titles for easier scanning and focus.</li>
<li><strong>Dyslexia-friendly fonts:</strong> Let users switch to high-legibility fonts for better cognitive accessibility.</li>
<li><strong>Font weight control:</strong> Bolden text across your site to increase contrast and visibility.</li>
<li><strong>Letter spacing & line height adjustments:</strong> Enable precise control over text layout to support users with dyslexia or reading challenges.</li>
<li><strong>Align left:</strong> Align all content to the left for a consistent reading experience.</li>
</ul>
<h4>Color adjustments</h4>
<ul>
<li><strong>Contrast modes:</strong> Includes Dark Mode, Light Mode, and High Contrast for visual comfort.</li>
<li><strong>Saturation options:</strong> Allow users to toggle between low saturation, high saturation, and monochrome (grayscale) views.</li>
</ul>
<h4>Navigation adjustments</h4>
<ul>
<li><strong>Reading guide:</strong> A horizontal guide that helps users track lines of text while reading.</li>
<li><strong>Pause animations:</strong> Let users pause animations or motions that could be distracting or trigger discomfort.</li>
<li><strong>Big cursor:</strong> Increase cursor size and contrast for better navigation visibility.</li>
</ul>
<h4>Accessibility statement</h4>
<ul>
<li><strong>Create an accessibility statement:</strong> Generate your website accessibility statement inside the tool and display it in the widget.</li>
<li><strong>Link an existing statement:</strong> Connect your existing accessibility statement or VPAT and display it within the widget.</li>
</ul>
<p><strong>Need help?</strong> Write to us at support@cookieyes.com with a quick note in the subject line: CookieYes Accessibility Widget</p>
<p><strong>Got feedback about the plugin?</strong> We’d love to hear it! Drop us a line at accessyes@cookieyes.com.</p>
<p><em>Note: AccessYes is a standalone accessibility widget developed by CookieYes. It’s a separate tool designed to work independently from the CookieYes platform.</em></p>


AccessYes Accessibility Widget for ADA, EAA & WCAG Readiness

Free WordPress accessibility widget to improve accessibility for your website visitors. Supports efforts towards meeting WCAG, ADA & EAA requirements.

A11y Kit vs AccessYes Accessibility Widget for ADA, EAA & WCAG Readiness