Критерии качества вёрстки 2021

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

Задача курса — научить решать задачи с помощью базовых технологий. Полученная база позволит разобраться, как работают фреймворки или библиотеки.

Зачем нужен критерий

В качестве ориентира для ширины страницы используется фрейм, потому что мы считаем Figma преобладающим форматом макетов и поэтому пользуемся терминами этого графического редактора. В учебных макетах мы учли минимальную ширину, но в реальной разработке минимальная ширина страницы может отличаться от размера фрейма.

У страницы должна быть минимальная ширина, чтобы у пользователей с меньшим разрешением при просмотре страницы оставались работоспособны все элементы сайта.

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

Длина текста

Текст должен оставаться в рамках родительского блока при переполнении и не должен вываливаться или обрезаться из родительского блока.

Родительский блок должен сохранять минимальные размеры при недополнении.

Слова длиннее минимальной ширины должны переноситься.

Размеры элементов

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

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

Количество элементов

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

Элементы могут переноситься на следующую строку при уменьшении размера родителя.

При проверке переполнения в браузере Safari необходимо добавлять текст не через инспектор браузера, а через редактор кода, редактируя страницу HTML. В противном случае текст будет добавляться в одну длинную строчку.

Зачем нужен критерий

Верстальщик должен предусматривать ситуации, в которых контент может меняться, и подготавливать вёрстку к изменениям контента.

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

Рекомендуем проверять с помощью инструмента PerfectPixel (работает в Chrome, Firefox).

Зачем нужен критерий

Заказчик может не принять работу, если вёрстка будет отличаться от согласованному макета. Поэтому веб-разработчик должен не просто сверстать сайт по образцу, а сделать это близко к согласованному макету.

Чтобы сайт как можно точнее совпадал с утвержденным дизайном, веб-разработчики придерживаются концепции Pixel Perfect. Это способ вёрстки строго по макету, при котором размеры и интервалы из макета соблюдаются с точностью до нескольких пикселей.

Допустимые различия нужны для компенсации несоответствий макету, связанных с отличиями отображения элементов в разных графических редакторах, браузерах и операционных системах.

При проверке этого пункта следует оценивать наличие эффектов и их соответствие стайлгайду.

Правильно

Неправильно

Неправильно

Неправильно

Правильно. Код написан в одном стиле.

<section class="news">
  <h2 class="news-title">Новости</h2>
</section>

<section class="news">
  <h2 class="news-title">Галерея</h2>
</section>

.news {
  color: #000000;
}

.news-title {
  color: #ff0000;
  background-color: #ffffff;
}

Неправильно. Одинаковые элементы разметки имеют разные отступы и переносы.

<section class="news-title">
  <h2 class="news-title">
    Новости
  </h2>
</section>

<section class="news-title"><h2 class="news-title">Галерея</h2></section>

Неправильно. Один и тот же цвет написан в разных нотациях.

.news {
  color: red;
}

.news-title {
  color: rgb(255, 0, 0);
  background-color: #ffffff;

Зачем нужен критерий

Требования, перечисленные в кодгайде Академии, нужно соблюдать в рамках обучения. В других компаниях требования могут отличаться.

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

Именование папок и файлов

Правильно. Названия папок и файлов состоят из английских слов.

barbershop/
  styles/
    styles.css
  images/
    logo.svg
    hammer.jpg
    sun.png

Неправильно. Названия папок и файлов написаны транслитом или не словами.

proekt/
  stili/
    stili.css
  SCripts/
    MySctips.js
  i/
    logotip.svg
    098sd9f8sd0f8.png
    imagine image.jpg

Именование классов

Правильно. Названия классов состоят из английских слов.

.header-logo {
  …
}

.footer-social {
  …
}

Неправильно. Названия классов написаны транслитом.

.shapka {
  /* стили */
}

.podval {
  /* стили */
}

.glavniy-logotip {
  /* стили */
}

Правильно. Значения атрибутов состоят из английских слов.

<label for="name"></label>

<input class="field" id="name" type="text">

Зачем нужен критерий

Английский язык — это общепринятая договорённость в среде разработчиков. Единый подход именования позволяет быстрее знакомиться с кодовой базой.

Правильно. Названия файлов и папок написаны строчными.

barbershop/
  styles/
    styles.css
  images/
    logo.svg
    hammer.jpg
    sun.png

Неправильно. Названия папок содержат прописные буквы.

barbershop/
  Styles/
    Styles.css
  SCripts/
    MySctips.js
  IMAGES/
    imagine image.jpg

В качестве разделителей должны использоваться только дефисы - или подчёркивания _. Выберите только один стиль — - или _. Разделители должны использоваться последовательно.

Правильно. Многосоставные названия разделяются дефисами.

barbershop/
  images/
    logo-full.svg
    twitter-logo.jpg
    header-bottom-border.png

Неправильно. Многосоставные названия содержат разные разделители.

barbershop/
  images/
    logotip.svg
    link__active-before.png
    header-border_bottom.jpg

Зачем нужен критерий. Перечисленные требования продиктованы кодстайлом Академии. В других командах и проектах требования могут отличаться. Критерий говорит о том, что важно соблюдать кодстайл команды, в которой вы работаете. Кроме того, в некоторых системах названия папок и файлов регистрозависимые, и единообразное именование защитит вас от возможных проблем, связанных с регистром.

Правильно. Комментарий описывает механику взаимодействия с элементом. Таким образом передаются знания от одного разработчика другому.

<!-- Чтобы попап отображался необходимо добавить класс popup-active -->
<div class="popup popup-active">
  <div class="popup__overlay"></div>
</div>

Правильно. Комментарий скрывает часть разметки, но при этом имеет пояснение, в каком случае эту часть нужно восстановить.

<div class="popup popup-active">
  <div class="popup__overlay"></div>
  <!-- Если в попапе есть карта, то добавить див и в него вложить карту
    <div class="popup-map"></div>
  -->
</div>
Правильн

Правильно. Комментарии поясняют структуру разметки, позволяя быстрее навигировать по файлу.

<!-- Header -->
<header class="header"></header>

<!-- Список пунктов -->
<ul>
  <li>Пункт</li>
  <li>Пункт</li>
</ul>

<!-- Price -->
<section class="price"></section>

<!-- Footer -->
<footer class="footer"></footer>

/* Header */
.header {
  …
}

/* Footer */
.footer {
  …
}

Неправильно. Код закомментирован и не имеет описания.

<!--
  <div class="popup">
    <div class="popup__overlay"></div>
    &lt;!&ndash;Разметка попапа&ndash;&gt;
  </div>
-->

Неправильно. Код закомментирован и имеет неосмысленное описание: комментарий не помогает понять, почему код закомментирован.

<!--TODO: Не забыть удалить
  <div class="popup">
    <div class="popup__overlay"></div>
    &lt;!&ndash;Разметка попапа&ndash;&gt;
  </div>
-->

Зачем нужен критерий. Большое количество закомментированного кода засоряет разметку, усложняет понимание и дальнейшую поддержку кода. Если фрагмент кода по какой-то причине должен быть закомментирован, то хорошие поясняющие комментарии помогут быстрее ознакомиться с его функциональностью.

Правильно. Файл slider.css находится в папке проекта и подключен в разметке.

barbershop/
  styles/
    styles.css
    slider.css

<head>
  <link rel="stylesheet" href="styles/styles.css">
    <link rel="stylesheet" href="styles/slider.css">
</head>

Неправильно. Файл slider.css находится на файловой системе, но не подключен в проекте.

barbershop/
  styles/
    styles.css
    slider.css // не подключён

<head>
  <link rel="stylesheet" href="styles/styles.css">
</head>

Неправильно. Файл slider.css подключен, но не влияет на стилизацию страницы.

barbershop/
  styles/
    styles.css
    slider.css // подключен, но пустой

<head>
  <link rel="stylesheet" href="styles/styles.css">
  <link rel="stylesheet" href="styles/slider.css">
</head>

Зачем нужен критерий. Неиспользуемые файлы засоряют файловую структуру и усложняют поддержку сайта.

Правильно. На странице используются структурные ориентиры. Тега <aside> нет в структуре, так как такой элемент не предусмотрен дизайном проекта.

<body>
  <header>
    Лого
    <nav>
      Меню
    </nav>
  </header>
  <main>
    Страница
  </main>
  <footer>
    Контакты
  </footer>
</body>

Неправильно. На странице используется <div> вместо структурных ориентиров.

<body>
  <div>
    Лого
    <div>
      Меню
    </div>
  </div>
  <div>
    Страница
  </div>
  <div>
    Контакты
  </div>
</body>

Зачем нужен критерий. Ориентиры — это элементы, группирующие контент, которые позволяют быстро перемещаться между группами, что важно при навигации по сайту с помощью скринридера.

Правильно. На странице есть <h1>, описывающий её содержимое. Заголовки применяются последовательно — от большего к меньшему, без пропусков.

<h1>Каталог</h1>
<section>
  <h2>Товары</h2>
  <article>
    <h3>Товар</h3>
  </article>
</section>
<section>
  <h2>Доставка</h2>
</section>

Неправильно. На странице нет <h1>. Последовательность заголовков неупорядоченная.

<section>
  <h5>Товары</h5>
  <article>
    <h1>Товар</h1>
  </article>
</section>
<section>
  <h3>Доставка</h3>
</section>

Правильно. На странице есть <h1>, описывающий её содержимое, и несколько <article> с собственными <h1>. Иерархия заголовков при этом остаётся упорядоченной.

<h1>Каталог</h1>
<section>
  <h2>Товары</h2>
  <article>
    <h3>Товар</h3>
  </article>
</section>

<article>
  <h1>Барбершоп сегодня закрыт.</h1>
</article>

<article>
  <h1>Скидки на новые причёски.</h1>
</article>

Зачем нужен критерий. Иерархия заголовков важна, так как она определяет структуру контента, которую потом могут использовать сторонние программы, например, поисковые роботы или скринридер. Исключения, касающиеся использования <article> допустимы, но лучше всё равно следовать общим правилам — один <h1> и уровни заголовков без пропусков.

Правильно. Для элементов, предназначенных для перехода между страницами, использован тег <a>.

<!-- Страница catalog.html -->

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a>Каталог</a> <!-- в ссылке на каталог не указан href, так как она ведёт на саму себя --></li>
    <li><a href="#">Вопросы</a></li>
  </ul>
</nav>

Неправильно. Для элементов, предназначенных для перехода между страницами, использован тег <button>.

<nav>
  <ul>
    <li><button type="button">Главная</button></li>
    <li><button type="button">Каталог</button></li>
    <li><button type="button">Вопросы</button></li>
  </ul>
</nav>

Правильно. Для почты и телефона использованы схемы mailto: и tel:.

<a href="mailto:email@example.com">email@example.com</a>

<a href="tel:+79876543210">+7 987 654-32-10</a>

Неправильно. Для почты и телефона не использован тег <a> c схемами mailto: и tel:.

<span>email@example.com</span>

<p>+7 987 654-32-10</p>

Правильно. Для элемента действия использован тег <button>.

<button type="button">Закрыть</button>

Зачем нужен критерий. Правильно размеченные ссылки и кнопки улучшают пользовательский опыт и помогают избегать ошибок в работе веб-страниц. Подробнее о том, чем отличаются ссылки и кнопки и какие проблемы могут возникнуть, если использовать неподходящий тег, можно почитать в блоге.

Правильно. Форма имеет атрибут action. Все поля формы обёрнуты в тег <form>.

<form action="https://echo.htmlacademy.ru">
  <label>
    Логин
    <input type="text" name="user" required>
  </label>
  <label>
    Пароль
    <input type="password" name="password" required>
  </label>
  <button type="submit">Отправить</button>
</form>

<form action="https://echo.htmlacademy.ru">
  <label>
    Поиск
    <input type="search" name="search" required>
  </label>
  <button type="submit">Найти</button>
</form>

Неправильно. У формы не указан атрибут action.

<form>
  <label>
    Логин
    <input type="text" name="login" required>
  </label>
  <label>
    Пароль
    <input type="text" name="password" required>
  </label>
  <button type="button">Отправить</button>
</form>

Неправильно. Форма поиска не обёрнута в тег <form>.

<label>
  Поиск
  <input type="search" name="search" required>
</label>
<button type="submit">Найти</button>

Неправильно. У полей с обязательным заполнением нет атрибута required.

<form action="https://echo.htmlacademy.ru">
  <label>
    Логин *
    <input type="text" name="user"
  </label>
  <label>
    Пароль *
    <input type="password" name="password">
  </label>
  <button type="submit">Отправить</button>
</form>

Неправильно. У разных полей формы одинаковое значения для атрибута <name>. В этом случае отправятся данные только одного поля.

<form action="https://echo.htmlacademy.ru">
  <label>
    Пароль
    <input type="password" name="password" required>
  </label>
  <label>
    Повторите пароль
    <input type="password" name="password" required>
  </label>
  <button type="submit">Отправить</button>
</form>

Неправильно. Не указано значение у атрибута name или отсутствует атрибут name.

<form action="https://echo.htmlacademy.ru">
  <label>
    Пароль
    <input type="password" name="" required>
  </label>
  <label>
    Повторите пароль
    <input type="password" required>
  </label>
  <button type="submit">Отправить</button>
</form>

Зачем нужен критерий. Формы — это критическая функциональность сайта, поэтому важно, чтобы они были работоспособны и отправляли введённые пользователем данные.

Правильно. Описание привязано к полю с помощью оборачивающего <label>.

<label>
  Имя
  <input type="text" name="text">
</label>

<label>
  <input type="text" name="text">
  Имя
</label>

Правильно. Описание привязано к полю с помощью атрибута for у <label> и id у <input>.

<label for="name">Имя</label>

<input type="text" id="name" name="text">

Неправильно. Описание никак не связано с полем формы.

Имя
<input type="text" name="name">

Неправильно. Поле имеет два описания.

<label for="email">Email</label>
<label>
  <input id="email" type="email" name="email">
</label>

Зачем нужен критерий. Подписи полей форм отображаются в дереве доступности, что позволяет скринридерам правильно понимать и передавать смысл поля.

Правильно. Не используется лишняя обёртка, а для декоративного элемента нет дополнительного блока в разметке.

<div class="features clearfix">
  <div class="features-item">
    <h2>Быстро</h2>
    <p>Мы делаем свою работу быстро!</p>
  </div>
…
</div>

Правильно. Допускается использование тега <span> для стилизации кастомных чекбоксов.

<label class="login-checkbox">
  <input type="checkbox" name="remember" class="visually-hidden">
  <span class="checkbox-indicator"></span>
  Запомните меня
</label>

Неправильно. Используется лишняя обёртка, которую можно сократить, а для декоративного элемента использован тег <span>, который можно заменить на псевдоэлемент.

<div class="features">
  <div class="clearfix">
    <div class="features-item">
      <h2>Быстро</h2>
      <span class="triangle"></span>
      <p>Мы делаем свою работу быстро!</p>
    </div>
  </div>
...
</div>

Если в вёрстке осознанно и единообразно разделяются сеточные и смысловые блоки, это ошибкой не является.

Зачем нужен критерий. Лишние элементы не несут в себе функциональности, поэтому их нужно удалять для упрощения поддержки и переиспользования кода.

Главная задача валидатора — проверить, что код соответствует стандартам и спецификациям языка. Код, который не проходит валидацию, может быть неправильно отработан в браузере.

Правильно. Подключена favicon.ico из корня проекта, а также иконка размером 32×32 в формате PNG.

<head>
  <link rel="icon" href="favicon.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32.png">
</head>

Правильно. Подключена только иконка размером 32×32 в формате PNG. favicon.ico не подключён к странице, но лежит в корне проекта.

<head>
  <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32.png">
</head>

Неправильно. Подключена только favicon.ico без варианта иконки размером 32×32 в формате PNG.

<head>
  <link rel="icon" href="favicon.ico">
</head>

Также ошибкой будет отсутствие favicon.ico в корне проекта.

Зачем нужен критерий. Фавиконки важны, так как они улучшают пользовательский опыт: помогают определить, какой сайт открыт на вкладке, или быстро найти нужный сайт в избранном.

Правильно. Все собственные стили подключены в одном файле в <head>.

<head>
  <link rel="stylesheet" href="styles/styles.css">
</head>

Неправильно. Стили разбиты на несколько файлов.

<head>
  <link rel="stylesheet" href="styles/header.css">
  <link rel="stylesheet" href="styles/main.css">
  <link rel="stylesheet" href="styles/footer.css">
</head>

Правильно. Сторонние стили подключены отдельно от собственных стилей.

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap">
  <link rel="stylesheet" href="styles/styles.css">
</head>

Неправильно. Сторонние стили добавлены к собственным стилям.

<!-- Файл index.html -->

<head>
  <link rel="stylesheet" href="styles/styles.css">
</head>

/* Файл styles/styles.css */

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");

Правильно. Сторонние стили подключены до собственных стилей.

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap">
  <link rel="stylesheet" href="styles/normalize.css">
  <link rel="stylesheet" href="styles/styles.css">
</head>

Неправильно. Собственные стили подключены до сторонних стилей.

<head>
  <link rel="stylesheet" href="styles/styles.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap">
  <link rel="stylesheet" href="styles/normalize.css">
</head>

Неправильно. Стили используются в разметке.

<html>
  <head></head>
  <body>
    <h1>Барбершоп «Бородинский»</h1>
    <style>
      .features {
        …
      }
    </style>
    <section class="features">
      …
    </section>
  </body>
</html>

<section class="features" style="background-image: url('images/hammer.jpg');">
  …
</section>

Зачем нужен критерий. Правильно подключённые стили гарантируют, что сайт будет выглядеть так, как этого требует макет.

Правильно. Используется универсальный селектор одновременно с псевдоэлементами для изменения боксовой модели.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Неправильно. Использован универсальный селектор без псевдоэлементов и не для изменения боксовой модели.

* {
  margin: 0;
  padding: 0;
}

Правильно. Для нормализации тега <img> использованы свойства max-width и object-fit.

img {
  max-width: 100%;
  object-fit: contain;
}

Неправильно. Для нормализации тега <img> использовано свойство display.

img {
  max-width: 100%;
  display: block;
}

Правильно. Использован уникальный тег <body>.

body {
  margin: 0;
}

Неправильно. Использованы селекторы по типу.

ul { 
  list-style: none;
}

p { 
  margin: 0;
}

Правильно. Селектор по типу вложен внутрь селектора по классу.

.content h1 {
  font-size: 30px;
}

.content p {
  font-size: 20px;
}

Правильно. Внутри :root использованы только кастомные свойства.

:root {
  --basic-extra-dark: #242424;
  --basic-dark: #595959;
  --basic-light: #e7e7e7;
  --basic-extra-light: #f6f6f6;
}

Неправильно. :root использован не для кастомных свойств.

:root {
  font-size: 20px;
}

Зачем нужен критерий

В процессе обучения мы ограничиваем студентов в праве выбора глобальных селекторов. Это позволяет нам сконцентрировать студентов на тех селекторах, которые они точно будут применять в своих проектах. В материалах мы рассказали про другие возможные варианты использования глобальных селекторов.

Глобальные селекторы применяют стили ко всем элементам на странице, поэтому их использование может делать вёрстку менее контролируемой, а поведение элементов — непредсказуемым.

Неправильно. Используется селектор по идентификатору.

#header {
  background-color: #000000;
}

Зачем нужен критерий

Критерий рассматривает именно запрет на стилизацию через id, но использовать этот атрибут для связывания <label> и элементов форм не считается ошибкой.

Селекторы по идентификатору обладают большей специфичностью по сравнению с классом и добавляют непредсказуемости в код. Например, чтобы переопределить #id, потребуется несколько селекторов по классу или !important. Это делает код неконтролируемым и сложно читаемым.

Неправильно. Использован !important.

.content h1 {
  font-size: 17px !important;
}

Зачем нужен критерий. Модификатор !important даёт CSS-правилу наивысшую специфичность и нарушает этим каскад стилей. Это добавляет непредсказуемости в код, усложняет его поддержку и отладку. Существуют специфические задачи, в которых использование !important может быть целесообразно, но в рамках курса таких задач нет, поэтому он запрещён.

Правильно. Указано типовое семейство для шрифта sans-serif, а начертание изменяется с помощью font-weight.

@font-face {
 font-family: "PT Sans";
 src: url("/fonts/pt-sans.woff2") format("woff2");
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: "Futura";
 src: url("/fonts/futura-bold.woff2") format("woff2");
 font-weight: 700;
 font-style: normal;
 font-display: swap;
}

.page {
  font-family: "PT Sans", sans-serif;
}

.content h2 {
  font-family: "Futura", sans-serif;
  font-weight: 700;
}

Неправильно. Начертание семейства изменяется именем шрифта, а не свойствами font-weight и font-style.

@font-face {
 font-family: "Futura Regular";
 src: url("/fonts/futura-regular.woff2") format("woff2");
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: "Futura Bold";
 src: url("/fonts/futura-bold.woff2") format("woff2");
 font-weight: 700;
 font-style: normal;
 font-display: swap;
}

.content {
  font-family: "Futura Regular", sans-serif;
}

.content h2 {
  font-family: "Futura Bold", sans-serif;
}

Неправильно. У шрифта не указано общее семейство serif, sans-serif или monospace.

@font-face {
 font-family: "PT Sans";
 src: url("/fonts/pt-sans.woff2") format("woff2");
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}

@font-face {
 font-family: "Futura";
 src: url("/fonts/futura.woff2") format("woff2");
 font-weight: 400;
 font-style: normal;
 font-display: swap;
}

.content {
  font-family: "PT Sans";
}

.content h2 {
  font-family: "Futura";
}

Зачем нужен критерий

Описанный подход к использованию шрифтов повышает гибкость и наглядность кода, так как мы отделяем описание шрифта от его использования: семейство шрифта достаточно будет указать только один раз — на body, а дальше в любых селекторах прописывать только особенности начертания. На тех элементах, у которых по умолчанию есть тестовые стили, например <i> или <b>, начертание шрифта применится автоматически. Это позволяет легко менять шрифт и отслеживать все варианты его использования.

Тип семейства необходимо указывать, чтобы в случае отсутствия основного шрифта изменения внешнего вида шрифтов на странице были минимальны.

Правильно. Контентная графика использована в разметке.

<img src="images/hammer.jpg" width="640" height="320" alt="Мороженное сорта Хаммер со вкусом дубовой коры">

Неправильно. Контентная графика использована в стилях.

<div class="product">
  …
</div>

.product {
  background-image: url("images/hammer.jpg");
}

Правильно. Декоративная графика использована в стилях.

<button class="button-icon">
  <span class="visually-hidden">Перейти в Facebook.</span>
</button>

.button-icon {
  background-image: url("images/icons/icon.svg");
}

Правильно. Декоративная изменяемая графика использована в разметке.

<body>
  <svg class="icon" width="11" height="10" viewBox="0 0 11 10" xmlns="http://www.w3.org/2000/svg">
    <path d="M11 0L0 0L5.5 10L11 0Z" />
  </svg>
</body>

.icon:hover {
  fill: #ff0000;
}

Неправильно. Декоративная графика использована в разметке.

<img src="images/line.png" width="16" height="16" alt="">

Зачем нужен критерий

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

Декоративная графика должна быть в стилях, так как она не несёт смысловой нагрузки и её отсутствие в случае незагрузки стилевого файла не приведёт к потере важной информации. Использовать декоративную графику в разметке нежелательно, так как лишние элементы в разметке усложняют поддержку кода.

Зачем нужен критерий. Использование подходящих форматов изображений важно для того, чтобы изображения отображались без погрешностей и имели оптимальный размер при загрузке.

Правильно

<img src="images/flower.jpg" width="390" height="250" alt="Нежные цветки сакуры на фоне голубого неба.">

<svg width="11" height="10" viewBox="0 0 11 10" xmlns="http://www.w3.org/2000/svg">
  <path d="M11 0L0 0L5.5 10L11 0Z" />
</svg>

Зачем нужен критерий

Задавать размеры растровых изображений в разметке необходимо, чтобы не было скачков интерфейса при их загрузке, а векторных — чтобы изображение не увеличивалось бесконтрольно, если у него не заданы внутренние размеры.

Задавать размеры изображений в разметке необходимо для перестраховки. В этом случае вёрстка сайта не сломается, если изображение будет заменено на более большое или маленькое.

Правильно. Перенос для соответствия макету сделан с помощью одного тега <br>.

<h1>Шампунь для <br>
  мужчин Brews Daily</h1>

Неправильно. Перенос для соответствия макету сделан с помощью двух тегов <br>.

<p>Заимствование, как бы это ни казалось парадоксальным, непрерывно.</p>
<br>
<br>
<p>Представленный лексико-семантический анализ является психолингвистическим в своей основе.</p>

Зачем нужен критерий. Использовать тег <br> для создания отступов между блоками — это плохая практика, потому что такой код неудобно изменять и поддерживать.

Контентная растровая графика

Теги <img> должны иметь заполненный атрибут alt с описанием изображения.

Исключение: если рядом с изображением есть сущность в которой уже описано содержимое картинки, то alt можно оставлять пустым.

Правильно. У тега <img> атрибут alt содержит описание изображения.

<img src="images/hammer.jpg" width="640" height="320" alt="Винтажный молоток с рукояткой из массива дуба.">

Правильно. В карточке товара есть заголовок, описывающий товар. В этом случае alt можно оставить пустым, иначе скринридер при чтении карточки повторит два раза название товара.

<li class="product-card">
  <img src="images/shampoo.jpg" width="220" height="200" alt="">
  <h3>Шампунь для мужчин Brews Daily</h3>
</li>

Неправильно. У тега <img> не заполнен атрибут alt.

<img src="images/hammer.jpg" width="640" height="320" alt>

Неправильно. В качестве значения атрибута alt использован пробел.

<img src="images/hammer.jpg" width="640" height="320" alt=" "> <!--alt с пробелом-->

Контентная векторная графика

Контентная векторная графика в разметке должна иметь атрибут role="img" и описание изображения в атрибуте aria-label.

Правильно. Контентная векторная графика имеет role="img" и aria-label.

<svg 
  class="logo" 
  xmlns="http://www.w3.org/2000/svg" 
  viewBox="0 0 140 18" 
  width="367" 
  height="152" 
  role="img" 
  aria-label="Барбершоп «Бородинский»">
    <path d="M78.55 0h-2.8v15.78h2.8V0zM91.02z"/>
</svg>

Неправильно. У контентной векторной графики отсутствует role="img" и aria-label.

<svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 18" width="367" height="152">
  <path d="M78.55 0h-2.8v15.78h2.8V0zM91.02z"/>
</svg>

Зачем нужен критерий. Атрибут alt даёт альтернативное описание изображения для скринридеров и поисковиков. Правильное описание картинки добавляет смысл и ценность появления этой картинки для пользователя.

Правильно. У ссылки есть описание, так как у изображения заполнен атрибут alt.

<a href="/">
  <img src="images/logo.svg" width="64" height="32" alt="Барбершоп «Бородинский».">
</a>

Неправильно. У ссылки нет описания, так как у изображения не заполнен атрибут alt.

<a href="/">
  <img src="images/logo.svg" width="64" height="32" alt="">
</a>

Неправильно. У ссылки нет описания, так как внутри неё нет текстового содержимого.

<a href="https://twitter.com/htmlacademy_ru"></a>

Правильно. Описание у кнопки с иконкой реализовано при помощи текста, скрытого классом visually-hidden.

<button class="fb-icon" type="button">
  <span class="visually-hidden">Закрыть окно.</span>
</button>

.fb-icon {
  content: url("images/fb.png");
}

Неправильно. Кнопка с иконкой не имеет описания.

<button class="fb-icon" type="button"></button>

.fb-icon {
  content: url("images/fb.png");
}

Зачем нужен критерий. Текстовое описание интерактивных элементов поможет пользователям понять, что именно произойдёт в результате взаимодействия, в случае если они не видят элементы интерфейса. Это описание будет озвучено скринридером.

Правильно. Интерактивный элемент имеет стандартный браузерный фокус.

<button class="button" type="button">Закрыть</button>

Неправильно. Вместо кнопки использован <div>, стилизованный под кнопку, но не имеющий встроенной интерактивности.

<div class="button">Закрыть</div>

.button {
  display: inline-block;
  border: none;
  height: 50px;
  background-color: #eeeeee;
}

Правильно. Стандартный браузерный фокус заменён на фокус, описанный в макете.

<button class="button" type="button">Закрыть</button>

.button {
  outline: none;
  box-shadow: 0 0 1px rgba(255, 255, 0, 0.7);
}

Неправильно. Стандартная обводка отключена без замены на альтернативное состояние.

<button class="button" type="button">Закрыть</button>

.button {
  outline: none;
}

* {
  outline: none;
}

При проверке нужно убедиться, что в коде либо нет outline: none, либо взамен назначена подходящая замена.

Зачем нужен критерий. Видимое состояние интерактивных элементов позволяет передвигаться по ним с клавиатуры клавишей Tab и видеть каждый текущий элемент в активном состоянии.

Область взаимодействия включает иконку и текст

Область вокруг текста в навигации чувствительна к клику, а не только сам текст.

Интерактивные элементы с иконкой имеют расширенную область клика.

В пагинации цифры имеют расширенную область клика, а не по цифре.

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

В карточке товара кликабельным является не только название товара, но и изображение товара, а не только его название.

Зачем нужен критерий. Правильные области важны для ускорения взаимодействия с интерактивными элементами интерфейса: чем меньше область клика, тем больше времени пользователь потратит на то, чтобы попасть в эту область.

Правильно. Указан цвет фона перед основным изображением.

body {
  background: #000000 url("../img/background-body.jpg") no-repeat center top;
}

Результат: картинка не загрузилась, но при этом цвет фона остался тёмным.

Неправильно. Указано только основное изображение.

body {
  background: url("../img/background-body.jpg") no-repeat center top;
}

Результат: картинка не загрузилась, а цвет фона стал белым.

Для блока с картой также следует указывать фоновый цвет.

Чтобы этот критерий был засчитан, необходимо не просто указать цвет фона, но и подобрать цвет, который преобладает в самом изображении.

Зачем нужен критерий. Такой метод используется для перестраховки. В этом случае, если фоновое изображение не загрузится, на заднем фоне останется преобладающий цвет.

Правильно

<nav class="menu">
  <ul>
    <li><a class="menu-item menu-item-current" href="#">Кроет</a></li>
    <li><a class="menu-item" href="#">Буря</a></li
    <li><a class="menu-item" href="#">Мглою</a></li>
    <li><a class="menu-item" href="#">Небо</a></li>
  </ul>
</nav>

.menu {
  display: flex;
}

• Кроет
• Буря
• Мглою
• Небо

 Неправильно

<nav class="menu">
  <ul>
    <li><a class="menu-item menu-item-current" href="#">Кроет</a></li>
    <li><a class="menu-item" href="#">Буря</a></li
    <li><a class="menu-item" href="#">Мглою</a></li>
    <li><a class="menu-item" href="#">Небо</a></li>
  </ul>
</nav>

.menu {
  display: flex;
  flex-direction: row-reverse;
}

• Небо
• Мглою
• Кроет
• Буря

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