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>\n\n
Here is a demo<\/a>.\nFollow the evolution of the plugin trough the Github repository<\/a>.<\/p>\n\n In order to make the plugin works, you need to create a menu first.\nIn your menu, you simply need to add a CSS class in this way \"wpak_DISABILITY_PROPERTY\"<\/strong>.<\/p>\n\n Where to add the CSS class mentioned above ?\n- 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).\n- Then, you should have the field \"CSS Classes (optional)\". Inside this field, you can add the class in this way : \"wpak_DISABILITY_PROPERTY\"<\/strong> (see examples from the pre-configured classes below).\n- 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>\n\n You can use the field for the title to add HTML code. With HTML code, it is possible to add\n- An image: Here is a list of the suggested icons to use for each pre-configured accessibility settings.<\/p>\n\n If you want to add a link to your accessibility statement page, we recommend using this icon that displays perfectly\n- To import a pre-generated menu with already pre-configured accessibility settings, follow the instructions below.<\/p>\n\n If you want to use FontAwesome icons, install the plugin FontAwesome, available here<\/a><\/p>\n\n In the plugin directory, there's a file 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>\n\nList of the pre-configured classes<\/h3>\n\n
Coloration<\/h4>\n\n
\n
Font size<\/h4>\n\n
\n
Dyslexia<\/h4>\n\n
\n
Reset button<\/h4>\n\n
\n
Add an icon instead of text<\/h3>\n\n
<img src=\"link_of_your_image.png\" alt=\"name_of_property\" \/><\/code>\n- An icon from FontAwesome or any library you want to include: <i class=\"fas fa-adjust\"><\/i><\/code><\/p>\n\nSuggested FontAwesome icons<\/h3>\n\n
\n
<i class=\"fas fa-adjust\" title=\"Change the coloration of the site\"><\/i><\/code><\/li>\n<i class=\"fas fa-font\" title=\"Change the font-size of the site\"><\/i><\/code><\/li>\n<i class=\"fas fa-pencil-alt\" title=\"Change the font-family of the site\"><\/i><\/code><\/li>\n<i class=\"fas fa-text-width\" title=\"Change the letter-spacing of the site\"><\/i><\/code><\/li>\n<i class=\"fas fa-text-height\" title=\"Change the line-height of the site\"><\/i><\/code><\/li>\n<i class=\"fas fa-undo\" title=\"Reset all the accessibility configurations\"><\/i><\/code><\/li>\n<\/ul>\n\nEXTRA<\/h4>\n\n
<i class=\"fas fa-child\" title=\"Go to the accessibility statement page\"><\/i><\/code><\/p>\n\nImport a pre-generated menu<\/h3>\n\n
\n
EXTRA<\/h4>\n\n
Overwritte accessibility settings (styles)<\/h3>\n\n