На компьютере основной заголовок скрыт CSS, а на телефоне виден. Само число элементов H1 не отвечает, хороший ли интерфейс. Выясните назначение адаптивного правила: пользователь должен понимать тему страницы, а доступное имя и реальный контент не должны исчезать случайно.
Выясните назначение адаптивного скрытия
Сравните содержание и видимое обозначение страницы на двух размерах экрана. Различайте полное скрытие display:none, визуально скрытый доступный текст и замену заголовка другим элементом. Не выводите SEO-штраф из одного количества H1.
Google рекомендует сохранять сопоставимый основной контент мобильной и основной версий. Официальная документация.
Сначала посмотрите, где посетитель узнаёт тему страницы на компьютере. Возможно, H1 заменён видимым названием в другом компоненте, а возможно, он исчез случайно. Сравните дизайн и фактическую реализацию. Одно количество H1 не отвечает на вопрос, понятен ли интерфейс. Не придумывайте автоматическое наказание за второй заголовок или скрытый адаптивный элемент. Здесь проверяется назначение конкретной страницы, согласованность представлений и доступность содержания. Разработчик должен получить объяснение, какой текст требуется видеть и читать пользователю на каждом размере экрана.
Различайте display:none и визуально скрытый текст
Учебные сценарии в таблице задают ожидаемое поведение; фактические ответы своего сайта заносите отдельно.
| Сценарий | Отличие | Решение | Проверка |
|---|---|---|---|
| Desktop display:none | Заголовок полностью скрыт | Проверить назначение | Понятная тема страницы |
| Mobile видимый H1 | Другая композиция | Сравнить содержание | Нет случайной потери |
| Визуально скрытый текст | Отдельная техника | Проверить доступность | Не путать с display:none |
| Увеличенный масштаб | Меняется перенос | Проверить интерфейс | Нет наложения |
Display:none исключает элемент из отображения и обычно из дерева доступности. Техника визуального скрытия может сохранять текст для вспомогательных технологий; её назначение нужно проверить отдельно. Скрытый атрибут и CSS-правило тоже не следует смешивать в одну колонку. В матрицу добавьте фактическое правило, видимый текст и доступное имя. Если две адаптивные копии одновременно присутствуют, убедитесь, что они не создают лишнее повторение в чтении. Цель проверки — осмысленная структура, а не формальное добавление невидимой строки ради аудита.
Проверьте CSS и дерево доступности
Проверьте computed styles, медиазапросы и дерево доступности. Откройте страницу на desktop и mobile, увеличьте масштаб текста. Сравните исходный заголовок, DOM и то, что реально может прочитать посетитель.
В DevTools найдите H1 и посмотрите computed display, visibility и размеры. Определите медиазапрос, который изменяет правило, и соответствующий файл CSS. Затем проверьте дерево доступности доступным инструментом браузера. Сравните исходный HTML с DOM: заголовок может заменяться компонентом после загрузки. Дополнительно посмотрите перекрытие контейнерами и обрезку overflow; элемент способен существовать и иметь display:block, но фактически не читаться. Скриншот одного размера экрана не показывает причину, поэтому сохраните правило, ширину viewport и состояние соответствующего элемента.
Учебная проверка границы медиазапроса
Учебная услуга скрывает H1 на ширине больше 1024 пикселей из-за старого медиазапроса. Проверьте страницу ниже и выше этой границы, затем с увеличенным масштабом: ошибка может зависеть именно от правила CSS, а не от типа устройства.
Если скрытие начинается на 1024 пикселях, проверьте ширины непосредственно ниже и выше границы. Затем измените масштаб страницы и размер текста. Пользовательский zoom может поменять эффективную композицию и вызвать наложение двух вариантов. В учебном сценарии старый медиазапрос относится к прежнему hero, но продолжает действовать после редизайна. Исправление должно убрать именно это непреднамеренное условие. Сравните desktop, mobile и промежуточную ширину, где часто встречаются обе адаптивные копии. Не определяйте результат только по названию устройства.
Сохраните понятный заголовок без лишних копий
Уберите случайное адаптивное скрытие или задайте понятный видимый заголовок в предусмотренном дизайне. Согласуйте семантику и доступность, не создавая лишний дубль текста ради отчёта.
Если заголовок нужен видимым, верните его в композицию и согласуйте отступы, перенос и связь с основным текстом. Не создавайте отдельную локальную копию, если общий компонент уже обслуживает оба экрана. Если скрытие является намеренной доступной техникой, подтвердите её назначение и корректную реализацию. Для видимого альтернативного названия сохраните понятную семантику. Тест с клавиатурой и вспомогательным чтением помогает выявить лишнее повторение. Исправление интерфейса должно оставаться полезным человеку; формальный зелёный результат извлечения H1 не является достаточной приёмкой.
Тема страницы и мобильный основной контент
Визуально скрытый текст и элемент с display:none ведут себя по-разному для доступности. Решение нужно принимать по реальному интерфейсу, а не по универсальному правилу «H1 всегда один».
Сравните основной контент на мобильном и компьютере: название, описание услуги, характеристики и существенные ссылки. Разная композиция допустима, но случайно потерянный ответ требует исправления. Если заголовок присутствует только в картинке, проверьте, что текстовая информация доступна по предусмотренной семантике. Если mobile использует другое содержимое, выясните, намеренно ли это и сохраняется ли задача страницы. Не выводите индексируемость из одного скриншота. Поисковая обработка, структура HTML и доступность интерфейса связаны, но подтверждаются отдельными наблюдениями.
Приёмка масштаба, фокуса и реального отображения
После изменения откройте страницу заново на контрольных ширинах. Проверьте видимость темы, отсутствие наложения, читаемые переносы и соответствие дерева доступности намерению. Повторите увеличенный масштаб и переход к основным действиям с клавиатуры. Для общего компонента проверьте соседнюю страницу, использующую его. Запишите конкретные размеры и результат, а не универсальное «адаптивность исправлена». Если вспомогательная технология недоступна, сообщите границу проверки. Количество H1 можно сохранить как диагностический факт, но завершение определяется качеством структуры и понятностью реального представления.
Критерии завершения проверки
На контрольных экранах тема страницы ясно обозначена, основной текст сопоставим, доступность заголовка соответствует дизайну. Правка не вызывает наложение двух адаптивных копий.
- Desktop display:none: Понятная тема страницы. Зафиксируйте фактический результат и адрес проверенного сценария.
- Mobile видимый H1: Нет случайной потери. Зафиксируйте фактический результат и адрес проверенного сценария.
- Визуально скрытый текст: Не путать с display:none. Зафиксируйте фактический результат и адрес проверенного сценария.
- Увеличенный масштаб: Нет наложения. Зафиксируйте фактический результат и адрес проверенного сценария.
Для смежных вопросов: Как ошибки HTML влияют на SEO и индексацию и Контраст цветов по WCAG: требования и проверка доступности. Отдельные проверки сайта собраны на странице технического аудита reChecker.