Поддерживаемые браузеры
Button visually impaired поддерживает последние стабильные выпуски всех основных браузеров и платформ. Альтернативные браузеры, использующие последнюю версию WebKit.
| Браузер | Версия |
| Chrome | >= 45 |
| Firefox | >= 38 |
| Edge | >= 12 |
| iOS | >= 9 |
| Safari | >= 9 |
| Android | >= 4.4 |
| Opera | >= 30 |
Скрыть элемент
Класс .bvi-hide скрывает текст, когда пользователь включит версию вашего сайта для слабовидящих.
Код
<div class="bvi-hide">Текст скроется при включении плагина.</div>Показать элемент
Класс .bvi-show покажет текст, когда пользователь включит версию вашего сайта для слабовидящих.
Код
<div class="bvi-show">Текст покажется при включении плагина.</div>Отключить div блок стилей
Класс .bvi-no-styles, когда пользователь включит версию вашего сайта для слабовидящих, стили блока останутся без изменений.
Код
<div class="bvi-no-styles">Стили плагина в этом блоке применяться не будут.</div>Синтез речи
Класс .bvi-speech озвучит вслух текст, выбранный вариант будет использован, когда пользователь включит версию вашего сайта для слабовидящих.
Поддерживаемые браузеры Web Speech API. Максимальная длина текста для воспроизведения является 32,767 символа.
Код
<div class="bvi-speech">Текст который нужно воспроизвести.</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">Для активации плагина разместите следующий кусок кода <script> в конце страниц, прямо перед закрывающим </body>.
Код
<script src="https://domain.name/dist/js/bvi.min.js"></script>new isvek.Bvi();Инициализация плагина с индивидуальными настройками
Код
new isvek.Bvi({
target: '.className',
fontSize: 24,
theme: 'black'
});Таблица опций
| Название | Тип | Настройка по умолчанию | Параметры | Описание |
|---|---|---|---|---|
| target | String | ‘.bvi-open’ | ‘.className’ | Класс ссылки включения плагина Например: .my-class |
| theme | String | ‘white’ | (white|black|blue|brown|green) |
Цветовая гамма white — Черным по белому black — Белым по черному blue — Темно-синим по голубому brown — Коричневым по бежевому green — Зеленым по темно-коричневому |
| fontFamily | String | ‘arial’ | (arial|times) |
Шрифты arial — Шрифт без засечек times — Шрифт с засечками |
| fontSize | number | 16 | 1-39 | Размер шрифта от 1 до 39 пикселей |
| letterSpacing | String | ‘normal’ | (normal|average|big) |
Межбуквенный интервал normal — Одинарный average — Полуторный big — Двойной |
| lineHeight | String | ‘normal’ | (normal|average|big) |
Междустрочный интервал normal — Стандартный average — Средний big — Большой |
| images | Boolean | String | false | (true|false|grayscale) |
Адаптация изображений true — Включить изображения false — Отключить изображения grayscale — Черное-белые изображения |
| reload | Boolean | true | (true|false) |
Включить/Выключить перезагрузку страницы при переходе на обычную версию сайта true — Включить false — Выключить |
| panelFixed | Boolean | true | (true|false) |
Фиксирование панели для слабовидящих вверху страницы true — Включить false — Выключить |
| speech | Boolean | true | (true|false) |
Синтез речи true — Включить false — Выключить |
| builtElements | Boolean | true | (true|false) |
Встроенные элементы — это компонент HTML-элемента, который позволяет встраивать документы, видео, карты и интерактивные медиафайлы на страницу. true — Включить false — Выключить |
| panelHide | Boolean | false | (true|false) |
Скрывает панель для слабовидящих и показывает иконку панели. true — Включить false — Выключить |
| lang | string | ‘ru-RU’ | ('ru-RU'|'en-US') |
Язык.'ru-RU' — Русский'en-US' — United States |
Начальный шаблон страницы
Соберите все вместе, и ваши страницы должны выглядеть примерно так.
Код
<!doctype html>
<html lang="ru">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!-- Button visually impaired CSS -->
<link rel="stylesheet" href="http://domain.name/dist/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-no-styles -->
<div class="bvi-no-styles">Стили плагина в этом блоке применяться не будут.</div>
<!-- Button visually impaired CLASS bvi-speech -->
<div class="bvi-speech">
Александр Сергеевич Пушкин родился 6 июня 1799 года (по старому стилю 26 мая) в Москве в дворянской помещичьей семье (отец его был майор в отставке) в день праздника Вознесения. В тот же день у императора Павла родилась внучка, в честь которой во всех церквах шли молебны и гудели колокола. Так, по случайному совпадению день рождения русского гения был ознаменован всеобщим народным ликованием. Символично и место рождения поэта г. Москва — самое сердце русской жизни, России. Будущего поэта крестили 8 июня в церкви Богоявления в Елохове.
</div>
<div class="bvi-speech">
Отец Пушкина Сергей Львович и мать Надежда Осиповна, урожденная Ганнибал, были дальними родственниками. Пылкие страсти, руководившие предками как по отцовской, так и по материнской линии, оказали свое влияние и на Пушкина. Семья (кроме Александра были еще дети Ольга и Лев) принадлежала к самой образованной части московского общества.
</div>
<!-- Button visually impaired JS -->
<script src="http://domain.name/dist/js/bvi.min.js"></script>
<script>
new isvek.Bvi({
target: '.className', // Класс инициализации
fontSize: 24, // Размер шрифта
theme: 'black' // Цветовая тема сайта
});
</script>
</body>
</html>