Версия для слабовидящих — плохая идея! Что же тогда делать?
Особенные потребности есть не только у слабовидящих людей.
Многие сайты имеют версию для слабовидящих. Переход к ней часто происходит по кнопке (или иконке), которую этому слабовидящему еще нужно найти, поскольку она не всегда достаточно контрастна.
Переключившись на эту версию, вы можете увидеть вот такой функционал:
Или даже вот такой:
На сайте ВШЭ вы можете выбрать 3 размера шрифта, межбуквенное расстояние и несколько вариантов инверсии. На сайте Росбанка есть инверсия, а также большой выбор того, как может выглядеть текст, но выбрать его размер не предлагается. В большинстве случаев функционал версий для слабовидящих ограничен набором режимов инверсий и возможностью выбрать тот или иной размер текста — т.е. какие-то настойки есть, но их количество ограничено теми вариантами, которые предлагаются. Настроить интерфейс так, как хотите именно вы, не получится.
Иногда версия для слабовидящих не просто отличается визуально от оригинальной версии сайта, но имеет и другое содержательное наполнение. В этом случае люди с нарушением зрения часто жалуются на то, что версия имеет ограниченный контент и возможности.
Подобные отличия в функционале и наполнении между разными версиями для слабовидящих на разных сайтах указывают как на отсутствие четких требований со стороны государства, так и на отсутствие понимания профессиональным сообществом потребностей слабовидящих людей.
В то же самое время, эти варианты не закрывают все возможные потребности, которые есть у людей с различными нарушениями зрения. Например, нарушение цветовосприятия (дальтонизм) встречается у 0,5% женщин и 8% мужчин. Большинство существующих версий сайтов для слабовидящих эту достаточно большую аудиторию просто не учитывают. Проблемы людей с дальтонизмом связаны не с цветом фона страницы или отдельной кнопки, они связаны с дизайнерскими решениями, предполагающими выделение важной информации цветом.
Например:
Слабовидящие — это только часть людей с особенными потребностями. Незрячие люди, люди с нарушением слуха, моторики, люди с метальной инвалидностью — все они имеют точно такое же право на доступ к информации как слабовидящие или люди без инвалидности. Что делать?
Важно учитывать потребности всех этих людей. О том, как их учесть, вы можете прочитать в гайдлайне о проектировании доступных цифровых сервисов.
Одна версия, но доступная и для слабовидящих. Это как?
В международном стандарте по доступности WCAG 2.1 нет требований или даже пожеланий к специальным версиям сайтов. Зато есть требование к контрастности между цветом текста и фоном: 4,5:1. Для текста с минимальным размером 18 пунктов нормального или 14 пунктов полужирного начертания можно снизить контрастность до 3:1.
Я не знаю почему, но дизайнеры обожают использовать серый шрифт на сером фоне. И я не случайно выбрала для блога “Не исключение” в качестве заглавной именно эту картинку. Контрастность такого текста не соответствует стандартам. Из-за этого его сложно прочитать и слабовидящему человеку, и вашей бабушке, и мне с моими -2, даже в очках.
Важно помнить, что, когда речь идет о контрастности, это не означает, что необходимо набирать тексты ярко-оранжевым или розовым цветом. Они тоже могут получиться неконтрастными.
И, наоборот, серый шрифт на сером фоне может быть контрастным. Важно соблюдать требования стандарта.
Требование контрастности важно соблюдать еще и потому, что пожилым людям, а также большинству людей с ослабленным зрением не придет в голову использовать версию для слабовидящих. Они не задумываются о том, что у них есть какие-то особенные потребности. Зато им вполне придет в голову обсудить ваш дизайн в FB, Vk или однокласниках.
Сегодня практически любая компания имеет если не собственную дизайн-систему, то хотя бы библиотеку визуальных элементов интерфейса. Если ваша библиотека учитывает требования контрастности и другие требования стандарта WCAG, вам не нужно делать отдельную версию. Такой подход экономит ресурсы и позволяет быть уверенным, что пользовательский опыт людей с инвалидностью не будет ухудшен при переходе на другую версию. О том, как в Сбербанке приводили к стандарту библиотеку элементов интерфейса, можно почитать в блоге на habr.com.
Инструменты для проверки контрастности
Если ваш сайт или приложение уже сверстаны, используйте один из способов автоматизированной проверки:
- Axe для проверки сайтов в Google Chrome.
- Accessibility Inspector для iOS.
- Accessibility Scanner для Android.
Например, Axe покажет вам, сколько и какие именно элементы на странице имеют недостаточную контрастность и что необходимо сделать, чтобы эту проблему решить.
Если же вы только собираете библиотеку элементов или ваш продукт пока еще не в коде, вы можете проверить контрастность с помощью плагина Stark для Sketch или программы Color contrast analyser.
А если очень хочется сделать версию для людей слабовидящих?
Если вы собираетесь спроектировать версию сайта для слабовидящих так, как это сделано на сайте Росбанка, вы тратите время на создание функционала, который уже есть в настройках браузера.
Если человеку нужно использовать специальные настройки, ему удобнее сделать это один раз именно в настройках браузера или операционной системы, чтобы потом они работали на любом сайте. У пользователя должна быть возможность увеличивать шрифт до того размера, который нужен ему. Это удобно сделать с помощью помощью комбинаций клавиш «Cmd +» или «Ctrl +».
Тем не менее, все же есть один случай, когда специальная страница для слабовидящих может быть полезной. Например, когда она содержит информацию о том, как использовать возможности браузера или операционной системы для адаптации страниц в интернете под нужды человека с особенными потребностями.
Вот так это реализовано на сайте Ухтинского государственного технического университета:
