Можно легко найти хорошие практики по любой технологии, но, к сожалению, по HTML и CSS это сделать не так просто. Недолго думая, я написал свой список из 6 кейсов, когда вы можете сделать удобный или не удобный интерфейс для пользователя только через HTML и CSS.
Но мы можем использовать 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="кроссовки с логотипом adidas с 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. Вы получаете интерактивный элемент и не запутаете пользователя в случае вызова контекстного меню, потому что в нем не будет опций ссылки.
Не делайте так
<a href="#">Показать мой заказ</a>
Можно сделать так
<button type="button">Показать мой заказ</button>
Когда мы используем эти значения, то не задумываемся, что количество элементов может измениться. Например, если я добавлю еще 2 элемента в сетку из 4 колонок, то они будут отображаться по бокам родителя, в случае space-between, а не в начале строки, как ожидает пользователь.
Поэтому в этой ситуации лучше использовать 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 не учитывают размеры 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. Цель это статьи привлечь внимание к проблемам, с которыми сталкиваются люди. Мои решения не являются догмой. Вы можете решать эти проблемы по своему.
habr.com
Текст в атрибуте alt это не дублирование заголовка
Атрибут 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="кроссовки с логотипом adidas с 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="#"
Часто можно встретить ссылку ссылку с якорем, когда разработчики пытаются разметить интерактивный элемент. Они делают это, думав, что если отменить дефолтное поведение ссылки с помощью JS, то они получат поведение кнопки.Да, на первый взгляд это так. Но есть проблема. Бразуеры по-прежнему думают, что это ссылка. Если вы откроете контекстное меню на таком элементе, с помощью правой кнопки мыши, то увидите опции: "Открыть в новой вкладке", "Открыть в новом окне" и "Открыть в приватном окне".
Когда пользователи видят такие пункты, они думают, что это ссылка и могут открыть ее, например, в новой вкладке. Когда они это делают, то получает неожиданный результат, а именно они увидят верх страницы. Поэтому лучше использовать элемент button. Вы получаете интерактивный элемент и не запутаете пользователя в случае вызова контекстного меню, потому что в нем не будет опций ссылки.
Не делайте так
<a href="#">Показать мой заказ</a>
Можно сделать так
<button type="button">Показать мой заказ</button>
justify-content: space-between приводит к неожиданному отображению разметки
Когда только появился Flexbox многие были воодушевлены свойством justify-content, которое позволяет просто расположить равномерно элементы сетки с помощью значений space-between или space-around. И конечно многие стали пользоваться этим. Но есть проблема.Когда мы используем эти значения, то не задумываемся, что количество элементов может измениться. Например, если я добавлю еще 2 элемента в сетку из 4 колонок, то они будут отображаться по бокам родителя, в случае space-between, а не в начале строки, как ожидает пользователь.
Поэтому в этой ситуации лучше использовать 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. Цель это статьи привлечь внимание к проблемам, с которыми сталкиваются люди. Мои решения не являются догмой. Вы можете решать эти проблемы по своему.
6 хороших практик по HTML и CSS
Легко найти хорошие практики по любой технологии, но, к сожалению, по HTML и CSS это сделать не так просто. Долго не раздумывая, я решил исправить ситуацию. Написал список кейсов, когда HTML и CSS...
habr.com