Hello and welcome to WP-bility plug-in.

WP-bility is a flexible tool designed to make web-surfing easier for people with limited abilities.

Various features of WP-bility will modify your website to enhance the surfing experience for partially paralyzed, colorblind or poor-sighted customers. More detailed look on its functions you may see in the videos below!

How to add WP-bility to your website.

First, visit http://wp-bility.com. After a quick sign-up process you can access your personal cabinet. From the dashboard you can add your site and complete the plug-on purchase. After this will see additional buttons next to the website you have recently added. Check for “script” and “script for wpml” buttons. These are the buttons that contain the code, required for your website if order to apply the plug-in.

“Script for wpml” ir required if your website has multi-lingual elements on it. If your website contains only one particular language, “Script” code is the choice.

Upon pressing the button, you will see a code in drop-down box. Now all you have to do is to copy this code and paste it into <head> block of your website’s code.

Black-and-white mode.

The next feature is called “Black-and-White” mode and it allows you to instantly convert all coloured web page elements to shades of black and white colors. This feature is designed to help colorblind people or people sensitive to bright colors and may improve their reading experience.

The “Color contrast” feature

This feature is the next step for colorblind web surfing, the ‘color contrast’ buttons turns the website’s color gamma to white-on-black, ignoring images and non-text elements, so that you can concentrate on text more and get less distracted by website design itself.

Font size feature

Fonts on your website can be adjusted using this button. The feature has 3 size settings to enlarge all non-image text on any part of your website. This is more comfortable than using a default ‘screen magnifier’ tool and does not break your website layout as the typical page enlarging would do.

No-animation tool

All flashing elements and animations can be turned off for people that may find them disturbing. All automatically scrolling blocks will be frozen as well. The more animations you have – the bigger wish to disable them in order to focus on website’s text.

Keep in mind that upon turning the feature off the page will be refreshed automatically.

Links underline

Links underline is a very simple and helpful tool. The feature highlights the links on the page so it is easier to recognize links between plain text. The tool is extra helpful if links and the text have same color or the site visitor hardly sees any color difference between them.

Advanced options.

Advanced options are intended to customize the website for more specific work. Currently, the following options are available:

  • Focus and find a particular element if it has not been picked up automatically due to website code complications.
  • Ignore particular elements so that it will be skipped while surfing through TAB button.
  • Manually add a menu block if, for some reason, it has not been found by the plug-in automatically.
  • Article previews and “read more” buttons to work so that text-searching engines may pick that up.
  • Locate sidebar if it has not been shown by default.
  • Skip a block inside the menu of the website.
  • Hide social media titles upon mouse-overs and TAB-overs.
  • Or you can also set your own social media titles if you would like to do so.
  • Create a custom block that contains several default ones, so that you can skip one big custom block instead of several smaller blocks. In this case, bigger block can be chosen by pressing ENTER and after that you may TAB between smaller blocks contained in the bigger ones you have chosen.
  • In addition, you can set a title for these custom blocks so visitors understand the way it works right away.
  • Ability to add an alter text for the image so visitors pick up the information without downloading the image itself.
  • Set custom names for the forms in main menu default block.
  • And you may contact WP-plugin support if you would like to get pop-up windows and lightboxes for your website.

Toolbar settings.

  1. Position of the toolbar summoning button on mobile devices. Can be set to the left or to the right side of the website.
  2. Toolbar button height. Position is counted from the top of the page viewed from mobile device. Measure unit is set to pixel by default, however, this can be adjusted.
  3. Toolbar button position for desktop computer. Same as for mobile, can be set either to the left or to the right side of the screen.
  4. Desktop toolbar button height. Again, same as previously, the distance is described as the amount of pixels between the button itself and the top of the website. If not comfortable, the distance can be set from pixels to overall height percentage or various other measure units.
  5. Quick navigation menu position. The menu contains all links and shortcuts for the elements so you don’t have to press TAB dozens of times if you need something particular. By default is located at top-left corner and is adjusted using this settings option.
  6. Toolbar icons. You are able to set a custom icon for the toolbar button. Simply paste icon URL into the required field. Keep in mind that 40×38 pixels image is preferred.
  7. Retina display toolbar icon. A more detailed icon version of 72×67 pixels image for Apple Retina Displays. If not present – standard toolbar icon will be used instead.
  8. A checkbox for availability on mobile devices. Can simply turn the toolbar off so that it does not appear on the mobile version of the website.