Меню Рубрики

Установка кнопки версия для слабовидящих

Кнопка для слабовидящих на сайте с использованием сервисов

Автор: Эдуард Бунаков · Опубликовано 7 апреля 2017 · Обновлено 25 февраля 2018

Кнопка для слабовидящих на сайте должна быть у всех организация подпадающих под Федеральный закон «О социальной защите инвалидов в Российской Федерации». Чтобы не получать уведомления или предписания судебных органов, необходимо позаботиться о создании версии сайта для слабовидящих.

С технической точки зрения, все выглядит следующим образом. Необходимо создать вторую версию сайта или шаблона, если используется cms- ситема, где будут изменены необходимые стили отображения.

Способов решения этой задачи не мало и в этом посте речь пойдет о самом быстром, простом и условно-бесплатном.

Основными требованиями к версиям сайтов для слабовидящих являются

Возможность изменение размера шрифта

Изменение фона и контраста

Всех подробностей касаться не будем, все это есть на официальных сайтах, но если выполнить основные требования, то вопросов у правоохранительных органов к вам не возникнет.

Как делается кнопка для слабовидящих на сайте с помощью сервиса.

Процесс простой до «безобразия». Всю техническую задачу берет на себя тот сервис, которому отдается предпочтение. В общих чертах все выглядит одинаково. От администратора сайта требуется только адрес ресурса.

В нашем случае сервис FineVision возьмет на себя всю рутинную работу. С его помощью можно установить кнопку для слабовидящих на сайт созданный с помощью сервисов (uCoz,Wix), практически любых cms- систем и самописных сайтов.

Стоит услуга всего 350 рублей в год, устанавливается за минуту. Предусмотрена бесплатная возможность использования услуг сервиса. Но об этом можно узнать на официальном сайте .

Этапы внедрения кнопки для слабовидящих на сайт

Что касается самого процесса, то его можно было не описывать. Визуально все понятно без слов.

Добавляем в специальное поле адрес сайта

Выбираем необходимый вариант кнопки для слабовидящих

Копируем полученный html- код и вставляем в нужное место на сайте.

Практически все варианты html- кода являются обычными ссылками, которые можно вставлять в любом месте и разными способами.

Кроме этого, стиль кнопки-ссылки можно менять и подгонять под нужные параметры вашего проекта.

Конечно, внедрение html- кода в разные версии сайтов выглядит не однообразно, но на сайте FineVision предусмотрена обратная связь, если редактирование кода вызывает трудности.

На всякий случай я записал видео о добавлении кнопки для слабовидящих на сайт, для владельцев сайтов созданных на joomla и wordpress. Для остальных движков все идентично.

Видео как установить кнопку для слабовидящих на сайте

источник

Установка кнопки версия для слабовидящих

Очень много задают вопросов о том как на системе uCoz сделать версию для слабовидящих. Ещё несколько месяцев назад это можно было реализовать при помощи скрипта, который нужно было устанавливать самостоятельно покопавшись в коде.

Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать? Вот в этой инструкции.

Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.

Ситуация изменилась недавно, после того как система uCoz обновилась. В панели управления, а точнее в настройках, появилась дополнительная функций для слабовидящих и теперь стало намного проще сделать свой сайт для людей с плохим зрением. В этом уроке мы подробно рассмотрим как активировать данную настройку.

Подготовка.

И так приступим, первым делом нам нужно попасть в панель управление. Как это сделать многие уже знают, а для тех кто далёк от системы uCoz, можете почитать урок — как войти в панель управления. Попав в панель управления, в верхней панели найдите кнопку настройки нажав на неё, выпадет маленькое окно в котором нажмите кнопку общие настройки.

Откроется страница, которую нужно промотать до самого конца вниз. Если начать считать функции снизу, то функция для слабовидящих будет шестая по счёту. Данная функция не активирована, и что-бы её активировать нужно отметить чекбокс.

Настройка

После активации галочки, откроются дополнительные поля которые позволяют настроить данную функцию, всего восемь настроек. Разберём первые 4 чекбокса.

ЧекБокс под стрелочкой один, позволяет закрепить нашу панель в верху, что это значит ? А это значит что, если прокручивать страницу вниз, панель управления будет оставаться на месте и всегда видна пользователю, а элементы сайта к примеру шапка или логотип сайта скроются от зрения. Если снять галочку, тогда при прокрутке страницы вниз панель останется наверху страницы, а что-бы с ней поработать человек должен будет прокрутить страницу обратно наверх.

Читайте также:  Установка водопада в водоеме

ЧекБокс под номерам два активирует функцию включить при загрузке. Это означает что если человек только что пришёл на сайт, ему не нужно нажимать кнопку — версия для слабо видящих , панель для управления, увеличение и уменьшения текста открывается в автоматическом режиме.

Кстати вот так выглядит панель после активации кнопки Версия для слабовидящих.

ЧекБокс под номером три позволяет управлять изображениями на сайте. То-есть в панели появляется кнопка отключить и включить изображения на сайте. Выглядит это так.

ЧекБокс под номером четыре помогает управлять фоном нашего сайта. Если его активировать, на панели появятся кнопки которые будут менять фон сайта. Первая кнопка с чёрным фоном, сделает фон сайта чёрным, вторая кнопка с белым фоном сделает фон сайта белым, ну а крестик подключит стандартный фон который находится на сайте.

Шрифт

Перейдём к следующим настройкам, настройка отвечающая за размер букв на сайте. Если человек активировал панель, ему открывается данная панель и на панели он видит кнопки А . Выше на картинке это можно увидеть. Нажав на одну из кнопок А , шрифт сайта становится либо больше либо меньше, всё зависит от выбранной буквы. Так вот, в следующих настройка можно задать какой размер шрифта будет на этой панели. Если выбрать несколько пунктов в настройках, то и на панели будет отображаться всего две буквы.

В моём случае я выбрал 2 размера, это 20 пикселей и 24 пикселя. Что-бы выбрать несколько вариантов одновременно, нажмите клавишу Strg на клавиатуре и мышкой на размеры которые хотите что-бы отображались в панели для слабовидящих.

Положение кнопки

Изначально когда была активирована версия для слабовидящих, у нас появилась кнопка на сайте, расположенная по стандарту в верху сайта с право, в горизонтальном положение.

Следующие настройки помогут нашу кнопку передвинуть или повернуть так, как захочет владелец сайта. Кнопку можно расположить как справа так и слева или по центру сайта, вверху или внизу. РадиоКнопки помогают нашу кнопку повернуть по горизонтали или вертикали.

Цвет для кнопки

Последняя настройка — это настройка цвета у фона кнопки и выбор цвета для текста на кнопке. Данная настройка поможет подобрать цвет для кнопки и для текста. Изначально цвет у кнопки чёрный а у текста белый, вы можете подобрать цвет под элементы вашего сайта при помощи этих двух панелей.

Завершение

И так, если настройки были произведены, тогда не забудьте в низу страницы нажать на кнопку сохранить, а иначе функция для слабовидящих людей так и не заработает на сайте. Советую по экспериментировать с настройками и по изучать на практике как это всё работает. А я прощаюсь с вами до нового урока.

источник

Плагин для слабовидящих WordPress. Версия сайта для слабовидящих

Здравствуйте, дамы и господа! Как сделать сайт WordPress доступным для слабовидящих? Версия сайта для слабовидящих в WordPress делается с помощью специального плагина. Поскольку установка плагина осуществляется автоматически и не требует слишком трудоемких манипуляций пользователя с готовым скриптом. Их довольно много, есть из чего выбирать. Бесплатный плагин для слабовидящих WordPress который позволяет читателю изменить цветовую схему сайта, размеры шрифтов и другое.

Например, можно использовать плагин For the visually impaired, Button visually impaired, Мибок. Доступность контента на сайте WordPress станет проще!

Создание версии сайта для слабовидящих

Создание версии сайта для слабовидящих — одно из требований ГОСТ Р 52872-2012 к сайтам, причем нормы ГОСТ являются обязательными для государственных организаций, согласно закону «О социальной защите инвалидов в Российской Федерации».

Как сделать версию сайта для слабовидящих на WordPress?

Добавьте плавающую панель инструментов доступности, чтобы помочь людям с ограниченными возможностями читать и перемещаться по вашему сайту. Для этого, будем использовать бесплатный плагин для слабовидящих.

Панель для слабовидящих это:

Панель на сайте для слабовидящих решает вопрос с контрастностью и размером шрифта. С помощью нее можно добавить функции, которые удовлетворят потребностями людей с ограниченными возможностями. Например, возможность настроить отображение цвета на сайте поможет людям с дальтонизмом, а увеличение интервалов между буквами и строчками, а также настройка шрифта с засечками — людям с дислексией, которые из-за особенностей работы мозга испытывают трудности с чтением и пониманием текстов.

Специальную панель для людей с ограниченными возможностями можно реализовать на любом сайте под управлением WP. Пример:

Доступность сайтов важна не только для государственных сайтов, но и для бизнеса. Следование рекомендациям по повышению уровня доступности поможет расширить аудиторию не только за счет лиц с инвалидностью, но и за счет улучшения пользовательских качеств сайта для широкой аудитории и нас с вами.

Читайте также:  Установка cd чейнджер w211

Создание версии сайта для слабовидящих будет также полезным для обычных информационных веб-ресурсов и т.п., с целью привлечения и удержания аудитории своих сайтов, предоставления дополнительного сервиса посетителям блога.

Для установки панели комфортного чтения не обязательно иметь доступ к исходному коду сайта. Существуют плагины для CMS WordPress, которые может установить практически каждый пользователь.

Plagin для слабовидящих предназначен для автоматической генерации версии сайта, пригодной для использования соответствующей категорией граждан.

Плагин для слабовидящих For the visually impaired

Плагин For the visually impaired (Для слабовидящих):

Панель инструментов доступности

Плагин для слабовидящих включает:

  • Включение и отключения показа изображений(картинок), при отключении — показывается тайтл или алт изображения, режим «черно-белых» изображений;
  • Выбирать шрифт (2 режима) (Arial, Times New Roman);
  • Изменять размер шрифта (5 режимов) (14px, 16px, 18px, 22px, 26px);
  • Изменить межстрочный интервал;
  • Изменять интервал между символами;
  • Изменять фона страницы (5 режимов) (Черным по белому, Белым по черному, Темно-синим по голубому, Коричневым по бежевому, Зеленым по темно-коричневому);
  • Добавлять кнопку в виджетах;
  • Добавить кнопку в меню;
  • Добавлять шорт код [FTVI]
  • Доступны языки: русский, англ.;

После установки и активации plagina нужно перейти к его настройкам:

Страница настроек плагина доступности WordPress

После этого, добавьте кнопку в меню или например, установите виджет на боковую панель веб-сайта ВордПресс:

Виджет For the visually impaired

А так выглядит панелька при переходе в режим для слабовидящих. Пользователь сможет настроить удобный режим для просмотра сайта:

Появилась панелька при переходе в режим для слабовидящих

Button visually impaired

Бесплатная версия плагина для слабовидящих

Кнопка для слабовидящих включает:

  • Включение/Отключение изображений (оттенка серого);
  • Включение/Отключение изображений (в место изображения появится alt надпись);
  • Изменить размера шрифта (до 200%);
  • Изменение фона страницы (черным по белому, белым по черному, темно-синим по голубому, коричневым по бежевому, зеленым по темно-коричневому);
  • Изменение гарнитуры (без засечек, с засечками);
  • Настроить интервал между буквами: (стандартный, средний, большой);
  • Настройка интервала между строками: (одинарный, полуторный, двойной);
  • Включить/Отключить фиксации панели в верхней части страницы;
  • Включение/Отключение перезагрузки страницы (переход на обычную версию блога);
  • Вкл./Откл. плавающего фрейма;
  • Синтез речи панели;
  • Поддержка браузеров (Chrome, Firefox, Safari, Internet Explorer(v: 11, 10, 9), Microsoft Edge, Opera и т.д.).

Установили из админки и активировали. Затем можно его включить и настроить:

Настройки панели при включении версии сайта для слабовидящих

И следующий шаг, это — добавить кнопку для слабовидящих в виджете или воспользуйтесь шорткодом [bvi text=»Версия для слабовидящих»] или [bvi]. Панель будет смотреться вот так при нажатой кнопке:

Панель плагина Button visually impaired

Если по каким то причинам вам не подходят данные plaginy воспользуйтесь спецмодулем.

Модуль Мибок: Версия для слабовидящих

Есть специальный сервис для того, чтобы сайты соблюдали требования доступности для инвалидов по зрению. То, есть там можно скачать модуль для слабовидящих.

Мибок: Решение позволяет генерировать версию сайта для слабовидящих на основе существующих шаблонов вашего сайта

Плагин подходит для использования: сайты государственных организаций,новостные ресурсы,информационные порталы, интернет-магазины, блоги. Модуль предоставляется для WordPress абсолютно бесплатно. Скачайте плагин с сайта — https://slabovid.ru/get/ .

Установка модуля «Мибок: Версия для слабовидящих» на сайт WP:

  1. Перейдите на страницу «Плагины» → Добавить новый;
  2. Нажмите на кнопку «Загрузить плагин»;
  3. Выберете ранее загруженный zip-архив модуля;
  4. Нажмите на кнопку «Установить»;
  5. Нажмите на кнопку «Активировать плагин».
  • Перейдите на страницу «Внешний вид» → «Виджеты»;
  • Найдите в списке виджет «Мибок: Версия для слабовидящих» и выберите область, в которой должна отображаться ссылка.

Добавляем виджет на боковую панель

В области виджетов можно отредактировать название блока. А так будет выглядеть панель:

Версия сайта для слабовидящих с панелью

И ещё. Если вам не достаточно плагинов, то вы также можете в поиск по плагинам вставить ключевое слово Accessibility (Доступность)- https://ru.wordpress.org/plugins/tags/accessibility/. И выбирайте из 453 модулей, что душа пожелает. Ориентируйтесь, конечно, когда обновлялся плагин:

Результаты поиска по плагинам

Плагины Accessibility добавляют ряд полезных функций специальных возможностей с минимальной настройкой и без необходимости экспертных знаний. Они повышают доступность любого веб-ресурса с помощью панели инструментов спец-возможностей.

Добавьте плагин и немедленно предоставьте совместимые функции для людей с ограниченными возможностями. Посетители могут изменить шрифт, увеличить размер текста и найти лучший цветовой контраст, чтобы убедиться, что они могут легко читать ваш контент.

В заключение

Видоизмененный вариант страниц – это полноценный доступ к информации для пользователей с нарушениями зрения. Создание версии сайта для слабовидящих увеличивает аудиторию посетителей ресурсов. Наличие панели инструментов для слабовидящих – это возможность изучать вашу информацию без ограничений.

Читайте также:  Установка задней камеры на пежо 508

Адаптация сайта WordPress для слабовидящих предполагает использование специального модуля/расширения/плагина, с помощью которого одним нажатием кнопки пользователь переходит на версию веб-сайта с увеличенным шрифтом, измененным цветовым оформлением, функцией включения/выключения иллюстраций.

источник

Как сделать версию сайта для слабовидящих

Версия для слабовидящих должна быть обязательно на сайтах госструктур, медицинских и образовательных учреждений. Использовать такую версию рекомендуется и коммерческим сайтам для увеличения аудитории посетителей.

Низкое зрение пользователей необходимо учитывать при создании сайта. Таким людям сложно ориентироваться на ресурсе без адаптации под их потребности. Узнать больше!

Как сделать версию сайта для слабовидящих

При создании адаптивного шаблона сайта важно учитывать характер разных заболеваний людей с ограниченными возможностями. Например, при дальтонизме нарушено восприятие цветов и их оттенков. Астигматизм означает нарушение четкости восприятия текста и картинок. В некоторых случаях простое увеличение шрифта не помогает человеку со слабым зрением понять, что написано на web-странице. Поэтому нужно использовать дополнительные параметры настройки дизайна.

Стандартные плагины учитывают все возможные нарушения зрения. При создании уникального адаптивного шаблона для сайта важно предусмотреть все варианты:

  • увеличение шрифта на 200% и больше без горизонтальной прокрутки;
  • отключение изображений;
  • черно-белый контент;
  • звуковое сопровождение;
  • выбор цвета фона и текста;
  • возможность управления клавиатурой;
  • изменение интервалов в шрифтах.

Проверить контрастность текста на сайте можно с помощью специальных программ, расширений для браузеров и онлайн-инструментов. Например, Color Contrast Analyser. По ГОСТ показатель контрастности на сайте должен быть не менее 4,5:1. На сайте пенсионного фонда России задаются персональные настройки отображения версии для слабовидящих. Контрастность шрифта позволяет прочитать текст людям с плохим зрением.

Методы создания адаптивной версии для людей с нарушенным зрением:

  1. Внедрение уникального скрипта, который придется заказать у программиста.
  2. Использование демо-версий плагинов, стандартных скриптов. Бесплатно или за небольшую цену.
  3. Создание отдельной версии сайта на поддомене. Наиболее затратный вариант, подразумевает привлечение верстальщика и дизайнера.
  4. Создание адаптивного шаблона под существующий сайт.

Как установить скрипт на сайт для слабовидящих

Рассмотрим на примере бесплатную версию Uscript. Для ее использования для любой CMS сайт должен поддерживать библиотеку Jquery. Далее нужно зайти в редактор кода и добавить между тегами . такие строки:

В этом случае используется шрифт ligature symbols. Вы можете заменить его на любой другой.

Далее необходимо вставить еще один участок кода после закрывающего тега :

Это и есть описание шаблона, который активируется при нажатии кнопки перехода на версию сайта для слабовидящих. В этом случае активируется панель настроек шрифта, изображений и цветов. Чтобы шаблон заработал, необходимо добавить кнопку в любое место на странице. Для этого используется участок кода:

Его нужно добавить там, где бы вы хотели отобразить кнопку перехода на адаптивную версию сайта. В конце страницы желательно добавить еще одну строку для окончательной загрузки скрипта:

Как сделать сайт для слабовидящих HTML

Для использования этого сервиса достаточно добавить несколько строк в код HTML или Javascript по инструкции. Нужно зайти на сайт FineVision и ввести домен в строку.

Далее можно посмотреть, как будет выглядеть сайт после добавления кнопки, и сразу получить код для установки ссылки на адаптивную версию. Описания по установке для каждой CMS находятся на сайте сервиса. Стоимость лицензии FineVision на один год составляет 350 рублей при условии оплаты через Робокассу.

Версия сайта для слабовидящих WordPress

Для создания адаптивного шаблона сайта для людей с плохим зрением удобно использовать платные и бесплатные плагины. Например, Button visually impaired или For the visually impaired.

Для сайтов на WordPress также подходит вариант с установкой скрипта и созданием отдельной версии на поддомене. Важно, чтобы кнопка переключения была заметна человеку с плохим зрением. Перед запуском плагина или скрипта его необходимо протестировать на корректность работы. В некоторых случаях не срабатывает диктор либо не получается переключить управление с мыши на клавиатуру. Все проблемы нужно устранить до активации адаптивной версии сайта.

Запомнить

Версия для слабовидящих в первую очередь нужна сайтам образовательных и других госучреждений, медицинских клиник, банков. Многие из них обязывают по закону использовать адаптивный вариант для людей с отклонениями в зрении. Всем коммерческим сайтам также рекомендуется рассчитывать на такую аудиторию посетителей. Для отображения страниц сайта в увеличенном формате используют скрипты, вставки в HTML-код, онлайн-сервисы и плагины для CMS.

источник

Добавить комментарий

Adblock
detector