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

Question

[tester_toster]

Есть стандартный сайт на php.
Интересует правильная реализация версии для слабовидящих.
Есть кнопка, при нажатии на которую сайт переходит в версию для слабовидящих.
Плюс возможность изменения размеров шрифтов и цветовой схемы.
Как вижу я: размеры шрифта в em. При нажатии на кнопку перехода. В body записывается определенный класс + дополнительные классы 2x, 4x, 6x, и.т.д... Для размера шрифтов, увеличивая главный - увеличиваются остальные. Я бы хранил данные в сессии и при переходе между страницами дописывал класс при генерации страницы, думал о js, но тогда страница изначально будет грузится нормальной, а потом уже меняться. Т.е если перешли с get параметром - записали, еще раз - удалили. Но размер шрифтов, как лучше его сохранять.
В общем интересует правильная реализация, можно конкретные примеры, или свой опыт. Буду благодарен за любую информацию.

Answer 1

[Сергей delphinpro]

Все размеры шрифтов в 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 - класс добавится раньше чем она отрендерится, т.е. будет отображена сразу правильно.

Answer 2

[Алексей Алексин]

Практически на любом сайте, размер шрифта находится в css файле, можно путь хранить в переменной и сделать еще один css с нужным размером шрифта, при нажатии кнопки версия для слабовидящих - заносить какую-нибудь переменную в сессию, и подключать нужную css в зависимости от состояния той переменной. Также если заносить данные в куки, юзеру не придется каждый раз переключаться, т.к. будем запоминать его выбор. Делается на php, js использовать не придется.
Решение в лоб, с удовольствием посмотрю на другие варианты, т.к. больше ничего в голову не приходит :)

Answer 3

[Алекс Глебов]

я делал на js
для страницы использовал "прелоадер"
body {opacity 0;}
при window.onload показывал боди

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

finevision.ru
получилась копия этого плагина