// //
Мнения

Accessibility is the new black:
5 принципов доступного веб-дизайна

15 ноября, 2017
avatar
Виталий Дворецкий
UX-designer в DataArt
Мы любим тексты без ошибок. Если вы все же их обнаружили, выделите фрагмент и нажмите Ctrl+Enter.

Виталий Дворецкий занимается UX-дизайном в DataArt. Многие его проекты связаны с индустрией здравоохранения, поэтому о проблеме доступности веб-ресурсов он знает не понаслышке. Его дизайн-студия организовывает конференцию IT NonStop: UX Night, где можно услышать об опыте создания универсального дизайна от топовых специалистов индустрии. А для Telegraf Виталий написал колонку о проектировании доступных веб-ресурсов.

______________________________________________________________________

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

Активное движение за права людей с ограниченными возможностями началось после того как в 1964 году в США был подписан закон о гражданских правах, который запрещал дискриминацию по принципам расы, гендера или национальности. Почти 10 лет спустя — в 1973-м — в Америке приняли закон о реабилитации. С этого момента началось формирование того, что теперь называется доступной средой.

Серьезный разговор о доступности веб-сервисов начался, когда американцы решили перенести в Интернет часть выборных технологий. Власти запустили онлайн-регистрацию граждан, желающих воспользоваться правом голоса. Оказалось, что около 19 % потенциальных избирателей — люди с ограниченными возможностями. За этот немалый процент электората началась борьба. Государственные ведомства и компании США задали некий стандарт доступности. Некоторые частные компании стараются следовать ему как из этических соображений, так и для масштабирования своего бизнеса, охвата новой аудитории.

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

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

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

  • Примерно 15–20% населения США испытывают сложности с чтением из-за проблем со зрением или дислексии.
  • Зрение в принципе не позволяет читать 3–4% жителей США, Великобритании и Канады. Для людей старше 70 лет этот показатель возрастает до 10%.
  • Около 8% белых мужчин страдают от различных форм дальтонизма или цветовой слепоты. Для других рас и этнических групп этот показатель может варьироваться от 1 до 8%.
  • Примерно 7% работающего населения страдает от проблем мелкой моторики.
  • От 4% до 5% жителей США, Великобритании и Канады страдают от проблем со слухом. Доля заметно вырастает среди людей старше 60 лет и превышает 20% для тех, кто достиг возраста 75 лет.
  • Распространение умеренных когнитивных нарушений среди пожилых людей достигает 12–17%. Когнитивные нарушения встречается у 44% неврологических пациентов старшего возраста.

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

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

  1. Не используйте цвет как единственный способ передать различие между дизайн-элементами. Использование контраста, формы, текстуры, дополнительных лейблов (например, на графиках) значительно улучшит восприятие информации людьми с дальтонизмом.
    Trello использует текстуры, чтобы помочь пользователям с дальтонизмом различать лейблы. Давайте рассмотрим, как это работает для разных типов дальтонизма:Нормальное зрение.

    Дейтеранопия.Протанопия.Тританопия.Google Maps использует контраст для индикации плотности трафика. Даже в черно-белом режиме зоны с разной плотностью движения легко различаются между собой.
  2. Уделяйте внимание контрасту. Опираясь на гайдлайны WCAG 2.0, можно сказать, что контраст между текстом и фоном должен составлять как минимум 4.5:1. Если размер шрифта не менее 24px или 19px bold, минимальное значение опускается до 3:1.
    Этот принцип основан на тестировании среди людей с дальтонизмом и другими проблемами со зрением. Следуя ему, можно быть уверенным, что текстовая информация будет им доступна.
    Если ваш текст размером 24px или 19px bold, самый светлый оттенок серого, который вы можете использовать, — #959595. Если размер шрифта меньше, минимальное значение — #767676. Есть множество программ и плагинов для проверки контрастности.  Я много лет использую Colour Contrast Analyser.
    Соблюдение таких гайдлайнов уже стало обычной практикой для мировых СМИ и сервисов, которыми пользуются миллионы людей. Это достаточно легкий способ улучшить продукт, над которым вы работаете.
  3. Тестируйте верстку.  Слабовидящие пользователи решают свою проблему разными способами, в том числе, увеличивая шрифт в браузере. Убедитесь, что при увеличении шрифта ваш layout все еще работает, навигация остается простой и понятной, кнопки и другие элементы тоже масштабируются и не создают багов. Те, кому не хватает браузерного увеличения, используют «экранную лупу» и панорамируют сильно увеличенную страницу. При проектировании это тоже нужно учитывать:
    — Тестируйте тексты и их поведение при увеличении экранной лупой. Проверяйте наличие переносов строк и горизонтального скролла: это может привести к потере текущей строки. Таким образом пользователю придется постоянно скроллить большие объемы текста.
    — Люди со слабым зрением обычно видят небольшую часть экрана. Им приходится долго искать элементы навигации, если они расположены в непривычных местах.
    — Следите за консистентностью позиций элементов на экране. Если такие важные элементы, как submit-кнопки расположены в правой или нижней части экрана, найти их бывает трудно. Пользователи, которые пользуются экранной лупой, могут и вовсе пропустить контент, находящийся в правой части экрана. Важная информация должна находиться слева или по центру.
  4. Не забывайте о клавиатуре. Для большинства использование клавиатуры в паре с мышкой или тачпадом — привычное дело. Однако для многих пользователей это не так просто. Люди, которые испытывают проблемы с моторикой, чаще всего отказываются от работы с сенсорными устройствами и мышью, отдавая предпочтение клавиатуре. Она дает отличный физический фидбэк, ею легко пользоваться ввиду простоты состояний кнопок. К тому же, люди с дисфункцией рук или парализованными конечностями часто нажимают клавиши по одной с помощью палочки, которую держат во рту. Также люди с сильно ослабленным зрением (особенно, слепые) часто используют только клавиатуру вместе со ScreenReader, поскольку не видят курсор. Для этих категорий пользователей важны Tabindex. Убедитесь, что атрибуты расставлены в логическом порядке, и обязательно протестируйте их. Также убедитесь, что у пользователя будет понятная индикация элемента, на котором установлен фокус. Windows и MacOS уже давно имеют режимы работы с клавиатурой, а браузеры оптимизируют работу с этими режимами, позволяя пользователям с ограниченными возможностями использовать консистентный набор инструментов на разных сайтах.
  5. Не забывайте оптимизировать видео. Используя анимацию, учитывайте, что у пользователя должна быть возможность ее отключить. Если цель анимации — донести до пользователя часть контента, убедитесь, что у этого способа передачи информации есть альтернатива в статическом виде. Та же история с видео. У люди, которые страдают от проблем со слухом или речью, могут возникать трудности с восприятием видео. Используйте субтитры или сурдоперевод.

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

Также приглашаю всех присоединиться к дискуссии о доступном дизайне на IT NonStop: UX Night, которая состоится 25 ноября. Подарок от меня читателям статьи — промокод “givememore”, который позволит первым 15-ти приобрести билет со скидкой в 50%.

avatar
Виталий Дворецкий
UX-designer в DataArt
Колонка

У нас есть еще кое-что для вас

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

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