Доступность как архитектура UI.

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

По дизайну форма появлялась в месте клика - значит это попап? Должен ли быть бекдроп и закрытие по Esc у такого компонента? В следующем спринте нам нужно было делать нотификации по сокетам, там была тоже куча вопросов к всплывашкам.
Тогда был тот редкий, для меня, случай, когда мы решили обойтись без готовой библиотеки компонентов и сделать все сами. Вопросов было много и я решил покопать спеку.

И сейчас я рекомендую делать это каждому разработчику интерфейсов!

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

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

К сожалению, далеко не все дизайн системы и компоненты в npm следуют этим практикам или реализуют их все, т.к. спека живая и многое из написанного достаточно свежо. Многие термины у нас в экосистеме и комьюнити понимаются и используются не правильно, такое наследие. Вот мои заметки по итогу иследования. Отдельное спасибо @maniyax.

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

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

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

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