@KaminskyIlya

Вопрос к слабовидящим: как лучше уведомить о наличии специальной версии сайта?

Друзья!

Хотелось бы услышать мнение, в первую очередь от людей с плохим или слабым зрением.
Перед нашим коллективом встала задача создавать версии сайтов для слабовидящих. И, думаю, не только перед нашим ;-)
Решения задачи вроде бы есть. Но они тупые. А хочется чего более продвинутого...

Если для слепых людей вопрос доступности сайта решается грамотной версткой и прогонами через экранную "читалку", то для слабовидящих такой "номер" не пройдет - они, как правило, не пользуются программами озвучки. Максимум - zoom.

Соответственно есть два вопроса:
1. Как уведомить человека, что на сайте есть версия, оптимальная для его зрения; но при этом такое уведомление не должно раздражать обычных людей? В идеале (что не достижимо, конечно же) хочется, чтобы бы сразу открывалась версия сайта, оптимизированная "как надо".
2. Как вообще должен выглядеть "нормальный" сайт с точки зрения человека со слабым зрением? Что вас больше всего "бесит" в не оптимизированных сайтах?

Update 1
Недавно меня посетила идея, что разумнее было бы сделать соответствующий media type в стандарте CSS, при помощи которого можно было бы прикручивать скорректированные стили, включающие контрастные схемы, безопасные цвета и крупные элементы интерфейса. А что вы думаете на этот счет?
  • Вопрос задан
  • 361 просмотр
Пригласить эксперта
Ответы на вопрос 3
mhspace
@mhspace
Как уже было сказано, отдельная версия не нужна. Однако, как я заметил, многие пользователи не знают о том, что их браузер умеет зумить контент. Поэтому, где-нибудь вверху страницы можно оставить заметку вроде "чтобы увеличить шрифт, используйте 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, который меняет цвета сайтов. Многое из вышеописанного основывается на тех костылях, которые мне приходится применять, чтобы сайтом всё ещё можно было пользоваться после смены цветов, а так же на отзывах пользователей, которые пишут о том, какие цвета они предпочитают и почему.
Ну и напоследок, спасибо.
Ответ написан
Nekto_Habr
@Nekto_Habr
Чат дизайнеров: https://t.me/figma_life
Что вас больше всего "бесит" в не оптимизированных сайтах?

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

Слабовидящим нужны крупные контрастные элементы (текст, кнопки, картинки). Возможно, проблема решится прикручиванием контролей масштабирования (хотя уже есть в браузере).
Ответ написан
@inkvizitor68sl
Linux-сисадмин с 8 летним стажем.
> Как уведомить человека, что на сайте есть версия, оптимальная для его зрения;
Никак, все слабовидящие умеют масштабировать сайт в браузере.
Либо не умеют пользоваться компом и на ваши "уведомления" им наплевать.

> Как вообще должен выглядеть "нормальный" сайт с точки зрения человека со слабым зрением?
Должен нормально масштабироваться через ctrl-+\-
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
16 янв. 2021, в 06:41
500 руб./за проект
16 янв. 2021, в 00:06
3000 руб./за проект
15 янв. 2021, в 23:54
15000 руб./за проект