Как добавить версию для слабовидящих на сайт на Tilda в 2025 году

3. В настройках сайта во вкладке «Еще» → «HTML-код для вставки внутрь head» добавила код для стиля кнопки:
<style>
/* Новые стили для кнопки */
.vision-btn {
position: fixed;
bottom: 20px;
left: 30px; /* Было 20px, добавили +10px вправо */
padding: 10px 15px;
font-size: 16px;
font-weight: bold; /* Сделали шрифт жирным */
background: yellow; /* Желтый фон */
color: black; /* Черный текст */
border: none;
cursor: pointer;
z-index: 9999;
border-radius: 5px;
}

/* Стили для режима слабовидящих */
.vision-mode {
background: black !important;
color: yellow !important;
}

.vision-mode * {
font-size: 22px !important;
color: yellow !important;
}
</style>

Код для блока «Т-123»:
<div id="visionWrapper">
<button id="visionToggle" class="vision-btn">Версия для слабовидящих</button>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
const button = document.getElementById("visionToggle");
button.addEventListener("click", function() {
document.body.classList.toggle("vision-mode");
});
});
</script>

Вы великолепны! Сохраняем, публикуем все страницы и проверяем в браузере после сброса кэша или со страницы в режиме инкогнито)

Мои клиенты — компания по безопасности труда ‭«Рычаги безопасности» (это актуально и для медицинских учреждений) обратились с просьбой создать адаптированную версию сайта для людей с ограниченными возможностями зрения.
Это связано с требованиями, изложенными в ГОСТ Р 52872-2019, который предписывает всем государственным организациям, а также медицинским и образовательным учреждениям, предоставить на своих веб-ресурсах версии, доступные для слабовидящих. Нарушение этих требований может повлечь административную и уголовную ответственность за дискриминацию людей с нарушениями зрения.
Я поискала информацию на просторах интернета, но тот код что предоставляли ранее не заработал у меня, тогда я попробовала собрать его сама, с третьей попытки все удалось :)

Дарю вам рабочую схему в три шага:

1. Я создала отдельную страницу и туда перенесла шапку сайта, далее через настройки сайта в Тильде закрепила эту страницу как шапку сайта (Настройки сайта → Шапка и подвал → выбрать страницу с шапкой, сохранить и опубликовать все страницы)

Почему именно так – этот способ поможет закрепить за всеми страницами сайта единую шапку и разместив на ней этот код вы закрепляете присутствие кнопки на каждой странице сайта.