Button visually impaired

Бесплатная версия плагина для слабовидящих включает в себя: изменение размера шрифта (до 200%), включение и отключение изображений, изменение фона страницы, изменение гарнитуры, изменение интервала между буквами (Кернинг), изменение интервала между строками, синтез речи, поддержка браузеров (Chrome, Firefox, Safari, Internet Explorer(v: 11, 10, 9), Microsoft Edge, Opera и тд.);

Скачать плагин Wordpress v1.0.8 Скачать плагин Jquery v1.0.8 Github Пожертвовать

Установка плагина Wordpress

Из вашей консоли wordpress
  1. Перейдите в меню Плагины Добавить новый.
  2. Введите в строке поиска Button visually impaired.
  3. Активируйте Button visually impaired из вашей страницы Плагинов.
  4. Перейдите в меню Button visually impaired и в настройках включите плагин.
  5. Добавьте кнопку для слабовидящих в виджете или воспользуйтесь шорткодом [bvi text="Версия для слабовидящих"] или [bvi].
Классы CSS

.bvi-hide

							
<div class="bvi-hide">Текст скроется при включении плагина.</div>
						

.bvi-show

							
<div class="bvi-show">Текст покажется при включении плагина.</div>
						

.bvi-voice

							
<div class="bvi-voice">Текст который нужно воспроизвести.</div>
						

Произвольная ссылка

							
<a href="#" class="bvi-link bvi-open"><i class="bvi-icon bvi-eye bvi-2x"></i> Версия сайта для слабовидящих</a>
						

Установка плагина Jquery

CSS

Скопируйте и вставьте таблицу стилей <link> в ваш файл <head> после всеми другими таблицами стилей, чтобы загрузить наш CSS.

							
<link rel="stylesheet" href="http://domain.name/css/bvi.min.css" type="text/css">

<link rel="stylesheet" href="http://domain.name/css/bvi-font.min.css" type="text/css">
						
Классы CSS

.bvi-hide

							
<div class="bvi-hide">Текст скроется при включении плагина.</div>
						

.bvi-show

							
<div class="bvi-show">Текст покажется при включении плагина.</div>
						

.bvi-voice

							
<div class="bvi-voice">Текст который нужно воспроизвести.</div>
						
JS

Скопируйте и вставте следующие скрипты в конце своих страниц, прямо перед закрывающим </body> тегом, чтобы загрузить наши JS файлы. Поддерживаются следующие версии jQuery: 1.x, 2.x, 3.x;

							
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<script src="https://domain.name/js/responsivevoice.min.js"></script>

<script src="https://domain.name/js/js.cookie.js"></script>

<script src="https://domain.name/js/bvi-init.js"></script>

<script src="https://domain.name/js/bvi.min.js"></script>
						
Инициализация плагина с индивидуальными настройками

Ссылка инициализации плагина.

							
<a href="#" class="bvi-open" title="Версия сайта для слабовидящих"><i class="bvi-icon bvi-eye bvi-2x"></i> Версия сайта для слабовидящих</a>
						

Откройте файл bvi-init.js для редактирования. Ниже приведена таблица опций.

							
jQuery(document).ready(function($){
    $.bvi({
            'bvi_target': '.bvi-open',
            "bvi_theme":"white",
            "bvi_font":"arial",
            "bvi_font_size":16,
            "bvi_letter_spacing":"normal",
            "bvi_line_height":"normal",
            "bvi_images":true,
            "bvi_reload":false,
            "bvi_fixed":false,
            "bvi_voice":true,
            "bvi_flash_iframe":true,
            "bvi_hide":false
    });
});
Опции
Название Тип Настройка по умолчанию Параметры Описание
bvi_target String .bvi-open - Класс ссылки включения плагина
Например: .my-class
bvi_theme String white white, black, blue, brown, green Цвета сайта
white - Черным по белому
black - Белым по черному
blue - Темно-синим по голубому
brown - Коричневым по бежевому
green - Зеленым по темно-коричневому
bvi_font String arial arial, times Шрифты
arial - Шрифт без засечек
times - Шрифт с засечками
bvi_font_size Int 16 1-50 Размер шрифта от 1 до 50 пикселей
bvi_letter_spacing String normal normal, average, big Межбуквенный интервал
normal - Одинарный
average - Полуторный
big - Двойной
bvi_line_height String normal normal, average, big Междустрочный интервал
normal - Стандартный
average - Средний
big - Большой
bvi_images Boolean | String false true, false, grayscale Изображения
true - Включить изображения
false - Отключить изображения
grayscale - Черное-белые изображения
bvi_reload Boolean true true, false Перезагрузка страницы при выключении плагина
true - Включить
false - Выключить
bvi_fixed Boolean true true, false Фиксирование панели для слабовидящих вверху страницы
true - Включить
false - Выключить
bvi_voice Boolean true true, false Синтез речи
true - Включить
false - Выключить
bvi_flash_iframe Boolean true true, false Flash-объекты, фреймы
true - Включить
false - Выключить
bvi_hide Boolean false true, false Скрывает панель для слабовидящих и показывает иконку панели.
true - Включить
false - Выключить
Стартовый шаблон

Соберите все вместе, и ваши страницы должны выглядеть так:

							
<!doctype html>
<html lang="ru">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">

        <!-- Button visually impaired CSS -->
        <link rel="stylesheet" href="http://domain.name/css/bvi.min.css" type="text/css">
        
        <!-- Button visually impaired Font Awesome Free CSS -->
        <link rel="stylesheet" href="http://domain.name/css/bvi-font.min.css" type="text/css">

        <title>Button visually impaired</title>
    </head>
    <body>
        <h1>Привет, мир!</h1>

        <!-- Button visually impaired LINK -->
        <a href="#" class="bvi-open" title="Версия сайта для слабовидящих">Версия сайта для слабовидящих</a>

        <!-- Button visually impaired CLASS bvi-hide -->
        <div class="bvi-hide">Текст скроется при включении плагина.</div>

        <!-- Button visually impaired CLASS bvi-show -->
        <div class="bvi-show">Текст покажется при включении плагина.</div>

        <!-- Button visually impaired CLASS bvi-voice -->
        <div class="bvi-voice">
            Михаи́л Ю́рьевич Ле́рмонтов] (3 октября 1814, Москва — 15 июля 1841, Пятигорск) — русский поэт, прозаик, драматург, художник. Творчество Лермонтова, в котором сочетаются гражданские, философские и личные мотивы, отвечавшие насущным потребностям духовной жизни русского общества, ознаменовало собой новый расцвет русской литературы и оказало большое влияние на виднейших русских писателей и поэтов XIX и XX веков. Произведения Лермонтова получили большой отклик в живописи, театре, кинематографе. Его стихи стали подлинным кладезем для оперного, симфонического и романсового творчества. Многие из них стали народными песнями.
        </div>
        <div class="bvi-voice">
            Алекса́ндр Серге́евич Пу́шкин (26 мая [6 июня] 1799, Москва — 29 января [10 февраля] 1837, Санкт-Петербург) — русский поэт, драматург и прозаик, заложивший основы русского реалистического направления, критик и теоретик литературы, историк, публицист; один из самых авторитетных литературных деятелей первой трети XIX века.
        </div>

        <!-- Button visually impaired JS -->
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="https://domain.name/js/responsivevoice.min.js"></script>
        <script src="https://domain.name/js/js.cookie.js"></script>
        <script src="https://domain.name/js/bvi-init.js"></script>
        <script src="https://domain.name/js/bvi.min.js"></script>
    </body>
</html>