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>