Создавая цифровой контент, мы привыкли ориентироваться на обычного пользователя.
Таким образом, игнорируется почти треть населения России – это люди с ограниченными возможностями, пожилые люди и те, кто временно испытывает особые потребности.
В предыдущей статье мы рассказали о нашем подход к адаптации цифровых сервисов в Сбербанке .
В Международный день инвалидов мы решили поделиться с профессиональным сообществом руководство по цифровой доступности .
В этой статье вы узнаете, что важно знать менеджерам, дизайнерам и разработчикам при проектировании доступного интерфейса.
Общие рекомендации для руководителей
Чтобы представить пользовательский опыт людей с ограниченными возможностями, попробуйте различные типы программ-симуляторов.дальтонизм , плохое зрение и другие нарушения .
Чтобы лучше понять, как незрячие люди работают с голосовым интерфейсом, подойдут программы доступа к экрану — VoiceOver на MacOS , VoiceOver на iOS , TalkBack на Android , НВДА или ЧЕЛЮСТИ для Windows).
Включите специальные возможности в свой процесс разработки с самого начала:
- Сообщите команде о важности проектирования и измерения пользовательского опыта с учетом доступности.
- Проверяйте каждое обновление и новую функцию, чтобы убедиться, что они соответствуют потребностям людей с ограниченными возможностями.
- Выполняйте автоматическое тестирование вместе с разработчиками в каждом спринте, чтобы быстро выявить распространенные ошибки, и сочетайте его с пользовательским тестированием для достижения требований доступности.
- Регулярно проводите ручное тестирование продукта: тогда на завершающем этапе будет мало исправлений;
- Проведите окончательное тестирование с экспертом по доступности не менее чем за три недели до запуска продукта.
Что должен делать дизайнер?
Список советов дизайнерам гораздо длиннее.Некоторые советы носят общий характер и полезны для интерфейса в принципе.
Требования к структурным элементам и управлению страницами
- Дизайн должен быть таким, чтобы пользователь быстро и легко находил ключевую информацию.
- Весь контент и дизайн должны укладываться в логичную структуру заголовков: это очень помогает слепым пользователям и пожилым людям.
- Пользователи должны иметь возможность перемещаться по сайту несколькими способами: через оглавление, карту сайта, ссылки между страницами и поиск.
- Программа чтения с экрана плохо работает со всплывающими объектами, поэтому модальные окна лучше не использовать.
- Стили необходимо использовать правильно.
Заголовки уровня 1 в макете должны быть заголовками H1 в коде.
И наоборот, то, что не является заголовком первого уровня, не должно быть помечено как заголовок H1.
Умное масштабирование страницы также сделают удобным чтение с любых электронных носителей и облегчат восприятие контента слабовидящим.
Лучшее решение в этом случае — адаптивная верстка.
Когда макет будет готов, проведите тест: увеличьте экран до 200% с помощью комбинаций клавиш «Cmd+» или «Ctrl+».
(Плохой пример масштабирования) 
(Хороший пример масштабирования) Управление с клавиатуры — настоящее спасение для людей с нарушениями опорно-двигательного аппарата и двигательных функций, а также для незрячих пользователей, использующих программы чтения с экрана для навигации в Интернете.
Для корректного доступа к клавиатуре необходимо контролировать следующие моменты:
- Пользователь должен иметь возможность выбирать и активировать любой интерактивный элемент на странице с помощью клавиш Tab, пробела и клавиш со стрелками.
- Для зрячих пользователей важно, чтобы интерактивные элементы имели видимые и знакомые состояния: фокус, наведение, активный и посещенный.
- Для слепых пользователей важной особенностью является то, что она позволяет перейти к основному контенту — пропустить рекламу с элементами навигации и перейти сразу к основной информации, уменьшая количество ненужного контента для прослушивания.
- Пользователь также ожидает, что фокус будет переключаться между элементами в логическом порядке: обычно слева направо и сверху вниз.
- Когда макет сайта будет готов, используйте клавишу Tab, чтобы проверить, видите ли вы, где находится фокус при использовании клавиатуры?
области щелчка элемента .
Есть люди с нарушениями опорно-двигательного аппарата и двигательных функций.
Им сложно переходить по мелким или закрытым ссылкам или работать с сайтом/приложением одной рукой.
Чтобы обеспечить доступность интерфейса для таких пользователей, необходимо:
- Убедитесь, что вы можете дотянуться до основных элементов управления большими пальцами, левой и правой рукой даже на больших телефонах.
- Установите кликабельную область размером не менее 44 CSS-пикселей.
Так что среднестатистическому взрослому человеку с размером кончика пальца примерно 10 мм попасть по ним будет легко.
Значки часто меньше по размеру, поэтому кликабельная область вокруг них должна быть больше.
- Отдельные кликабельные элементы с пространством 8 пикселей.
Содержимое веб-сайта/приложения
Весь текст на сайте должен быть читаемым.Вот что вы можете сделать для этого:
- Избегайте бюрократии, специфических терминов и заумных предложений, изобилующих всевозможными фразами;
- Попробуйте сократить абзацы – это облегчит их просмотр на мобильных устройствах;
- По возможности используйте короткие предложения.
- Если необходимо использовать термины, объясните их.
Если их слишком много, составьте глоссарий.
- При первом использовании аббревиатуры или аббревиатуры пропишите ее по буквам.
- Старайтесь не использовать идиомы, поскольку носители языка жестов и пользователи с психическими отклонениями могут воспринимать их буквально;
- Обратите внимание на раскладку клавиатуры и опечатки, так как их наличие значительно усложняет работу программ чтения с экрана.
Для этого:
- Убедитесь, что минимальный коэффициент контрастности составляет 4,5:1; для более крупного текста можно уменьшить контраст до 3:1. Исключением являются логотипы, элементы, выполняющие декоративную роль, и неактивные элементы управления;
- Используйте размер шрифта, достаточный для комфортного чтения: минимум основного текста — 16 пикселей.
- Выбирайте шрифт, который разборчив, легко читается независимо от масштаба, достаточно крупный для выбранного размера шрифта, поддерживает все необходимые символы и стили, с согласованными параметрами форм букв и уникальными символами, которые невозможно спутать друг с другом.
- Не полагайтесь на цвет как на единственное визуальное средство передачи информации, поскольку некоторые из ваших пользователей могут быть дальтониками.
Используйте жирный шрифт, звездочки, значки, типографику, текст, проверяйте обязательные поля и т. д.
Графика Его следует использовать только там, где нельзя использовать только текст. Если получилось так, то:
- Убедитесь, что все изображения сопровождаются кратким и понятным описанием.
- Выбирайте знакомые значки, например, мусорную корзину для удаления информации.
- При наложении текста на изображение помните о контрасте: используйте сплошной фон или затемните изображение;
- Сопровождайте визуализацию данных кратким описанием, чтобы дать пользователю контекст.
- Обеспечьте достаточный контраст между представленными данными, чтобы люди с дальтонизмом могли различать цвета.
- Создайте альтернативную форму для контента, который нельзя представить в виде текста.
Например, поиск банкомата можно осуществлять как через карту, так и через таблицу или список;
- Капча — одна из самых больших проблем для слепых.
Если никак не можете от него отказаться, сделайте альтернативный способ его восприятия, например, звуковой.
- Убедитесь, что ваш дизайн не содержит элементов, которые мигают более трех раз в секунду, поскольку анимированные элементы сайта могут вызвать эпилепсию у людей с определенными видами инвалидности.
- По названию кнопки «Создать учетную запись», в отличие от «Готово», пользователь четко понимает, что произойдет на следующем шаге.
- Если в результате клика документ скачивается, напишите об этом напрямую.
Вместо «Нажмите здесь» напишите «Скачать отчет».
- Ссылки следует включать в текст так, чтобы они были частью предложения.
Такой подход будет более удобен как для слепых, так и для зрячих пользователей.
- Убедитесь, что инструкции могут быть выполнены глухим человеком: не упоминайте форму, размер, визуальное расположение или звук.
Убедитесь, что они у вас есть.
И не забывайте:
- Убедитесь, что все элементы ввода имеют четкие метки, которые остаются видимыми даже после заполнения поля.
- Заранее предупредите пользователя о формате данных: дата, номер телефона, ИНН и т.д. При включенном CAPS LOCK хорошо об этом напомнить.
- Информируйте пользователя о появлении новой информации при заполнении формы.
- Ознакомьтесь с инструкциями, которые помогут пользователю исправить ошибку.
Советы веб-разработчику
Слепые люди взаимодействуют с интерфейсом с помощью программ чтения с экрана/скринридеров, которые вербально воспроизводят то, что показано на экране.Доступность интерфейса для пользователя программы чтения с экрана зависит в первую очередь от разработчика.
Если курсор скринридера находится на кнопке, то в блоке вывода голосового сообщения появится название кнопки от разработчика и тип этого элемента от операционной системы.
Таким образом, незрячий пользователь понимает, что это за элемент и как с ним работать.
Поскольку разработчик занимается и навигация , вот рекомендации, связанные с этим:
- Обеспечьте логические переходы между страницами.
Когда страница загружается долго, зрячий посетитель сайта легко это поймет, но слепого пользователя следует предупредить о том, что она загружается;
- При обновлении или переходе на новую страницу убедитесь, что фокус сразу попадает на первый элемент — кнопку «Назад» или заголовок страницы.
Это позволит незрячему пользователю узнать, что страница обновилась, и понять, где он оказался;
- Когда страница не перезагружается, а меняется только содержимое контейнеров, нужно сообщить пользователю, что содержимое изменилось.
- Обеспечьте логическое перемещение фокуса между элементами, обычно слева направо или сверху вниз.
- Каждый элемент на странице оформляйте как отдельный, иначе слепой не поймет, к какому полю относится та или иная подпись.
- Используйте элементы со ссылками для быстрого перемещения пользователей по странице;
- Добавьте ссылку «Перейти к основному содержимому» перед заголовком страницы.
Это поможет вам быстрее перемещаться по странице.
Изначально параметр может быть скрыт, но должен стать видимым, когда он получит фокус.
- Работайте с базовыми элементами Landmark, которые задаются либо семантическими маркерами в HTML5, либо с помощью ролей ARIA.
- Используйте атрибуты контента (раздел, статья и т. д.), чтобы разделить контент страницы на логические блоки.
- Убедитесь, что заголовки соответствуют структуре страницы.
- Используйте уровни заголовков H1–H6: H1 для верхнего уровня, H6 для нижнего.
Не пропускайте уровни заголовков.
- Предоставьте различные способы поиска контента: карта сайта, поиск по сайту.
- Попробуйте использовать встроенные элементы управления, такие как кнопка .
- Убедитесь, что пользовательские компоненты интерфейса доступны пользователям программ чтения с экрана.
- Укажите в коде тип элемента, его состояние (значение), имя и подсказку для любого элемента интерфейса, который ожидает какого-либо действия от пользователя программы чтения с экрана.
- Убедитесь, что типы элементов определены правильно.
Как правило, тип нативных элементов по умолчанию определяется правильно, но для пользовательских или более сложных элементов тип может определяться неправильно и тогда вам придется определять его самостоятельно.
- Используйте таблицы для табличных данных — тогда они будут доступны программе чтения с экрана.
- Пометьте любой элемент интерфейса, который виден зрячему человеку и ценен для пользователя программы чтения с экрана.
Если элемент не представляет ценности для пользователя программы чтения с экрана, то его «видимость» для пользователя следует отключить.
Подпись к картинке позволяет незрячему пользователю понять, что на ней изображено.
Подписи к картинкам в коде также важны для пользователей с медленным интернетом.
- Описывать поля ввода, используя атрибуты label, title или aria-label;
- Используйте привязку атрибута for и специальный класс для вспомогательных технологий, когда вам нужно установить один элемент в качестве источника метки для другого элемента.
Быструю автоматическую проверку можно провести несколькими способами:
- Прямо в браузере с помощью HTML CodeSniffer , топор , Аудит доступности маяка или ВОЛНА ;
- Интегрируя инструменты топор-ядро , Аудит маяков или АксессЛинт.js в свой проект программно добавлять тесты доступности и отлавливать ошибки при сборке интерфейса;
- Используя такие инструменты, как АксессЛинт чтобы обнаружить проблемы с доступностью во время загрузки GitHub.
- Убедитесь, что программа чтения с экрана попадает на элементы и считывает все необходимое, включая метки, подсказки и ошибки.
- Убедитесь, что контент воспроизводится в правильном порядке: метка перед полем, заголовки перед контентом и т. д.
- Проверьте, что в коде указан правильный язык и программа чтения с экрана произносит слова без акцента.
- Убедитесь, что кнопки и ссылки имеют описание, позволяющее понять, куда приведет нажатие на них.
Мы хотим, чтобы цифровая среда стала максимально адаптированной для людей с особыми потребностями, в том числе людей с нарушениями слуха, зрения, двигательными нарушениями и трудностями в восприятии информации.
Надеемся, что благодаря нашим рекомендациям аудитория вашего сайта/приложения пополнится благодарными пользователями с особыми потребностями.
Будем рады ответить на вопросы в комментариях.
Теги: #программирование #Управление разработкой #интерфейсы #адаптивная верстка #приложения для слепых #разработка для инвалидов
-
Как Изучить Adobe Photoshop
19 Oct, 24 -
Brainapps — Онлайн-Игры Для Тренировки Мозга
19 Oct, 24
