Как понять, что юзер нажал клавишу: события клавиатуры в JavaScript

События keydown и keyup помогают обрабатывать взаимодействие с клавиатурой: когда срабатывают, чем отличаются и где применяются — от горячих клавиш до форм и простых игр. Плюс коротко о безопасности и доступности, чтобы решения были надёжными и удобными для всех.

В статье разбираются сами события, их работа при нажатии и отпускании клавиши, почему keypress считать легаси, и чем отличаются event.key и event.code: первое зависит от раскладки, второе — от физической клавиши. Есть мини-примеры и практические советы. #js #a11y

✅ Читать статью

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

Собрали топ примеров плохой анимации: что тормозит загрузку, что отвлекает от контента, что вызывает дискомфорт и мешает доступности. И да, пришлось отключить адблок ради исследования. #css #a11y

🎁 Читать статью

Поповеры и диалоги выглядят одинаково — всплывающее окно поверх страницы. Путаница начинается, когда нужно выбрать между Popover API и Dialog API.

Ключевое отличие — в управлении фокусом. Popover API возвращает фокус триггеру, закрывается по клику мимо и по Escape. Dialog API с методом showModal() ловит фокус внутри окна и не отпускает, пока пользователь не примет решение. Для тултипов, меню и уведомлений — Popover API. Для модальных окон — <dialog>. #html #a11y

Разбираем, как они устроены и что учесть при выборе.

🎁 Читать статью

Резервный канал в MAX

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

Стандарт WCAG 2.1 от W3C строится на четырёх принципах: воспринимаемость, управляемость, понятность и устойчивость. В каждом — конкретные критерии. Значимым изображениям нужны текстовые альтернативы, формам — понятные подписи. А состояния кнопок и ссылок должны считываться без опоры на цвет.

Контраст проверяется через WebAIM, а симулятор дальтонизма встроен прямо в Chrome DevTools. В статье разбираем важные критерии на реальных сайтах: Яндекс, Кинопоиск, Etsy, Dropbox. #a11y #html

💡 Читать статью