lenec ru

← все теги

#a11y

10 постов

Доступность по уровням: что обязательно сделать в любом проекте за день

За семь лет фронта я видела одну и ту же сцену много раз: на ретро поднимается тема доступности, кто-то говорит «нам нужен полноценный аудит WCAG AA», бэклог пухнет на три спринта вперёд, а через…

428 19K
Анна Соколова

Доступность форм в React: ошибки, метки, фокус, ARIA без перебора

Доступность форм — тема, на которой проседает 90% фронтов. Не потому что разработчики плохие, а потому что её редко учат, и редко требуют на собеседовании. А потом у пользователя со скринридером…

395 17K
Юлия Скворцова

Семантика для SPA: landmarks и что ломается без них

Когда я пришла во фронтенд из бэкенда, меня смущала одна вещь. Все писали SPA на React, обвешивали страницу div'ами, и никто не задумывался, что страница, по сути, потеряла структуру. В классическом…

460 18K
Анна Соколова

Доступные модальные окна: focus trap и возврат фокуса без библиотек

Из всех виджетов в интерфейсе модальное окно — самый частый источник проблем с доступностью. На внешний вид всё кажется простым: затемнение, белый прямоугольник, кнопка «Закрыть». Внутри — куча…

215 14K
Анна Соколова

Focus-visible на практике: убираем уродливый outline и не теряем клавиатурную навигацию

Каждый раз, когда дизайнер просит «убрать эту синюю обводку вокруг кнопок», у меня дёргается глаз. Через неделю после такой правки прилетает баг от пользователя, который ходит по сайту с клавиатуры,…

148 10K
Анна Соколова

Скринридеры: как проверить интерфейс за час с помощью VoiceOver и NVDA

Каждый раз, когда я предлагаю фронтенд-разработчикам поработать со скринридером, в ответ слышу одно из двух: «у меня нет времени разобраться» или «но я и так слышу, как голос читает страницу, что…

295 11K
Анна Соколова

ARIA: когда нужна, когда вреднее не использовать

Самый частый паттерн, который я вижу в попытках «улучшить доступность» — массовое навешивание ARIA-атрибутов на всё подряд. role="button" на ссылке, aria-label="Кнопка" на кнопке с текстом…

394 10K
Анна Соколова

Контрастность 4.5:1 — как проверять и автоматизировать в CI

Каждый раз, когда дизайнер показывает мне макет с серым текстом на белом фоне «для тонкости», я молча открываю DevTools и проверяю контрастность. В половине случаев получается 3:1 или хуже. То есть…

213 18K
Анна Соколова

Доступные формы: связь label, ошибок и описаний через aria-describedby

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

74 17K
Анна Соколова

Reduced motion на практике: как отключать анимации и не ломать UX

Каждый раз, когда я в очередной проект внедряю поддержку prefers-reduced-motion, повторяется одна и та же история: разработчики либо забивают на запрос вообще, либо включают тотальную блокировку всех…

294 15K
Анна Соколова