Сайт: 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:
Необхідно, щоб модуль автоматично конвертував картинки у формат WebP
Що потрібно зробити додатково:
Перевірити, що 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-атрибути і опис
Забезпечити доступність усіх елементів форм
Мета: Підвищити доступність форм для користувачів з особливими потребами та відповідати стандартам WCAG.
Перевірити та скоригувати поведінку поля вибору країни (телефонний ввід)
Що зробити:
Елемент .iti__selected-flag не повинен бути фокусованим сам по собі, якщо не виконує функцію управління вводом.
Видалити tabindex="0" і role="combobox" з елементів, які не є активними елементами управління.
Переконатися, що перехід з клавіатури (Tab) йде строго по потрібних інтерактивних елементах (ввод, select, button).
Перевірити наявність і коректну розмітку кнопки відправки форми
Що зробити:
Покращити 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 — для глибокої перевірки доступності.
Результати тестування бажано зафіксувати у вигляді скріншотів до і після змін.
