Button visually impaired

Description

Button visually impaired automatically changes your site into a version for the visually impaired. The panel on the site lets visitors change the color scheme, the font size and family, spacing and images, and a speech synthesizer reads aloud the changes and the text you mark for it. Thanks to it, your site meets the needs of people with disabilities.

Features

• Change the font size (up to 200%);
• Change the color scheme of the site;
• Change the font of the site (serif or sans serif);
• Change the image (gray scale, hide the image with an alt caption);
• Change letter spacing (kerning);
• Change line spacing;
• Speech synthesizer reads aloud changes to display settings;
• Disable embedded elements (videos, maps, etc.);
• Play text to voice;
• Interface and speech in 11 languages;
• The panel follows the selected color scheme and collapses into a menu on phones and tablets;
• Keyboard control (Tab, arrow keys, Home, End, Space, Enter, Esc);
• Support for browsers Chrome, Firefox, Safari, Microsoft Edge, Opera.

Ways to add the button

• The Gutenberg block “Button for the visually impaired”: icon, text, colors (also on hover, gradient), font, spacing, borders, shadow, size;
• The Gutenberg block “Speech text”: a container whose content a visitor can listen to;
• The shortcode [bvi] with the attributes text, icon, color and background;
• The “Button visually impaired” widget: title, text, colors, showing the icon and the text;
• Any element with the bvi-open class.

Detailed instructions and a FAQ are on the “BVI → Instructions” page in the admin.

HTML classes

• bvi-speech adds text-to-speech buttons to the block;
• bvi-hide hides the element in the version for the visually impaired;
• bvi-show shows the element only in the version for the visually impaired;
• bvi-no-styles disables the plugin styles inside the block.

Demo version

Technical details