Какова «лучшая практика» для изменения размера текста с помощью Javascript?

Question

Какова «лучшая практика» (доступность / удобство использования) для изменения размера текста с помощью Javascript?

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

Он также устанавливает файл cookie, а затем при загрузке страницы - onLoad () - он читает файл cookie и повторно применяет тег класса тела, если это необходимо.

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

Итак, по сути, мое решение разумно или есть лучший способ?

Адам

Answer 1

Что такое «лучшая практика» (доступность / юзабилити) для изменение размера текста с помощью Javascript?

Лучшая практика - «Не надо».

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

Попытки дублировать эту функциональность редко дают размеры шрифта, которые нужны пользователям (и обычно в конечном итоге предлагают атомный, микроскопический и крошечный выбор). Да, некоторым пользователям нужен текст в 72pt (или больше).

Встроенные элементы управления браузером работают на большинстве, если не на всех сайтах. Вам не нужно использовать холст, дублируя их.

Answer 2

Ваше решение звучит хорошо, с одним дополнением: вы можете прочитать cookie при загрузке страницы и добавить класс к элементу body во время генерации разметки. Большинство серверных языков поддерживают это: PHP, JSP, RoR и т. Д. Кроме этого, у вас есть твердый раствор.

Answer 3

Какова «лучшая практика» (доступность / удобство использования) для изменения размера текста с помощью Javascript?

"Web Accessibility Gone Wild" подводит итог довольно хорошо imho:

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

и

Все браузеры позволяют изменять размер или масштабирование содержимого страницы - зачем дублировать эту функциональность браузера?

Также Размер шрифта :

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

Однако, если у вас есть действительная причина - не стесняйтесь игнорировать это.

Answer 4

Добавление стиля CSS в HTML с помощью JavaScript

Я думаю, что ваше предложение - отличный способ сделать это.

Это означает, что вы можете гибко добавлять класс CSS к любому подэлементу, а не к телу, чтобы при желании вы могли изменить размер текста определенного элемента.

Чтение куки при загрузке страницы

Чтобы обойти проблему, которую вы описываете, я бы искал cookie на вашем языке сервера (php / asp / ruby ​​и т. Д.) И отображал содержимое, как указано cookie при загрузке страницы.

В PHP ваше определение класса CSS может выглядеть так:

echo '<div class=\"'.($_COOKIE['text_size']!='' ? $_COOKIE['text_size'] : 'normal'). '\">';