Всем привет, мы последние 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 и искали на ощупь где, перефразировали, но надо помнить что могут неверно понять, выражаться как можно чётче
Обязательно валидируйте с ЦА хотя бы иногда, для нас это было и информативно, и интересно, и по-человечески приятно
В целом такие ошибки делали и уроки вынесли, будет хорошо, если кому-то поможет не наступать на те же грабли, но это, конечно, далеко не всё по этой теме, будем рады, если поделитесь своим опытом, ну и помочь, если нужны какие-то детали из нашего.
adrozhzhov
Искал alt текст для иллюстраций в статье про доступность.
Или подписи к иллюстрациям, как альтернативу альтернативному текстовому представлению.
Но его нет. Странно как-то.
iliasm Автор
вокруг изображения обычно и так куча информации о чём там, например, если это интернет магазин, там будет и название товара и описание, зачем ещё раз на картинке? лучше наоборот в игнор.