Nicolas Johnson

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

A11y Kit

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

seshelby

WP ADA Compliance Check is the most comprehensive web accessibility solution for WordPress. Trusted by thousands of small business, government and educational institution websites to comply with Section 508 and WCAG 2.2 LEVEL A/AA Web Accessibility Standards. Our WordPress Web Accessibility plugin includes 81 individual error checks, far more than comparable solutions. It evaluates content for Web Accessibility issues anywhere on your website. It integrates seamlessly into your workflow, evaluating your website for Web Accessibility issues when content is published or you can run a complete scan of your website to identify issues in all of your content. Accessibility reports provide references and easy to follow instructions. No other solution compares in ease of use. The basic version is limited to 15 posts or pages during full scans, has a smaller rule set (52 error checks) and is unable to identify issues found in theme files. The full version corrects many common issues automatically using convenient, time saving filter options built into the plugin. <a href="https://www.wpadacompliance.com/" rel="nofollow ugc">Visit our website to compare versions and review a complete list of features.</a>
Works with any website editor, including: 
Gutenberg Compatible 
Elementor Compatible 
Beaver Builder Compatible 
ClassicPress Compatible 
Divi Compatible
[PRO] Scans the entire website: posts, pages, custom post types, theme files, widgets, shortcodes, custom fields, terms, menus, excerpts, archives, iframes, PDF files, css files and even linked pages. 
[PRO] Many issues are corrected automatically, saving you time and money. 
[PRO] Includes many WordPress improvements and time saving features. 
[PRO] Includes a web accessibility widget to enhance the accessibility of the website. 
[PRO] Reports may be printed, emailed or exported in Excel format and include references and easy to follow instructions. 
[PRO] Identifies untagged PDF files. 
[PRO] Integrates with our free HTML Validation plugin to pinpoint HTML validation errors that result in inaccessible web pages. 
[PRO] Includes 83 accessibility checks, many that are not available in the free version (the free version currently has 52 checks).
<a href="https://www.wpadacompliance.com/" rel="nofollow ugc">Visit our website to learn more about the features included in the PRO version.</a>

WP ADA Compliance Check Basic

Up-to-date standards are offered for checking compliance, and it provides a cost-effective way to scan a site for compliance. There's services out there where it'd cost more than $150 (the current cost of a 1 site 1 year license) for the size of the sites I'm working with. I'm very happy to see this offering in the first place, and it's even nicer to see how thorough it looks to be.

Of course, it's not perfect so I'd love to see more of the WP.org listing fleshed out (the developer author/contributor mention is missing, etc.), I'd love to see the free version on GitHub (or similar for community development assistance [I have a few things I'd help with] which is very nice to see in a WP.org listing to show there's support / ongoing development for the plugin), and of course I'd love to see the server-side checker come to feature-parity with WAVE (currently WAVE is showing a few things the server-side checker doesn't have [color contrast, etc.])

Keep up the great work!

Can check site-wide accessibility very thoroughly

WP ADA Compliance Check is the most comprehensive web accessibility solution for WordPress. Trusted by thousands of small business, government and edu …

A11y Kit vs WP ADA Compliance Check Basic