Выполнена HTML-разметка всех страниц проекта и всех элементов на этих страницах
Этот критерий говорит о том, что все страницы проекта и все скрытые и дополнительные элементы должны быть размечены. Например, всплывающие и появляющиеся элементы, модальные окна, все слайды в слайдере.
Грубые ошибки в разметке отсутствуют.
Грубые ошибки:
Ссылки сделаны не тегом , а другими тегами;
Использование строчных элементов для создания крупных (сеточных) блоков;
Абзацы сделаны не тегами , а .
Негрубые ошибки:
Отсутствие семантических тегов , и др.
В разметке отсутствует дублирование кода для одного и того же элемента, с помощью которого элемент отображается в разных местах страницы в адаптиве.
Этот критерий не касается элементов, которые скрываются или показываются в разных версиях
Отсутствуют типовые ошибки в разметке по методологии
Названия полей форм привязаны к своим полям с помощью
Для улучшения взаимодействия пользователя с элементами форм должна быть реализована активация поля при нажатии на его описание. Для этого необходимо связывать элемент формы с его описанием, используя тег и идентификаторы.
У всех векторных изображений размер прописан в теге , у встроенных SVG-изображений размер прописан в теге
Адаптивному изображению может быть не задан размер в HTML:
Использовано минимально возможное количество HTML-элементов (нет лишних элементов)
В разметке должно быть использовано минимально возможное количество элементов. Не должно быть лишних обёрток и блоков, которые используются для оформления и могут быть заменены на псевдоэлементы.
Стилизация
Подключены правильные шрифты, их размеры, цвет и толщина равны соответствующим параметрам в макетах и техническом задании.
Нестандартные шрифты подключены локально. Формат шрифтов должен быть woff и woff2
Все нестандартные шрифты должны быть подключены в CSS из папки fonts с помощью правила @font-face. Подключаемые шрифты должны быть в форматах woff и woff2.
Перечисление форматов шрифтов должно начинаться с более современного.
Указаны альтернативные варианты шрифта и тип семейства в конце перечисления font-family
Альтернативный веб-безопасный шрифт и тип семейства необходимо указывать для того, чтобы в случае отсутствия основного шрифта изменения внешнего вида шрифтов на странице были минимальны.
Порядок шрифтов следующий:
1. Основной шрифт;
2. Веб-безопасный;
3. Тип шрифта.
При наполнении контентом (как в макете) элементы каждой версии страницы (мобильной, планшетной и десктопной) соответствуют макету.
При проверке допускаются:
- Вертикальная погрешность не более 10 пикселей, горизонтальная погрешность не более 5 пикселей;
- Различия в отображении шрифтов, связанные со сглаживанием на различных платформах.
Для стилизации не использованы #id
Для стилизации объектов лучше использовать селекторы по классам или тегам. Использовать id для стилизации недопустимо.
Для блока, у которого есть фоновое изображение, прописан фоновый цвет, который соответствует преобладающему цвету изображения
Если фоновое изображение не загрузится, на заднем фоне останется преобладающий цвет.
Все состояния элементов (стайлгайд) прописаны в стилевом файле
Нет глобальных стилей тегов
CSS-препроцессор
Запрещено использовать цветовые функции для изменения цветовых значений в коде
Если в макете указаны конкретные цвета, нужно задавать конкретные цветовые значения в коде. Не нужно подбирать эти значения с помощью цветовых функций CSS-препроцессоров (изменение цвета, осветление, затемнение и так далее).
Исключение составляют функции изменения альфа-канала (прозрачности цвета)
Вложенность селекторов не больше двух уровней
Родительский селектор & используется только для псевдоэлементов, псевдоклассов и модификаторов
Использование & для комбинации селекторов не допускается в именах блоков и элементов. Комбинировать можно только псевдоэлементы, псевдоклассы и модификаторы блоков и элементов.
Не используются расширения (extend)
Адаптивность
В разметке есть правильный вьюпорт тег
Адаптивность должна работать на планшетах и мобильных устройствах. То есть не только при изменении ширины окна браузера.
Тестирование
Вёрстка проходит тест на переполнение контентом
Доступность
У интерактивных элементов при нажатии или фокусе с клавиатуры есть активное состояние
Активное состояние интерактивных элементов при нажатии или фокусе с клавиатуры должно оставаться либо встроенным браузерным, либо быть переназначено. По интерактивным элементам сайта можно передвигаться с клавиатуры клавишей Tab и видеть каждый текущий элемент в активном состоянии.
Все интерактивные элементы имеют текстовое описание
К интерактивным элементам относятся те элементы страницы, которые реагируют на взаимодействие с пользователем: например, клик по иконке закрытия попапа закрывает попап, клик по иконкам социальных сетей вызывает переход на другую страницу и так далее.
Форматирование и внешний вид
Оптимизация
Использован векторный спрайт
Векторные изображения на странице объединены в спрайт
Произведена оптимизация загрузки шрифтов
Шрифты предзагружаются через link rel="preload".
Используется подходящее значение font-display в описании @font-face.
Разное
Вёрстка идентично отображается в последних версиях браузеров Chrome, Firefox, Safari, Edge, Internet Explorer
При проверке этого критерия, необходимо смотреть на размеры и расположение блоков, внешнее сходство с макетом. Проверять работу анимации, если такая имеется. Допускаются небольшие отличия в отображениях шрифтов.
Единообразное написание и форматирование кода в HTML, файлах CSS-препроцессора и JavaScript (включая файлы автоматизации)
Отсутствует транслит в названиях классов, атрибутах, переменных CSS-препроцессора, названиях примесей и так далее
Для названий необходимо использовать английские слова и термины.
Проект соответствует техническому заданию
При взаимодействии с элементами ни элемент, ни его контейнеры не меняют своего положения (если иное не прописано в техническом задании/стайлгайде).