Инклюзивные сайты, интернет-магазины и приложения сделаны так, чтобы их было удобно использовать людям с любыми ограничениями: от проблем с мелкой моторикой до потерянных очков.

Некоторые привычные нам вещи уже являются элементами инклюзивного дизайна, но мы используем их неправильно. Например, поле Alt text, в котором мы описываем изображение, часто заполняется отдельными ключевыми словами для поисковой оптимизации. Однако его первоначальное назначение — в переводе невербальной информации в текстовый формат для программ чтения с экрана. Это позволяет слабовидящим пользователям понять, что изображено на картинке. Поэтому Alt text нужно наполнять наглядным описанием, а не набором слов.

Во время дизайна инклюзивной интернет-площадки нужно держать в уме самые разные проблемы, с которыми сталкиваются люди.

Постоянными трудностями, связанными со здоровьем, являются слуховые, познавательные, неврологические, физические, речевые и визуальные. Кроме того, существуют ситуативные трудности, среди которых:

• использование небольших экранов на смартфонах, умных часах и других компактных устройствах;
• медленное интернет-соединение;
• неблагоприятная обстановка: плохой свет, шумное помещение;
• временная нетрудоспособность из-за сломанной руки, потерянных очков и т.д.;
• возрастные изменения.

Все эти факторы влияют на работу с сайтами, интернет-магазинами, приложениями и другими платформами. Если их не учитывать, можно лишиться клиента. Чтобы этого не произошло, нужно соблюдать несколько базовых правил.

Хаотичное расположение информации, бесполезные кнопки и лишние ссылки не только раздражают пользователей, но и затрудняют понимание вашего контента. Сделайте визуальную разметку страницы максимально структурированной и чёткой, чтобы аудитория могла естественным образом переходить от одного блока к другому.

Приятная новость для фанатов минималистичной эстетики: принцип «чем меньше, тем лучше» отлично вписывается в концепцию инклюзивного дизайна. Переполненный экран может отпугнуть некоторых пользователей и увеличить процент отказов. Старайтесь размещать на странице как можно меньше элементов, делая их легко заметными и очевидными.

Помните, когда якорным текстом ссылок были слова вроде «здесь» и «тут»? Эта эпоха прошла: такие ссылки затрудняют понимание текста слабовидящими пользователями, которые пользуются программами чтения с экрана. Чтобы сделать сайт удобным, кратко и понятно объясните в основном тексте, куда ведёт ссылка. Вместо безликого «подробности читайте тут» пишите  конкретнее: «мы уже рассказывали о том, как взаимодействовать с программистами при создании сайта».

Кнопки-призывы вроде «купить» или «принять условия» — один из важнейших элементов веб-дизайна. Если вы хотите создать инклюзивную интернет-платформу, делайте кнопки легко доступными на небольших экранах и достаточно большими, чтобы привлечь внимание каждого пользователя.

Шрифт 12 размера — не универсальное решение. Если не хотите, чтобы пользователи покидали вашу площадку недовольными, предоставьте им возможность увеличивать шрифт. Это сделает чтение удобным и приятным.

Навигация с помощью клавиатуры — один из наиболее важных аспектов инклюзивного дизайна. Она затрагивает людей с сами разными заболеваниями и трудностями: от когнитивных нарушений до плохого зрения или сломанной мыши. Удостоверьтесь, что пользователи могут открыть любую страницу и ввести любую информацию используя только клавиши. Обратите особое внимание на навигацию с помощью кнопок «лево», «право», «вверх» «вниз», Tab и Enter.

Светло-серые буквы на белом фоне могут выглядеть стильно и необычно, но прочитать такой текст будет трудно. То же самое произойдёт с темными буквами на ещё более тёмном фоне. Обеспечьте высокую контрастность фона и контента, чтобы сделать информацию доступной для большего числа пользователей. Кроме того, постарайтесь не ставить рядом похожие цвета — это поможет людям с дальтонизмом.

Люди с нарушениями слуха не всегда могут читать по губам. Не стоит рассчитывать на такую способность — добавьте ко всем видеофайлам на вашей площадке подписи и отключите автозапуск роликов. Кроме того, обязательно опубликуйте стенограммы для каждого аудиоматериала, который вы загружаете на сайт. Это может быть как полноценная расшифровка, так и короткая аннотация. Главное — не оставляйте звуковую дорожку без сопровождающего текста, чтобы у любого человека был доступ к контенту.

Прежде, чем запустить платформу, протестируйте её на инклюзивность с помощью специальных инструментов. Дизайнер Дженнифер Олдрич рекомендует программы AChecker, Contrast Analyzer, Skala View и Wave, которые предоставляют подробный разбор ошибок и указывают, как их исправить. Большая часть из этих инструментов доступна онлайн, и все они бесплатны.  

Самый простой способ определить болевые точки дизайна — поставить себя на место человека с ограниченными возможностями здоровья. Например, после создания демо-версии платформы стоит протестировать на ней программу чтения с экрана. Это покажет, как легко слабовидящие люди смогут ориентироваться на странице. Кроме того, можно установить Funkify, расширение для Chrome за 5 долларов в месяц, которое покажет интернет-интерфейс глазами пользователей с различными заболеваниями.