JavaScript

Поделиться
 

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

Button visually impaired поддерживает последние стабильные выпуски всех основных браузеров и платформ. Альтернативные браузеры, использующие последнюю версию WebKit.

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

Скрыть элемент

Класс .bvi-hide скрывает текст, когда пользователь включит версию вашего сайта для слабовидящих.

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

Показать элемент

Класс .bvi-show покажет текст, когда пользователь включит версию вашего сайта для слабовидящих.

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

Синтез речи

Класс .bvi-tts озвучит вслух текст, выбранный вариант будет использован, когда пользователь включит версию вашего сайта для слабовидящих.

Поддерживаемые браузеры Web Speech API. Максимальная длина текста для воспроизведения является 32,767 символа.

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

Класс .bvi-open используется по умолчанию.

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

Произвольный класс .my-class.

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

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

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

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

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

Код
<script src="https://code.jquery.com/jquery-1.12.4.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_tts" : true, // Синтез речи
            "bvi_flash_iframe" : true, // Встроенные элементы (видео, карты и тд.)
            "bvi_hide" : false // Скрывает панель для слабовидящих и показывает иконку панели.
    });
});

Таблица опций

НазваниеТипНастройка по умолчаниюПараметрыОписание
bvi_targetString.bvi-open Класс ссылки включения плагина
Например: .my-class
bvi_themeStringwhitewhite, black, blue, brown, greenЦветовая гамма
white — Черным по белому
black — Белым по черному
blue — Темно-синим по голубому
brown — Коричневым по бежевому
green — Зеленым по темно-коричневому
bvi_fontStringarialarial, timesШрифты
arial — Шрифт без засечек
times — Шрифт с засечками
bvi_font_sizenumber161-40Размер шрифта от 1 до 40 пикселей
bvi_letter_spacingStringnormalnormal, average, bigМежбуквенный интервал
normal — Одинарный
average — Полуторный
big — Двойной
bvi_line_heightStringnormalnormal, average, bigМеждустрочный интервал
normal — Стандартный
average — Средний
big — Большой
bvi_imagesBoolean | Stringfalsetrue, false, grayscaleАдаптация изображений
true — Включить изображения
false — Отключить изображения
grayscale — Черное-белые изображения
bvi_reloadBooleantruetrue, falseВключить/Выключить перезагрузку страницы при переходе на обычную версию сайта
true — Включить
false — Выключить
bvi_fixedBooleantruetrue, falseФиксирование панели для слабовидящих вверху страницы
true — Включить
false — Выключить
bvi_ttsBooleantruetrue, falseСинтез речи
true — Включить
false — Выключить
bvi_flash_iframeBooleantruetrue, falseВстроенные элементы — это компонент HTML-элемента, который позволяет встраивать документы, видео, карты и интерактивные медиафайлы на страницу.
true — Включить
false — Выключить
bvi_hideBooleanfalsetrue, 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">

        <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-tts">
            Александр Сергеевич Пушкин родился 6 июня 1799 года (по старому стилю 26 мая) в Москве в дворянской помещичьей семье (отец его был майор в отставке) в день праздника Вознесения. В тот же день у императора Павла родилась внучка, в честь которой во всех церквах шли молебны и гудели колокола. Так, по случайному совпадению день рождения русского гения был ознаменован всеобщим народным ликованием. Символично и место рождения поэта г. Москва — самое сердце русской жизни, России. Будущего поэта крестили 8 июня в церкви Богоявления в Елохове.
        </div>
        <div class="bvi-tts">
            Отец Пушкина Сергей Львович и мать Надежда Осиповна, урожденная Ганнибал, были дальними родственниками. Пылкие страсти, руководившие предками как по отцовской, так и по материнской линии, оказали свое влияние и на Пушкина. Семья (кроме Александра были еще дети Ольга и Лев) принадлежала к самой образованной части московского общества.
        </div>

        <!-- Button visually impaired JS -->
        <script src="https://code.jquery.com/jquery-1.12.4.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>