👨‍🦯 Бесплатный 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_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-40	Размер шрифта от 1 до 40 пикселей
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_tts	Boolean	true	true, false	Синтез речи true — Включить false — Выключить
bvi_flash_iframe	Boolean	true	true, false	Встроенные элементы — это компонент HTML-элемента, который позволяет встраивать документы, видео, карты и интерактивные медиафайлы на страницу. 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">

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

Вы используете небезопасный браузер!

JavaScript