Добрый день. Я занимаюсь web-разработкой и почти всем, что с этим связано.

MODX — Версия для слабовидящих

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

Что понадобится

Принцип работы

Здесь всё очень просто. Когда человек заходит на сайт, он может переключиться на версию для слабовидящих, перейдя по ссылке (например, site.ru/set-theme/vision). По адресу этой ссылки находится ресурс, на котором вызывается сниппет, записывающий в cookies название версии сайта (у меня это — vision). Затем происходит перенаправление на главную страницу. Когда человек в следующий раз зайдёт на любую страницу, на ней вызывается сниппет, который в зависимости от значения, записанного нами ранее в cookies, отдаёт те или иные файлы стилей.

Если человек хочет вернуться на основную версию сайта, он опять может перейти по специальной ссылке (например, site.ru/set-theme/reset). После этого произойдёт перенаправление на главную, где наш сниппет опять вернёт необходимые файлы стилей.

Switch

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

Файл стилей

При разработке оформления сайта для слабовидящих необходимо придерживаться ГОСТ 52872-2012 , но для начала можно просто скопировать текущий файл стилей и сделать оформление более контрастным, а также увеличить кегль и размер элементов. В моём случае я взял файл стилей основной версии (например, default.css) и скопировал его в новый файл (и назвал vision.css).

Чанк Head

Обычно чанк для вывода head-раздела я называю Head. Подключаю файлы стилей я данным образом:

<link rel="stylesheet" media="all" href="[[!switch?
    &get=`[[!quasiTheme]]`
    &c1=`vision`
    &do1=`vision.css`
    &default=`default.css`
]]" />

Если в cookies браузера установлена тема vision, то подключается vision.css, в любом другом случае — default.css.

Сниппеты

quasiTheme

Данный незамысловатый сниппет выводит название темы (в моём случае я использовал vision для версии для слабовидящих и любое другое (default или пустое значение) — для основной версии).

return $modx->getOption('theme', $_SESSION, 'default');

quasiThemeControl

Данный сниппет вызывается на ресурсах для смены оформления и записывает в cookies название темы оформления.

$theme = $modx->getOption('set', $scriptProperties, false);
$referer = $modx->getOption('HTTP_REFERER', $_SERVER, '');
if ($theme) {
    $_SESSION['theme'] = $theme;
    $modx->sendRedirect($referer);
}

Ресурсы

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

Vision

Здесь вызывается сниппет quasiThemeControl для установки темы для слабовидящих. Псевдоним данного ресурса ([[*alias]]) в моём случае — vision.

[[!quasiThemeControl? &set=`[[*alias]]`]]

Default

Здесь вызывается сниппет quasiThemeControl для установки основной темы. Псевдоним данного ресурса ([[*alias]]) в моём случае — default.

[[!quasiThemeControl? &set=`[[*alias]]`]]

Примеры

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

Комментарии