На одном из мероприятий мы смотрели фильм «1+1» (2011) с тифлокомментариями — субтитрами для незрячих и слабовидящих. Это уникальная возможность, ведь такие сеансы не проводятся в обычных кинотеатрах. Тифлокомментарии — это лаконичные описания предметов, пространства или действий, которые непонятны незрячим без специальных словесных пояснений. По сути, это прямое описание сцены: например, «черная машина едет на большой скорости по городу, за рулем молодой чернокожий мужчина» и так далее. Сложность заключается в том, чтобы успеть максимально точно передать картинку до того, как она сменится на новую сцену.
На встрече был гость с параличом, передвигающийся в инвалидной коляске. Во время своего рассказа он упомянул, что любит переписываться с друзьями в Discord. На этапе вопросов я решила уточнить, как он это делает. Оказалось, что у него не полный паралич рук — он может двигать кистью. Он нажимает каждую клавишу костяшкой мизинца, набирая буквы одну за другой. Медленно, но верно.
После такого небольшого вступления перейду к теме нашей сегодняшней беседы — визуальная доступность. Это новый стандарт в дизайне, который улучшает опыт всех пользователей интерфейса.
Интуитивно понятный, приятный и продуманный дизайн цифровых продуктов давно перестал быть просто «дополнительным параметром». Сегодня визуальная доступность стала обязательным стандартом, значительно повышающим удобство использования для всех.
Неожиданно, но факт: многие бытовые изобретения изначально создавались для людей с ограниченными возможностями. Например, резиновые прихватки для рук были нужны слепым, чтобы не пораниться в пространстве. В России каждый 8-10 человек имеет инвалидность, и в 80% случаев это приобретённое состояние. Ограничения могут быть постоянными (например, отсутствие руки), временными (например, перелом) или ситуативными (например, занятая рука). Инклюзивность касается не только людей с инвалидностью, но и тех, кто временно испытывает трудности, например, родителей с маленькими детьми (которые держат их на руках) или людей с временными проблемами слуха, такими как отит.
При разработке дизайна одной из базовых вещей является контрастность по стандартам WCAG, по сути есть специальные онлайн ресурсы на которых можно загрузить ваши цвета и посмотреть как они считываются. В целом таблица этих цветов не большая, можно ее запомнить.
Чем сложнее интерактивные механики, тем меньше пользователей смогут оценить созданную вами красоту. Это касается сайтов с суперскроллом, множеством кнопок, разбросанных по экрану, и пользователей с мобильным трафиком, ограниченных скоростью загрузки.
У меня есть история на эту тему. Когда я работала арт-директором в креативном агентстве Bright Side, мы провели ребрендинг и создали первоклассный сайт. Он был наполнен дерзкими разноцветными 3D-анимациями. Для съемок роликов мы пригласили Николая Бандурина (из «Дуэт Бандуре и Вашуков из кривого зеркала»). Мы попали с пресс-релизом на портал Sostav и даже получили награду Awwwards за нашу работу. Но вы бы знали, как мы намучились с оптимизацией сайта: страница с командой загружалась целых 8 секунд.
Обычно, чтобы удержать пользователя, показывают «скелет» сайта — призрачные прямоугольники, намекающие на текст и изображения, которые вот-вот появятся. Однако мы решили избежать этого, сократив вид страницы. В итоге мы уменьшили прозрачный фон в секвенциях с видео (секвенция — это сбор кадров, из которых состоит анимация). В каждом ролике на прозрачном фоне что-то происходило, и хотя пустые поля были небольшими, это создавало критическую проблему. Мы также сжали изображения и обрезали их край в край к контенту, чтобы улучшить загрузку.
Тёмная тема в приложениях также относится к инклюзивности. Она делает сервисы комфортнее для использования в темное время суток и для людей со светобоязнью или светочувствительностью.
У меня возникает вопрос: если у людей с плохим зрением на телефонах и компьютерах уже увеличены размеры шрифтов, то скринридеры на сайтах тоже увеличивают текст?
Особый интерес представляет настройка скринридера. Дизайнеру необходимо описать подписи к каждому элементу, чтобы они были уникальными и не повторяли элементы пользовательского интерфейса. Важно также настроить последовательность воспроизведения и скрыть элементы, которые не нужно озвучивать. Декоративные элементы не описываются. Подписи требуются для контролов, таких как кнопки, ссылки, поля для редактирования и т.д., включая их состояние (активное или неактивное). После настройки озвучка обязательно должна пройти тестирование.
Что касается цветов: если между ними недостаточный контраст, например, лавандовый и фиолетовый, то люди с нарушением зрения могут их не различить. В таких случаях на один из цветов накладывается полутоновый узор, чтобы их можно было отличить, например, в диаграммах. Светлые тона, такие как бирюзовый на белом фоне, тоже не подходят — они сольются, и кнопка станет незаметной. Также следует избегать сочетаний цветов, которые путают дальтоники, например, зеленый и красный.
Инклюзивный дизайн следует разделять на UX/UI и коммуникационный. В прошлом году мы с коллегами оформляли конференцию VK Инклюзия. Хотя тема была о визуальной доступности, мы не применяли её принципы в оформлении. Целевая аудитория конференции — дизайнеры и айтишники, которые пришли узнать, как сделать свои продукты лучше. Несмотря на то, что среди гостей были люди с ограниченными возможностями, мы не уделяли особого внимания контрастам цветов. Однако, в сувенирной продукции, конечно, использовали шрифт Брайля.
VK Fest тоже не обошли стороной.
Начали с того, что адаптировали сайт для незрячих и повысили его невизуальную доступность. После начала застройки тестировщики-волонтеры проверили на доступность для гостей на инвалидных колясках. А накануне события провели повторный тест-драйв с учётом пожеланий первых тестировщиков. Так же на мероприятии предоставляются бесплатные билеты гостям с инвалидностью (и их сопровождающим). Фестиваль посетили почти тысяча людей с инвалидностью!
Видеотрансляцию перевели на все два дня фестиваля на русский жестовый язык для того, что ее могли смотреть люди с ограничениями по слуху.
В эфире работали 3 переводчицы-артистки атдаптировав на жестовый язык более 100 песен, они провели 25 часов в прямом эфире, а трансляцию только жестового перевода посмотрели 2 млн зрителей. Увидимся ли мы с вами на вк Фест в этом году? Пишите в комментариях.