Установка виджета.

Код подключения

Вставьте строку перед закрывающим тегом </body> на всех страницах. Можно и в <head>: атрибут defer не задерживает отрисовку.

<script src="https://cdn.seoptimer.ru/v1/assist.js" data-position="right" data-statement="/accessibility" defer></script>

Виджет не использует cookies и не делает сетевых запросов после загрузки: настройки посетителя хранятся в localStorage вашего сайта.

1С-Битрикс

1. В административной части откройте «Настройки» → «Настройки продукта» → «Сайты» → «Шаблоны сайтов».
2. Откройте шаблон, который использует сайт, и перейдите на вкладку «Шаблон».
3. Вставьте код подключения перед </body> и сохраните шаблон.
4. Если подвал вынесен в файл, вставьте код в /bitrix/templates/<шаблон>/footer.php перед </body>.
5. Очистите кеш сайта и проверьте, что в правом нижнем углу появилась кнопка.

WordPress

Проще всего – плагином для вставки кода в подвал сайта, например WPCode: добавьте код подключения в поле для подвала (Footer) и сохраните.

Без плагина – в файле functions.php дочерней темы:

add_action('wp_footer', function () {
  echo '<script src="https://cdn.seoptimer.ru/v1/assist.js" data-position="right" data-statement="/accessibility/" defer></script>';
});

Если включены плагины оптимизации, которые объединяют или откладывают скрипты, исключите из обработки адрес cdn.seoptimer.ru. Иначе атрибуты data-* не будут прочитаны и виджет запустится с настройками по умолчанию.

Tilda

1. Откройте «Настройки сайта» → «Ещё» → «HTML-код для вставки внутрь HEAD».
2. Вставьте код подключения и сохраните.
3. Переопубликуйте все страницы, чтобы код появился на сайте.

Вставка своего кода в Tilda доступна на платных тарифах. Для одной страницы подойдёт блок «HTML-код» (T123).

React и Next.js

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

import Script from 'next/script';

<Script src="https://cdn.seoptimer.ru/v1/assist.js" strategy="lazyOnload" data-position="right" data-statement="/accessibility" />

Настройки

Настройки задаются атрибутами тега script.

Программный интерфейс

После загрузки доступен объект window.seoAssist: методы open(), close(), toggle(), reset(), destroy() (с версии 1.2.0), свойства state (текущие настройки) и version. Пример своей кнопки вместо стандартной:

<script src="https://cdn.seoptimer.ru/v1/assist.js" data-launcher="none" defer></script>
<button type="button" onclick="seoAssist.open()">Версия для слабовидящих</button>

Кнопка «Сбросить все настройки» и метод reset() возвращают страницу в исходное состояние: убирают стили виджета, восстанавливают размеры шрифтов сайта, возобновляют видео и анимации, которые виджет остановил, и удаляют сохранённые настройки.

Озвучивание и конфиденциальность

Озвучивание работает через синтез речи браузера (Web Speech API). Голоса предоставляют браузер и операционная система. Часть голосов работает прямо на устройстве, часть – через интернет-сервис производителя браузера: в этом случае читаемый текст передаётся этому сервису по правилам производителя.

Виджет выбирает локальный русский голос, если он есть, и только при его отсутствии – сетевой. Если используется сетевой голос, панель предупреждает об этом. Сам виджет текст страницы никуда не отправляет, cookies не ставит и запросов к нашим серверам не делает.

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

Версия и обновление

Адрес https://cdn.seoptimer.ru/v1/assist.js содержит основную версию (v1). Исправления и новые возможности внутри v1 публикуются по тому же адресу и доходят до посетителей без изменения кода на сайте – в пределах срока кэширования CDN. Изменения, которые могут нарушить работу существующих подключений, выйдут по новому адресу (v2), и прежний адрес продолжит работать.

Версию, которая сейчас работает на вашем сайте, показывает seoAssist.version в консоли браузера. Эта документация описывает версию 1.2.0; на CDN новая версия публикуется после проверки, поэтому какое-то время там может работать предыдущая.

Удаление

Удалите строку подключения скрипта (или модуль в CMS) – после следующей загрузки страницы виджета не будет. На устройствах посетителей останется только запись настроек в localStorage под ключом seoAssist:v1; на работу сайта она не влияет и удаляется вместе с данными сайта в браузере.

Убрать виджет без перезагрузки страницы, например в одностраничном приложении, можно методом seoAssist.destroy(): он возвращает исходные стили сайта и размеры шрифтов, возобновляет остановленные видео и анимации, снимает обработчики и удаляет кнопку и панель. Вызов seoAssist.destroy({ forget: true }) дополнительно удаляет сохранённые настройки посетителя.

Модальные окна сайта

Когда на сайте открыто модальное окно (элемент dialog или блок с aria-modal), остальная страница становится недоступной для клика и клавиатуры. Чтобы панель оставалась доступной, виджет на это время переносится внутрь открытого окна и возвращается обратно после его закрытия. Клавиша Escape при открытой панели закрывает только панель, а окно сайта остаётся открытым.

Если модальное окно сайта сдвигается свойством transform, кнопка виджета на это время позиционируется относительно окна. Отключить перенос можно атрибутом data-modals="off".

Политика безопасности (CSP)

Разрешите загрузку скрипта: script-src https://cdn.seoptimer.ru. Стили виджет подключает через adoptedStyleSheets, поэтому в Chrome 73+, Firefox 101+ и Safari 16.4+ разрешение 'unsafe-inline' для стилей не нужно. В старых браузерах виджет добавляет элемент style, и тогда нужно style-src 'unsafe-inline'.

Вес и производительность

Скрипт загружается с атрибутом defer и не блокирует отрисовку. Пока посетитель ничего не включил, виджет только добавляет кнопку. Время запуска на вашей странице можно посмотреть в инструментах разработчика: замер seo-assist:mount на вкладке Performance.

Что виджет не делает

• Не исправляет ошибки доступности сайта и не делает его соответствующим ГОСТ Р 52872-2019 или постановлению № 102. Для этого нужны исправления в коде – их показывает проверка.
• Не останавливает карусели, которые переключаются таймером в JavaScript: такие слайдеры должны иметь собственную кнопку паузы.
• Не озвучивает текст в браузерах без синтеза речи; в этом случае в панели вместо кнопок озвучивания показано сообщение, что функция недоступна.

Проверить сайт