Чему нас может научить Стиви Уандер при создании доступного дизайна

Перевод подготовлен Ксенией Блэйк.

Имя Стиви Уандера всем хорошо известно.21 раз он становился обладателем международной музыкальной премии «Грэмми», а также имеет награду «от Американского национального музея гражданских свобод за вклад в борьбу за соблюдение прав человека. Уандер по праву считается международным посланником мира ООНН. А в 2014 г. Барак Обама вручил ему медаль борца за свободу. Но есть ещё одно достижение, которое навсегда будет связано с его именем. Во время 59-ой церемонии «Грэмми» в 2015 г., объявляя Эда Ширана победителя в номинации песня года, за Хит Thinking out loud “Мысли вслух», Стиви Уандер сказал «Нам нужно сделать все, для того, что бы каждая даже самая маленькая частичка в мире была доступна для людей с инвалидностью». Ему зааплодировал не только весь зал, но и мы — австралийские программисты и дизайнеры, которые искренни верят в то, что с этической точки зрения доступность имеет первостепенное значение, поскольку она играет ключевую роль в создании равноценного опыта использования цифровых сервисов и услуг, как основного права человека.

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

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

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

И последнее: доступный дизайн это очевидная прибыль. На сегодняшний день люди с инвалидностью составляют 15 процентов всего населения планеты. Это примерно миллиард человек. И ещё, не смотря на то, что многие члены общества, особенно люди в возрасте хоть и не считают себя инвалидами, но в будущем у них могут возникнуть проблемы опорно-двигательного аппарата или со зрением. Поэтому, все большее количество людей будет нуждаться в доступном дизайне. Да и вообще, неужели вам, как бизнесмену, не хочется создать продукт, который понравится всем слоям населения.

Не смотря на то, что уже существуют некоторые принципы руководства стандартов доступности, мы выбрали именно те, которые чаще всего используем в работе с различными благотворительными организациями, как «Американская Ассоциация по подготовке собак-поводырей» и «Канадское сообщество людей с болезнью Альцгеймера».

Вот несколько советов по созданию доступного контента

1. Аккуратнее используйте цветовую контрастность

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

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

Вот некоторые из инструментов, которые позволят измерить коэффициент цветовой контрастности:

Stark’: Stark это плагин для дизайна, использующийся в Figma, Sketch, Adobe и многих других приложениях. При помощи режима симуляции цветовой палитры для дальтоников, можно легко и быстро измерить коэффициент цветовой контрастности И на основании этого определить рекомендованные цветовые пары.
‘Contrast ratio’: Этот инструмент обеспечивает цветовую индикацию фона текста, вместе с наиболее точной информации о коэффициенте контрастности.
‘Contrast checker’.
The WAVE Это расширение для браузера Chrome –инструмент автоматического тестирования, разработанный консорциумом п=WebAIM.org При помощи встраиваемых индикаторов или иконок он обеспечивает анимационное сопровождение различных дефектов доступности, обнаруженных на странице.

2. Создавайте доступные веб-формы

Большинство полей ввода форм требует пользовательского взаимодействия. Обсуждая коэффициент контрастности, мы выяснили, что самая большая проблема связана с нахождением кнопки «Связаться с нами», потому что она сливается с фоном страницы. А теперь, принимая во внимание данное обстоятельство, попробуйте найти поле ввода, предназначенное только для номера кредитной карточки и заполнить его. Вы быстро поймете, что из-за некорректной разметки, сделать это гораздо сложнее, чем просто нажать кнопку.

Что можно сделать

Поля ввода должны быть размечены так, чтобы их можно было быстро найти и отличить от других элементов и компонентов, расположенных на странице.
Каждое поле ввода должно содержать визуальные индикаторы, отражающие текущий уровень состояния. Например, активное или недоступное – только для чтения. Программа экранного доступа должна иметь возможность определять их и отличать друг от друга.
Каждое поле ввода должно содержать визуальные подсказки для определения места расположения курсора. Это придает людям уверенность в том, что информация вводится туда, куда нужно.
Ошибки должны идентифицироваться, а сообщения о них должны отображаться рядом с тем полем ввода, в котором пользователь допустил ошибки. Благодаря анимационному сопровождению, пользователь сможет понять, почему оно заполнено неправильно. Примеры: электронный адрес, или номер телефона без кода страны. В инструкции по исправлению ошибок очень важно добавить какое-то сообщение или контекст, четко описывающий проблему, для того чтобы пользователь знал что нужно подправить. Если отправленные пользователем данные ошибочны, то при возврате на страницу с формой курсор должен автоматически попасть на первое из полей ввода, которые содержат ошибки. Это позволит сэкономить время и сосредоточиться только на тех полях ввода, которые вызвали проблемы.

Быстрое подтверждение введенных данных

При разработке веб-форм Убедитесь, что они содержат подробные инструкции для заполнения. Это позволит людям правильно ввести информацию с первого раза. Например, если в поле «Номер телефона» нужно сначала указать код страны в скобках, то хорошо бы показать пример как это должно выглядеть. Например: (1256).
Структура и размер полей редактирования должны совпадать с типом предоставляемой информацией. Например, поле ввода «номер кредитной карты» должно быть длиннее, чем поле ввода даты истечения карты. Для этого можно использовать параметр максимальной длины, чтобы автоматически проверить количество символов, которое разрешено сервером. Такие поля ввода, как «Месяц» или «Год» по умолчанию имеют не более двух — пяти символов.
Поля ввода, расположенные вертикально, всегда легче читать, чем те, которые находятся друг под другом. Но если метка находится над полем заполнения формы, и сама форма расположена вертикально, то следует разделить ее на два столбца для просмотра на широком экране. Корректные Метки на полях ввода — это неотъемлемая часть доступности. Доступность нарушается, когда вместо них используется вспомогательный текст, поскольку он пропадает, как только человек начинает вводить информацию. Это вызывает трудности при проверке данных перед отправкой на сервер.

3. Проверяйте дизайнерские решения, привлекая к тестированию людей всех возрастов и разных способностей

Пользовательское тестирование очень хороший способ заинтересовать людей вашими разработками, особенно пользователей программ экранного доступа.

Вот как это следует делать

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

О Чём нужно помнить

Нужно помнить о том, что состояние индикации фокуса очень важно для людей с ослабленным зрением. Оно позволяет определить место указателя курсора на странице. Следует также учитывать, что стандартные элементы HTML уже содержат необходимые атрибуты для создания доступных веб-форм. Зная это, Разработчики должны с осторожностью внедрять нестандартные элементы управления или встраиваемые плагины. Например: плагин с выпадающим списком. Перед использованием таких плагинов убедитесь, что они полностью поддерживают клавиатурную навигацию. Если вы всё же решили использовать плагины для приложений, виджеты или Java script, которые имеют функцию перехвата всплывающих окон или подсказок, то следует помнить о том, что в таком диалоговом окне всегда должна быть кнопка «Закрыть».
Тщательно тестируйте свой продукт на доступность, используя клавиатуру для навигации по интерактивным элементам, таким как списки, ссылки, кнопки и поля ввода и помните что логический порядок перемещения курсора должен совпадать с визуальным расположением элементов на веб-странице.

Во время тестирования задайте себе вопрос:

Могу ли я найти и активировать все элементы управления с клавиатуры?
Могу ли я сразу определить место нахождения курсора на странице?
Перехватывает ли фокус всю страницу или только одно диалоговое окно?

4. Ресурсы, которые можно использовать

5. Не забывайте про программы экранного доступа

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

Что можно сделать

Избегайте автоматического проигрывания видео на странице. Это плохая практика в целом, но для незрячих пользователей, особенно, поскольку она заглушает речь программ экранного доступа;
Всегда используйте смысловой контекст. Когда пользователи экранного доступа попадают на ссылку или кнопку, результат должен быть предсказуемым. Например Нажмите здесь чтобы связаться с нами». Если ссылка просто называется «Здесь», этого может быть недостаточно, чтобы предсказать дальнейший результат;
Описание картинок должно соответствовать тематике ресурса. Оно должно содержать детальное описание изображения, а не просто слово картинка;
Используйте атрибуты ARIA для дополнительного описания событий на экране. Например: Роль «Dialog» используется в том случае, когда на экране появляется дополнительное диалоговое окно о наличии, которого нужно сразу же оповестить пользователя.

6. Не скрывайте информацию в ховерах

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

Что можно сделать

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

7. Не рассчитывайте на анимацию и плавные эффекты

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

Что можно сделать

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

8. Используйте хорошо знакомые пользователям традиционные подходы

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

Что нужно сделать

Используйте предсказуемые методы навигации, которые упрощают пользовательский опыт;
Не употребляйте сложные термины для объяснения всплывающих подсказок.

***

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

Оригинал статьи: Bridget Noonan + Kurt Smith. What Stevie Wonder can teach the world about accessible design