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.

WebFactory

accessibe

<p>accessWidget, accessiBe’s leading AI-powered web accessibility solution, helps make your website accessible and ADA compliant based on WCAG, allowing you to generate more business and traffic.</p>
<p>You can explore accessWidget with a 7-day free trial; no credit card required.</p>
<h3>Meet legal requirements under the ADA and win more business</h3>
<p>Ensuring that your WordPress website is accessible to all visitors, including individuals with disabilities, is critical for a number of reasons.</p>
<p>First and foremost, adjusting your website so that it is accessible is a moral and ethical imperative. There is also the matter of meeting legal obligations, under laws such as the Americans with Disabilities Act (ADA) and the European Accessibility Act (EAA).</p>
<p>But it’s important to realize that making your WordPress accessible and ADA-compliant greatly impacts its business potential.</p>
<p><strong>An accessible website allows you to appeal to a new audience base (<a href="https://www.thevaluable500.com/press-release/the-valuable-500-releases-new-data-on-global-accessibility-awareness-day#:~:text=Disability%20is%20not%20a%20minority,when%20including%20friends%20and%20family." rel="nofollow ugc">which commands trillions in annual expendable income</a>), as well as to enhance your brand reputation.</strong></p>
<h3>How accessWidget Helps</h3>
<p><strong>With accessWidget, accessiBe’s accessibility plugin for ADA compliance, your website is adjusted so that it welcomes all visitors, including those with disabilities.</strong></p>
<p>accessWidget leverages the power of AI to run an automated audit of your website to identify and remediate accessibility issues existing on a code level. This results in your website being compatible with assistive technology like screen readers, and fully navigable via keyboard.</p>
<p><strong>accessWidget is quick and easy to install, and automatically scans and remediates inaccessible elements on your website every 24 hours, ensuring ongoing accessibility, without touching your source code.</strong></p>
<h3>Give website visitors a customized user experience</h3>
<p>accessWidget will also present website visitors with an accessibility interface, through which they can adjust design elements to better fit their needs.</p>
<p><strong>With accessWidget, website visitors can increase font size and change font types, adjust color contrasts, and stop animations, among many other options.</strong></p>
<p>You can explore the accessWidget plugin with a 7-day free trial; no credit card required.</p>


Web Accessibility by accessiBe

I've tried a lot of plugins, and this is without any doubt the best of them. Great performance, high level customization, and some of the best customer service I have encountered. Highly recommended.

GREAT plugin!


I didn't see a previous review from months ago warning that this plugin does not have something "free", which - no matter what the author may say to camouflage the idea - it should be very clear that they are promoting/providing a plugin simply to connect to a paid service.


The only free thing is the plugin installation


I've been told by a user of one of the websites I had to manage that the widget is adding a layer of complexity for screenreader users. After some research, I saw that even their Wikipedia page talks about legal issues and lawsuits, and I don't want that for my clients.



Honestly, I'm surprised this company is still selling their solution. As I know, there is no shortcut in accessibility. It's like telling you client you can install a widget that fixes all their UX issues. How in the wolrd?


Added accessibility issues instead of solving them - Risks of lawsuits?

Fix accessibility issues & make your site accessible with an AI-powered accessibility service.

A11y Kit vs Web Accessibility by accessiBe