Обнаружение отключенного JavaScript: решение и альтернативы

Быстрый ответ

Для определения активен ли JavaScript на сайте, используется тег <noscript>:

<noscript><div>Для полноценного функционирования сайта, пожалуйста, включите JavaScript.</div></noscript>

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

Возможности тега '<noscript>'

Тег <noscript> — это простое решение для определения, включен ли JavaScript. Рассмотрим также другие методы, которые помогут сделать использование сайта более удобным при отключённом JavaScript.

Прогрессивное улучшение

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

Подробнее об этом расскажет наш спикер на видео

Использование CSS для управления видимостью контента

Применяйте CSS для отображения и скрытия элементов при активном и неактивном JavaScript. Покажите альтернативный контент при помощи <noscript>.

Проверка на стороне сервера

С помощью JavaScript создайте cookie и проверьте его на стороне сервера. Отсутствие cookie может указывать на то, что JavaScript отключен пользователем.

Автоматическая переадресация

В тег <noscript> можно включить <meta http-equiv="refresh"> для автоматической переадресации пользователя на статическую версию страницы.

Визуализация

Представим, что ваше веб-приложение – это футбольное поле, а JavaScript – главная звезда команды. Что произойдёт, если старший игрок не сможет принять участие в матче?

С JavaScript:   ⚽🏃💨 (Футбол + Звезда = Голы)
Без JavaScript: ⚽🚶‍♂️ (Футбол – Звезда = Сложности)

В этом случае используется «запасной флаг» (<noscript>), когда основной игрок (JavaScript) не может вступить в игру:

<noscript>
  🚩 (Флаг поднят! Главный игрок не в игре!)
</noscript>

Этот флаг виден только при отключённом JavaScript.

Сохраняем удобство пользовательского опыта

При отключённом JavaScript важно сохранить качество взаимодействия пользователя с сайтом:

Сообщения с юмором и проникновением

В <noscript> используйте остроумные и доброжелательные сообщения, чтобы поддержать интерес пользователей.

Приоритет доступности

Обеспечьте доступность вашего сайта всем пользователям, включая тех, кто не использует JavaScript.

Сбор статистических данных

Включите трекинговые пиксели в <noscript>, чтобы собирать данные о пользователях, не активировавших JavaScript на вашем сайте.

Разработка с минимальной зависимостью от JavaScript

Учитывая вероятность отключения JavaScript, следует придерживаться лучших практик:

Контент в контейнерах

Помещайте элементы, зависящие от JavaScript, внутри div-контейнеров. Это обеспечит соответствующую организацию контента при отключении скриптов.

Создание альтернатив

Подготовьте альтернативные способы отображения контента, которые не требуют JavaScript. Это особо актуально для людей с особыми потребностями.

Ненавязчивый JavaScript

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

Поддержка пользователей

Если JavaScript отключён, окажите поддержку пользователям, предложив:

Инструкции по активации

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

Дополнительные проверки

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

Информационная поддержка

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

Полезные материалы

1. <noscript>: The Noscript Element на MDN — Изучите, как эффективно использовать тег <noscript> в случаях, когда JavaScript отключен.
2. Тег noscript в HTML на W3Schools — Ознакомьтесь с руководством по использованию <noscript> в HTML при отключённом JavaScript.
3. Как определить, отключен ли JavaScript? – Stack Overflow — Обсуждение на тему выявления отключённого JavaScript и альтернативы тегу <noscript>.
4. Статьи по доступности | web.dev — Поймите значение доступности сайта, особенно при отключённом JavaScript, и научитесь создавать доступный веб-контент.
5. JavaScript – обнаружение браузера на QuirksMode — Подробное руководство по оцениванию состояния JavaScript и методам его включения/отключения для разработки надёжного механизма обнаружения.