Сайт: https://deniz-estate.com/ru/
Проблемы:
Hreflang:
Для каждой языковой версии сайта необходимо в теге <Head> прописать актуальные:
<link rel="alternate" hreflang="ru" href="https://deniz-estate.com/ru/” />
<link rel="alternate" hreflang="uk" href="https://deniz-estate.comua/" />
<link rel="alternate" hreflang="pl" href="https://deniz-estate.com/pl/" />
<link rel="alternate" hreflang="en" href="https://deniz-estate.com/en/" />
Модуль поддержки изображений WebP:
Необходимо чтоб модуль автоматически конвертировал картинки в формат WebpP
Что нужно сделать дополнительно:
Проверить, что WebP реально отдаются браузерам
Включить и проверить Lazy Load
Если используется плагин (например, WP Rocket, native lazy load, Gum), убедиться, что:
Проверить размеры и адаптивность
Все изображения должны иметь прописанные width и height
Исправить srcset и sizes , чтобы браузер подгружал нужный размер
Проверить кэширование
Проверить Lighthouse
Прогнать страницу через Google Lighthouse (в DevTools)
Убедиться, что нет предупреждений по изображениям (размер, формат, lazy load и т.д.)
Результат:
Изображения быстро загружаются, не «рвут» вёрстку
Нет дубликатов или лишнего веса
WebP работает
Показатели Lighthouse по изображениям без ошибок
Обеспечить, чтобы все кнопки на сайте:
были корректно размечены (<button> или <a>)
работали с клавиатурой
были доступны для скринридеров
соответствовали рекомендациям WCAG 2.1 и Lighthouse
1. Семантика
Использовать только нативные теги:
<button> — для действий (отправка, закрытие, открытие и т.д.)
<a href="..."> — для переходов по страницам
Запрещается использовать <div> или <span> как кнопки (если только не добавлены role="button" + tabindex + обработка Enter/Space — но лучше всё же заменить на <button>)
2. Тип кнопки
3.Доступность с клавиатуры
Кнопки должны активироваться с клавиш:
4. aria-атрибуты и описание
У всех кнопок должен быть:
либо видимый текст (<button>Скачать</button>)
либо aria-label="Скачать" — если кнопка содержит только иконку
Обеспечить доступность всех элементов форм
Цель: Повысить доступность форм для пользователей с особыми потребностями и соответствовать стандартам WCAG.
Проверить и скорректировать поведение поля с выбором страны (телефонный ввод)
Что сделать:
Элемент .iti__selected-flag не должен быть фокусируемым сам по себе, если не выполняет функцию управления вводом.
Удалить tabindex="0" и role="combobox" у элементов, которые не являются активными элементами управления.
Убедиться, что переход с клавиатуры (Tab) идет строго по нужным интерактивным элементам (ввод, select, button).
Проверить наличие и корректную разметку кнопки отправки формы
Что сделать:
Убедиться, что в форме присутствует button type="submit" или input type="submit".
Если отсутствует — добавить:
Улучшить ARIA-атрибуты
Что сделать:
Оставить aria-label или aria-labelledby, если нет label, но предпочтительно использовать <label> как основное средство.
Если есть валидация полей, добавить aria-describedby="id-сообщения" и aria-invalid="true" при ошибке.
Тестирование фокусировки и навигации
Проверить вручную:
Клавиша Tab должна последовательно переходить по:
полю «Имя»;
полю «Email»;
полю телефона;
кнопке отправки.
Клавиша Enter/Space должна активировать отправку и кликабельные элементы.
Не должно быть «прыжков» или фокуса на декоративных блоках.
Зменшити затримку при підключенні до сторонніх сервісів
Ідентифікувати всі сторонні скрипти, що завантажуються (наприклад, аналітика, шрифти, віджети).
Для неважливих скриптів реалізувати відкладене завантаження (lazy loading).
За можливості використовувати async або defer при підключенні сторонніх JS-ресурсів.
Оптимізувати порядок підключення сторонніх сервісів так, щоб вони не блокували критичний рендеринг сторінки.
Обеспечить достаточный контраст между цветом фона и текстом
Используйте инструменты проверки контраста (например, WebAIM Contrast Checker).
Проверьте, чтобы контраст между текстом и фоном соответствовал минимальным требованиям WCAG:
AA уровень: не менее 4.5:1 для обычного текста, 3:1 для большого.
AAA уровень (рекомендуется): 7:1 для обычного текста.
Обеспечить правильную семантическую структуру <li>
Цель: Сохранить корректную структуру HTML и улучшить восприятие контента ассистивными технологиями.
Что необходимо сделать:
Все теги <li> должны использоваться только внутри списков <ul>, <ol> или <menu>.
Исключить случаи:
<li> вне родительского списка;
<div><li>...</li></div> без вложенности в <ul> или <ol>.
При необходимости заменить некорректные <li> на <div>, <p> или другие семантически подходящие теги.
Убедиться, что структура списков логична и правильно вложена (вложенные списки корректно отображаются и оформлены).
Устранить некорректное назначение ролей ARIA
Цель: Обеспечить корректную работу с ассистивными технологиями (читалки, VoiceOver и т.д.).
Что необходимо сделать:
Исключить случаи:
Назначение role="button" на <button> — это дублирование;
role="link" на <a> с href — это тоже избыточно;
Использование устаревших ролей или несуществующих значений.
Использовать только допустимые значения из официальной WAI-ARIA спецификации.
Проверить, что все ARIA-ролей логичны в контексте, например:
role="navigation" — у блока с меню;
role="dialog" — у модальных окон;
role="alert" — у уведомлений об ошибках и предупреждениях.
Корректно заполнить атрибут href у ссылок
Цель: Обеспечить правильную навигацию и поведение ссылок на сайте.
Что необходимо сделать:
Все теги <a> должны иметь заполненный атрибут href. Избегать:
href="";
href="#" — только если используется с JavaScript, и то с preventDefault() (в попапформах).
Для внешних ресурсов — абсолютные ссылки с протоколом https://. и закрыты тегом rel="nofollow noopener noreferrer"
Если ссылка открывается в новой вкладке (target="_blank"), обязательно добавить:
Дополнительно:
После реализации всех пунктов, обязательно провести аудит:
-Lighthouse (в Chrome DevTools, вкладка "Аудит" или "Проверка");
-axe DevTools — для глубокой проверки доступности.
Результаты тестирования желательно зафиксировать в виде скриншотов до и после изменений.
