Pull to refresh
69
98
Стас Мельников @melnik909

Помогаю узнать больше про Accessibility, HTML, CSS

Send message

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 7

Level of difficulty Easy
Reading time 7 min
Views 2.6K

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильей. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.


Сегодня мы рассмотрим следующие аспекты:

  • К чему приводят распространённые ошибки с элементом <label>;
  • Лучший лайфхак с inputmode="numeric" улучшающий мою жизнь;
  • Как пользователи скринридера понимают, что модальное окно открыто.

Давайте начнём!

Читать дальше →
Total votes 35: ↑35 and ↓0 +35
Comments 13

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display

Level of difficulty Medium
Reading time 7 min
Views 8.7K


За свою карьеру у меня было достаточно много собеседований. Конечно, одной из основных тем вопросов была вёрстка. Немного похвалюсь. Не было вопроса, на который я не ответил.


Недавно у меня появилось желание снова проверить себя и показать сообществу свои ответы на самые популярные вопросы по вёрстке. Может же быть так, что мои ответы были неполными или некорректными. Если это так, то я научусь новому. А если всё хорошо, то они помогут другим людям в подготовке к собеседованию. Кажется, это в любом случае будет полезно.


У меня получился достаточно большой список. Он составлен на основе моего опыта, опыта моих знакомых и публично доступных собеседований. Каждый вопрос будет отдельной статьёй.


Сегодня я дам ответ на следующий вопрос: «Зачем нужно использовать свойство display

Читать дальше →
Total votes 54: ↑54 and ↓0 +54
Comments 9

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 6

Level of difficulty Medium
Reading time 7 min
Views 4.3K


Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.


Сегодня мы рассмотрим следующие аспекты:

  • Какие символы нужно пропускать в тексте для атрибута alt.
  • В какой ситуации атрибут inert может быть бесполезен.
  • Как атрибут maxlength не позволил моей знакомой купить авиабилеты.
  • В чём польза свойства border в режиме высокого контраста дисплея.

Давайте начнём!

Читать дальше →
Total votes 46: ↑46 and ↓0 +46
Comments 14

Прокачиваем вёрстку ARIA-атрибутами. Атрибут role

Level of difficulty Medium
Reading time 8 min
Views 3.5K

В разговорах людей, интересующихся доступностью, часто можно услышать слово «Роль». Так, что это такое? Это специальная форма представления элемента для скринридера. Устанавливается она с помощью атрибута role. Сегодня поговорим о нем.


Я не буду описывать всё. Атрибут слишком сложный для одной статьи. Остановлюсь на моментах, которые вы можете использовать сразу. Продвинутые техники оставим на другой случай.


Давайте начнём!

Читать дальше →
Total votes 38: ↑37 and ↓1 +36
Comments 10

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 5

Level of difficulty Medium
Reading time 6 min
Views 4.8K

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.


Сегодня мы рассмотрим следующие аспекты:

  • Какое количество символов следует использовать для текста подсказки для атрибута alt;
  • В чём польза атрибута lang;
  • Почему использование текстовых символов для декоративных задач — это плохая идея;
  • Для чего существует режим повышенной контрастности.

Давайте начнём!

Читать дальше →
Total votes 51: ↑51 and ↓0 +51
Comments 9

Прокачиваем вёрстку ARIA-атрибутами. Атрибут aria-hidden

Level of difficulty Medium
Reading time 8 min
Views 5.2K


Хабр, я рассказал вам, как создавать подсказки с помощью атрибута aria-label. Это отличный шаг к классному опыту для пользователей скринридера. А сегодня сделаем второй — мы научимся правильно скрывать элементы. Встречайте, атрибут aria-hidden.

Читать дальше →
Total votes 39: ↑39 and ↓0 +39
Comments 0

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 4

Level of difficulty Medium
Reading time 6 min
Views 4.4K

Хабр, я снова пришёл к вам с практическими советами про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.


Сегодня мы рассмотрим следующие аспекты:

  • Как сверстать поиск, чтобы им мог воспользоваться пользователь скринридера;
  • Чем полезно свойство outline-offset;
  • Зачем вам нужно использовать медиа-функцию prefers-color-scheme;
  • Где должен находиться заголовок в разметке блока с новостью.

Давайте начнём!

Читать дальше →
Total votes 40: ↑40 and ↓0 +40
Comments 4

Неизвестно полезный CSS

Level of difficulty Medium
Reading time 6 min
Views 16K

CSS не отстаёт от JavaScript. Постоянно развивается. Классно же. Мне особенно радостно видеть, как старые задачи, которые я решал при помощи костылей, теперь можно сделать при помощи одного свойства.


Только многие фишки неизвестны широкому кругу разработчиков. Честно говоря, некоторые я сам узнал недавно. В любом случае так дальше нельзя. Надо исправлять ситуацию!


Я собрал фишки, которые могут быть полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React приложение. Они поддерживаются большинством браузеров, начиная с 2021 года. Отдельно отмечу, что я не считаю IE11 браузером, который поддерживается в современной разработке. По этой причине я не учитывал его.


Больше не буду затягивать. Давайте посмотрим, что я вам подготовил.

Читать дальше →
Total votes 77: ↑76 and ↓1 +75
Comments 16

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 3

Level of difficulty Medium
Reading time 8 min
Views 7.1K


Хабр, я уже третий месяц пишу про доступность вместе с Ильёй. Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.


Сегодня уже будет не только HTML и CSS. В некоторых кейсах мы будем использовать ARIA-атрибуты. Я расскажу:

  • как мы незаметно потеряли пользу элементов <section> и <form>;
  • как атрибут tabindex запутывает незрячего пользователя;
  • почему визуально скрытые элементы — проблема современных интерфейсов;
  • что делать с паттерном «Звёздочка» для обязательных полей.

Давайте начнём!

Читать дальше →
Total votes 54: ↑54 and ↓0 +54
Comments 29

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 2

Level of difficulty Medium
Reading time 8 min
Views 5.9K

Я продолжаю рассказывать, как HTML и CSS могут улучшить или ухудшить доступность интерфейсов. В своём рассказе я использую свой опыт и моего незрячего знакомого Ильи.


В этой статье будет: атрибут autofocus и его нюансы, паттерн «Skip-link» и идея Ильи об использовании его на практике, проблема использования одинаковых ссылок для одной новости, что не так с кнопкой «Наверх» и как вы спрятали список от скринридеров.


Давайте начнём!

Читать дальше →
Total votes 53: ↑53 and ↓0 +53
Comments 10

Прокачиваем вёрстку ARIA атрибутами. Атрибут aria-label

Level of difficulty Easy
Reading time 8 min
Views 6.8K


Cегодня я хочу рассказать про атрибут aria-label. В статье не будет заумных определений и бездумного копирования стандарта. Я хотел простым языком объяснить, какая польза от атрибута, а также передать свой практический опыт, чтобы вы могли его повторить. А получилось у меня или нет, решать вам.


Со вступительным словом всё. Давайте начнём!

Читать дальше →
Total votes 57: ↑57 and ↓0 +57
Comments 7

Очередной ответ на вопрос: «Зачем нужна семантика?»

Level of difficulty Medium
Reading time 7 min
Views 5K

Этот вопрос преследует меня всю мою карьеру, начиная с 2013 года. Одни разработчики отвечают, потому что так правильно. Другие говорят про SEO. Третьи — ничего не говорят. А я считаю, что атрибут role является отличным ответом на этот вопрос!

Читать дальше →
Total votes 48: ↑48 and ↓0 +48
Comments 0

HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи

Level of difficulty Medium
Reading time 7 min
Views 8.6K

Многие разработчики думают, что доступность реализуется только с помощью aria-атрибутов. Если их не добавить, то всё, доступности нет. Конечно, aria-атрибуты нужны, но HTML и CSS такая же важная часть процесса создания доступных интерфейсов. Эти технологии непросто несут в себе кучу скрытых моментов, влияющих на доступность. Они напрямую позволяют её улучшить. В статье хочу показать это.


Я затрону не все аспекты. Их очень много, поэтому поговорю о: интерактивных элементах, доступности текста, анимации и изображениях. В статье буду использовать опыт моего незрячего знакомого (привет, Илья). Он внёс бесценный вклад. Уверен, что вам будет интересно. Поехали!

Читать дальше →
Total votes 51: ↑51 and ↓0 +51
Comments 13

Ох уж эти CSS-переменные

Level of difficulty Medium
Reading time 6 min
Views 9.4K


Я люблю создавать компоненты везде и всегда, поэтому пользовательские CSS-свойства, также известные как CSS-переменные, являются одной из моих любимых фишек, которая позволяет писать более модульный код. При работе с ними я набил достаточно шишек, выпил литры чая и убил кучу времени. Теперь я «мастер», и хочу поделиться своим опытом.
Читать дальше →
Total votes 56: ↑56 and ↓0 +56
Comments 13

Чёрт тебя возьми, CSS

Level of difficulty Medium
Reading time 7 min
Views 15K

У CSS много моментов, которые сбивают с толку. Разработчики плюются от него. А мне нравится CSS, несмотря на мои потраченные нервы. Подумав, как помочь другим меньше мучаться, я собрал ряд неочевидных моментов. Они сбивали с толку меня и моих знакомых. Надеюсь, вам будет полезно.

Читать дальше →
Total votes 60: ↑58 and ↓2 +56
Comments 52

Мои любимые вопросы о CSS с ответами. Версия 2023 года

Level of difficulty Medium
Reading time 7 min
Views 14K

В 2020 году я поделился списком моих любимых вопросов о CSS, который стал довольно популярным, судя по просмотрам. Спустя 3 года CSS изменился, и я решил дополнить список, добавив вопросы про гриды, пользовательские свойства (CSS-переменные), новые селекторы и свойства.

Работая над вопросами, мне хотелось помочь вам в изучении новых возможностей CSS и тех моментов, которые многие разработчики упускают, судя по моей практике. Также вы можете использовать их, если проводите интервью. Я буду только рад этому. А теперь давайте начнём.
Читать дальше →
Total votes 50: ↑49 and ↓1 +48
Comments 18

Любопытные CSS фишки 2022 года

Reading time 8 min
Views 15K

За последнее время в CSS появилось достаточно новых возможностей, которые позволяют нам создавать новые решения для старых задач. Мне захотелось рассказать вам о тех, которые работают в современных браузерах, и их можно использовать прямо сейчас.

Я подобрал, как мне кажется, наиболее распространенные задачи и покажу вам, как они решаются с помощью современного CSS. Надеюсь, вам будет интересно, и вы узнаете что-то новое. Так что не буду задерживаться, давайте начнем.

Читать далее
Total votes 15: ↑11 and ↓4 +7
Comments 11

6 хороших практик по HTML и CSS

Reading time 4 min
Views 24K

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

Читать далее
Total votes 13: ↑12 and ↓1 +11
Comments 18

3 техники с атрибутом aria-label, которые прокачают ваш HTML

Reading time 3 min
Views 9.8K

Я люблю делать доступные интерфейсы и стараюсь искать новый материал, чтобы перенять интересные практики. В этой статье я хочу рассказать про 3 техники, которые помогут сделать интерфейсы более понятными и простыми для пользователей скринридоров.

Читать далее
Total votes 2: ↑2 and ↓0 +2
Comments 11

Очередной гайд по HTML-элементам, которые можно использовать в каждом проекте

Reading time 6 min
Views 19K
В сети существует множество гайдов, которые описывают назначение HTML-элементов. Но сколько я не проводил собеседований или не проверял код, я вижу одну картину. Разработчики используют ограниченный набор элементов.

Для исправления этой ситуации я взял следующие элементы: header, nav, main, section, article, aside, address, и покажу, как их использовать.
Читать дальше →
Total votes 20: ↑19 and ↓1 +18
Comments 6
1

Information

Rating
37-th
Location
Пенза, Пензенская обл., Россия
Date of birth
Registered
Activity

Specialization

Frontend Developer, UI/UX Designer