Критерии

1. Разметка

1.1 Выполнена HTML-разметка всех страниц проекта и всех элементов на этих страницах

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

1.2 Грубые ошибки в разметке отсутствуют.

Грубые ошибки: Ссылки сделаны не тегом , а другими тегами; Использование строчных элементов для создания крупных (сеточных) блоков; Абзацы сделаны не тегами , а . Негрубые ошибки: Отсутствие семантических тегов , и др.

1.3 Документ проходит проверку на валидность https://validator.w3.org/nu/.

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

Этот критерий не касается элементов, которые скрываются или показываются в разных версиях

1.5 Отсутствуют типовые ошибки в разметке по методологии

1.6 Названия полей форм привязаны к своим полям с помощью

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

1.7 У всех векторных изображений размер прописан в теге , у встроенных SVG-изображений размер прописан в теге

Адаптивному изображению может быть не задан размер в HTML:

1.8 Использовано минимально возможное количество HTML-элементов (нет лишних элементов)

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

2. Стилизация

2.1 Подключены правильные шрифты, их размеры, цвет и толщина равны соответствующим параметрам в макетах и техническом задании.

2.2 Нестандартные шрифты подключены локально. Формат шрифтов должен быть woff и woff2

Все нестандартные шрифты должны быть подключены в CSS из папки fonts с помощью правила @font-face. Подключаемые шрифты должны быть в форматах woff и woff2. Перечисление форматов шрифтов должно начинаться с более современного.

2.3 Указаны альтернативные варианты шрифта и тип семейства в конце перечисления font-family

Альтернативный веб-безопасный шрифт и тип семейства необходимо указывать для того, чтобы в случае отсутствия основного шрифта изменения внешнего вида шрифтов на странице были минимальны. Порядок шрифтов следующий: 1. Основной шрифт; 2. Веб-безопасный; 3. Тип шрифта.

2.4 При наполнении контентом (как в макете) элементы каждой версии страницы (мобильной, планшетной и десктопной) соответствуют макету.

При проверке допускаются: - Вертикальная погрешность не более 10 пикселей, горизонтальная погрешность не более 5 пикселей; - Различия в отображении шрифтов, связанные со сглаживанием на различных платформах.

2.5 Для стилизации не использованы #id

Для стилизации объектов лучше использовать селекторы по классам или тегам. Использовать id для стилизации недопустимо.

2.6 Для блока, у которого есть фоновое изображение, прописан фоновый цвет, который соответствует преобладающему цвету изображения

Если фоновое изображение не загрузится, на заднем фоне останется преобладающий цвет.

2.7 Все состояния элементов (стайлгайд) прописаны в стилевом файле

2.8 Нет глобальных стилей тегов

3. CSS-препроцессор

3.1 Запрещено использовать цветовые функции для изменения цветовых значений в коде

Если в макете указаны конкретные цвета, нужно задавать конкретные цветовые значения в коде. Не нужно подбирать эти значения с помощью цветовых функций CSS-препроцессоров (изменение цвета, осветление, затемнение и так далее). Исключение составляют функции изменения альфа-канала (прозрачности цвета)

3.2 Вложенность селекторов не больше двух уровней

3.3 Родительский селектор & используется только для псевдоэлементов, псевдоклассов и модификаторов

Использование & для комбинации селекторов не допускается в именах блоков и элементов. Комбинировать можно только псевдоэлементы, псевдоклассы и модификаторы блоков и элементов.

3.4 Не используются расширения (extend)

4. Адаптивность

4.1 В разметке есть правильный вьюпорт тег

Адаптивность должна работать на планшетах и мобильных устройствах. То есть не только при изменении ширины окна браузера.

5. Тестирование

5.1 Вёрстка проходит тест на переполнение контентом

6. Доступность

6.1 У интерактивных элементов при нажатии или фокусе с клавиатуры есть активное состояние

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

6.2 Все интерактивные элементы имеют текстовое описание

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

7. Форматирование и внешний вид

8. Оптимизация

8.1 Использован векторный спрайт

Векторные изображения на странице объединены в спрайт

8.2 Произведена оптимизация загрузки шрифтов

Шрифты предзагружаются через link rel="preload". Используется подходящее значение font-display в описании @font-face.

9. Разное

9.1 Вёрстка идентично отображается в последних версиях браузеров Chrome, Firefox, Safari, Edge, Internet Explorer

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

9.2 Единообразное написание и форматирование кода в HTML, файлах CSS-препроцессора и JavaScript (включая файлы автоматизации)

9.3 Отсутствует транслит в названиях классов, атрибутах, переменных CSS-препроцессора, названиях примесей и так далее

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

9.4 Проект соответствует техническому заданию

9.5 При взаимодействии с элементами ни элемент, ни его контейнеры не меняют своего положения (если иное не прописано в техническом задании/стайлгайде).