Не знаю, как происходит заполнение в маркетплейсах, но например в CMS зачастую есть специальное поле, куда уже менеджер контента и должен вписывать такой текст.
Разрабы никак не смогут учесть все варианты текстов для картинок в интернет-магазинах.
Так же можно подключить ИИ, который сам сгенерирует описание картинки по содержимому
В случае модальных окон, я всегда рекомендую придерживаться подхода, описанного в гайдах carbon design system:
Tab order
First interactive element in the body area.
Proceed left to right and top to bottom through the rest of the body elements.
Primary action
Secondary action
Close icon
Это относиться к модальным окнам, содержащим интерактивные элементы (за исключением ссылок). Если у вас в модальном нет никаких элементов форм, то да, фокус в таком случае ставите просто на кнопку «закрыть»
Года 2 назад верстала для заказчика такие промо-лендинги (однотипные плюс-минус), но там дальше моей идеи использовать cms или создать конструктор никуда дело не пошло (надеюсь ситуация уже поменялась).
Хорошие пункты и не банальные! Я бы ещё сказала про динамический контент, например, при открытии модальных окон, переключении вкладок или отображения уведомлений - важно правильно управлять фокусом и использовать ARIA-атрибуты, такие как aria-live, для оповещения об изменениях в интерфейсе.
Отдельно хочу подчеркнуть необходимость реализации фокус-трапа в модальных окнах. Несмотря на очевидность, многие разработчики всё ещё упускают этот момент, что негативно сказывается на доступности.
Для демонстрации ошибки мы будем использовать режим высокой контрастности Windows. Его можно включить сочетанием клавиш левый Alt + левый Shift + Print Screen.
Стоит добавить, что в браузерах на базе Chromium (Chrome, Edge и др.) есть возможность эмулировать режим принудительных цветов прямо в DevTools: Открываем DevTools (F12), нажимаем Ctrl + Shift + P, вводим Rendering, находим и активируем опцию Emulate CSS media feature forced-colors. Там ещё много других параметров, которые позволяют тестировать доступность без необходимости менять настройки ОС.
not действительно бывает полезен, когда нужно инверсировать условие, но в адаптивной вёрстке лучше применять его с осторожностью. Особенно если в блоке меняются display, font-size, gap - скачки почти неизбежны.
Пример в статье скорее теоретический (про «всё, что до 320px»), на практике куда полезнее показать *-only диапазоны.
Например, в Bootstrap:
/* sm-only: от 576px до 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) { }
/* md-only: от 768px до 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) { }
/* lg-only: от 992px до 1199.98px */
@media (min-width: 992px) and (max-width: 1199.98px) { }
В таком случае мы могли бы написать:
/* sm-only: ширина 576–767.99px */
@media (width >= 576px) and (width < 768px) { }
/* md-only: ширина 768–991.99px */
@media (width >= 768px) and (width < 992px) { }
/* lg-only: ширина 992–1199.99px */
@media (width >= 992px) and (width < 1200px) { }
А как же картиночки с примерами?
Не знаю, как происходит заполнение в маркетплейсах, но например в CMS зачастую есть специальное поле, куда уже менеджер контента и должен вписывать такой текст.
Разрабы никак не смогут учесть все варианты текстов для картинок в интернет-магазинах.
Так же можно подключить ИИ, который сам сгенерирует описание картинки по содержимому
Он не вставится в поле, если в нем не сфокусироваться и не выбрать сохраненное значение
Берут из дизайна в большинстве случаев. Часто встречаете там название, которое можно вписать как альтернативный текст?
В случае модальных окон, я всегда рекомендую придерживаться подхода, описанного в гайдах carbon design system:
Это относиться к модальным окнам, содержащим интерактивные элементы (за исключением ссылок). Если у вас в модальном нет никаких элементов форм, то да, фокус в таком случае ставите просто на кнопку «закрыть»
Хорошая статья.
Сама часто с aspect ratio мучилась 😅
Согласна.
Это здорово, молодцы.
Года 2 назад верстала для заказчика такие промо-лендинги (однотипные плюс-минус), но там дальше моей идеи использовать cms или создать конструктор никуда дело не пошло (надеюсь ситуация уже поменялась).
Тебе спасибо, очень приятно :)
Хорошие пункты и не банальные! Я бы ещё сказала про динамический контент, например, при открытии модальных окон, переключении вкладок или отображения уведомлений - важно правильно управлять фокусом и использовать ARIA-атрибуты, такие как
aria-live, для оповещения об изменениях в интерфейсе.Отдельно хочу подчеркнуть необходимость реализации фокус-трапа в модальных окнах. Несмотря на очевидность, многие разработчики всё ещё упускают этот момент, что негативно сказывается на доступности.
Стоит добавить, что в браузерах на базе Chromium (Chrome, Edge и др.) есть возможность эмулировать режим принудительных цветов прямо в DevTools:
Открываем DevTools (F12), нажимаем Ctrl + Shift + P, вводим
Rendering, находим и активируем опцию Emulate CSS media feature forced-colors. Там ещё много других параметров, которые позволяют тестировать доступность без необходимости менять настройки ОС.Рада, что напомнил!
notдействительно бывает полезен, когда нужно инверсировать условие, но в адаптивной вёрстке лучше применять его с осторожностью. Особенно если в блоке меняютсяdisplay,font-size,gap- скачки почти неизбежны.Пример в статье скорее теоретический (про «всё, что до 320px»), на практике куда полезнее показать
*-onlyдиапазоны.Например, в Bootstrap:
В таком случае мы могли бы написать: