Помогаю узнать больше про Accessibility и CSS
Привет, Хабр. Я продолжаю отвечать на вопросы из собеседований на должность фронтендера. Сегодня я отвечу на следующий вопрос: «В чём отличия между значениями block, inline, flex, inline-flex, grid и inline-grid для свойства display?»
Прошу внимания. Мой ответ будет основан на теории, которую я описал в статье «Зачем нужно использовать свойство display?». Прочитайте, пожалуйста, сначала её.
Привет, Хабр. Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его.
Сегодня мы рассмотрим:
image-set();:focus-within при вёрстке кастомных чекбоксов;Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
<label>;inputmode="numeric" улучшающий мою жизнь;Давайте начнём!
За свою карьеру у меня было достаточно много собеседований. Конечно, одной из основных тем вопросов была вёрстка. Немного похвалюсь. Не было вопроса, на который я не ответил.
Недавно у меня появилось желание снова проверить себя и показать сообществу свои ответы на самые популярные вопросы по вёрстке. Может же быть так, что мои ответы были неполными или некорректными. Если это так, то я научусь новому. А если всё хорошо, то они помогут другим людям в подготовке к собеседованию. Кажется, это в любом случае будет полезно.
У меня получился достаточно большой список. Он составлен на основе моего опыта, опыта моих знакомых и публично доступных собеседований. Каждый вопрос будет отдельной статьёй.
Сегодня я дам ответ на следующий вопрос: «Зачем нужно использовать свойство display?»
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
alt.inert может быть бесполезен.maxlength не позволил моей знакомой купить авиабилеты.border в режиме высокого контраста дисплея.Давайте начнём!
В разговорах людей, интересующихся доступностью, часто можно услышать слово «Роль». Так, что это такое? Это специальная форма представления элемента для скринридера. Устанавливается она с помощью атрибута role. Сегодня поговорим о нем.
Я не буду описывать всё. Атрибут слишком сложный для одной статьи. Остановлюсь на моментах, которые вы можете использовать сразу. Продвинутые техники оставим на другой случай.
Давайте начнём!
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
alt;lang;Давайте начнём!
Хабр, я рассказал вам, как создавать подсказки с помощью атрибута aria-label. Это отличный шаг к классному опыту для пользователей скринридера. А сегодня сделаем второй — мы научимся правильно скрывать элементы. Встречайте, атрибут aria-hidden.
Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня мы рассмотрим следующие аспекты:
outline-offset;prefers-color-scheme;Давайте начнём!
CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства.
Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию!
Я собрал фишки, которые могут быть полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров, начиная с 2021 года. Отдельно отмечу, что я не считаю IE11 браузером, который поддерживается в современной разработке. По этой причине я не учитывал его.
Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.
Хабр, я уже третий месяц пишу про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.
Сегодня уже будет не только HTML и CSS. В некоторых кейсах мы будем использовать ARIA-атрибуты. Я расскажу:
<section> и <form>;tabindex запутывает незрячего пользователя;Давайте начнём!
Я продолжаю рассказывать, как HTML и CSS могут улучшить или ухудшить доступность интерфейсов. В своём рассказе я использую свой опыт и моего незрячего знакомого Ильи.
В этой статье будет: атрибут autofocus и его нюансы, паттерн «Skip-link» и идея Ильи об использовании его на практике, проблема использования одинаковых ссылок для одной новости, что не так с кнопкой «Наверх» и как вы спрятали список от скринридеров.
Давайте начнём!
Cегодня я хочу рассказать про атрибут aria-label. В статье не будет заумных определений и бездумного копирования стандарта. Я хотел простым языком объяснить, какая польза от атрибута, а также передать свой практический опыт, чтобы вы могли его повторить. А получилось у меня или нет, решать вам.
Со вступительным словом всё. Давайте начнём!
Этот вопрос преследует меня всю мою карьеру, начиная с 2013 года. Одни разработчики отвечают, потому что так правильно. Другие говорят про SEO. Третьи — ничего не говорят. А я считаю, что атрибут role является отличным ответом на этот вопрос!
Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть процесса создания доступных интерфейсов. Эти технологии непросто несут в себе кучу скрытых моментов, влияющих на доступность. Они напрямую позволяют её улучшить. В статье хочу показать это.
Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности текста, анимации и изображениях. В статье буду использовать опыт моего незрячего знакомого (привет, Илья). Он внёс бесценный вклад. Уверен, что вам будет интересно. Поехали!
У CSS много моментов, которые сбивают с толку. Разработчики плюются от него. А мне нравится CSS, несмотря на мои потраченные нервы. Подумав, как помочь другим меньше мучаться, я собрал ряд неочевидных моментов. Они сбивали с толку меня и моих знакомых. Надеюсь, вам будет полезно.
За последнее время в CSS появилось достаточно новых возможностей, которые позволяют нам создавать новые решения для старых задач. Мне захотелось рассказать вам о тех, которые работают в современных браузерах, и их можно использовать прямо сейчас.
Я подобрал, как мне кажется, наиболее распространенные задачи и покажу вам, как они решаются с помощью современного CSS. Надеюсь, вам будет интересно, и вы узнаете что-то новое. Так что не буду задерживаться, давайте начнем.
Можно легко найти хорошие практики по любой технологии, но, к сожалению, по HTML и CSS это сделать не так просто. Недолго думая, я написал свой список из 6 кейсов, когда вы можете сделать удобный или не удобный интерфейс для пользователя только через HTML и CSS.