Версия сайта для слабовидящих людей (пошаговая инструкция)

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

Основные функции версии для слабовидящих включают:

• Изменение темы сайта: светлая, темная, контрастная.
• Выбор размера шрифта: обычный, увеличенный, крупный.
• Управление изображениями: возможность скрыть или показать картинки, чтобы снизить нагрузку на зрение или ускорить загрузку страниц.
• Возврат к обычному виду сайта: кнопка, отключающая спецрежим.

Все эти функции включаются через удобную панель, которая по умолчанию скрыта на обычной версии сайта. Ниже приведена подробная инструкция по ее реализации.

Пошаговая инструкция

Создание панели версии сайта для слабовидящих людей

Панель будет скрыта на обычной версии сайта и станет доступной только после включения режима. Вставляем следующий код панели:

<div id="spec-panel" class="hidden">
	<div class="panel-controls">
		<!-- Темы -->
		<div class="control-group">
			<strong>Цветовая схема:</strong>
			<button data-action="theme" data-value="theme-bw">Чёрно-белая</button>
			<button data-action="theme" data-value="theme-bs">Чёрно-синяя</button>
			<button data-action="theme" data-value="theme-yb">Жёлто-чёрная</button>
		</div>
		<!-- Размер шрифта -->
		<div class="control-group">
			<strong>Размер шрифта:</strong>
			<button data-action="fontSize" data-value="font-small">Мелкий</button>
			<button data-action="fontSize" data-value="font-medium">Средний</button>
			<button data-action="fontSize" data-value="font-large">Крупный</button>
		</div>
		<!-- Изображения -->
		<div class="control-group">
			<strong>Изображения:</strong>
			<button data-action="hideImages" data-value="true">Скрыть</button>
			<button data-action="hideImages" data-value="false">Показать</button>
		</div>
		<!-- Обычная версия -->
		<button id="close-spec-panel">Обычная версия сайта</button>
	</div>
</div>

Добавление кнопки для включения панели

Кнопка будет отображаться на сайте и позволять пользователю включить режим для слабовидящих людей. Вставляем следующий код кнопки:

<div class="blink-link">версия для слабовидящих людей</div>

Подключение стилей для различных тем и размеров шрифта

Создаем файл стилей spec.css со следующим кодом:

.hidden {
    display: none;
}
#spec-panel button.active {
    background: #444;
    color: #fff;
    outline: 2px solid #fff;
}
/* Темы */
.theme-bw {
    background: #fff !important;
    color: #000 !important;
}
.theme-bw img {
    filter: grayscale(100%);
}
.theme-bw [style*="background-image"] {
    filter: grayscale(100%);
}
.theme-bs {
    background: #001f3f !important;
    color: #fff !important;
}
.theme-yb {
    background: #000 !important;
    color: #ff0 !important;
}
.theme-yb .main-aside .aside-left {
    background: #000 !important;
}
/* Размеры шрифта */
.font-small  { font-size: 14px; }
.font-medium { font-size: 18px; }
.font-large  { font-size: 22px; }
/* Скрытие изображений */
.hide-images img {
    display: none !important;
}
/* кроме логотипа */
.hide-images img.site-logo {
    display: inline !important;
}

Скрипт, управляющий переключением режимов

Создаем файл скрипта spec.js со следующим кодом:

document.addEventListener("DOMContentLoaded", function() {

    const panel = document.getElementById("spec-panel");
    const openBtn = document.querySelector(".blink-link");
    const closeBtn = document.getElementById("close-spec-panel");
    const body = document.body;

    /* === Открытие панели === */
    openBtn.addEventListener("click", () => {
        panel.classList.remove("hidden");

        // Если спец-версия включается впервые — ставим кнопку по умолчанию
        if (!localStorage.getItem("theme")) {
            localStorage.setItem("theme", "theme-bw");
            body.classList.add("theme-bw");

            document
                .querySelector('[data-action="theme"][data-value="theme-bw"]')
                ?.classList.add("active");
        }

        if (!localStorage.getItem("fontSize")) {
            localStorage.setItem("fontSize", "font-small");
            body.classList.add("font-small");

            document
                .querySelector('[data-action="fontSize"][data-value="font-small"]')
                ?.classList.add("active");
        }

        // Показывать панель всегда
        localStorage.setItem("panelOpen", "true");
    });

    /* === Закрытие панели + сброс спец-версии === */
    closeBtn.addEventListener("click", () => {
        panel.classList.add("hidden");

        // Удаляем настройки
        localStorage.removeItem("theme");
        localStorage.removeItem("fontSize");
        localStorage.removeItem("hideImages");
        localStorage.removeItem("panelOpen");

        // Сбрасываем классы на body
        body.className = "";

        // Убираем активные кнопки
        document.querySelectorAll("#spec-panel button.active")
            .forEach(btn => btn.classList.remove("active"));
    });

    /* === Логика всех кнопок панели === */
    document.querySelectorAll("#spec-panel [data-action]").forEach(btn => {
        btn.addEventListener("click", () => {

            const action = btn.getAttribute("data-action");
            const value = btn.getAttribute("data-value");

            localStorage.setItem("panelOpen", "true");

            // Убираем активность у кнопок той же группы
            let groupButtons = btn.closest(".control-group").querySelectorAll("button");
            groupButtons.forEach(b => b.classList.remove("active"));

            // Делаем выбранную кнопку активной
            btn.classList.add("active");

            /* === Применение темы === */
            if (action === "theme") {
                body.classList.remove("theme-bw", "theme-bs", "theme-yb");
                body.classList.add(value);
                localStorage.setItem("theme", value);
            }

            /* === Применение размера шрифта === */
            if (action === "fontSize") {
                body.classList.remove("font-small", "font-medium", "font-large");
                body.classList.add(value);
                localStorage.setItem("fontSize", value);
            }

            /* === Скрытие изображений === */
            if (action === "hideImages") {
                if (value === "true") {
                    body.classList.add("hide-images");
                } else {
                    body.classList.remove("hide-images");
                }
                localStorage.setItem("hideImages", value);
            }
        });
    });

    /* === ВОССТАНОВЛЕНИЕ СОХРАНЁННЫХ НАСТРОЕК === */

    const savedTheme = localStorage.getItem("theme");
    const savedFontSize = localStorage.getItem("fontSize");
    const savedHideImages = localStorage.getItem("hideImages");
    const panelOpen = localStorage.getItem("panelOpen");

    // Восстановление темы
    if (savedTheme) {
        body.classList.add(savedTheme);

        document
            .querySelector(`[data-action="theme"][data-value="${savedTheme}"]`)
            ?.classList.add("active");
    }

    // Восстановление размера шрифта
    if (savedFontSize) {
        body.classList.add(savedFontSize);

        document
            .querySelector(`[data-action="fontSize"][data-value="${savedFontSize}"]`)
            ?.classList.add("active");
    }

    // Восстановление скрытия изображений
    if (savedHideImages) {
        if (savedHideImages === "true") {
            body.classList.add("hide-images");
        }

        document
            .querySelector(`[data-action="hideImages"][data-value="${savedHideImages}"]`)
            ?.classList.add("active");
    }

    // Панель всегда открыта, если включена спец-версия
    if (panelOpen === "true") {
        panel.classList.remove("hidden");
    }

});

Файл стилей spec.cssподключаем в теге <head>, а файл скрипта spec.js подключаем в конце страницы, перед </body>

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

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

вернуться в раздел «Блог»