Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке. Сегодня мы рассмотрим следующие аспекты: какие сюрпризы есть при использовании свойства display; о чём нужно помнить при вёрстке кнопки «Показать пароль»; зачем нужны подсказки с помощью атрибута aria-label при разметке областей…
Подробнее
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке. Сегодня мы рассмотрим следующие аспекты: какие скрытые проблемы с паттерном «visually-hidden» нас ждут; в каких ситуациях кнопка «Закрыть» указывает на выход; чем вредно значение contents у свойства display; почему подсказка с помощью…
Подробнее
В разговорах людей, интересующихся доступностью, часто можно услышать слово «Роль». Так, что это такое? Это специальная форма представления элемента для скринридера. Устанавливается она с помощью атрибута role. Сегодня поговорим о нем. Я не буду описывать всё. Атрибут слишком сложный для одной статьи. Остановлюсь на моментах, которые вы можете использовать сразу. Продвинутые техники оставим на другой случай. Давайте начнём! Читать дальше →
Подробнее
Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть процесса создания доступных интерфейсов. Эти технологии непросто несут в себе кучу скрытых моментов, влияющих на доступность. Они напрямую позволяют её улучшить. В статье хочу показать это. Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности…
Подробнее![[Перевод] Исследование производительности анимации на основе скрола страницы](/uploads/habrahabr_logo.png){kind=logo}
Что нового в анимации на основе скрола? Анимация на основе скрола - это способ добавить интерактивности и визуального интереса вашему сайту или веб-приложению, который запускается в зависимости от положения прокрутки пользователя. Это отличный способ удержать пользователей и сделать сайт более привлекательным. Раньше единственным способом создания анимации на основе скрола страницы, было реагирование на событие прокрутки в главном потоке. Это приводило к двум основным…
Подробнее
В статье собраны 30 советов для новичков во FrontEnd сфере, которые возможно сделают ваш код чище и приятнее. Все советы постарался написать понятным языком, чтобы даже самый зелёный новичок всё понял :) Читать далее
Подробнее
Lighthouse - это инструмент для аудита веб-сайтов, который помогает разработчикам с помощью возможностей и диагностики улучшить пользовательский опыт их сайтов. Lighthouse 10 доступен в командной строке через npm и в Chrome Canary. В ближайшие недели он появится в стабильном Chrome в Chrome 112 и в PageSpeed Insights. Читать далее
Подробнее
Это заключительная статья из цикла статей о работе браузеров. Ссылка на первые два перевода: Часть 1: навигация и получение данных Часть 2: парсинг и выполнение JS Статьи предназначена для начинающих разработчиков и тех, кто интересуется разработкой. Здесь нет глубоких технических деталей, хотя, возможно, вы найдете что-то новое для себя. Помимо деревьев, о которых мы уже говорили — DOM, CSSOM и AST — браузеры также строят дерево специальных возможностей. Деревья, построенные на этапе…
Подробнее
Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 27 июня–3 июля. 📔 Вышел Vue 2.7 «Naruto». 📔 Большое обсуждение, что использовать в prettier — табы или пробелы. 📔 W3C станет некоммерческой организацией, представляющей общественные интересы с января 2023 года. Что там у вас ещё
Подробнее
Дайджест новостей и полезных статей из мира фронтенд-разработки за неделю 20–26 июня. 📔 EcmaScript 2022. 22 июня 2022 года 123 Генеральная ассамблея Ecma утвердила спецификацию языка ECMAScript 2022 — теперь он официально является стандартом. Внутри все новинки. 📔 Как создавать иконки сайтов в 2022 году — всё о favicon. Пришло время переосмыслить то, как мы создаем набор иконок для современных браузеров, и остановить безумные генераторы. 📔 Как будет выглядеть веб только с Chromium?.
Подробнее
Дайджест новостей и полезных статей из мира фронтенд-разработки c 13 по 19 июня. Главное на 20 июня Замените CAPTCHA на Private Access Tokens Исследователи: мы изучили 1 000 000 сайтов и видим, что jQuery самый популярный, а вы говорите, что не используете его. В Figma появились вариативные шрифты Другие новости о доступности, спецификациях, вёрстке, JavaScript и Node.js внутри дайджеста. Что там у вас ещё
Подробнее
Хабр, привет! Сегодня мы поговорим о том, зачем надо отделять код страны от основной части телефона, зачем сохранять фокус в поле ввода после валидации, какие проблемы могут вызвать моушен анимации, как связан Esc и выпадающие списки, как фокус ускоряет ввод почты и role="button" не всегда про доступность. Читать далее
Подробнее