Инструкция: как НКО сделать диджитал-продукты доступными.
Как оценить, что текст написан понятно, и почему доступность сайта — это не только версия для людей с нарушениями зрения.
Фото: Mika Baumeister / Unsplash
Что означает доступность, почему она важна и как сделать свой проект или сайт удобным для всех, Агентству социальной информации рассказал Алексей Кузьма, руководитель разработчиков интерфейсов фонда «Нужна помощь».
Как это не удивительно, но до сих пор многие разработчики сайтов и дизайнеры ничего не слышали о концепции доступности. Некоторым это кажется сложным и непонятным.
Такая же ситуация, по словам Алексея, была в 2010 годах, когда люди отмахивались от «адаптивного интерфейса»: никто не знал, зачем делать мобильную версию сайта, если пользователи не открывают его с телефона.
«Но есть разработчики, дизайнеры, менеджеры, UX-писатели, исследователи и тестировщики, которые обмениваются опытом внедрения, активно дискутируют, совместно вырабатывают решения с реальными пользователями и доказывают, что основы доступного интерфейса применять полезно, но при этом не очень больно и дорого», — рассказывает Алексей Кузьма.
Что такое доступность
Доступность — это совсем не про версию для слабовидящих. Хороший интерфейс диджитал-продукта удобен для всех, независимо от того, какие особенности и потребности есть у пользователя.
Создателям и разработчикам диджитал-продуктов нужно учитывать разные ограничения: ситуативные, временные и постоянные.
- Моторика – если у человека сломалась мышка, загипсована кисть или нет руки, он может пользоваться сайтом только через клавиатуру.
- Зрение – если на экран телефона светит солнце, у человека аллергия и слезятся глаза или у человека проблемы с цветовосприятием или человек полностью незрячий.
- Слух – если человек едет в общественном транспорте, у него воспалилось ухо или полное нарушение слуха.
- Речь – если на человеке плотная маска, болит горло или он немой.
- Восприятие – если человек зашел на сайт уставшим или у него дислексия.
«Но это не все группы пользователей и случаев, которые встречаются, и все комбинации предугадать очень сложно. Например, темная тема помогает не только тем, кто сидит в темноте перед монитором, но и пользователям со светобоязнью или астеническим синдромом», — поясняет Алексей.
Что означает доступность, почему она важна и как сделать свой проект или сайт удобным для всех, Агентству социальной информации рассказал Алексей Кузьма, руководитель разработчиков интерфейсов фонда «Нужна помощь».
Как это не удивительно, но до сих пор многие разработчики сайтов и дизайнеры ничего не слышали о концепции доступности. Некоторым это кажется сложным и непонятным.
Такая же ситуация, по словам Алексея, была в 2010 годах, когда люди отмахивались от «адаптивного интерфейса»: никто не знал, зачем делать мобильную версию сайта, если пользователи не открывают его с телефона.
«Но есть разработчики, дизайнеры, менеджеры, UX-писатели, исследователи и тестировщики, которые обмениваются опытом внедрения, активно дискутируют, совместно вырабатывают решения с реальными пользователями и доказывают, что основы доступного интерфейса применять полезно, но при этом не очень больно и дорого», — рассказывает Алексей Кузьма.
Что такое доступность
Доступность — это совсем не про версию для слабовидящих. Хороший интерфейс диджитал-продукта удобен для всех, независимо от того, какие особенности и потребности есть у пользователя.
Создателям и разработчикам диджитал-продуктов нужно учитывать разные ограничения: ситуативные, временные и постоянные.
- Моторика – если у человека сломалась мышка, загипсована кисть или нет руки, он может пользоваться сайтом только через клавиатуру.
- Зрение – если на экран телефона светит солнце, у человека аллергия и слезятся глаза или у человека проблемы с цветовосприятием или человек полностью незрячий.
- Слух – если человек едет в общественном транспорте, у него воспалилось ухо или полное нарушение слуха.
- Речь – если на человеке плотная маска, болит горло или он немой.
- Восприятие – если человек зашел на сайт уставшим или у него дислексия.
«Но это не все группы пользователей и случаев, которые встречаются, и все комбинации предугадать очень сложно. Например, темная тема помогает не только тем, кто сидит в темноте перед монитором, но и пользователям со светобоязнью или астеническим синдромом», — поясняет Алексей.
Фото: Tirza van Dijk / Unsplash
Поэтому можно пользоваться правилом: если интерфейс создается удобным для экстремальных и редких случаев, по факту он станет удобным для всех.
Как сделать продукт доступным
Если в команде есть дизайнер и разработчик, для начала стоит убедить их, что доступный интерфейс будет важен всем.
Внедрять доступность на самых ранних этапах выйдет и лучше, и дешевле. Прорабатывая техническое задание, нужно подумать об удобной навигации, например, не использовать сложные блоки.
При создании макетов нужно не забывать о контрастности и типографике. Во время разработки — учитывать удобную группировку данных, семантичный код и подписанные элементы. Например, проверить, хорошо ли подписаны элементы и написаны тексты, можно с помощью скринридеров, инструментов AXE и других.
Если есть возможность провести исследование с реальными пользователями с особенностями, получится еще лучше. Сначала создание доступности может казаться сложным процессом. Но можно начинать с малого, например, понять, можно ли перейти на первый элемент диджитал-продукта с клавиатуры, проходит ли он по коэффициентам контрастности WCAG. Дальше посмотреть, как он взаимодействует с другими блоками.
При создании макета дизайнер может тестировать его на контрастность с помощью различных плагинов по стандарту WCAG 2.0 (или 2.1). Например, дизайнер выбирает основной цвет текста и цвет заднего фона, после чего плагин выдает результат, какому уровню доступности соответствует данная комбинация цветов.
Еще есть калькулятор контрастности от APCA. Он показывает, с каким размером и жирностью шрифта контраст будет самым оптимальным.
Поэтому можно пользоваться правилом: если интерфейс создается удобным для экстремальных и редких случаев, по факту он станет удобным для всех.
Как сделать продукт доступным
Если в команде есть дизайнер и разработчик, для начала стоит убедить их, что доступный интерфейс будет важен всем.
Внедрять доступность на самых ранних этапах выйдет и лучше, и дешевле. Прорабатывая техническое задание, нужно подумать об удобной навигации, например, не использовать сложные блоки.
При создании макетов нужно не забывать о контрастности и типографике. Во время разработки — учитывать удобную группировку данных, семантичный код и подписанные элементы. Например, проверить, хорошо ли подписаны элементы и написаны тексты, можно с помощью скринридеров, инструментов AXE и других.
Если есть возможность провести исследование с реальными пользователями с особенностями, получится еще лучше. Сначала создание доступности может казаться сложным процессом. Но можно начинать с малого, например, понять, можно ли перейти на первый элемент диджитал-продукта с клавиатуры, проходит ли он по коэффициентам контрастности WCAG. Дальше посмотреть, как он взаимодействует с другими блоками.
При создании макета дизайнер может тестировать его на контрастность с помощью различных плагинов по стандарту WCAG 2.0 (или 2.1). Например, дизайнер выбирает основной цвет текста и цвет заднего фона, после чего плагин выдает результат, какому уровню доступности соответствует данная комбинация цветов.
Еще есть калькулятор контрастности от APCA. Он показывает, с каким размером и жирностью шрифта контраст будет самым оптимальным.
Фото: NordWood Themes / Unsplash
Разработчики же могут смотреть, как работает продукт через программы ассистивного доступа (скринридеры) – NVDA и VoiceOver. А еще смотреть, насколько понятен контент, например, через инструмент Текстометр.
Если своих разработчиков и дизайнеров нет, а сайт делается в конструкторе, можно спросить у технической поддержки, есть ли у них или когда планируется доработка доступности (Кандинский, Wix уже работают в этом направлении).
Если при создании диджитал-продукта нет ни конструктора сайтов, ни разработчика, ни дизайнера, можно пользоваться следующими рекомендациями.
— Писать простые и понятные тексты:
— Описывать изображения для слабовидящих и незрячих пользователей.
— Понятно подписывать ссылки в тексте.
Как это делали в «Ядре»
«Ядро» — это IT-продукт фонда «Нужна помощь», высокотехнологичный инструмент для повышения эффективности работы НКО. По словам Алексея, на сегодня все разделы «Ядра» стали доступными.
«Мы начали экспериментировать в разделах с профилем организации и верификации пару лет назад: учились понятно подписывать элементы, настраивать взаимосвязи между блоками, корректно переводить пользователя из раздела в раздел», — рассказывает он.
Постепенно работа над доступностью перешла в более сложные разделы «Ядра». Например, в конструкторе отчетов добавили поле с альтернативным описанием при загрузке изображения, генерацию PDF, с которым может взаимодействовать незрячий пользователь.
Все это, по словам Алексея, не исключает, что через пару месяцев они снова не приступят к тому, чтобы сделать что-то еще более доступным.
«В ценностях нашего фонда есть пункт «Мы против дискриминации в любой форме». Мы решили, что недоступный интерфейс тоже можно рассматривать как дискриминацию, поэтому и стали наращивать опыт в этом направлении», — объясняет Алексей Кузьма.
Полезные материалы
Если доступности в диджитал-продукте удалось достичь, в будущем можно и не работать в этом направлении. Но если проект меняется и обновляется, нужно продолжать тестировать и проверять, сохранилась ли доступность или нет.
Материалов о доступности с каждым годом становится все больше. Вот некоторые из них:
Источник: Агентство Социальной Информации
Разработчики же могут смотреть, как работает продукт через программы ассистивного доступа (скринридеры) – NVDA и VoiceOver. А еще смотреть, насколько понятен контент, например, через инструмент Текстометр.
Если своих разработчиков и дизайнеров нет, а сайт делается в конструкторе, можно спросить у технической поддержки, есть ли у них или когда планируется доработка доступности (Кандинский, Wix уже работают в этом направлении).
Если при создании диджитал-продукта нет ни конструктора сайтов, ни разработчика, ни дизайнера, можно пользоваться следующими рекомендациями.
— Писать простые и понятные тексты:
- использовать разделение на параграфы, заголовки и списки;
- не использовать очень длинные предложения;
- не использовать аббревиатуры;
- не использовать сложные термины или давать пояснения.
— Описывать изображения для слабовидящих и незрячих пользователей.
— Понятно подписывать ссылки в тексте.
Как это делали в «Ядре»
«Ядро» — это IT-продукт фонда «Нужна помощь», высокотехнологичный инструмент для повышения эффективности работы НКО. По словам Алексея, на сегодня все разделы «Ядра» стали доступными.
«Мы начали экспериментировать в разделах с профилем организации и верификации пару лет назад: учились понятно подписывать элементы, настраивать взаимосвязи между блоками, корректно переводить пользователя из раздела в раздел», — рассказывает он.
Постепенно работа над доступностью перешла в более сложные разделы «Ядра». Например, в конструкторе отчетов добавили поле с альтернативным описанием при загрузке изображения, генерацию PDF, с которым может взаимодействовать незрячий пользователь.
Все это, по словам Алексея, не исключает, что через пару месяцев они снова не приступят к тому, чтобы сделать что-то еще более доступным.
«В ценностях нашего фонда есть пункт «Мы против дискриминации в любой форме». Мы решили, что недоступный интерфейс тоже можно рассматривать как дискриминацию, поэтому и стали наращивать опыт в этом направлении», — объясняет Алексей Кузьма.
Полезные материалы
Если доступности в диджитал-продукте удалось достичь, в будущем можно и не работать в этом направлении. Но если проект меняется и обновляется, нужно продолжать тестировать и проверять, сохранилась ли доступность или нет.
Материалов о доступности с каждым годом становится все больше. Вот некоторые из них:
- конференции и доклады: конференция по цифровой доступности, «Делаем доступной библиотеку компонентов — на примере VKUI», «А ваш сайт доступен с клавиатуры?», «Дока. Скринридеры»;
- статьи «UX для здравоохранения — дизайн, который спасает жизни», «Accessibility: для кого и как внедрять?»;
- гайды по доступности: гайдлайн Сбера, гайдлайн Контура, гайдлайн фонда «Со-единение».
Источник: Агентство Социальной Информации