Советы | Пересказ

Зачем нужен инклюзивный сайт и как его сделать

В мире проживает миллиард людей с ограниченными возможностями здоровья, из них почти 13 млн — в России. Все они — потенциальные клиенты, которых бизнес теряет из-за неудобства сайта или приложения. Почему инклюзивный веб-дизайн так важен и как сделать интернет-платформу доступной для всех — в нашем пересказе колонки дизайн-бюро PopArt Studio на Medium.
Новый курс

Как запустить
интернет-магазин

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

Как запустить
интернет-магазин

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

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

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

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

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

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

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

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

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

Выстраивайте чёткую иерархию элементов для простой навигации по странице.

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

Избавляйтесь от лишних элементов.

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

Создавайте понятные ссылки.

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

Делайте большие кнопки-мотиваторы с понятным текстом.

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

Включайте возможность настраивать размер текста.

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

Добавляйте возможность навигации только с помощью клавиатуры.

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

Обращайте внимание на контрастность.  

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

Переводите видео- и аудиоконтент в текстовый формат.

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

Поставьте себя на место пользователя с ограниченными возможностями здоровья с помощью специальных программ.

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: