Title: A11y Kit Author: Nicolas Johnson Published: 2 juni 2021 Last modified: 3 januari 2022 --- Plugins zoeken ![](https://ps.w.org/a11y-kit/assets/banner-772x250.png?rev=2541480) Deze plugin **is niet getest met de laatste 3 grotere versies van WordPress**. Mogelijk wordt het niet meer onderhouden of ondersteund. Ook kunnen er compatibiliteitsproblemen ontstaan wanneer het wordt gebruikt met recentere versies van WordPress. ![](https://ps.w.org/a11y-kit/assets/icon-256x256.png?rev=2541480) # A11y Kit Door [Nicolas Johnson](https://profiles.wordpress.org/multimedianj/) [Download](https://downloads.wordpress.org/plugin/a11y-kit.1.1.0.zip) * [Details](https://nl.wordpress.org/plugins/a11y-kit/#description) * [Beoordelingen](https://nl.wordpress.org/plugins/a11y-kit/#reviews) * [Installatie](https://nl.wordpress.org/plugins/a11y-kit/#installation) * [Ontwikkeling](https://nl.wordpress.org/plugins/a11y-kit/#developers) [Ondersteuning](https://wordpress.org/support/plugin/a11y-kit/) ## Beschrijving 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 [demo](https://demo.wpinclusion.com/a11y-kit). Follow the evolution of the plugin trough the [Github repository](https://github.com/multimedianj/a11y-kit). 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. ### List of the pre-configured classes #### Coloration * “wpak_color_normal” (normal state) * “wpak_color_dark” (dark mode) * “wpak_color_monochrome” (shades of gray, monochrome) * “wpak_color_highcontrast” (high contrast) * “wpak_color_lowsaturation” (low saturation) * “wpak_color_highsaturation” (high saturation) #### Font size * “wpak_font_normal” (normal state) * “wpak_font_large” (large font-size, default: 30px) #### Dyslexia * “wpak_dyslexia_normal” (normal state) * “wpak_dyslexia_comicsans” (Comic Sans font-family) * “wpak_dyslexia_arial” (Arial font-family) #### Reset button * “wpakReset” (reset all the filters) ### Add an icon instead of text You can use the field for the title to add HTML code. With HTML code, it is possible to add – An image: `name_of_property`– An icon from FontAwesome or any library you want to include: `` ### Suggested FontAwesome icons Here is a list of the suggested icons to use for each pre-configured accessibility settings. * Coloration: `` * Font-size: `` * Font-family: `` * Letter-spacing: `` * Line-height: `` * Reset button: `` #### EXTRA If you want to add a link to your accessibility statement page, we recommend using this icon that displays perfectly – `` ### Import a pre-generated menu To import a pre-generated menu with already pre-configured accessibility settings, follow the instructions below. 1. First, download the file **menu-a11y.json** on your computer, available in the folder **SAMPLE** of the plugin 2. Install the plugin **Export Import Menus”, available [here](https://wordpress.org/plugins/export-import-menus) 3. Activate the plugin 4. Go to **Appearance > Export/Import Menus** 5. Click on the tab **Import Menus** 6. Click on **Choose a file** and import the **menu-a11y.json** file you just downloaded on your computer 7. On the **Menu Name** field, feel free to name your menu (ex.: A11y topbar menu) 8. Click on the **Import Menus** button 9. Validate in **Appearance > Menus** that your menu has been imported correctly #### EXTRA If you want to use FontAwesome icons, install the plugin FontAwesome, available [here](https://wordpress.org/plugins/font-awesome) ### Overwritte accessibility settings (styles) 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. 1. You need to download the **style-a11y.css** 2. You add the file to the root of your theme (or child-theme) 3. You add this code to your style.css **@import “style-a11y.css”;** This plugin was created and is maintained by WP inclusion, a [glossary of Web accessibility terminologies](https://wpinclusion.com). ### Compatibility This plugin is multilingual ready. ## Schermafbeeldingen * [[ * [[ * [[ ## Installatie This section describes how to install the plugin and get it working. e.g. 1. Upload `a11y-kit.zip` to the `/wp-content/plugins/` directory 2. Activate the plugin through the ‘Plugins’ menu in WordPress 3. You need to create a menu in order for the plugin to work. 4. The trick is to simply add a CSS class in this way “wpak_DISABILITY_PROPERTY” in order to add custom styles to your accessibility settings. ## Beoordelingen ![](https://secure.gravatar.com/avatar/bf7aa1e8b197c64b127a98065f6c99de8b69f21fcaa2d7ae9a32de79e88fee85? s=60&d=retro&r=g) ### 󠀁[great tool!](https://wordpress.org/support/topic/great-tool-2063/)󠁿 [oz](https://profiles.wordpress.org/oraura1/) 12 december 2023 great tool, i needed only contrast button for few websites in order to follow accessibility rules and it made it.just check docs and support for the plugin in order to know how to use. ![](https://secure.gravatar.com/avatar/91c072c139ce1b415a3ccdcde257bea222ba5ecf564d085a19c0d2e4286d9984? s=60&d=retro&r=g) ### 󠀁[Needs better instructions](https://wordpress.org/support/topic/needs-better-instructions-2/)󠁿 [smileybri](https://profiles.wordpress.org/smileybri/) 23 december 2021 2 reacties I tried to use this plugin but it needs better instructions. Simply add class “wpak_DISABILITY_PROPERTY” to what? To where? Not to the menu as there is no place to do that. Please be more explicit with instructions. Also “Deletion failed:” so there is something wrong with the ability to delete the plug from the WordPress site. [ Lees alle 2 beoordelingen ](https://wordpress.org/support/plugin/a11y-kit/reviews/) ## Bijdragers & ontwikkelaars “A11y Kit” is open source software. De volgende personen hebben bijgedragen aan deze plugin. Bijdragers * [ Nicolas Johnson ](https://profiles.wordpress.org/multimedianj/) [Vertaal “A11y Kit” in je eigen taal.](https://translate.wordpress.org/projects/wp-plugins/a11y-kit) ### Interesse in ontwikkeling? [Bekijk de code](https://plugins.trac.wordpress.org/browser/a11y-kit/), haal de [SVN repository](https://plugins.svn.wordpress.org/a11y-kit/) op, of abonneer je op het [ontwikkellog](https://plugins.trac.wordpress.org/log/a11y-kit/) via [RSS](https://plugins.trac.wordpress.org/log/a11y-kit/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.1.0 * Fix bug on plugin removal (deletion) * Improve documentation (instructions) on how to configure the accessibility menu #### 1.0.1 * Add a DEMO (URL link) of the plugin to better understand the final result #### 1.0.0 * Fix the problem of displaying the documentation to WordPress.org #### 0.0.3 * Export pre-generated menu in JSON file and add it as a SAMPLE * Documentation to import a pre-generated menu with FontAwesome icons #### 0.0.2 * Add a better documentation to the usability of the plugin * Update the “dark mode” styles * Update the “high contrast” styles #### 0.0.1 * Initial commit ## Meta * Versie **1.1.0** * Laatst geüpdatet **4 jaar geleden** * Actieve installaties **20+** * WordPress versie ** 4.9 of nieuwer ** * Getest t/m **5.8.13** * PHP versie ** 7.2 of nieuwer ** * Taal * [English (US)](https://wordpress.org/plugins/a11y-kit/) * Tags * [a11y](https://nl.wordpress.org/plugins/tags/a11y/)[accessibility](https://nl.wordpress.org/plugins/tags/accessibility/) [accessible](https://nl.wordpress.org/plugins/tags/accessible/)[wcag](https://nl.wordpress.org/plugins/tags/wcag/) [web accessibility](https://nl.wordpress.org/plugins/tags/web-accessibility/) * [Geavanceerde weergave](https://nl.wordpress.org/plugins/a11y-kit/advanced/) ## Waarderingen 3 van 5 sterren. * [ 1 5 ster beoordeling ](https://wordpress.org/support/plugin/a11y-kit/reviews/?filter=5) * [ 0 4 sterren beoordelingen ](https://wordpress.org/support/plugin/a11y-kit/reviews/?filter=4) * [ 0 3 sterren beoordelingen ](https://wordpress.org/support/plugin/a11y-kit/reviews/?filter=3) * [ 0 2 sterren beoordelingen ](https://wordpress.org/support/plugin/a11y-kit/reviews/?filter=2) * [ 1 1 ster beoordeling ](https://wordpress.org/support/plugin/a11y-kit/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/a11y-kit/reviews/#new-post) [Bekijk alle beoordelingen](https://wordpress.org/support/plugin/a11y-kit/reviews/) ## Bijdragers * [ Nicolas Johnson ](https://profiles.wordpress.org/multimedianj/) ## Ondersteuning Iets te melden? Hulp nodig? [Het supportforum bekijken](https://wordpress.org/support/plugin/a11y-kit/)