Версия для слабовидящих — бесплатно!

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

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

Установка скрипта достаточно простая:

  1. Качаем архив со скриптом версии для слабовидящих.
  2. На все страницы сайта перед тегом </hеad> вставляем:

    <script type=’text/javascript’ src=’http://jikaka.ru/eye/special.js’></script>, где — jikaka.ru меняем на свой сайт.

  3. Меняем в файле special.js пути к файлам vi.css (в 2х местах), к info.mp3 и к eye.png.
  4. Заливаем файлы в корень в папку eye.
  5. Проверяем и тестируем на сайте.

Данная версия для слабовидящих является универсальной для любого сайта. Стили можно настроить под себя любимого.

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

Пользуйтесь! Да прибудет с вами сила джедая!

UPDATE: на сайте примере другая версия скрипта…

Просмотров: 35 959

Related Posts

70 Comments

  • попробовал ваш способ, ничего не получилось, скрипт поставил в шапку но кнопка (глаз) так и не появилась, может чего не так? или расчитывая на продвинутых пользователей вы просто не прописывали кнопку?

    • А что консоль говорит? Может быть до глаза указан неверный путь?
      Есть, где в живую посмотреть?

  • Я вставил его на сайт. Огромное спасибо за скрипт. Все работает. Единственное что правил — кавычки тега type и src в пункте 2.

    • Спасибо, поправил в описании. Это редактор от вордпресса сам их таким образом выводит.

      • спасибо все работает, на ipnk.basnet.by немного пришлось помучится, а так все получилось! единственное менял пути
        в , где — jikaka.ru меняем на свой сайт.
        ‘ поменял на » и путь получился

  • Вставил скрипт на сайт — ничего не появилось. Кнопку надо самому добавлять? Если можно, покажите код примера (Тот пример что есть в описании не понятен).

    • Сергей, здравствуйте! В описании была ссылка на сайт библиотек Пушкина, где раньше использовалась данная версия для слабовидящих, сейчас там более интересная версия используется. В описании скорректировал ссылку на ресурс, где используется эта версия. Можете посмотреть код через инспектор.

  • $SITE_NAME$ — $MODULE_NAME$

    Что не так?

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

    • кодировку файлов проверяйте

      • Какая кодировка должна быть и как ее изменить?

      • Поменял на Юникод и UTF-8 так скрипт вобще пропал, в смыле на странице сайта не отображается картинка с глазом

        • так нужно использовать кодировку самого сайта, чтобы одинаковой была вместе с файлами скрипта

  • Версию для слабовидящих вставила на сайт фронтпейдж, все работаетЮ иконка отображается, но только в браузере гугл фром, в яндексе, в интернет эксплорер ее не видно, что сделали не так?

    • Версию для слабовидящих вставила на сайт фронтпейдж, все работает иконка отображается, но только в браузере гуглфром, в яндексе, в интернет эксплорер ее не видно, что сделали не так?

      • по вашей ссылке вроде же все работает))

  • Версию для слабовидящих вставила на сайт фронтпейдж, все работает иконка отображается, но только в браузере гуглфром, в яндексе, в интернет эксплорер ее не видно, что сделали не так?

    • по вашей ссылке вроде же все работает))

  • jikaka, спасибо, спасибище тебе агромадное! Всё работает!!!!!

  • Добрый день !
    Иконка отображается в браузере Google Chrome и Opera, в Yandex и Internet Explorer ее не видно, что сделал не так?
    Спасибо!

  • Здравствуйте, jikaka. Вставила скрипт, как в описании, но картинка глаза не появилась. Сайт на Битриксе. Может в этом проблема?

  • Именно такой он и есть. — два раза после названия ru.ru.

    • Проверяйте настройки сайт)

  • Спасибо Вам огромное! Все работает! Мы не программисты и не верстальщики, но с Вашей помощью справились и даже попытались изменить вид глазика)))

  • Спасибо тебе огромное! Всё работает, правда чем больше шрифт тем всё кривее, но я так понимаю это норма

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

    Благодарю!

  • Подскажите пожалуйста конкретней, что делать? Где поменять кодировку, что прописать и где?

    ..»так нужно использовать кодировку самого сайта, чтобы одинаковой была вместе с файлами скрипта»…

  • .. очень извиняюсь, мои вопросы два последних. Я их решила, пересохранив файл special.js в нотепаде UTF-8 для BOOM.

  • Добрый день!
    Как можно опустить полоску настройки версии для слабовидящих немного вниз? У нас она перекрывается другой обязательной полосой — Навигатор по гос.сайтам
    Спасибо!

    • через стили попробуйте

  • ни фига не работает((((((((((((( тестирую на Дэнвере.

  • Подскажите, можно ли поправить, что бы само меню не расползалось и не менялось ни как в размерах, оставалось такое же и возможно ли сделать кнопку в определенной странице сайта, а не привязывать внизу странице?

  • Вторая часть вопроса не актуальна, а вот как сделать чтобы само меню не меняла свои размеры и параметры остается открытым, help

    • дополнять скрипт надо

  • Спасибо! Всё работает идеально… Почти.. При переходе на другие страницы сайта происходит сброс настройки вида для СВ. Приходится снова менять размер или стиль отображения. как это починить?

    • переделывать надо скрипт

  • Короче, каракули никак не пропадают! везде преобразовал в UTF8 с БОМ и БЕЗ БОМ, пробовал кириллицу и АНСИ , попробовал все кодировки что есть , никак Каракули и всё

    • посмотреть бы в живую

  • Огромное спасибо. все работает. только кавычки одинарные а двойные заменить пришлось

  • Все сделал как написано, на сайте (битрикс) только значек появился, а реакции от нажатия нет….

  • Здравствуйте, вместо меню выскакивают вопросительные знаки. И как изменить цвет самого глаза. Спасибо

    • вопросительные знаки — кодировка
      цвет глаза — фотошоп

  • Благодарствую. Все работает:)

  • Доброго дня подскажите как поставить саму кнопку в нужный мне блок

  • Ваш веб-блог действительно подает
    материал в очень простой и понятной форме;) Раньше мне
    казалось, что эта тема так и останется для меня недоступной) Мне казалось, что она слишком сложная и непонятная;) С нетерпением жду следующего вашего поста)

  • Привет! Все по инструкции сделала но почему то тишина( сайт startbest.ru

  • Вот понять не могу, вроде автор красава, накатал такой скрипт. Но все через «Ж». Зачем использовать нестандартные кавычки? Почему нельзя сделать нормальный файл в кодировке utf-8? Общепринятый стандарт. Как насчет нормальной табуляции строк кода? Изображение оптимизировать ничего не стоит, экономия больше 50% веса.

    Автор молодец, продолжай пилить полезные скрипты. Но стоит подтянуть качество реализации перед публикацией)

    • Спасибо за отзыв, но это делалось несколько лет назад))
      Сейчас этот скрипт даже рекомендовать не буду…

  • Добрый день. Сделал все по инструкции, но почему-то скрипт не работает.
    https://ugmedtrans.ru/

  • Помогите!!! Очень надо установить версию для слабовидящих на сайт:
    http://sites.google.com/
    Не разбираюсь в этом…(((

  • Здравствуйте! Спасибо за скрипт!
    Делаю сайт на Tilda.cc, доступа к хостингу нету, поэтому надо прописывать все скрипты в теле страницы. Не появляется панель управления к сожалению.

    Не сталкивались с Тильдой?

    • Терпеть не могу конструкторы)))

    • Надо в стилях внести правки, т.е. просто поковыряться…

  • Здравствуйте!
    Подскажите на дэмо сайте другой скрипт стоит, или просто доработанный?
    Просто там гораздо больше возможностей.

    • Уже другая версия скрипта стоит…

  • Здравствуйте! Не работает ссылка на скачивание архива. Пожалуйста исправьте, очень нужно. За ранее спасибо.

  • как сделать так чтоб все кнопки скрипта находились в одном DIV как на https://rambov-lib.ru/

    • На сайте примере используется другая версия скрипта.

Добавить комментарий для Эдуард Отменить ответ

Hey, so you decided to leave a comment! That's great. Just fill in the required fields and hit submit. Note that your comment will need to be reviewed before its published.