Легко найти хорошие практики по любой технологии, но, к сожалению, по HTML и CSS это сделать не так просто. Долго не раздумывая, я решил исправить ситуацию. Написал список кейсов, когда HTML и CSS позволяют сделать удобный интерфейс для пользователя.
Текст в атрибуте alt это не дублирование заголовка
Атрибут alt очень полезен. С помощью него пользователи скринридеров понимаю, что изображено на картинке. К сожалению, многие разработчики используют его не оптимально. Они либо дублируют текст вокруг картинки, либо совсем его не добавляют.
Но мы можем использовать alt по другому. Добавьте больше деталей о изображении, дополнив заголовок. Например, для карточки товара можно описать внешние характеристики товара.
Не делайте так
<header>
<h3>adidas Originals Superstar</h3>
<img src="picture.jpg" alt="adidas Originals Superstar">
</header>Можно сделать так
<header>
<h3>adidas Originals Superstar</h3>
<img src="picture.jpg" alt="Кроссовки. Логотип с 3 полосками. Классический нос. Тонкая подошва">
</header>Не весь текст это заголовок
Заголовки важная часть HTML, помогающая пользователям в навигации. Особенно, пользователям скринридеров. Поэтому нам следует уделять особое внимание заголовкам.
Сейчас существует практика использования элементов h1 — h6 везде. Как результат, скринридеры отображают кашу из заголовков. Людям требуется больше времени и усилий, чтобы разобрать ее.
Как исправить ситуацию? Подумать, насколько нам действительно нужны элементы h1 — h6 для разметки заголовка и подзаголовка. Возможно, вместо двух элементов, например h2 и h3, мы можем использовать только один.
Не делайте так
<h2>iPad Pro</h2>
<h3>Supercharged by the Apple My chip.</h3>Можно сделать так
<h2>
<span>iPad Pro</span>
<span>Supercharged by the Apple My chip.</span>
</h2>button type=button лучше чем a href="#"
Часто можно встретить ссылку с якорем для кнопок. Почему это плохо?
Браузеры по-прежнему думают, что это ссылка. Если вы откроете контекстное меню на таком элементе, с помощью правой кнопки мыши, то увидите опции: "Открыть в новой вкладке", "Открыть в новом окне" и "Открыть в приватном окне".
Когда пользователи видят такие пункты, они думают, что перед ними ссылка. Далее они нажимают, например, "Открыть в новой вкладке". Получают неожиданный результат — верх страницы.
По этой лучше использовать элемент button. Вы получаете интерактивный элемент и не запутаете пользователя. В случае вызова контекстного меню, в нем не будет опций ссылки.
Не делайте так
<a href="#">Показать мой заказ</a>Можно сделать так
<button type="button">Показать мой заказ</button>justify-content: space-between приводит к неожиданному отображению разметки
Многие любят свойство justify-content. Оно позволяет равномерно расположить элементы сетки с помощью значений space-between или space-around. Все круто, но нет.
Мы используем эти значения, не задумываясь о том, что количество элементов изменяемо. Например, если при использовании значения space-between добавить 2 элемента в сетку из 4 колонок, то они будут отображаться по бокам родителя. А пользователь ожидает их в начале строки.
В этой ситуации лучше использовать свойство margin, если нужна поддержка IE11. Если не нужна, то свойство column-gap.
Не делайте так
.grid {
display: flex;
justify-content: space-between; /* or space-around */
}
.item {
width: 30%;
}Можно сделать так
.grid {
display: flex;
column-gap: 5%;
}
.item {
width: 30%;
}justify-content и align-items теряют элементы
При решении задач по позиционированию элементов мы часто используем свойства justify-content и align-items. Я не спорю, это удобный способ. Правда, при нем часто теряются элементы.
Это связано с особенностями работы свойств. Свойства justify-content и align-items не учитывают размеры flex-элементов. Когда размеры flex-элементов больше размеров flex-контейнера, то flex-элементы будут выходить за его пределы. Следовательно, могут быть скрыты от пользователя.
Например, я часто вижу модальное окно, у которого кнопка-крестик вышла за пределы окна и не доступна. Приходит уменьшать масштаб страницы, чтобы найти ее.
Эту проблему можно решить с помощью свойства margin со значением auto. Внутри flex-контейнера значение auto будет рассчитано с учетом размера самого контейнера и размеров flex-элементов. Если размеры flex-элементов меньше, чем размеры flex-контейнера, то браузер рассчитает отступ автоматически. А если больше, то элементы прижмутся к границам flex-контейнера.
Не делайте так
<div class="modal">
<div class="modal__main">
<!-- контент модального окна -->
</div>
</div>.modal {
display: flex;
justify-content: center;
align-items: center;
}Можно сделать так
<div class="modal">
<div class="modal_main">
<!-- контент модального окна -->
</div>
</div>.modal {
display: flex;
}
.modal__main {
margin: auto;
}Позаботьтесь о пользователях, которые могут испытывать головокружение, тошноту и головные боли
Я думаю, что многим дизайнерам и разработчикам нравится создавать анимацию. Да, интерфейсы в этих случаях выглядят более интересными. Но мы должны быть более осторожны.
В WCAG 2.2. есть раздел 2.3.3. В нем говорится, что пользователи могут испытывать головокружение, тошноту и головные боли, когда видят анимацию движения элементов.
Таким образом, если мы создаем анимацию такого типа, нам следует использовать медиа-функцию prefers-reduced-motion. Если люди отключили анимацию в операционной системе, то функция поможет не отображать ее. А если они этого не сделали, анимация будет работать.
Не делайте так
.example {
animation-name: zoomInDown;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-delay 0.3s;
animation-fill-mode: both;
}Можно сделать так
@media (prefers-reduced-motion: no-preference) {
.example {
animation-name: zoomInDown;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
animation-delay 0.3s;
animation-fill-mode: both;
}
}P.S. У меня есть почтовая рассылка с CSS советами. Я буду рад, если вы присоединитесь. Ссылка указана в разделе "О себе" в моем профиле.
