Легко найти хорошие практики по любой технологии, но, к сожалению, по 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 советами. Я буду рад, если вы присоединитесь. Ссылка указана в разделе «О себе» в моем профиле.
Почитать еще
ссылка на оригинал статьи https://habr.com/ru/articles/571828/
Добавить комментарий