Как сделать версию сайта для слабовидящих? Очень просто, наш сервис позволяет сделать версию сайта для слабовидящих за пять минут, без регистрации, без установки сторонних скриптов, на любой сайт. Попробуйте абсолютно бесплатно. Сайт адаптируется по ГОСТ Р 52872-2012 Интернет-ресурсы. Требования доступности для инвалидов по зрению, который приняли взамен ГОСТ Р 52872-2007. Для установки версии для слабовидящих вам не нужно устанавливать какой либо скрипт, модуль или плагин. Наш сервис постоянно развивается, в скором времени будет доступны функции диктора (озвучивание текста), а также голосового поиска и управления.

Версия сайта для слабовидящих от 200р в год по ГОСТ Р 52872-2012

Установить версию сайта для слабовидящих можно практически на любом сайте и CMS (Alto CMS, AVE.cms, CMS Made Simple, concrete5, Danneo, DataLife Engine, Drupal (друпал), InstantCMS, Jimdo (джимдо), Joomla (джумла, жумла), LiveStreet, MaxSite CMS, MODx, Nethouse, NGCMS, okis.ru, Setup.ru, Textpattern, TYPO3, uCoz (укоз,юкоз), uDiscuz!, Wix (викс), WordPress (вордпресс),dnevnik.ru, дневник ру и т.д.)

Как сделать версию для слабовидящих на google (гугл) сайте

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

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

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

Обычный адрес ссылки сайта  библиотеки выглядит следующим образом:  

https://sites.google.com/site/bibliotekakarasuk/


Адрес версии для слабовидящих сейчас выглядит вот так :
 

[http://finevision.ru/?hostname=sites.google.com&path=/site/bibliotekakarasuk/home]
 
 
т.е., чтобы применить это для своего сайта, вычленим первую, выделенную жирным часть адреса, во вторую вставим вторую часть  адреса главной страницы (покажу на примере сайта Детской библиотеки)
 
https://sites.google.com/site/detbibkrs2/
 
Получится адрес ссылки версии сайта для слабовидящих:
 
http://finevision.ru/?hostname=sites.google.com&path=/site/detbibkrs2/
 
 
При установке данной версии имеется возможность увеличение и уменьшение шрифта, переключение фона сайта на черный, белый и синий цвета, также есть кнопка отключения картинок.
Еще один положительный момент. Если с созданной версии вашего сайта для слабовидящих заходить по ссылкам (расположенных на сайте) то электронный ресурс сразу приобретает форму версии для слабовидящих. Чо меня очень порадовало.

 

 

Версия для слабовидящих на сайтах Joomla! 2.5


Необходимо получить код баннера на http://finevision.ru/


Заходим в админку сайта

Переходим в менеджер шаблонов


Выбираем шаблон

Выбираем “Изменить шаблон главной страницы”

Вставляем html-код баннера

Сохраняем


Вот так это выглядит на сайте


Пользуемся!!!

 
 
Версия сайта для слабовидящих на joomla 1.0 (джумла)
 

Получить HTML-код баннера на http://finevision.ru/

Зайти в панель администрирования сайта, в панели выбрать «Расширения», «Менеджер шаблонов»

6

Далее нажать на активный шаблон (помечен звездочкой)

7

Нажимаем «Редактировать HTML»

8

Перед нами HTML код шаблона.

Вставить код баннера можно практически в любом месте. Только если его вставить баннер с position: fixed в область <head>, то он может у людей с низким разрешением оказаться позади меню и заголовка.
Поэтому лучше его вставить в область

1
<div id="footer">

которая находится почти в самом низу шаблона (на картинке подчеркнута)

13

После чего нажимаем «Сохранить»

10

И еще раз «Сохранить»

11

Смотрим сайт

 

 

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

 
Каждое образовательное учреждение в соответствии с ГОСТ Р 52872-2007 "Интернет-ресурсы. Требования доступности для инвалидов по зрению"должно иметь  версию официального сайта для слабовидящих. С этим пришлось столкнуться и мне. Сайт колледжа в котором работаю существует достаточно давно и внести изменения в сайт проблематично.
Благодарен Ю.А. Винницкому, который в посте Версия сайта для слабовидящих. Используем finevision.ru на образовательном портале поделился сообщением о возможности реализации на сайте образовательной организации версии сайта для слабовидящих.

Сайт колледжа создан на платформе UCOZ (укоз,юкоз), Возможно пользователям сайтов на этой платформе будет полезна информация о встраивании кнопки.

1. Переходим на сайт Finevision

 Рекомендуется воспользоваться инструктивными материалами на сайте.

2. Получаем код для встраивания кнопки на сайт образовательной организации. Для этого достаточно ввести адрес сайта ОУ и кликнуть по кнопке "Получить код":

 
3. Несколько версий оформления кнопки и код для встраивания получены. Я выбрал выделенный красным цветом код:
 
Далее, пользуясь рекомендациями с сайта, попробовал несколько способов добавления кнопки. Попробовал добавить пункт меню, но результат оказался нулевым, затем воспользовался контейнером для добавления баннеров и добавил код. Результат оказался положительным, но главная страничка сайта в этом случае выпадала. А ведь именно она и является первоочередной точкой, с которой и начинают работать с материалом сайта посетители.

4. В редакторе страниц админской панели сайта открыл содержимое главной странички. Код добавил сразу, как начинается тело документа. На скриншоте выделено красным. Обозначил для информации в будущем содержимое интегрированного кода, обозначив его текстовым комментарием.


 
 5. Остаётся только посмотреть на то, как выгладит сайт с новым приобретением:
 
 
 
И результаты работы кнопки:
 
 
Все кнопки работают: масштабирование, выбор цвета, включение и выключение графики и др.

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

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

Успешной работы!
 

 

Для сайтов на jimdo

Получите код баннера на http://finevision.ru и скопируйте его буфер обмена (выделить и нажать ctrl + c или правой кнопкой мыши копировать)

В панели управления сайтом, необходимо перейти в шаблоны и сверху выбрать собственный шаблон.

После чего откроется редактор шаблона.

Найдите строчку

1
<div id="header">

Установите курсор на конце строчки и нажмите «Enter»

И в получившейся пустой строчке вставьте полученный код баннера.

вставка

После чего нажмите сохранить

 

Инструкция для создания версии для слабовидящих на Jimdo

1) Получение кода баннера на http://finevision.ru.

2) Копирование ссылки (Ctrl+ins). 

3) Чтобы вставить баннер необходимо выполнить следующие действия: Редактирование сайта – Шаблоны – Собственный шаблон.

 
 

4) Найти строчку <div id="header"> (или любой другой раздел на данной странице).

Установите курсор на конце строчки и нажмите «Enter». 

И в получившейся пустой строчке вставьте полученный код баннера.

 

5) Редактирование вставки баннера:

<div id="fvb" style="z- index:99;background:#fff;position:fixed; right:0;top:0;border:2px  solid #000;">  Position –позволяет задать позицию на страницу в разделе <div id="header">. Атрибут «absolute» -   Указывает, что элемент абсолютно позиционирован. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.  Атрибут «left»- задает отступ от левой границы, «top» - сверху. «Right» - справа, «bottom» - снизу, «border» - задает рамку.  Пример:<div id="fvb" style="display:block; background: #fff; position: absolute; left:10; top:60;border:2px solid #000;">         Результат: 
 

6) Изменение размера баннера:  " width = " " – ширина, height= " " – высота.

Пример: <img src="http://finevision.ru/static/banner2.jpg"

width="115" height="90" alt="" /></a>

Задано ширина 115 px, высота – 90 рх.

7) Для вставки картинки (шапки сайта) можно использовать тег <scr> с атрибутами width=" " (ширина),  height=" " (высота).

Пример:   <imgsrc="https://pp.vk.me/c633726/v633726945

/1b47e/3QS8bqW9b9c.jpg" width="800"  height= "220"

vspace="0" alt="" />

               8) Аналогично можно вставить баннер в любом из разделов (тегов), изменяя атрибуты.

 

Инструкция по созданию версии сайта для слабовидящих на сайтах  в системе blogger.

1.     Зайдите на сайт http://finevision.ru

Введите адрес вашего сайта, на который вы хотите поместить ссылку для перехода в режим для слабовидящих, нажмите “Получить код для вставки” и скопируйте код:

 

01.jpg

2. Зайдите на сайт blogger.com под своим логином в раздел редактирования “Дизайн”. В зависимости от вашего дизайна вам будет предложено слева или справа “Добавить гаджет”:

02.jpg

 

3. Выберите гаджет: HTML/JavaScript:

03.jpg

 

4. Вставьте в окно “Содержание” код, сгенерированный сайтом finevision.ru, а поле “Название” не заполняйте.

04.jpg

 

5. Сохраните гаджет, затем сохраните расположение в разделе Дизайн (кнопка в правом верхнем углу). Теперь можете посмотреть свой сайт. Если вас не устраивает место расположения ссылки, то вернитесь в раздел редактирования дизайна и перетащите мышкой этот гаджет на нужное место. На моем сайте ссылка выглядит так:

05.jpg

 

И этот же сайт в режиме для слабовидящих, который удобно редактировать: включить картинки, увеличить/уменьшить шрифт и интервалы между строк, изменить цвет фона:

06.jpg


 

 

Инструкция для создания версии сайта для слабовидящих в конструкторе сайтов для школ г. Томска

Вот ссылка со светло-желтым текстом, вместо gim2.tomsk.ru вставьте адрес своей школы, при желании можете поменять цвет меняя значение FFFF90

1
<h2><a href="http://finevision.ru/?domain=gim2.tomsk.ru"><font color="#FFFF90">Версия для слабовидящих</font></a></h2>

Откройте редактор сайта и перейдите к добавлению раздела.
Путь к разделу может быть любым, например finevision,
а в заголовок раздела поставьте код выше (не забудьте заменить адрес, на адрес своей школы) и нажимаем добавить раздел.

tomsk1

После чего раздел появится в списке (не пугайтесь светло-желтого цвета), этот раздел необходимо перенести на первое место.

 

Версия для слабовидящих в конструкторе setup.ru

Предполагается, что у вас самый дешевый тариф, без возможности вставки HTML-кода

  1. Получаем ссылку (не баннер) на http://finevision.ru
  2. Заходим в панель администрирования сайта и нажимаем редактировать
  3. Нажимаем изменить меню, и далее добавить новый пункт меню
  4. В верхнее поле пишем «Версия сайта для слабовидящих», в нижнее вставляем полученную ссылку
    1
  5. Переносим пункт меню в самый вверх
  6. Нажимаем сохранить
  7. Нажимаем опубликовать

 

Вкрсия для слабовидящих для сайтов на jimdo (джимдо,жимдо) Если не получается по этой инструкции то посмотрите вариант 2 Получите код баннера на http://finevision.ru и скопируйте его буфер обмена (выделить и нажать ctrl + c или правой кнопкой мыши копировать) В панели управления сайтом, необходимо перейти в шаблоны и сверху выбрать собственный шаблон. После чего откроется редактор шаблона. Найдите строчку
    <div id="header">
Установите курсор на конце строчки и нажмите "Enter" И в получившейся пустой строчке вставьте полученный код баннера. вставка После чего нажмите сохранить Версия для слабовидящих drupal друпал http://public.finevision.ru/wp-content/uploads/2016/02/instrukciya_finevision.pdf Версия для слабовидящих dnevnik.ru дневник ру