@tester_toster

Правильная реализация версии сайта для слабовидящих?

Есть стандартный сайт на php.
Интересует правильная реализация версии для слабовидящих.
Есть кнопка, при нажатии на которую сайт переходит в версию для слабовидящих.
Плюс возможность изменения размеров шрифтов и цветовой схемы.
Как вижу я: размеры шрифта в em. При нажатии на кнопку перехода. В body записывается определенный класс + дополнительные классы 2x, 4x, 6x, и.т.д... Для размера шрифтов, увеличивая главный - увеличиваются остальные. Я бы хранил данные в сессии и при переходе между страницами дописывал класс при генерации страницы, думал о js, но тогда страница изначально будет грузится нормальной, а потом уже меняться. Т.е если перешли с get параметром - записали, еще раз - удалили. Но размер шрифтов, как лучше его сохранять.
В общем интересует правильная реализация, можно конкретные примеры, или свой опыт. Буду благодарен за любую информацию.
  • Вопрос задан
  • 2378 просмотров
Решения вопроса 1
delphinpro
@delphinpro
frontend developer
Все размеры шрифтов в rem
по дефолту html font-size: 16px; (цифра для примера)
нажимаем кнопку - скрипт пишет к html класс enlarge-size1 имеющий стиль
html.enlarge-size1 { font-size: 20px; }
имеем => все шрифты увеличились относительно базового.
состояние запоминаем в localstorage
в head пишем простой скриптик
if (window.localStorage.getItem('baseFontSize') == '1') {
  document.documentElement.classList.add('enlarge-size1');
}

Всё. На бэкенде ничего менять не нужно.

За счет того, что скриптик располагается в head - класс добавится раньше чем она отрендерится, т.е. будет отображена сразу правильно.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Практически на любом сайте, размер шрифта находится в css файле, можно путь хранить в переменной и сделать еще один css с нужным размером шрифта, при нажатии кнопки версия для слабовидящих - заносить какую-нибудь переменную в сессию, и подключать нужную css в зависимости от состояния той переменной. Также если заносить данные в куки, юзеру не придется каждый раз переключаться, т.к. будем запоминать его выбор. Делается на php, js использовать не придется.
Решение в лоб, с удовольствием посмотрю на другие варианты, т.к. больше ничего в голову не приходит :)
Ответ написан
я делал на js
для страницы использовал "прелоадер"
body {opacity 0;}
при window.onload показывал боди

У меня не было шрифтов в em. Я перебирал все элементы, брал текущий шрифт и прибавлял значение из переменной. При изменении шрифта пользователем эта переменная увеличивается или уменьшается. Для хранения использовал Local Storage.
Цветовая схема менялась через классы.

finevision.ru
получилась копия этого плагина
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы