Что такое инклюзия и какие проблемы может решить инклюзивный дизайн?
Инклюзивность или инклюзия — это принцип организации общества, который учитывает потребности и способности как можно большего числа людей.
В настоящее время не многие дизайнеры задумываются о том, как слепой или глухой человек будет взаимодействовать с интерфейсом, будет ли сайт удобным и понятным для него.
Какие трудности могут испытывать люди?
Наличие инвалидности ставит вас в самую большую группу меньшинств в мире. В настоящее время около 10% населения земного шара, или примерно 650 миллионов человек, живут с инвалидностью.
Существуют различные типы дальтонизма, при которых люди не видят определенных цветов.
Эта диаграмма показывает, как люди с дальтонизмом могут видеть цвета.
Согласитесь, отличить красный цвет от зеленого при таких нарушениях довольно проблематично.
Как дизайнер может улучшить интерфейс и сделать его более доступным?
Во-первых, создайте дизайн, подходящий для скринридера.
Скринридер — это специальное дополнение, которое помогает вам слышать, что происходит на экране. Пользователь может скачать его для Mac, Windows, Linux, IOS, Android, Chrome OS и ознакомиться с интерфейсом через звуковое сопровождение действий.
Есть горячие клавиши для пользования скринридером:
Скринридер имеет возможность быстро перемещаться по странице только благодаря заголовкам. Вот почему важно выстроить строгую конструкцию заголовков.
Правила для заголовков
- Межстрочный интервал между заголовками должен быть не менее 1,2.
- Правильная последовательность использования заголовков:
H1, H2, H3 (как оглавление в книге). Это помогает с ориентацией на странице.
- Корректно разместите заголовки в коде. Они должны быть обозначены символом <h>. Как дизайнер, попробуйте организовать код ревью, чтобы проверить, правильно ли инженеры назвали заголовки. В противном случае скринридер не распознает строку как заголовок.
Для текста тоже существуют некоторые правила.
- Минимальный размер 16+ пикселей (для мобильных устройств и десктопа).
- Межстрочный интервал не менее 1,5.
- Размер шрифта 0 (автоматический).
- Используйте Serif шрифт с засечками в web-е и Sans Serif без засечек для большого текста.
- Оптимальная длина строки составляет 60 символов (на клавиатуре Брайля можно разместить максимум 66 символов).
Если это возможно, проверьте свой сайт на читаемость.
Некоторые сайты для проверки читабельности сайта: , , .
Вставляйте ссылки в текст. Программа скринридер считывает ссылку посимвольно, поэтому ссылка должна быть оформлена в виде текста, а не в виде ссылки (www …).
- Контрастность текста для заголовков составляет 3 к 1. Контрастность обычного текста 4,5 к 1 и выше.
Проверить контрастность цветов можно на сайте.
A3- хорошо, если показатель ниже- значит контрастность хуже.
По ссылке можно ознакомиться с самым инклюзивным сайтом.
Поля
- Корректно подберите длину поля для вводимого значения.
- Лейбл — Вспомогательный текст — Ошибка — Плейсхолдер.
- Добавьте сфокусированное состояние к активному элементу.
- Если это возможно, поместите кнопку рядом с полем, а не внутри него, так как скринридер не видит кнопку внутри поля и он просто не будет ее произносить. Слепой человек может даже не догадаться, что внутри поля есть кнопка действия. Допустимо использовать нативные элементы внутри поля ввода.
Кнопки
- Создавайте контрастные кнопки, также не забывайте о кнопках загрузки.
- Проверьте при проверке кода, что кнопки используются под именем <button> и ссылки под именем <link>. Это не один и тот же элемент!
- Вы можете проследить, чтобы в код добавили текст (описание) для кнопок-иконок, чтобы пользователь с ограниченными возможностями смог понять функцию кнопок. Также можно добавить описание кнопки при наведении на кнопку.
- Для кнопок-аккордеонов желательно прописать состояние в коде (свернутое, развернутое).
- После опросника с чекбоксами или списка с радио-баттонами желательно поставить кнопку “Продолжить”, чтобы слепой человек понимал, где заканчивается список и в какой момент он переходит к следующему шагу.
- Минимальная область нажатия 44*44 пикселя (зона нажатия пальца).
Картинки
- Если возможно, дайте краткое описание фотографий на веб-сайте.
Автофокус
- Автофокусировка устанавливается либо на заголовок, либо на первое значимое поле, при открытии всплывающего окна автофокусировка падает на заголовок, кнопка закрытия всегда находится в конце.
- Для удобства добавьте кнопку для пропуска навигации, она видна скринридеру и не видна в интерфейсе, чтобы не читать ненужный текст, пользователь может нажать на нее и пропустить то, что уже было прочитано.
Адаптив
- При разработке адаптивного дизайна не удаляйте элементы, которые были на десктопе.
- Помните, что тексты для мобильных устройств могут быть увеличены в 5 раз (до 80% пользователей используют функцию увеличения шрифта).
В заключение я хотела бы сказать, что эта тема очень важна, поскольку огромное количество людей сталкивается с трудностями при использовании цифровых продуктов.
Наша цель, как дизайнеров — продумать вопрос удобства нашего интерфейса для большего числа людей и сделать продукт максимально инклюзивным.
Огромное спасибо я бы хотела выразить вдохновляющему дизайнеру из . Я побывала на мастер-классе по инклюзии, который она проводила на дизайн-выходных и рассказанный материал оказал на меня неизгладимое впечатление. После такого объема информации начинаешь смотреть на интерфейс с совершенно другой стороны.
, которой я вдохновлялась при создании статьи. Данная презентация была выполнена Юлией Атановой и показана на дизайн-выходных 10 марта 2023 года в Суздале.
На эту же тему вы можете ознакомиться с Макса Смирнова, Арт-директора . Вы также можете посмотреть лекцию на данном .
Если хотите написать, задать вопросы или подписаться, используйте :
Email: stasyabis7@gmail.com
Telegram, Medium, LinkedIn: @stasyabis
WhatsApp, phone: +79877503993
Портфолио:
Фотографии:
was originally published in on Medium, where people are continuing the conversation by highlighting and responding to this story.