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.

gcaus

<p>Enhance the accessibility of your WordPress website effortlessly with MAUVE++, the accessibility evaluation plugin. This tool is designed to assist website owners, developers, and content creators in ensuring that their digital content complies with the Web Content Accessibility Guidelines (WCAG) 2.1 standards, making it more inclusive for all users, including those with disabilities.</p>
<h3>Key Features</h3>
<ul>
<li>
<p>Accessibility Checks: once the evaluation start button is clicked MAUVE++ checks your website\’s content,  to identify potential accessibility issues, and generates detailed summaries. It provides a list of accessibility errors and warning  on your post/page edit screen and allows you to scan your content even after its updating.</p>
</li>
<li>
<p>Real-time Evaluation Reports: the plugin provides instant feedback on your page/post accessibility with real-time evaluation reports. For each error or warning flagged, MAUVE++ indicates the violated success criterion, the technique used, the number of occurrences of the error/warning and the documentation needed to solve the issue. It also provides the code of the element that triggered the error/warning and allows you to highlight it within the page or view it in the source code.</p>
</li>
<li>
<p>WCAG 2.1 Compliance: MAUVE++ ensures that your contents are aligned with the latest Web Content Accessibility Guidelines (WCAG) 2.1, fostering an inclusive online experience.</p>
</li>
<li>
<p>User-Friendly Interface: the plugin features a user-friendly interface, making it accessible to both developers and non-technical users. Non-technical users can navigate through the evaluation results, view detailed explanations and identify the issue within the page by highlighting it with a click.</p>
</li>
<li>
<p>Developer-Friendly Tools: for developers, MAUVE++ offers tools for viewing and analyzing the accessibility details within the source code. Dive into the developer view to inspect issues at a code level and facilitate efficient debugging.</p>
</li>
</ul>
<p>** MAUVE++ works only with Gutenberg editor **</p>
<h3>Service Reliance</h3>
<p>MAUVE++ relies on a 3rd-party service for some of its functionalities. The accessibility evaluation and real-time reports are powered by MAUVE++ validator, a trusted accessibility evaluation service provided by the MAUVE++ project.</p>
<h3>MAUVE++ Validator Service</h3>
<p>MAUVE++ utilizes the MAUVE++ validator service to perform accessibility evaluations in real-time. This service analyzes website content to identify potential accessibility issues and provides detailed reports to help users ensure their digital content complies with Web Content Accessibility Guidelines (WCAG) 2.1 standards.</p>
<ul>
<li>Service Homepage: <a href="https://mauve.isti.cnr.it/index.jsp" rel="nofollow ugc">MAUVE++ Validator</a></li>
<li>Privacy & Cookie Policy: <a href="https://mauve.isti.cnr.it/privacy.jsp" rel="nofollow ugc">MAUVE++ Validator Privacy & Cookie Policy</a></li>
</ul>
<p>Additionally, the plugin provides links to relevant resources on the W3C website, offering detailed explanations on how to satisfy the techniques used in the accessibility evaluation. Users can access these resources to gain further insight into accessibility guidelines and techniques.</p>
<ul>
<li>W3C Accessibility Techniques: <a href="https://www.w3.org/WAI/WCAG21/Techniques/" rel="nofollow ugc">W3C Accessibility Techniques</a>. Copyright © 2023 World Wide Web Consortium. https://www.w3.org/copyright/document-license-2023/</li>
</ul>


MAUVE++

MAUVE++ allows you to check the accessibility of WordPress contents while editing them and before you hit publish. In-post accessibility scanner and g …

A11y Kit vs MAUVE++