README

Панель доступности («версия для слабовидящих») для Yii2 CMS.

Набор инструментов — привычный для российских «версий для слабовидящих»: масштаб шрифта, цветовые схемы, режим изображений, интервалы, озвучивание.

Что умеет

Инструмент	Ключ	Реализация
Размер шрифта до 200 %	`fontScale`	корневой `font-size` или CSS `zoom`
Цветовые схемы, 5 штук + обычная	`scheme`	переопределение токенов + силовой слой
Изображения: ч/б или скрыть	`images`	`filter` / `visibility`
Начертание: без засечек / с засечками / для дислексии	`fontFamily`	подмена `font-family`, OpenDyslexic в комплекте
Межбуквенный интервал, 3 ступени	`letterSpacing`
Междустрочный интервал, 3 ступени	`lineHeight`
Повышенный контраст	`highContrast`	`filter: contrast()`
Выделение ссылок	`highlightLinks`	`outline`
Выделение заголовков	`highlightTitles`	`outline`
Большой курсор	`bigCursor`	SVG-курсор 48 px
Остановить анимацию	`stopAnimations`	нулевая длительность
Линейка чтения	`readingGuide`	наложение по `pointermove`
Отключение видео и карт	`blockEmbeds`	замена `iframe` заглушкой
Озвучивание	`speech`	`SpeechSynthesis` с нарезкой на реплики

Установка

composer require besnovatyj/yii2-cms-accessibility
php yii Modman/modules/install Accessibility

Ассеты собираются отдельно — в пакете лежат исходники, а не готовый бандл:

cd vendor/besnovatyj/yii2-cms-accessibility/assets
npm install
npm run build

Получаются assets/dist/js/accessibility.js и assets/dist/css/panel.css. Проверка типов — npm run typecheck (esbuild типы не проверяет, это отдельный шаг).

Использование

Панель ставится один раз в макет темы, обычно перед </body>:

<?= \Besnovatyj\Accessibility\widgets\AccessibilityPanel::widget() ?>

Кнопка вызова — где угодно и сколько угодно раз:

<?= \Besnovatyj\Accessibility\widgets\AccessibilityButton::widget() ?>

Кнопка не позиционируется пакетом: где напечатали, там и будет. Оформление переопределяется как у обычной кнопки:

<?= \Besnovatyj\Accessibility\widgets\AccessibilityButton::widget([
    'label'   => 'Версия для слабовидящих',
    'icon'    => false,
    'options' => ['class' => 'btn btn-outline-primary'],
]) ?>

Ограничить набор инструментов можно точечно, не трогая настройки модуля:

<?= \Besnovatyj\Accessibility\widgets\AccessibilityPanel::widget([
    'controls' => ['fontScale', 'scheme', 'images', 'speech'],
]) ?>

Виджеты можно ставить в макет сразу после composer require, не дожидаясь включения модуля: пока модуль не подключён, оба выводят пустую строку и пишут одно предупреждение в лог за запрос. Ни ассеты, ни переводы при этом не трогаются, поэтому страница не падает ни на ненайденном sourcePath, ни на незарегистрированной категории переводов.

Настройки

Редактируются через модуль Config, категория Accessibility:

Настройка	Смысл
Способ масштабирования шрифта	`root` или `zoom`, см. ниже
Максимальный масштаб шрифта	множитель, по умолчанию `2`
Язык синтезатора речи	BCP-47; пусто — язык приложения
Скорость речи	0.5…2
Озвучивать изменения настроек	панель произносит название инструмента
Доступные настройки	ключи через запятую; пусто — все

Три места, где легко ошибиться

Масштаб шрифта и плавная типографика. По умолчанию стоит zoom: он тянет всё, включая vw-слагаемое в clamp(), то есть даёт честные 200 % на любой вёрстке. Саму панель он тоже масштабирует — она выведена из-под него обратным множителем. Режим root меняет корневой font-size: семантически чище и уважает настройки браузера, но на «плавных» шкалах вида clamp(rem, vw, rem) масштабируется только rem-часть, и до 200 % текст не дотягивает. Ставьте root, если типографика темы целиком на rem.

Cookie читается мимо Yii. Настройки хранятся в cookie bes_a11y, потому что они нужны серверу: панель печатается уже в текущем состоянии, и обычная версия сайта не мигает при каждой загрузке. Cookie пишет браузерный скрипт, подписать её HMAC он не может, поэтому AccessibilityState читает $_COOKIE напрямую в обход enableCookieValidation и валидирует значение сам.

Скрипт грузится в <head>. Не перед </body>. Настройки обязаны примениться до первой отрисовки. Цена — около 8 КБ блокирующего скрипта.

Точки расширения

html.bes-a11y — класс на корневом элементе, когда версия включена. html[data-bes-a11y-scheme="…"] — идентификатор активной схемы. --bes-a11y-font-scale — текущий множитель шрифта. --bes-a11y-fg / --bes-a11y-bg / --bes-a11y-accent — цвета активной схемы.

Тема может доводить по ним собственные величины, не завязанные на rem.

Новый инструмент — это файл в assets/src/ts/features/, реализующий интерфейс Feature, и одна строка в списке AccessibilityController.features. Порядок в этом списке задаёт порядок правил в итоговом CSS, то есть порядок каскада.

Лицензия

Код — MIT.

Шрифт OpenDyslexic 0.940 (Abbie Gonzalez) — SIL Open Font License 1.1, текст в assets/src/fonts/OFL.txt. OFL требует передавать лицензию вместе с файлами шрифта, поэтому OFL.txt из пакета удалять нельзя. Подробности — в assets/src/fonts/FONTS.md.

besnovatyj / yii2-cms-accessibility

Package info

Security

Statistics