👩‍🦯Бесплатный JavaScript плагин сайта для слабовидящих 🦮

Поддерживаемые браузеры

Браузер	Версия
Chrome	>= 45
Firefox	>= 38
Edge	>= 12
Explorer	>= 10
iOS	>= 9
Safari	>= 9
Android	>= 4.4
Opera	>= 30

Классы 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>

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

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

Быстрый старт

Скопируйте и вставьте часть кода <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">

Многие из наших компонентов требуют использования JavaScript. Точнее — им требуются jQuery и наш собственный плагин. Для активации плагина разместите следующий кусок кода <script> в конце страниц, прямо перед закрывающим </body>. Сперва jQuery потом наши.

<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>

Инициализация плагина с индивидуальными настройками

Откройте файл 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	number	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>