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.

PI Web Solution

Steve Curtis

Joseph LoPreste

<p>This software HELPS you in the process of becoming ADA Section 508 compliant by providing:</p>
<h3>Missing Alt Text Finder</h3>
<p>Easily add any Missing Alt Text, Description Text or Caption Text to all of the pictures in your Media Library and the pictures that are already published on your Pages and Posts.</p>
<h3>Contrast Ratio Checker</h3>
<p>Provides you with a Contrast Ratio Checker to make sure everything hits the minimum requirements.</p>
<h3>WCAG 2.1 Compliance Checklist</h3>
<p>A interactive WCAG 2.1 Section 508 Checklist that helps you better understand your websites accessibility issues.</p>
<h3>Automated Accessibility Audit</h3>
<p>You can activate the A11Y auditing function and run multiple accessibility tests on your website and even get suggestions on how to fix them.</p>
<h3>Resources</h3>
<p>We give you some great resources in the form of links that will help you better understand web accessibility and help your website become even more inclusive.</p>
<p>While this plugin can HELP you meet compliance requirements, you are the only one that can ensure that all requirements are met.</p>
<p>If you find this plugin useful, please rate and review it. If you have a problem with this plugin, please send me an email letting us know what issues you are having. I will address all issues in a timely fashion. Thank you!</p>
<h3>External Services</h3>
<p>This plugin uses the following third-party services:</p>
<ol>
<li><strong>Incrementable.js</strong><br />
Used in the contrast testing tool to allow keyboard-accessible incrementable fields.  </li>
</ol>
<p>– Loaded from: <code>https://leaverou.github.com/incrementable/incrementable.js</code><br />
– No user data is sent.<br />
– License: MIT License<br />
– Source: <a href="https://github.com/LeaVerou/incrementable" rel="nofollow ugc">https://github.com/LeaVerou/incrementable</a></p>
<ol>
<li><strong>Example API (Replace with actual endpoint)</strong><br />
Used to send page URLs to an external server for SEO auditing (if applicable).  </li>
</ol>
<p>– Endpoint: <code>http://myserver.com/</code><br />
– Data sent: page URL<br />
– Sent only during SEO analysis execution.<br />
– If you operate this server, link your own Privacy Policy here.<br />
  Example: <a href="https://yourdomain.com/privacy-policy" rel="nofollow ugc">https://yourdomain.com/privacy-policy</a></p>
<h3>Main Features Are:</h3>
<ol>
<li>
<p>Shows you all of the pictures from either your Media Library, Posts or Pages that are missing any of the 3 types of text. (Alternative Text, Description text or Caption Text)</p>
</li>
<li>
<p>Allows you to add any missing – Alternative Text, Description Text or Caption Text to any of your pictures one at a time.</p>
</li>
<li>
<p>Allows you to add missing Alternative Text, Description Text or Caption Text to all of your pictures with just one click.</p>
</li>
<li>
<p>Helps the process of making your website ADA Section 508 Compliant become much easier. (by adding Alt Text to all pictures on your website)</p>
</li>
<li>
<p>Allows you to run a Automated A11Y Accessibility Audit so you can see where you are not compliant.</p>
</li>
<li>
<p>Provides a free Contrast Ratio Checker. This allows you to easily understand your websites contrast ratios.</p>
</li>
<li>
<p>We provide you a interactive (WCAG 2.1) Section 508 Checklist. This checklist helps you better understand the WCAG 2.1 recommendations and guidelines.</p>
</li>
<li>
<p>We offer a ton of Free Accessibility resources in the form of links that will greatly help your understanding of web accessibility.</p>
</li>
</ol>
<h3>The video below is how to use our missing alt text feature.</h3>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="560" height="315" src="https://www.youtube.com/embed/sOsi0leu4l0?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>The video below is part 2 on how to use all of the new accessibility tools we added.</h3>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="560" height="315" src="https://www.youtube.com/embed/Uoh81PRE98I?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>The video below is us giving our “Web Accessibility Made Easy” talk in Tampa Fl.</h3>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="560" height="315" src="https://www.youtube.com/embed/oZkaFVcnXl8?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<h3>Source Code</h3>
<p>This plugin includes bundled/minified JavaScript and CSS files to optimize performance. To comply with WordPress.org guidelines for human-readable code, the original, non-minified source code is included directly within the plugin under:</p>
<pre><code>/assets/src/ or `/src/`
</code></pre>
<p>This includes:<br />
– Original JavaScript files before minification or bundling.<br />
– SASS/SCSS or uncompiled CSS files (if applicable).<br />
– Any build configuration files (such as webpack.config.js or angular.json if used).</p>
<p>These files are provided to ensure transparency and promote open-source collaboration.</p>
<h3>License</h3>
<p>This plugin is licensed under the GPLv2 or later. For more information, see <a href="https://www.gnu.org/licenses/gpl-3.0.html" rel="nofollow ugc">https://www.gnu.org/licenses/gpl-3.0.html</a>.</p>


Accessibility Tools & Alt Text Finder

Accessibility Tools Included: Missing Alt text finder, contrast checker, WCAG 2.1 checklist, automated testing software and a ton of free resources.

A11y Kit vs Accessibility Tools & Alt Text Finder