[Из песочницы] 6 самых распространённых ошибок разработчиков при написании HTML и CSS

Скрипты и советы | 11 декабря 2019 1 103

Уроки CSS на Хабрахабре, habrahabr.ru, CSS

Привет, Хабр! Представляю вашему вниманию перевод статьи «The 6 most common mistakes developers when writing HTML and CSS» автора Stas Melnikov.

Использование атрибута placeholder вместо элемента label


Часто разработчики используют атрибут placeholder вместо элемента label. Но в этом случае пользователи скринридера (программы чтения с экрана) не могут заполнять поля, потому что скринридер не может прочитать текст из атрибута placeholder.

Поэтому я рекомендую использовать элемент label для поля имени и атрибут placeholder для примера данных, которые пользователь должен заполнить.

Enter your email

Использование элемента img для разметки декоративной графики


Я часто вижу, как разработчики путают декоративную графику с изображениями контента. Например, они размечают социальные иконки с помощью элемента img.



Но иконка социальной сети — это декоративная иконка, которая помогает пользователям быстрее понять смысл элемента, не читая текст. Если мы удаляем значок, мы не теряем значение элемента, поэтому мы можем использовать для него свойство background-image.
Читать дальше →
Прокачиваем вёрстку ARIA-атрибутами. Атрибут role

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

Подробнее
[Из песочницы] Топ 5 причин, почему мне нравятся пользовательские свойства CSS

Привет, Хабр! Представляю вашему вниманию перевод статьи «My top 5 reasons why I like CSS custom properties», автора...

Подробнее
[Перевод] Скрытые возможности элемента <input>

Элемент в HTML самый интересный. Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При...

Подробнее
[Из песочницы] Font (ещё более) Awesome — узорное изобретение

Привет, Хабр! Представляю вашему вниманию перевод статьи "Font (More) Awesome — an iconic invention" автора Pubudu...

Подробнее
Изоляция css стилей с помощью компонентного подхода

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

Подробнее
[Перевод] Прокачиваем навыки CSS с помощью селектора :has()

Привет, друзья! Представляю вашему вниманию перевод этой замечательной статьи, посвященной продвинутому использованию...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями