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.

HikeOrders

<p><a href="https://hikeorders.com/accessibility/home/" rel="nofollow ugc">Accessibility Enabler</a> is the accessibility software that helps your visitors to personalize the site based on their needs. On the other hand, it helps you (the website owners) to increase website accessibility compliance.</p>
<p>It provides more than 30+ accessibility tools that your visitors can apply on any page of the website. It makes consuming and navigating your website at ease for people with dyslexia and other disabilities.</p>
<h3>We Are The Accessibility Experts You Always Wanted</h3>
<p>That was us humbly pointing out a mere fact that we hear from our clients, most often. Woot!</p>
<p>Accessibility Enabler is a boutique of accessibility tools. It helps people with disabilities to consume and navigate site content in an efficient way. This app makes your site accessible for everyone, which indeed increase sales and conversion.</p>
<h3>Accessibility Is Not Just For Handicap</h3>
<p>Opposite of the above statement is a well-known assumption that we all have. Oops! Our common sense is wrong this time. The fact is, every human has disabilities caused by aging, accidents, or by birth. It may range from visual impairment, mobility impairment, reading impairment, blindness, and deafness.</p>
<h3>How It works</h3>
<p>After installation, any visitor on the site can see an accessibility toolbar and change the setting as required for them.</p>
<h3>Top Features</h3>
<ul>
<li>Accessibility toolbar that increases website engagement</li>
<li>Breakthrough design for mobile and desktop</li>
<li>Powerful present to adjust page quickly</li>
<li>Customizable accessibility widget</li>
<li>GDPR Compliant and ready for Europe</li>
<li>Accessibility Statement, Badge, and Certificate</li>
<li>Multiple language support</li>
<li>Scroll to top floating button</li>
</ul>
<h3>Installation</h3>
<p>Installation takes less than 3 minutes. All it needs is a single line of javascript code to be added to your website. This plugin will helps you to do the same without you having to write codes.</p>
<h3>View Demo</h3>
<p>Explore how the app works on a precedent website.</p>
<p><a href="https://accessibility-enabler.myshopify.com/" rel="nofollow ugc">Click Here To View Demo</a></p>
<h3>Benefits We Deliver</h3>
<h3>Contributes To Your Sales & Conversion</h3>
<p>That’s right. Having an accessible website increase sales. Today, you are losing visitors because your website is not best suited for people with accessibility needs.</p>
<p>Every website has at least 25% of its total traffic coming from people with one or more disabilities. This traffic is significantly large enough – you can’t choose to ignore it.</p>
<p>Accessibility Enabler helps to address the need for a differently-abled population to navigate and consume the content.</p>
<h3>Increase Compliance With Accessibility Regulations</h3>
<p>Have you heard of UNCRPD, WCAG 2.0, EU 2016/2102, ATAG 2.0, ADA, Section 5o ?. You have guessed it right. All these are various accessibility regulations in different countries.</p>
<p>Accessibility Enabler helps to make your site more compliant with the accessibility regulations of your country.</p>
<h3>Increase Brand Value & Showcase Social Responsibility</h3>
<p>Accessibility creates a positive experience with your brand and turns customers into brand advocates – researchers say.</p>
<p>Accessibility Enabler instantly boosts your word-of-mouth marketing by making your website more accessible for everyone.</p>
<h3>Also Works For</h3>
<ul>
<li>WordPress.com</li>
<li>Woo Commerce</li>
<li>BuddyPress</li>
<li>BBPress</li>
<li>Easy Digital Download</li>
<li>JigoShop</li>
<li>IgnitionDeck</li>
</ul>
<h3>Pricing</h3>
<p>Our pricing is simple & yet scales with your growth<br />
<a href="https://hikeorders.com/accessibility/pricing/?utm_source=wordpress.org&utm_medium=pricing&utm_campaign=wordpress-app-page" title="Pricing" rel="nofollow ugc">View Pricing & Free Trail Details</a></p>


Accessibility Enabler

This plugin increases compliance with WCAG 2.0, ADA , Section 508 without changing your website’s existing code.

A11y Kit vs Accessibility Enabler