Доступность, она же accessibility: делимся нашим опытом разработки

Всем привет, мы последние 2 года очень плотно подсели на тему доступности (он же accessibility, он же a11y) в наших проектах, хотелось бы рассказать на какие грабли наступали, какие уроки вынесли, возможно, кто-то избежит наших граблей

В целом а11и это про слепых, слабовидящих, плохо видящих, нарушения зрения (дальтонизм и прочее), про ограничения мобильности, когнитивные нарушения и многое другое.

Идеально для всех не будет, идеально не ждут, любое улучшение будет круто.

Мы увидели, что есть «общие» проблемы

  • Много, где делают на «отпадись», несколько примеров из реальной жизни:

    • Тактильные дорожки клеят как попало, не по стандарту, где должны быть кружочки — там палочки и наоборот, в городах на улицах сплошь и рядом. А ещё часто имеются только за пару метров до перекрёстков, а дальше наугад.

    • Для сдачи зданий в Литве тактильные дорожки должны быть, одни застройщики заказали у наших друзей 50 кружочков и всё. Как они их разместили и сдали здание, история умалчивает.

    • В одной из терминальных систем есть голосовой фидбек, который надо включить через меню, глубоко где-то, а меню тачскриновое.

    • В одной из поликлиник в Латвии у нас пандусы такие, что страшно подумать, как можно на него заехать на коляске, галочка стоит, что он есть, но вот и всё.

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

  • Стандартизация довольно слабая и та часто игнорируется

  • Как ни крути, мешает

    • Тактильные дорожки мешают ходить, например, на каблуках, мешают коляскам и т. д.

    • Тактильные дорожки мешают мыть пол

    • Дополнительные инструменты для доступности немного, но мешают зрячим, занимают место на экране и т. д.

    • Светофоры и звуковые оповещения увеличивают общий уровень шума

  • То, что удобно одним, может быть неудобно другим 

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

Люди любят самостоятельность, и опция «вызвать помощь» это не про доступность.  

Мы делаем и железо, и софт, и мобильные приложения, и веб, потому шишек набили во всех этих областях.  

Веб

02f4ad46e332284a41d625bfa00740d4.png

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

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

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

Презентации

9c7ed3fe8bb4559ec79629007ab68e8f.png

У нас опыт только с паверпойнтом, уж простите.

  • В паверпойнте есть утилиты под это, есть подсказки, настройка порядка, очень неплохо, быстро и просто можно сделать презентацию доступной

  • «Прячем» всё что не надо, копирайты на страницах в игнор, если надо, то на последнем слайде хватит

  • Заголовки ставим даже если они скрытые 

Мобильное: MAUI

4f6a4cf4cb9a90334cdbc1c4b56f0d3c.png

Мы в основном работаем с MAUI, потому о нём больше, но в целом подходы будут те же и в нейтиве. В целом в мауи вполне неплохо с этим.

  • Тестить нужно всегда на куче девайсов

  • Версии толкбеков и войсоверов ведут себя по-разному у производителей и версий ОС

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

  • Осторожно с цифрами, валютами, датами, чтобы не было «три-ноль-ноль, запятая, ноль пять», иногда надо подсказать ридеру

  • Сложности в работе с несколькими модальными окнами, ридеру нужно говорить «не читать» фоновую страницу

  • Толкбэк иногда селектит нав бар при нескольких модалках, пока не побороли

  • Автофокус не всегда фокусит нужное, иногда приходится форсить после загрузки страницы 

Хардвар

e3c05a660374847b7786590134256c31.png

  • Слепые

    • Про брайль

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

      • Следовать стандартам размера брайля надо (больше не будет лучше), мы на первых кнопочках сделали как можно больше точки, слепые не оценили

      • Большие сильно выпирающие точки брайля хорошо, но не должны быть острыми

      • На таблетках часто профанация, стирается быстро, читается плохо

      • При этом брайль очень-очень ценят те, кто в него умеют, за просьбу разъяснить зачем брайлевые экраны, если везде есть text-to-speech прилетело знатно

    • Про тактильные дорожки

      • По дорожкам идут по центру по самой дорожке, а не рядом, но пожалуйста, не приводите человека прямиком в стенд или стол

      • Дорожками пользуются и слабовидящие тоже, потому они должны быть как можно более контрастными

      • Есть какие-то стандарты, но много где им просто не следуют, основные — палочки и кружочки, палочки дорога вдоль направления движения, кружочки — место привлечения внимания, например, поворот, препятствие, кнопка лифта и т. д.

    • Про голосовой фидбек

      • Обязательно должно быть управление скорости голоса и громкости

      • Звук можно смело ускорять по умолчанию, мы сейчас используем майкрософтовый, 1.2 по умолчанию стоит, может ещё ускорим

      • Длинные паузы в озвучке плохо, незрячие думают, что это конец

      • Джек — обязательно, не многие ходят с наушниками, но некоторые ходят

      • Опция повтора нужна обязательно

      • Очень желательно давать «перебивать» говорилку, тем, кто знает, что им надо, чтобы не ждать конца

    • Часто первый раз приходят с поводырём, дальше могут сами, запоминают хорошо, главное без неожиданностей, но есть и те, кто самостоятельно читают карты и ходят по ним

    • Очень помогают тактильные планы

    • Информацией обмениваются через ассоциации

    • А ещё бывают тактильные фигурки, например миниатюра церкви перед вами, чтобы на ощупь можно было представить форму

  • Слабовидящие

    • Контраст железки от стен, например если какой-то терминал, то желательно чтобы он не был белым на фоне белой стены

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

    • Отдельно хотелось бы сказать про шрифты, если у вас есть какой-то сайнедж, то постарайтесь выбрать шрифты с такими свойствами:

      • линии одинаковой толщины

      • у цифр обратите внимание на длину линий-хвостиков (вроде, апертурой зовётся), слабовидящим важно, чтобы 5 от 6 сильно отличалась, 3 от 8, чтобы, если есть «блюр», всё равно было понятно что есть что

      • Очень часто видим проблему нумерации, слабовидящим это мешает, например кассы нумеруются справа налево 4–3–2–1, вместо 1–2–3–4, а видели и совсем дичь 1–2–4–3, не надо так

      • «Металлик» в стрелках, цифрах и прочих элементах мешает читаемости

      • Если у вас какая-то сменная информация на экранах, она должна показываться достаточное время для чтения, не пропадать, некоторые люди видят «сеткой» и им нужно время просканировать всю картинку

  • Другие

    • Высота устройств должна позволять управлять ими из коляски, или низким людям

    • Если большой экран, то нужна возможность либо уменьшить интерфейс, либо хотя бы временно сдвинуть

    • Есть люди со множественными нарушениями, например и слепые и с нарушениями мобильности

    • Люди в инвалидных креслах иногда не могут двигать спиной, все средства управления должны быть в доступе не отрывая спины от спинки кресла  

Шишки в разработке

2de9ce86a457fb702940132e9e87b36c.png

  • Если у вас железо, то его изменение это понятное дело долго и дорого, сложно убедить клиента что это надо, а не достаточно сделать одну кнопку «позвать помощь»

  • А ещё мы сделали ошибку в брайле, и никто не заметил, пока не «показали» слепым, там сразу разобрались, а на рендерах, фотографиях и промо видео так и осталось, конечно

  • Много пайки, хорошо есть человек с прямыми руками, но всё равно запасные детали нужны всегда

  • Прототипирование/моделирование занимает много времени, как ни старались делать дешевле, всё равно итераций и ошибок много

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

  • Нюансы 3д печати, у нас есть 3д-принтер, но фиговый, в итоге перешли на аутсорс, но времени потеряли много

  • Мы ставили китайские усилители, а они начали массово гореть и жрать много тока, экономии не получилось

  • С динамиками много шишек набили, в итоге поставили динамики от айфона 6с, работают хорошо, лучше всего что мы пробовали из радиомагазинов, но надо подбирать «пары» динамиков, они разнятся сопротивлением

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

  • У нас на железке есть «энкодеры» (крутилки такие, как на старых магнитолах), так вот с ними проблемы, они «зависают» в серединном положении и флудят сигналами, выбирайте энкодеры ответственно

  • У нас звук с одних и тех же динамиков с винды и линукса был сильно разный, на винде громче, пока решили софтинкой «pavucontrol»

  • У нас есть звук для навигации, пока отзывы что два щелчка, пауза, два щелчка лучше, чем щелчёк, пауза, щелчёк

  • Щёлк, лучше, чем биип

  • У нас в одном месте текст был tickets in front of you, а люди думали ticket«s in front of you и искали на ощупь где, перефразировали, но надо помнить что могут неверно понять, выражаться как можно чётче

  • Обязательно валидируйте с ЦА хотя бы иногда, для нас это было и информативно, и интересно, и по-человечески приятно 

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

© Habrahabr.ru