Интерфейсы и инклюзивность

Что такое инклюзия и какие проблемы может решить инклюзивный дизайн?

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

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

Наличие инвалидности ставит вас в самую большую группу меньшинств в мире. В настоящее время около 10% населения земного шара, или примерно 650 миллионов человек, живут с инвалидностью.

Существуют различные типы дальтонизма, при которых люди не видят определенных цветов.

Эта диаграмма показывает, как люди с дальтонизмом могут видеть цвета.

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

Во-первых, создайте дизайн, подходящий для скринридера.

Скринридер — это специальное дополнение, которое помогает вам слышать, что происходит на экране. Пользователь может использовать его на Mac, Windows, Linux, IOS, Android, Chrome OS и ознакомиться с интерфейсом через звуковое сопровождение действий. Скринридер уже встроен в Mac и IOS, достаточно просто включить его в настройках. Если вы работаете на Windows или Linux, то требуется скачать скринридер перед его использованием.

Есть горячие клавиши для пользования скринридером:

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

Межстрочный интервал между заголовками должен быть не менее 1,2.

Правильная последовательность использования заголовков:H1, H2, H3 (как оглавление в книге). Это помогает с ориентацией на странице.

Корректно разместите заголовки в коде. Они должны быть обозначены символом <h>. Как дизайнер, попробуйте организовать код ревью, чтобы проверить, правильно ли инженеры назвали заголовки. В противном случае скринридер не распознает строку как заголовок.

Минимальный размер 16+ пикселей (для мобильных устройств и десктопа).

Межстрочный интервал не менее 1,5.

Размер шрифта 0 (автоматический).

Используйте Serif шрифт с засечками в web-е и Sans Serif без засечек для большого текста (рекомендация, не является правилом).

Оптимальная длина строки составляет 60 символов (на клавиатуре Брайля можно разместить максимум 66 символов).

Если это возможно, проверьте свой сайт на читаемость.Некоторые сайты для проверки читабельности сайта: Copywritely, WebFX, SiteChecker.

Вставляйте ссылки в текст. Программа скринридер считывает ссылку посимвольно, поэтому ссылка должна быть оформлена в виде текста, а не в виде ссылки (www …).

Контрастность текста для заголовков составляет 3 к 1. Контрастность обычного текста 4,5 к 1 и выше.

Проверить контрастность цветов можно на Who can use сайте.A3- хорошо, если показатель ниже- значит контрастность хуже.По ссылке GOV.UK можно ознакомиться с самым инклюзивным сайтом.

Корректно подберите длину поля для вводимого значения.

Лейбл — Вспомогательный текст — Ошибка — Плейсхолдер.

Добавьте сфокусированное состояние к активному элементу.

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

Создавайте контрастные кнопки, также не забывайте о кнопках загрузки.

Проверьте при проверке кода, что кнопки используются под именем <button> и ссылки под именем <link>. Это не один и тот же элемент!

Вы можете проследить, чтобы в код добавили текст (описание) для кнопок-иконок, чтобы пользователь с ограниченными возможностями смог понять функцию кнопок. Также можно добавить описание кнопки при наведении на кнопку.

Для кнопок-аккордеонов желательно прописать состояние в коде (свернутое, развернутое).

После опросника с чекбоксами или списка с радио-баттонами желательно поставить кнопку “Продолжить”, чтобы слепой человек понимал, где заканчивается список и в какой момент он переходит к следующему шагу (рекомендация, не является правилом).Я бы хотела добавить, что если чекбоксы или радио-списки были закодированы корректно, скринридер сообщит, сколько элементов составляет весь список.

Но, по-моему, пользователю было бы удобнее нажать кнопку “далее” вместо того, чтобы сразу переключаться на другой список без четкого подтверждения того, что позиция была выбрана и пользователь может двигаться дальше.

Минимальная область нажатия 44*44 пикселя (зона нажатия пальца).

Если возможно, дайте краткое описание фотографий на веб-сайте.

Автофокусировка устанавливается либо на заголовок, либо на первое значимое поле, при открытии всплывающего окна автофокусировка падает на заголовок, кнопка закрытия всегда находится в конце.

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

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

При разработке адаптивного дизайна не удаляйте элементы, которые были на десктопе.

Помните, что тексты для мобильных устройств могут быть увеличены в 5 раз (до 80% пользователей используют функцию увеличения шрифта).

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

Огромное спасибо я бы хотела выразить вдохновляющему дизайнеру Юлии Атановой из mos.ru. Я побывала на мастер-классе по инклюзии, который она проводила на дизайн-выходных и рассказанный материал оказал на меня неизгладимое впечатление. После такого объема информации начинаешь смотреть на интерфейс с совершенно другой стороны.

Презентация, которой я вдохновлялась при создании статьи. Данная презентация была выполнена Юлией Атановой и показана на дизайн-выходных 10 марта 2023 года в Суздале.

На эту же тему вы можете ознакомиться с презентацией Макса Смирнова, Арт-директора jetstyle. Вы также можете посмотреть лекцию на данном видео.

Email: stasyabis7@gmail.com

Telegram, Medium, LinkedIn: @stasyabis

Viber: +79877503993

Портфолио: Behance

Фотографии: Unsplash

Вебсайт: Website