2 ноября 2017

Доступность глазами реальных людей с ограниченными возможностями

“Если вы инвалид, что для вас самое сложное в использовании интернета?” — ответы на этот твит Сафии Абдаллы на многое открыли нам глаза и показали, какой должна быть веб-доступность на самом деле.

Твит, с которого все началось

Любопытно узнать: Если вы инвалид, что для вас самое сложное в использовании интернета? Перепост, чтобы больше людей ответило, пожалуйста — спасибо!

В этой статье я собрала и сгруппировала основные темы, поднятые в обсуждении.

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

Нет субтитров

Отсутствие субтитров — самая популярная проблема, о которой сообщило большинство людей. Вот несколько твитов:

Я глухой, и могу сказать, что для меня главная проблема — это субтитры в видео

Видео/аудио без субтитров или скрипта.

Я слабослышащая, поэтому видео без субтитров — это моя большая боль. Твит или статья в стиле “Вы верите, что он это сказал?”, без пояснения.

А еще, моя сестра говорит, что ненавидит видео без субтитров. Она глухая.

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

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

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

Не особо. Автоматические субтитры YouTube недостаточно точны.

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

Движение, анимация и перегруженные страницы

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

Синдром дефицита внимания: если на странице есть “легкая” анимация, которая всегда шевелится, я не могу сосредоточиться. Главный виновник проблемы: градиент под заголовком на сайте blog.intercom.com

Если СДВГ считается, то скажу: очень сложно найти нужную информацию на перегруженной странице, а анимации отвлекают так, что ужас

То же самое. Я тоже аутист и меня бесят и даже пугают гламурные эффекты/анимации при наведении курсора. А также внезапное автовоспроизведение и т.п.

Сделайте своим пользователям одолжение: не отвлекайте их автоматическими видео, рекламой или каруселями.

Простыни текста

Было очень много комментариев о больших, неструктурированных текстах — особенно от людей с дислексией и нарушением когнитивных функций:

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

Когда люди печатают большие блоки текста без интервалов.

Огромные параграфы. Страница в Википедии обычно состоит из кучи длинных параграфов с длинными предложениями. Пара секунд — и я теряю место, где читала.

СДВГ + большие, неразбитые блоки текста или небольшие анимации, которые не имеют отношения к основному контенту страницы

Большие параграфы, слишком много движущихся картинок, слишком много контента в форме видео (особенно, вспомогательные файлы), отсутствие субтитров, перегруженные страницы, где слишком много всего.

А решение простое. Просто разбивайте текста на параграфы и добавляйте подзаголовки. А еще используйте маркированные списки. Вуаля!

Мелкий шрифт

Удивительно, что в руководстве по обеспечению доступности веб-контента (WCAG) нет требования к минимальному размеру шрифта. Хотя это напрямую влияет на пользователей со слабым зрением.

Я почти слепой на левый глаз. Мелкий, узкий шрифт, недостаточно контрастный к фону.

Шрифты часто слишком мелкие, а если увеличить размер, сайт едет.

Мелкий шрифт и некоторые анимации

Проблемы с увеличением

Некоторые пользователи со слабым зрением отметили проблемы с лейаутом и навигацией при увеличении страницы или шрифта.

У моей дочери слабое зрение, и ей приходится использовать увеличение 300-500%. На таком уровне увеличения у многих сайтов проблемы с навигацией.

У меня неврологические проблемы со зрением из-за синдрома хронической усталости. Проблема — мелкие шрифты. Я всегда увеличиваю шрифт в браузере, но иногда из-за этого едет компоновка.

Тем, у кого проблемы со зрением, бывает сложно понять компоновку.

Низкий контраст цветов и текста

Один из основных компонентов доступности — это цветовой контраст. И все же у многих интерфейсов с ним до сих пор проблемы.

Недостаточно контрастный текст относительно фона. Яркие фотографии на фоне текста.

Текст как графический элемент — без альтернативного текста, без описания. Начиная от сайтов, заканчивая мемами.

Определенно, недостаточно контрастные цвета.

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

Яркие цветовые схемы

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

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

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

Мне приходится читать статьи с Kindle Oasis, чтобы читать без подсветки. А еще я обнаружил, что функция “режим чтения” работает нестабильно.

Сайты, которые всецело полагаются на цвет

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

Дальтоник. Текст на фоне обычно вижу, но переключатели с цветовым кодированием, тепловые карты — с этим бывают проблемы.

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

Не только дальтоники нуждаются в дополнительных, нецветовых сигналах:

Нарушение сна: После 5 вечера я читаю со включенным приложением f.lux. И почему некоторые сайты думают, что достаточно сделать гиперссылки синими и подчеркивание не нужно?

Сайты, управляемые мышью

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

У меня нет проблем, но у моей мамы болезнь Паркинсона и ей очень сложно пользоваться мышью.

На некоторых сайтах меню можно открыть только при помощи мыши.

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

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

Слишком маленькие тач-зоны

Проблема, аналогичная предыдущей. Многие люди отмечают, что тач-зоны слишком маленькие.

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

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

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

Тач/клик-зоны слишком маленькие (и в них невозможно попасть), либо слишком большие (например, кликабельный не только заголовок, но и текст под ним) | (иногда у меня бывает тик и тогда я не могу точно прицелиться мышью, или случайно задеваю экран)

Мультитач-жесты тоже представляют проблемы для некоторых пользователей:

Тремор рук. Иногда я по ошибке нажимаю, куда не нужно (особенно эти кнопки “купить в один клик”. Иногда наоборот не могу попасть и нажать, куда нужно. | Да! У приложении Kindle есть жест “нажать дважды и держать”, чтобы перейти в настройки дисплея. Это супер сложно (у меня деформация руки)

Капчи

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

У моей мамы проблемы со зрением и недавно она прислала мне ссылку на этот классный ресурс: https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/ | Если говорить о том, что ее раздражает, так это капчи без озвучки. Они серьезно ограничивают ей доступ в ряд сервисов.

В заключение

Подводя итоги этого обсуждения, я хочу озвучить несколько выводов:

Веб-доступность — это гораздо больше, чем забота о слепых с устройствами чтения экрана.
Почти все, что называют люди с ограниченными возможностями, бесит и здоровых людей — так что от решения этих проблем выиграют все!
Многое из того, что назвали люди, не входит в руководство по обеспечению доступности контента (WCAG). Поэтому нужно, чтобы в тестировании участвовали люди с ограниченными возможностями!
Благодарю Сафию Абдаллу за ее вопрос в Твиттере. И спасибо всем, кто ответил и открыл для меня (@hampelusken) столько нового.

Дальше — большe

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы.

28 августа 2017

Смерть от гамбургера

15 ноября 2016

Основные тренды дизайна 2016

26 января 2017

Невероятная новость об искусственном интеллекте Google, которую вы, возможно, пропустили

26 сентября 2017

Верстка сайтов для людей с ограниченными возможностями

19 декабря 2016

Разрушаем шесть мифов о веб-лейаутах

6 апреля 2018

Krijn Rijshouwer: о Framer, коде и будущем дизайнеров

aic