Всем привет, мы последние 2 года очень плотно подсели на тему доступности (он же accessibility, он же a11y) в наших проектах, хотелось бы рассказать на какие грабли наступали, какие уроки вынесли, возможно, кто-то избежит наших граблей
В целом а11и это про слепых, слабовидящих, плохо видящих, нарушения зрения (дальтонизм и прочее), про ограничения мобильности, когнитивные нарушения и многое другое.
Идеально для всех не будет, идеально не ждут, любое улучшение будет круто.
Мы увидели, что есть «общие» проблемы
-
Много, где делают на «отпадись», несколько примеров из реальной жизни:
-
Тактильные дорожки клеят как попало, не по стандарту, где должны быть кружочки — там палочки и наоборот, в городах на улицах сплошь и рядом. А ещё часто имеются только за пару метров до перекрёстков, а дальше наугад.
-
Для сдачи зданий в Литве тактильные дорожки должны быть, одни застройщики заказали у наших друзей 50 кружочков и всё. Как они их разместили и сдали здание, история умалчивает.
-
В одной из терминальных систем есть голосовой фидбек, который надо включить через меню, глубоко где-то, а меню тачскриновое.
-
В одной из поликлиник в Латвии у нас пандусы такие, что страшно подумать, как можно на него заехать на коляске, галочка стоит, что он есть, но вот и всё.
-
-
Дорого для малого количества пользователей, сложно убедить организации, что этим нужно заниматься, в ЕС законодательная база готова, с 2025-го года доступность должна быть во всех новых устройствах в публичных местах, но на каком уровне особо не прописано. Многие не шевелятся вообще, фраза «будет 2025 — будем думать» звучит на встречах
-
Стандартизация довольно слабая и та часто игнорируется
-
Как ни крути, мешает
-
Тактильные дорожки мешают ходить, например, на каблуках, мешают коляскам и т. д.
-
Тактильные дорожки мешают мыть пол
-
Дополнительные инструменты для доступности немного, но мешают зрячим, занимают место на экране и т. д.
-
Светофоры и звуковые оповещения увеличивают общий уровень шума
-
-
То, что удобно одним, может быть неудобно другим
Из приятного, по нашему опыту сообщества очень дружелюбные, отзывчивые и они очень любят, когда с ними советуются, у наших фраза «о нас не без нас» звучит часто.
Люди любят самостоятельность, и опция «вызвать помощь» это не про доступность.
Мы делаем и железо, и софт, и мобильные приложения, и веб, потому шишек набили во всех этих областях.
Веб
В вебе доступность очень важна слепым, слабовидящим, а также людям с нарушенной мобильностью.
Одна из болей, которую толком не решить — это определить включен ли скрин ридер, в мобильных приложениях это можно узнать, а вот в вебе ни в какую. Проблема в том, что многие веб-компоненты довольно плохо дружат с доступностью, с календарями, например, прям беда-беда. Нам пришлось на одном мини-проекте сделать две формы, одна для зрячих, другая для скрин ридеров, плохое решение, но иначе мы портим UX зрячим очень сильно.
Скрин ридеры довольно разные, выглядит что в мобильных всё намного более продвинуто, но тоже есть свои проблемы.
-
Для слепых
-
Язык в хтмл теге обязательно надо (<html lang=»ru»>), иначе скрин ридеры могут начинать читать с каким-то диким акцентом. Но и это не панацея, иногда «сбоят», тут ничего не поделать, но слепые «научены» и такое слышать и понимать
-
Полям в формах нужны лейблы, если они прописаны нормально, не нужно дополнительных действий, разве что иногда расширить, если из контекста не понятно, что надо сделать, это можно засунуть в aria-label
-
Если есть какое-то предзаполненное значение, то лучше зачитать что-то вроде: выбрана такая-то дата, вместо просто зачитывания даты
-
Явно, что возможно, например: введите номер телефона с кодом страны
-
Красоты и элементы дизайна смело ставим «aria-hidden=»true»»
-
Внимательно с кастомными компонентами
-
Важно использовать скрин-ридеры и тестировать самим вслепую, на коллегах
-
Тестировать на куче девайсов и версий, они отличаются
-
-
Для слабовидящих
-
Б-г ради, не отнимайте у людей браузерный зум
-
Осторожнее с креативными шрифтами
-
Контраст, есть стандарт WCAG и много всяких чекеров
-
К чертям бегущую строку, в вебе её вроде уже почти забыли, но иногда приходится прям с боем клиентов убеждать что это зло
-
Мигание очень сильно мешает слабовидящим
-
Тёмные темы — как выяснилось, не просто красота, а нужная вещь некоторым слабовидящим
-
Как можно проще лейаут, чтобы всё было понятно и логично куда дальше смотреть
-
-
Для всех
-
Порядок критичен, табстопы, если сам по себе не выставился «как надо», то надо прописывать
-
Ожидаемое поведение, без магии
-
Краткость будет оценена, а то бывает клиент начнёт сочинения писать, а пользователям потом прослушивать или читать
-
Семантическая вёрстка очень важна, не делайте кнопки a`шками и спанами
-
Презентации
У нас опыт только с паверпойнтом, уж простите.
-
В паверпойнте есть утилиты под это, есть подсказки, настройка порядка, очень неплохо, быстро и просто можно сделать презентацию доступной
-
«Прячем» всё что не надо, копирайты на страницах в игнор, если надо, то на последнем слайде хватит
-
Заголовки ставим даже если они скрытые
Мобильное: MAUI
Мы в основном работаем с MAUI, потому о нём больше, но в целом подходы будут те же и в нейтиве. В целом в мауи вполне неплохо с этим.
-
Тестить нужно всегда на куче девайсов
-
Версии толкбеков и войсоверов ведут себя по-разному у производителей и версий ОС
-
Наткнулись на интересный баг, страница показывается приезжающим снизу попапом, если кнопка сверху, на всех версиях толкбека кнопка работает, если снизу, то на последней кнопка просто не видится ридером, связано похоже с тем, видна ли кнопка на экране на момент инициализации толкбека на странице. Побороть не удалось, убрали анимацию.
-
Осторожно с цифрами, валютами, датами, чтобы не было «три-ноль-ноль, запятая, ноль пять», иногда надо подсказать ридеру
-
Сложности в работе с несколькими модальными окнами, ридеру нужно говорить «не читать» фоновую страницу
-
Толкбэк иногда селектит нав бар при нескольких модалках, пока не побороли
-
Автофокус не всегда фокусит нужное, иногда приходится форсить после загрузки страницы
Хардвар
-
Слепые
-
Про брайль
-
Для нас сюрпризом было, что брайль знает хорошо если четверть, а по некоторым оценкам вообще 10%, цифры надо дублировать арабскими, где возможно, какие-то пиктограммы
-
Следовать стандартам размера брайля надо (больше не будет лучше), мы на первых кнопочках сделали как можно больше точки, слепые не оценили
-
Большие сильно выпирающие точки брайля хорошо, но не должны быть острыми
-
На таблетках часто профанация, стирается быстро, читается плохо
-
При этом брайль очень-очень ценят те, кто в него умеют, за просьбу разъяснить зачем брайлевые экраны, если везде есть text-to-speech прилетело знатно
-
-
Про тактильные дорожки
-
По дорожкам идут по центру по самой дорожке, а не рядом, но пожалуйста, не приводите человека прямиком в стенд или стол
-
Дорожками пользуются и слабовидящие тоже, потому они должны быть как можно более контрастными
-
Есть какие-то стандарты, но много где им просто не следуют, основные — палочки и кружочки, палочки дорога вдоль направления движения, кружочки — место привлечения внимания, например, поворот, препятствие, кнопка лифта и т. д.
-
-
Про голосовой фидбек
-
Обязательно должно быть управление скорости голоса и громкости
-
Звук можно смело ускорять по умолчанию, мы сейчас используем майкрософтовый, 1.2 по умолчанию стоит, может ещё ускорим
-
Длинные паузы в озвучке плохо, незрячие думают, что это конец
-
Джек — обязательно, не многие ходят с наушниками, но некоторые ходят
-
Опция повтора нужна обязательно
-
Очень желательно давать «перебивать» говорилку, тем, кто знает, что им надо, чтобы не ждать конца
-
-
Часто первый раз приходят с поводырём, дальше могут сами, запоминают хорошо, главное без неожиданностей, но есть и те, кто самостоятельно читают карты и ходят по ним
-
Очень помогают тактильные планы
-
Информацией обмениваются через ассоциации
-
А ещё бывают тактильные фигурки, например миниатюра церкви перед вами, чтобы на ощупь можно было представить форму
-
-
Слабовидящие
-
Контраст железки от стен, например если какой-то терминал, то желательно чтобы он не был белым на фоне белой стены
-
Если возможно, то помогает возможность больших кнопок, это, кстати, не только для слабовидящих, но и для людей с нарушениями движений
-
Отдельно хотелось бы сказать про шрифты, если у вас есть какой-то сайнедж, то постарайтесь выбрать шрифты с такими свойствами:
-
линии одинаковой толщины
-
у цифр обратите внимание на длину линий-хвостиков (вроде, апертурой зовётся), слабовидящим важно, чтобы 5 от 6 сильно отличалась, 3 от 8, чтобы, если есть «блюр», всё равно было понятно что есть что
-
Очень часто видим проблему нумерации, слабовидящим это мешает, например кассы нумеруются справа налево 4-3-2-1, вместо 1-2-3-4, а видели и совсем дичь 1-2-4-3, не надо так
-
«Металлик» в стрелках, цифрах и прочих элементах мешает читаемости
-
Если у вас какая-то сменная информация на экранах, она должна показываться достаточное время для чтения, не пропадать, некоторые люди видят «сеткой» и им нужно время просканировать всю картинку
-
-
-
Другие
-
Высота устройств должна позволять управлять ими из коляски, или низким людям
-
Если большой экран, то нужна возможность либо уменьшить интерфейс, либо хотя бы временно сдвинуть
-
Есть люди со множественными нарушениями, например и слепые и с нарушениями мобильности
-
Люди в инвалидных креслах иногда не могут двигать спиной, все средства управления должны быть в доступе не отрывая спины от спинки кресла
-
Шишки в разработке
-
Если у вас железо, то его изменение это понятное дело долго и дорого, сложно убедить клиента что это надо, а не достаточно сделать одну кнопку «позвать помощь»
-
А ещё мы сделали ошибку в брайле, и никто не заметил, пока не «показали» слепым, там сразу разобрались, а на рендерах, фотографиях и промо видео так и осталось, конечно
-
Много пайки, хорошо есть человек с прямыми руками, но всё равно запасные детали нужны всегда
-
Прототипирование/моделирование занимает много времени, как ни старались делать дешевле, всё равно итераций и ошибок много
-
Сложность соблюдения стандарта и дизайна, информации мало, стандарты очень сырые, например, мы так и не нашли иконок для скорости и громкости, выдумывали сами
-
Нюансы 3д печати, у нас есть 3д-принтер, но фиговый, в итоге перешли на аутсорс, но времени потеряли много
-
Мы ставили китайские усилители, а они начали массово гореть и жрать много тока, экономии не получилось
-
С динамиками много шишек набили, в итоге поставили динамики от айфона 6с, работают хорошо, лучше всего что мы пробовали из радиомагазинов, но надо подбирать «пары» динамиков, они разнятся сопротивлением
-
У нас для звука с нормальным резонатором мало места, опять же, пока пришли к мобильным динамикам убили кучу времени
-
У нас на железке есть «энкодеры» (крутилки такие, как на старых магнитолах), так вот с ними проблемы, они «зависают» в серединном положении и флудят сигналами, выбирайте энкодеры ответственно
-
У нас звук с одних и тех же динамиков с винды и линукса был сильно разный, на винде громче, пока решили софтинкой “pavucontrol”
-
У нас есть звук для навигации, пока отзывы что два щелчка, пауза, два щелчка лучше, чем щелчёк, пауза, щелчёк
-
Щёлк, лучше, чем биип
-
У нас в одном месте текст был tickets in front of you, а люди думали ticket’s in front of you и искали на ощупь где, перефразировали, но надо помнить что могут неверно понять, выражаться как можно чётче
-
Обязательно валидируйте с ЦА хотя бы иногда, для нас это было и информативно, и интересно, и по-человечески приятно
В целом такие ошибки делали и уроки вынесли, будет хорошо, если кому-то поможет не наступать на те же грабли, но это, конечно, далеко не всё по этой теме, будем рады, если поделитесь своим опытом, ну и помочь, если нужны какие-то детали из нашего.
ссылка на оригинал статьи https://habr.com/ru/articles/818087/
Добавить комментарий