На компьютере основной заголовок скрыт правилами оформления CSS, а на телефоне виден. Проверьте, видит ли посетитель название страницы на обоих экранах. Затем найдите CSS, который скрывает основной заголовок (H1): после смены дизайна мог остаться старый медиазапрос — правило CSS для определённой ширины экрана.
Где посетитель видит название страницы
Google рекомендует сохранять сопоставимый основной контент мобильной и основной версий. Официальная документация.
Сначала посмотрите, где посетитель узнаёт тему страницы на компьютере. Возможно, H1 заменён видимым названием в другом компоненте, а возможно, он исчез случайно. Сравните дизайн и фактическую реализацию. Одно количество H1 не отвечает на вопрос, понятен ли интерфейс. Не придумывайте автоматическое наказание за второй заголовок или скрытый адаптивный элемент. Запишите, какой заголовок должен видеть пользователь на каждом экране. Если текст скрыт намеренно, проверьте, остаётся ли он доступен скринридеру — программе, которая читает интерфейс вслух, — и не повторяется ли рядом другое название.
Полное и визуальное скрытие
| Заголовок | Как скрывается | Что учитывать | Как проверить на странице |
|---|---|---|---|
| На компьютере display:none | Заголовок полностью скрыт | Проверить назначение | Понятная тема страницы |
| На телефоне видимый H1 | Другая композиция | Сравнить содержание | Нет случайной потери |
| Визуально скрытый текст | Отдельная техника | Проверить доступность | Не путать с display:none |
| Увеличенный масштаб | Меняется перенос | Проверить интерфейс | Нет наложения |
display:none убирает элемент из отображения и дерева доступности. Визуальное скрытие может оставлять его доступным вспомогательным технологиям. Описание display на MDN.
Посмотрите вычисленные стили H1
В инструментах разработчика браузера — DevTools — найдите H1. Во вкладке Computed посмотрите итоговые свойства display, visibility и размеры: они показывают, какие CSS-правила применились. Определите медиазапрос, который изменяет правило, и соответствующий файл CSS. Затем проверьте дерево доступности доступным инструментом браузера. Сравните исходный HTML с HTML после выполнения скриптов — DOM: заголовок может заменяться компонентом после загрузки. Дополнительно посмотрите перекрытие контейнерами и обрезку содержимого свойством overflow; элемент способен существовать и иметь display:block, но фактически не читаться. Скриншот одного размера экрана не показывает причину, поэтому сохраните правило, ширину видимой области страницы (viewport) и состояние соответствующего элемента.
Выберите H1 во вкладке Elements и выполните в консоли браузера:
[...document.querySelectorAll("h1")].map(el => ({ текст: el.textContent, display: getComputedStyle(el).display, visibility: getComputedStyle(el).visibility, ширина: el.getBoundingClientRect().width }));Если display меняется около 1024 px, найдите соответствующий медиазапрос в Styles. Наличие display:block не исключает обрезку родительским overflow: посмотрите сам элемент и его контейнер.
Проверьте ширину около медиазапроса
Если скрытие начинается на 1024 пикселях, проверьте ширины непосредственно ниже и выше границы. Затем измените масштаб страницы и размер текста. Масштаб страницы может поменять эффективную композицию и вызвать наложение двух вариантов. Допустим, в старом первом экране заголовок скрывали после 1024 px. После редизайна это правило осталось, хотя новая версия должна показывать H1. Удалите именно устаревшее условие. Сравните компьютер, телефон и промежуточную ширину, где часто встречаются обе адаптивные копии. Не определяйте результат только по названию устройства.
Верните заголовок в общий компонент
Если H1 должен быть видимым, уберите скрывающий стиль и проверьте его отступы и переносы рядом с основным текстом. Не создавайте отдельную локальную копию, если общий компонент уже обслуживает оба экрана. Если скрытие является намеренной доступной техникой, подтвердите её назначение и корректную реализацию. Для видимого альтернативного названия сохраните понятную семантику. Тест с клавиатурой и вспомогательным чтением помогает выявить лишнее повторение. Наличие H1 в HTML ещё не подтверждает исправление: прочитайте заголовок на странице и проверьте его в дереве доступности.
Проверьте два экрана и увеличенный масштаб
Название страницы читается на компьютере, телефоне и при увеличении масштаба. Две адаптивные копии не накладываются и не повторяются в дереве доступности. Соседняя страница общего компонента также отображается правильно.
Читайте также: Как ошибки HTML влияют на SEO и индексацию и Контраст цветов по WCAG: требования и проверка доступности. Проверки сайта доступны на странице технического аудита reChecker.