Как стать автором
Обновить

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

CSS *HTML *Usability *Accessibility *
Tutorial

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

Текст в атрибуте 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, которая помогает пользователям в навигации. Особенно, пользователям скринридеров, которые используют список заголовков для быстрой навигации по странице.

Поэтому нам следует уделять особое внимание заголовком. Сейчас существует практика использование элементов h1h6 везде. Как результат, скринридеры отображают кашу из заголовков, и людям требуется больше времени, чтобы разобрать это.

Например, мы можем избегать этого, если подумаем насколько нам действительно нужны элементы h1h6 для разметки заголовка и подзаголовка. Возможно, вместо двух элементов, например 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. Цель это статьи привлечь внимание к проблемам, с которыми сталкиваются люди. Мои решения не являются догмой. Вы можете решать эти проблемы по своему.

Помогаю людям улучшать доступность интерфейсов. Если интересно, пишите мне на мою почту. Она указана в моем профиле на Хабре.

Еще делюсь своими историями из моей карьеры в IT. Если хочется почитать на ломанном английском про человека, который был верстальщиком, тим-лидом с зарплатой 17 400 в 2014 году и ментора, то подписывайся на мой Substack канал. Ссылка в профиле.

Теги:
Хабы:
Всего голосов 13: ↑12 и ↓1 +11
Просмотры 19K
Комментарии Комментарии 18