Как уже было сказано, отдельная версия не нужна. Однако, как я заметил, многие пользователи не знают о том, что их браузер умеет зумить контент. Поэтому, где-нибудь вверху страницы можно оставить заметку вроде "чтобы увеличить шрифт, используйте
ctrl +
+ или
cmd +
+". Точную надпись можно подбирать в зависимости от браузера/OS. С цветами сложнее (см. ниже).
В тексте ниже я могу часто взаимозаменять понятия
zoomlevel и
размер экрана. Связано это с тем, что стандартный зум в браузерах реализуется примерно так: браузер рисует сайт для экрана поменьше, но отображает его на том же экране, растягивая его. В результате, сделав сайт, хорошо работающий на разных размерах экрана у вас автоматически получится сайт, хорошо работающий с разным zoomlevel.
Собственно, рекоммендации:
- Сайт должен нормально зумится стандартными средствами браузера. Для этого у сайта не должно быть вертикального скроллбара при любом zoomlevel/размере экрана (то есть он должен быть адаптивным и\или резиновым). Пара примеров того, как не надо делать:
- Отдельная мобильная версия сайта, которая грузится для мобильных браузеров. Для сильного зума она не включится. ИМХО, плохо не только с точки зрения слабовидящих, но это отдельная история. Как пример, сайт интернет-банкинга банка, которым я пользуюсь: для того, чтобы попасть на мобильную версию, которой удобно пользоваться с большим зумом, я вынужден менять user-agent для этого сайта. Это катастрофа юзабилити.
- Адаптивный сайт, мобильная версия которого включается слишком "поздно". Поясняю: есть сайт, есть большой экран, всё вмещается, всё красиво. Берём экран поменьше, сайт перестаёт вмещаться по горизонтали, появляется скроллбар. Берём экран ещё меньше, включается мобильная вёрстка, всё снова красиво. Вот "средней" ситуации быть не должно. Мобильная версия должна включаться как только большая версия сайта перестаёт вмещаться по горизонтали в экран. Пример: last.fm, откройте страницу любого исполнителя и понажимайте ctrl/cmd + +. Такого, опять же, быть не должно.
- CSS должен использоваться только для дизайна, и никогда для смысловой нагрузки. В частности, не используйте background-image для вставки картинок, которые что-то обозначают, а не просто украшательства. Если нужно вставить картинку, которая что-то обозначает, используйте <img>, который, среди всего прочего, можно вставлять и внутрь <button>, имеет атрибут alt и т. д. Примеров очень много, это одна из самых серьёзных проблем для слабовидящих, которые предпочитают менять цвета, так как для смены цвета фона на тёмный приходится ещё и выпиливать background-image.
- Избегать картинок вроде "чёрная фигура на прозрачном фоне". Опять же, если пользователь поменяет цвета, картинка может стать невидимой или плохо различимой. Универсальной альтернативы тут нет. Если это иконка, можно использовать иконки-шрифты - тогда она окрасится в цвет текста (хотя, если пользователь захочет поменять шрифты... чтобы избегать проблем и в таком случае, можно стараться использовать только иконки из стандартного unicode). Для формул есть MathML или MathJax. Если таки без чёрной картинки на прозрачном фоне никак не обойтись, можно добавить на неё белый outline, на белом фоне он будет невидим, а на чёрном картинка будет всё ещё различима. Полностью залитый белым фон выглядит не очень и для больших картинок может быть слишком ярким (для некоторых людей это проблема). Цветные png/svg иконки, как правило, не проблема. Но если иконка достаточно тёмная по краям или в целом, белый outline будет не лишним.
Ещё пара слов про zoom. Есть такой аддон
NoSquint, ныне discontinued, но есть продолжатели идеи, в частности
NoSquint Plus. Суть такая: помимо стандартного браузерного зума (принцип которого описан выше), он ещё умеет маштабировать только текст, что является очень удобным в случае, если нужно увеличить шрифт, но при этом хотелось бы, чтобы остальной контент сайта оставался компактным. Так вот, было бы неплохо, чтобы вы тестировали свой сайт и с text-only зумом и чтобы сайт вёл себя так, как ожидается. В частности, чтобы текст всегда помещался в блоки по вертикали (частая проблема) и горизонтали (реже, но бывает), а так же не злоупотребляйте
rem и
em, так как если использовать их для указания длины всего на сайте, text-only zoom будет работать в точности как обычный, что нежелательно. Ещё у браузеров есть фича minimum font size. Тут рекоммендации те же, что и для Text-only zoom.
Недавно меня посетила идея, что разумнее было бы сделать соответствующий media type в стандарте CSS, при помощи которого можно было бы прикручивать скорректированные стили, включающие контрастные схемы, безопасные цвета и крупные элементы интерфейса
Не думаю, что это хорошая идея. По крайней мере, не до конца продуманная. При разных патологиях зрения (да и здоровые люди иногда могут предпочитать любое из далееперечисленных) людям подходят разные цвета: белый на чёрном, серый на чёрном, светло серый на тёмно-сером, чёрный на белом и т. д. Если с размером шрифтов всё более-менее просто, то с цветами сложнее, и универсальное решение, которое можно было бы включить в стандарт и которое все бы соблюдали, у меня не получается придумать. В идеале было бы, если бы в CSS можно было использовать семантические названия цветов и названия тонов с соответстующей ролью вроде foregroundColor, foregroundWarningColor, backgroundSuccessColor, foregroundGreen, backgroundRed и т. д., а уже их точные значения подставлялись бы браузером в зависимости от выбранной пользователем темы. Но я не знаю, что должно произойти, чтобы это приняли в стандарт и начали использовать везде. На данный момент наиболее рабочий вариант это или менять цвета браузером (насколько я знаю, умеет только Firefox) или использовать стороние дополнения. Можно добавить тёмную тему, переключаемую кнопками где-то возле надписи про то, как ползьоваться браузерным зумом, можно рекоммендовать какие-то сторонние дополнения для браузера, хотя в таком случае появляется пара других вопросов.
Но, как минимум, как уже было сказано, не используйте "тёмно-серый текст на светло-сером фоне". Я не знаю людей, которым это нравилось бы, но знаю много, которым это создаёт трудности.
Я являюсь разработчиком
аддона для Firefox, который меняет цвета сайтов. Многое из вышеописанного основывается на тех костылях, которые мне приходится применять, чтобы сайтом всё ещё можно было пользоваться после смены цветов, а так же на отзывах пользователей, которые пишут о том, какие цвета они предпочитают и почему.
Ну и напоследок, спасибо.
