6 лет назад мы обсуждали с сообществом критерии качества вёрстки, которые мы используем в обучении, чтобы наши выпускники радовали рынок своими умениями и подходом к работе. С тех пор в разработке интерфейсов произошло море изменений: сначала в продакшн пришли флексы, потом подтянулись гриды, умер IE, все переехали из Фотошопа в Фигму, и много чего ещё. Каждое это изменение влияло на наши критерии, и мы постоянно их дорабатывали.  Сейчас пришло время снова обсудить с сообществом обновлённые критерии, чтобы наши выпускники продолжали радовать индустрию своим уровнем. Ниже представлена обновлённая система критериев, которую мы планируем внедрить на осенних запусках курсов. Мы публикуем её сейчас, чтобы собрать обратную связь от сообщества и внести изменения в критерии. Эти критерии касаются нашего первого уровня вёрстки, то есть задач, связанных с фиксированной вёрсткой без адаптивности и без специфичных требований к вёрстке (например, по натяжке на конкретную CMS). Критерии для задач, связанных с адаптивностью, автоматизацией, натяжкой на CMS или вёрсткой под React, мы тоже планируем обсудить с сообществом, когда подготовим их. На курсе ученик верстает макет (вот такого уровня сложности), и на защите в конце курса эту вёрстку по критериям качества проверяет случайный наставник. Защита считается успешной, если зачтены все обязательные критерии. Помимо обязательных есть и дополнительные критерии, их выполнение для успешной защиты не нужно, но они позволяют более точно оценить качество работы и показать ученику как улучшить свой код. Дополнительные критерии в нашей системе помечены звёздочкой. Для удобства обсуждения критерии разбиты на категории, некоторые критерии относятся к процессу приёмки проекта, некоторые к качеству кода. Также для многих критериев мы попытались написать обоснование, зачем нужен критерий, и почему он именно такой. И будем рады, если в результате обсуждений появятся новые обоснования или дополнятся текущие. Необходимо смотреть на размеры и расположение блоков, внешнее сходство с макетом. Необходимо проверить работу анимации, если такая имеется. Допускаются небольшие отличия в отображениях шрифтов. Вёрстка должна идентично отображаться в последних стабильных версиях браузеров Chrome, Firefox, Safari, если иное не указано в техзадании проекта. Пользователи сайта могут использовать разные браузеры в разных системах, поэтому нужно добиваться единого отображения. Проект должен быть сделан на HTML и CSS без использования сторонних библиотек и фреймворков. Задача курса — научить решать задачи с помощью базовых технологий. Полученная база позволит разобраться, как работают фреймворки или библиотеки. У каждой страницы есть минимальная ширина по фрейму. При ширине окна больше минимальной страница центрируется. Горизонтальная прокрутка появляется только при ширине, меньше минимальной. Допускаются расхождения по горизонтали, не превышающие ширину полосы вертикальной прокрутки. В качестве ориентира для ширины страницы используется фрейм, потому что мы считаем Figma преобладающим форматом макетов и поэтому пользуемся терминами этого графического редактора. В учебных макетах мы учли минимальную ширину, но в реальной разработке минимальная ширина страницы может отличаться от размера фрейма. У страницы должна быть минимальная ширина, чтобы у пользователей с меньшим разрешением при просмотре страницы оставались работоспособны все элементы сайта. Контент страницы должен быть отцентрирован, чтобы у пользователей с большим разрешением при просмотре страницы контент находился перед глазами — в центре страницы. Текст должен оставаться в рамках родительского блока при переполнении. Текст не должен обрезаться или вываливаться из родительского блока при переполнении. Текст не должен смещать другие блоки. Родительский блок должен сохранять минимальные размеры при недополнении. Слова, длиннее минимальной ширины, должны переноситься. Контент больше ширины родителя не должен выходить за его пределы, ломать сетку или смещать другие блоки. При увеличении количества элементов они должны оставаться в рамках родительского блока. Элементы могут переноситься на следующую строку при уменьшении размера родителя. При минимальном количестве элементов или их отсутствии родительский блок должен сохранять минимальные размеры. Последние блоки в сетках должны выравниваться по направлению текста. Текст должен оставаться в рамках родительского блока при переполнении и не должен вываливаться или обрезаться из родительского блока. Родительский блок должен сохранять минимальные размеры при недополнении. Слова длиннее минимальной ширины должны переноситься. Контент больше ширины родителя не должен выходить за его пределы, ломать сетку или смещать другие блоки. Контент больше ширины родителя не должен выходить за его пределы, ломать сетку или смещать другие блоки. При увеличении количества элементов они должны оставаться в рамках родительского блока и последние блоки должны выравниваться по направлению текста. Элементы могут переноситься на следующую строку при уменьшении размера родителя. При проверке переполнения в браузере Safari необходимо добавлять текст не через инспектор браузера, а через редактор кода, редактируя страницу HTML. В противном случае текст будет добавляться в одну длинную строчку. Верстальщик должен предусматривать ситуации, в которых контент может меняться, и подготавливать вёрстку к изменениям контента. Следующие текстовые параметры должны соответствовать параметрам из макета: семейство шрифта font-family; насыщенность шрифта font-weight; начертание шрифта font-style; размер шрифта font-size; высота строки line-height; цвет текста color. При проверке этого пункта следует ориентироваться именно на параметры, указанные в макете. Из-за особенностей отображения шрифтов на разных платформах, определение этого критерия на глаз может привести к ошибке. Помимо этого, стоит допускать разное межбуквенное расстояние в макете и в финальной вёрстке. Считать разное межбуквенное расстояние ошибкой стоит только в том случае, если оно явно указано в макете. При наполнении контентом, как в макете, элементы каждой страницы соответствуют макету. Допускаются: различия в 5 пикселей по высоте при расстояниях более 30 пикселей и 2 пикселя по ширине; различия в отображении шрифтов, связанные со сглаживанием на различных платформах. Рекомендуем проверять с помощью инструмента PerfectPixel (работает в Chrome, Firefox). Зачем нужен критерий Заказчик может не принять работу, если вёрстка будет отличаться от согласованному макета. Поэтому веб-разработчик должен не просто сверстать сайт по образцу, а сделать это близко к согласованному макету. Чтобы сайт как можно точнее совпадал с утвержденным дизайном, веб-разработчики придерживаются концепции Pixel Perfect. Это способ вёрстки строго по макету, при котором размеры и интервалы из макета соблюдаются с точностью до нескольких пикселей. Допустимые различия нужны для компенсации несоответствий макету, связанных с отличиями отображения элементов в разных графических редакторах, браузерах и операционных системах. Все состояния элементов должны соответствовать стайлгайду, предусмотренному в макете. Стайлгайд — это часть дизайна проекта, он имеет наивысший приоритет. При наличии стайлгайда верстальщик должен ему следовать. Если в стайлгайде не предусмотрены состояния элемента, то их нужно реализовать на своё усмотрение. Для элементов форм, кнопок и ссылок:hover, focus, active. Для элементов форм: disabled. При проверке этого пункта следует оценивать наличие эффектов и их соответствие стайлгайду. При взаимодействии с элементами (наведение, нажатие) ни сам элемент, ни окружающие его блоки не меняют своего положения, если такое поведение не предусмотрено макетом. Правильно Неправильно Неправильно Неправильно Код должен быть написан с соблюдением требований кодгайда Академии. Правильно. Код написан в одном стиле. Неправильно. Одинаковые элементы разметки имеют разные отступы и переносы. Неправильно. Один и тот же цвет написан в разных нотациях. Зачем нужен критерий Требования, перечисленные в кодгайде Академии, нужно соблюдать в рамках обучения. В других компаниях требования могут отличаться. Кодгайд необходим для сохранения единообразия кодовой базы, которое помогает всем участникам команды работать в одинаковых условиях.  Названия папок, файлов, атрибутов, классов должны состоять из английских слов. Рекомендуем записывать слова полностью, без сокращений. Для сокращений можно использовать слова из списка часто используемых слов. Правильно. Названия папок и файлов состоят из английских слов. Неправильно. Названия папок и файлов написаны транслитом или не словами. Правильно. Названия классов состоят из английских слов. Неправильно. Названия классов написаны транслитом. Правильно. Значения атрибутов состоят из английских слов. Английский язык — это общепринятая договорённость в среде разработчиков. Единый подход именования позволяет быстрее знакомиться с кодовой базой. Файлы и папки должны быть записаны строчными буквами без пробелов между словами. Правильно. Названия файлов и папок написаны строчными. Неправильно. Названия папок содержат прописные буквы. В качестве разделителей должны использоваться только дефисы - или подчёркивания _. Выберите только один стиль — - или _. Разделители должны использоваться последовательно. Правильно. Многосоставные названия разделяются дефисами. Неправильно. Многосоставные названия содержат разные разделители. Зачем нужен критерий. Перечисленные требования продиктованы кодстайлом Академии. В других командах и проектах требования могут отличаться. Критерий говорит о том, что важно соблюдать кодстайл команды, в которой вы работаете. Кроме того, в некоторых системах названия папок и файлов регистрозависимые, и единообразное именование защитит вас от возможных проблем, связанных с регистром. В проекте не должно быть закоментированных фрагментов кода без осмысленного текстового пояснения. Правильно. Комментарий описывает механику взаимодействия с элементом. Таким образом передаются знания от одного разработчика другому. Правильно. Комментарий скрывает часть разметки, но при этом имеет пояснение, в каком случае эту часть нужно восстановить. Правильно. Комментарии поясняют структуру разметки, позволяя быстрее навигировать по файлу. Неправильно. Код закомментирован и не имеет описания. Неправильно. Код закомментирован и имеет неосмысленное описание: комментарий не помогает понять, почему код закомментирован. Зачем нужен критерий. Большое количество закомментированного кода засоряет разметку, усложняет понимание и дальнейшую поддержку кода. Если фрагмент кода по какой-то причине должен быть закомментирован, то хорошие поясняющие комментарии помогут быстрее ознакомиться с его функциональностью. В проекте не должно быть неиспользуемых файлов: Файлы, не подключённые на страницы. Подключённые файлы, которые ничего не делают. Файлы svg-изображений, которые заинлайнены в разметку, могут остаться в папке проекта. Правильно. Файл slider.css находится в папке проекта и подключен в разметке. Неправильно. Файл slider.css находится на файловой системе, но не подключен в проекте. Неправильно. Файл slider.css подключен, но не влияет на стилизацию страницы. Зачем нужен критерий. Неиспользуемые файлы засоряют файловую структуру и усложняют поддержку сайта. На странице, при их наличии, должны быть обозначены структурные ориентиры: <header> для вводной части, повторяющейся на других страницах; <main> для основного содержимого, не повторяющегося на других страницах; <nav> для важных навигационных элементов по сайту; <aside> для дополнительного содержимого; <footer> для закрывающей, дополнительной информации о странице. Ориентиры могут быть обёрнуты или вложены в другие теги, использоваться для стилизации или просто служить смысловыми обёртками. Правильно. На странице используются структурные ориентиры. Тега <aside> нет в структуре, так как такой элемент не предусмотрен дизайном проекта. Неправильно. На странице используется <div> вместо структурных ориентиров. Зачем нужен критерий. Ориентиры — это элементы, группирующие контент, которые позволяют быстро перемещаться между группами, что важно при навигации по сайту с помощью скринридера. На странице должен быть <h1>, который описывает содержимое страницы. Уровни заголовков должны идти последовательно от большего к меньшему без пропусков. Исключения, касающиеся наличия одного <h1> на странице или изменения сквозной структуры заголовков, возможны для тега <article>, так как внутри него может находиться свой собственный <h1> и собственная структура заголовков. Правильно. На странице есть <h1>, описывающий её содержимое. Заголовки применяются последовательно — от большего к меньшему, без пропусков. Неправильно. На странице нет <h1>. Последовательность заголовков неупорядоченная. Правильно. На странице есть <h1>, описывающий её содержимое, и несколько <article> с собственными <h1>. Иерархия заголовков при этом остаётся упорядоченной. Зачем нужен критерий. Иерархия заголовков важна, так как она определяет структуру контента, которую потом могут использовать сторонние программы, например, поисковые роботы или скринридер. Исключения, касающиеся использования <article> допустимы, но лучше всё равно следовать общим правилам — один <h1> и уровни заголовков без пропусков. Ссылки <a href> должны использоваться для перехода между страницами, а кнопки <button> должны использоваться только для действий на странице. У ссылок должен быть атрибут href. Ссылки, которые ведут на самих себя, могут быть без атрибута. Для ссылок, адрес которых неизвестен, можно использовать атрибут href с решёткой href="#". Адреса почты и телефоны должны быть размечены ссылками с соответствующими схемами внутри href. У кнопок должен быть явно указан тип действия в атрибуте type. Правильно. Для элементов, предназначенных для перехода между страницами, использован тег <a>. Неправильно. Для элементов, предназначенных для перехода между страницами, использован тег <button>. Правильно. Для почты и телефона использованы схемы mailto: и tel:. Неправильно. Для почты и телефона не использован тег <a> c схемами mailto: и tel:. Правильно. Для элемента действия использован тег <button>. Зачем нужен критерий. Правильно размеченные ссылки и кнопки улучшают пользовательский опыт и помогают избегать ошибок в работе веб-страниц. Подробнее о том, чем отличаются ссылки и кнопки и какие проблемы могут возникнуть, если использовать неподходящий тег, можно почитать в блоге. Формы должны быть работоспособными и отправлять данные всех полей. Поля формы должны находиться внутри тега <form>. У формы должен быть указан атрибут action. У обязательных полей должен быть атрибут required. Для тестирования формы можно использовать адрес https://echo.htmlacademy.ru. Правильно. Форма имеет атрибут action. Все поля формы обёрнуты в тег <form>. Неправильно. У формы не указан атрибут action. Неправильно. Форма поиска не обёрнута в тег <form>. Неправильно. У полей с обязательным заполнением нет атрибута required. Неправильно. У разных полей формы одинаковое значения для атрибута <name>. В этом случае отправятся данные только одного поля. Неправильно. Не указано значение у атрибута name или отсутствует атрибут name. Зачем нужен критерий. Формы — это критическая функциональность сайта, поэтому важно, чтобы они были работоспособны и отправляли введённые пользователем данные. Подписи полей форм должны быть привязаны к своим полям. Правильно. Описание привязано к полю с помощью оборачивающего <label>. Правильно. Описание привязано к полю с помощью атрибута for у <label> и id у <input>. Неправильно. Описание никак не связано с полем формы. Неправильно. Поле имеет два описания. Зачем нужен критерий. Подписи полей форм отображаются в дереве доступности, что позволяет скринридерам правильно понимать и передавать смысл поля. В разметке не должно быть лишних обёрток и элементов, которые используются для оформления и могут быть заменены на псевдоэлементы. Правильно. Не используется лишняя обёртка, а для декоративного элемента нет дополнительного блока в разметке. Правильно. Допускается использование тега <span> для стилизации кастомных чекбоксов. Неправильно. Используется лишняя обёртка, которую можно сократить, а для декоративного элемента использован тег <span>, который можно заменить на псевдоэлемент. Если в вёрстке осознанно и единообразно разделяются сеточные и смысловые блоки, это ошибкой не является. Зачем нужен критерий. Лишние элементы не несут в себе функциональности, поэтому их нужно удалять для упрощения поддержки и переиспользования кода. Разметка должна проходить валидацию в валидаторе W3C без ошибок (error). В проверке могут быть предупреждения (warning). Главная задача валидатора — проверить, что код соответствует стандартам и спецификациям языка. Код, который не проходит валидацию, может быть неправильно отработан в браузере. К каждой странице должны быть подключены иконки с помощью <link rel="icon"> с указанием размера иконки. В корне проекта должен быть файл favicon.ico, но подключать его к странице необязательно. Фавиконки должны быть в размере 32×32 и в формате PNG. Правильно. Подключена favicon.ico из корня проекта, а также иконка размером 32×32 в формате PNG. Правильно. Подключена только иконка размером 32×32 в формате PNG. favicon.ico не подключён к странице, но лежит в корне проекта. Неправильно. Подключена только favicon.ico без варианта иконки размером 32×32 в формате PNG. Также ошибкой будет отсутствие favicon.ico в корне проекта. Зачем нужен критерий. Фавиконки важны, так как они улучшают пользовательский опыт: помогают определить, какой сайт открыт на вкладке, или быстро найти нужный сайт в избранном. Все стилевые файлы должны быть подключены с помощью тега <link rel="stylesheet">. Собственные стили проекта должны быть подключены одним файлом в <head>. Сторонние стили должны быть подключены в <head> отдельными файлами. Сторонние стили должны быть подключены до собственных стилей проекта. В разметке не должно быть инлайновых стилей в атрибуте style="" или в теге <style>. В разметке допускаются стили для демонстрации поведения JS. Правильно. Все собственные стили подключены в одном файле в <head>. Неправильно. Стили разбиты на несколько файлов. Правильно. Сторонние стили подключены отдельно от собственных стилей. Неправильно. Сторонние стили добавлены к собственным стилям. Правильно. Сторонние стили подключены до собственных стилей. Неправильно. Собственные стили подключены до сторонних стилей. Неправильно. Стили используются в разметке. Зачем нужен критерий. Правильно подключённые стили гарантируют, что сайт будет выглядеть так, как этого требует макет. Глобальные селекторы запрещены, кроме исключений, приведённых ниже. Глобальный селектор — это селектор по типу элемента или универсальный селектор. Например: Исключения: Универсальный селектор, используемый для изменения боксовой модели одновременно элементов и псевдоэлементов. Нормализация тега <img>. Уникальные теги документа: <html> и <body>. :root, в котором использованы только кастомные свойства. Правильно. Используется универсальный селектор одновременно с псевдоэлементами для изменения боксовой модели. Неправильно. Использован универсальный селектор без псевдоэлементов и не для изменения боксовой модели. Правильно. Для нормализации тега <img> использованы свойства max-width и object-fit. Неправильно. Для нормализации тега <img> использовано свойство display. Правильно. Использован уникальный тег <body>. Неправильно. Использованы селекторы по типу. Правильно. Селектор по типу вложен внутрь селектора по классу. Правильно. Внутри :root использованы только кастомные свойства. Неправильно. :root использован не для кастомных свойств. В процессе обучения мы ограничиваем студентов в праве выбора глобальных селекторов. Это позволяет нам сконцентрировать студентов на тех селекторах, которые они точно будут применять в своих проектах. В материалах мы рассказали про другие возможные варианты использования глобальных селекторов. Глобальные селекторы применяют стили ко всем элементам на странице, поэтому их использование может делать вёрстку менее контролируемой, а поведение элементов — непредсказуемым. В селекторах не должно быть #id. Неправильно. Используется селектор по идентификатору. Зачем нужен критерий Критерий рассматривает именно запрет на стилизацию через id, но использовать этот атрибут для связывания <label> и элементов форм не считается ошибкой. Селекторы по идентификатору обладают большей специфичностью по сравнению с классом и добавляют непредсказуемости в код. Например, чтобы переопределить #id, потребуется несколько селекторов по классу или !important. Это делает код неконтролируемым и сложно читаемым. Ключевое слово !important не должно использоваться для борьбы со специфичностью. Неправильно. Использован !important. Зачем нужен критерий. Модификатор !important даёт CSS-правилу наивысшую специфичность и нарушает этим каскад стилей. Это добавляет непредсказуемости в код, усложняет его поддержку и отладку. Существуют специфические задачи, в которых использование !important может быть целесообразно, но в рамках курса таких задач нет, поэтому он запрещён. Начертания шрифтов, подключенных с помощью @font-face, должны меняться с помощью font-weight и font-style и не должны меняться с помощью подключения отдельного семейства шрифтов. При указании шрифт должен дополняться общим семейством: serif, sans-serif, monospace и другие. Правильно. Указано типовое семейство для шрифта sans-serif, а начертание изменяется с помощью font-weight. Неправильно. Начертание семейства изменяется именем шрифта, а не свойствами font-weight и font-style. Неправильно. У шрифта не указано общее семейство serif, sans-serif или monospace. Описанный подход к использованию шрифтов повышает гибкость и наглядность кода, так как мы отделяем описание шрифта от его использования: семейство шрифта достаточно будет указать только один раз — на body, а дальше в любых селекторах прописывать только особенности начертания. На тех элементах, у которых по умолчанию есть тестовые стили, например <i> или <b>, начертание шрифта применится автоматически. Это позволяет легко менять шрифт и отслеживать все варианты его использования. Тип семейства необходимо указывать, чтобы в случае отсутствия основного шрифта изменения внешнего вида шрифтов на странице были минимальны. Контентная графика должна вставляться в разметке. Декоративная графика должна вставляться в стилях. Декоративная SVG-графика может использоваться в разметке, если её внешний вид нужно менять стилями. О том, как различать декоративную и контентную графику, можно почитать в блоге. Правильно. Контентная графика использована в разметке. Неправильно. Контентная графика использована в стилях. Правильно. Декоративная графика использована в стилях. Правильно. Декоративная изменяемая графика использована в разметке. Неправильно. Декоративная графика использована в разметке. Контентная графика должна быть в разметке, так как она содержит в себе важную смысловую информацию и поэтому должна быть доступна пользователю даже в том случае, если стили по какой-то причине не загрузятся. Декоративная графика должна быть в стилях, так как она не несёт смысловой нагрузки и её отсутствие в случае незагрузки стилевого файла не приведёт к потере важной информации. Использовать декоративную графику в разметке нежелательно, так как лишние элементы в разметке усложняют поддержку кода. Выбран подходящий формат изображений. Например: JPEG для фотографий; SVG для векторных изображений; PNG для всех прочих. Зачем нужен критерий. Использование подходящих форматов изображений важно для того, чтобы изображения отображались без погрешностей и имели оптимальный размер при загрузке. Для всех изображений, размеченных при помощи <img> и <svg>, размеры должны быть заданы с помощью атрибутов width и height. Правильно Зачем нужен критерий Задавать размеры растровых изображений в разметке необходимо, чтобы не было скачков интерфейса при их загрузке, а векторных — чтобы изображение не увеличивалось бесконтрольно, если у него не заданы внутренние размеры. Задавать размеры изображений в разметке необходимо для перестраховки. В этом случае вёрстка сайта не сломается, если изображение будет заменено на более большое или маленькое. Текст не должен переноситься с помощью двойного <br>. Правильно. Перенос для соответствия макету сделан с помощью одного тега <br>. Неправильно. Перенос для соответствия макету сделан с помощью двух тегов <br>. Зачем нужен критерий. Использовать тег <br> для создания отступов между блоками — это плохая практика, потому что такой код неудобно изменять и поддерживать. Контентная графика должна иметь описание. Чтобы описание элемента попало в дерево доступности, нужно использовать один из способов: добавить изображению alt; добавить скрытый текст с помощью visually-hidden; добавить атрибут aria-label. Предпочтительно увеличивать доступность в первую очередь с помощью HTML и только потом — aria-ролей. Подпись в конце описания должна иметь точку. Точка нужна для интонационной паузы при чтении скринридером. Теги <img> должны иметь заполненный атрибут alt с описанием изображения. Исключение: если рядом с изображением есть сущность в которой уже описано содержимое картинки, то alt можно оставлять пустым. Правильно. У тега <img> атрибут alt содержит описание изображения. Правильно. В карточке товара есть заголовок, описывающий товар. В этом случае alt можно оставить пустым, иначе скринридер при чтении карточки повторит два раза название товара. Неправильно. У тега <img> не заполнен атрибут alt. Неправильно. В качестве значения атрибута alt использован пробел. Контентная векторная графика в разметке должна иметь атрибут role="img" и описание изображения в атрибуте aria-label. Правильно. Контентная векторная графика имеет role="img" и aria-label. Неправильно. У контентной векторной графики отсутствует role="img" и aria-label. Зачем нужен критерий. Атрибут alt даёт альтернативное описание изображения для скринридеров и поисковиков. Правильное описание картинки добавляет смысл и ценность появления этой картинки для пользователя. Интерактивные элементы должны быть подписаны. Подпись должна быть связана с элементом и отображаться в дереве доступности. Предпочтительно реализовывать подпись с помощью HTML: тегом с классом visually-hidden или атрибутом alt у изображений, и только потом — aria-атрибутами. Подпись в конце описания должна иметь точку. Точка нужна для интонационной паузы при чтении скринридером. Правильно. У ссылки есть описание, так как у изображения заполнен атрибут alt. Неправильно. У ссылки нет описания, так как у изображения не заполнен атрибут alt. Неправильно. У ссылки нет описания, так как внутри неё нет текстового содержимого. Правильно. Описание у кнопки с иконкой реализовано при помощи текста, скрытого классом visually-hidden. Неправильно. Кнопка с иконкой не имеет описания. Зачем нужен критерий. Текстовое описание интерактивных элементов поможет пользователям понять, что именно произойдёт в результате взаимодействия, в случае если они не видят элементы интерфейса. Это описание будет озвучено скринридером. Все интерактивные элементы должны иметь видимое состояние фокуса. Элементы должны иметь стандартный браузерный фокус, если это состояние не описано в дизайне. Правильно. Интерактивный элемент имеет стандартный браузерный фокус. Неправильно. Вместо кнопки использован <div>, стилизованный под кнопку, но не имеющий встроенной интерактивности. Правильно. Стандартный браузерный фокус заменён на фокус, описанный в макете. Неправильно. Стандартная обводка отключена без замены на альтернативное состояние. При проверке нужно убедиться, что в коде либо нет outline: none, либо взамен назначена подходящая замена. Зачем нужен критерий. Видимое состояние интерактивных элементов позволяет передвигаться по ним с клавиатуры клавишей Tab и видеть каждый текущий элемент в активном состоянии. Область интерактивных элементов должна включать тексты, иконки и другие связанные части. Она не должна накладываться на окружающие элементы. Область клика у интерактивных элементов может быть больше, чем их контент, но область клика не должна накладываться на окружающие элементы. Область клика можно определить из макета. Если в макете область клика не определена, то можно сделать её на своё усмотрение, руководствуюсь примерами ниже. Область взаимодействия включает иконку и текст Область вокруг текста в навигации чувствительна к клику, а не только сам текст. Интерактивные элементы с иконкой имеют расширенную область клика. В пагинации цифры имеют расширенную область клика, а не по цифре. Кнопка закрытия модального окна имеет расширенную область клика, а не равную размерам иконки. В карточке товара кликабельным является не только название товара, но и изображение товара, а не только его название. Зачем нужен критерий. Правильные области важны для ускорения взаимодействия с интерактивными элементами интерфейса: чем меньше область клика, тем больше времени пользователь потратит на то, чтобы попасть в эту область. Для блока, у которого есть текст с фоновым изображением, должен быть указан фоновый цвет, который соответствует преобладающему цвету изображения. Преобладающий цвет фоновой картинки должен быть контрастным. Правильно. Указан цвет фона перед основным изображением. Результат: картинка не загрузилась, но при этом цвет фона остался тёмным. Неправильно. Указано только основное изображение. Результат: картинка не загрузилась, а цвет фона стал белым. Для блока с картой также следует указывать фоновый цвет. Чтобы этот критерий был засчитан, необходимо не просто указать цвет фона, но и подобрать цвет, который преобладает в самом изображении. Зачем нужен критерий. Такой метод используется для перестраховки. В этом случае, если фоновое изображение не загрузится, на заднем фоне останется преобладающий цвет. Порядок фокуса на интерактивных элементах не должен изменяться стилями. Правильно  Неправильно Зачем нужен критерий. Переход между элементами на странице должен быть очевиден и предсказуем для пользователей, передвигающихся по сайту с клавиатуры.