Исправеление технический ошибок на сайте OpenCart

Сайт: https://gerts.com.ua/ 

Проблемы: 

Заголовки Н1-Н6

Что нужно сделать:

1. Оставить только один <h1> на странице

Возможность редактировать через админку

2. Использовать <h2> только для основных разделов:

• Каталог товаров
  
  

• Хиты продаж
  
  

• Акционные предложения
  
  

• Что говорят о продукции
  
  

• О нас
  
  

• Ответы на вопросы
  
  

• Последние статьи
  
  

3. Внутри разделов «Каталог товаров» — использовать <h3> только для подкатегорий:

Пример:
<h2>Каталог товарів</h2>

  <h3>Мішені</h3>

  <h3>Наліпки</h3>

4. Названия самих товаров НЕ должны быть заголовками

Вместо <h3>Название товара</h3> использовать:

<strong class="product-title">

  <a href="/product-url">Название товара</a>

</strong>

или

<a href="/product-url" class="product-title">Название товара</a>

Преимущества (1 млн+, 20+, 3 года и т.д.)

• Можно оставить как <p> или <div>, при необходимости стилизовать визуально как заголовок, но не использовать <h2> или <h3>, если они не несут структурной ценности.
  
  

6. Проверить итоговую структуру

• Убедиться, что не нарушена иерархия (<h3> не идёт раньше <h2>, нет дублирующих <h2> подряд без контекста)
  
  

• Проверить HTML на валидность
  
  

Модуль поддержки изображений WebP:

Необходимо чтоб модуль автоматически конвертировал картинки в формат WebpP

• Установить и настроить модуль Gum Image Optimizer

Что нужно сделать дополнительно:

1. Проверить, что WebP реально отдаются браузерам
   
   

• Убедиться, что сервер корректно отдаёт WebP-версии вместо оригинальных (JPEG/PNG), если браузер их поддерживает
  
  

• Проверить .htaccess

2. Включить и проверить Lazy Load
   Если используется плагин (например, WP Rocket, native lazy load, Gum), убедиться, что:
   
   

• Lazy Load включён
  
  

• Все <img> теги получают атрибут loading="lazy"
  
  

3. Проверить размеры и адаптивность
   
   

• Все изображения должны иметь прописанные width и height
  
  

• Исправить srcset и sizes , чтобы браузер подгружал нужный размер
  
  

4. Проверить кэширование
   
   

• Убедиться, что изображения кэшируются на стороне браузера (expires, cache-control)
  
  

5. Проверить 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. Тип кнопки

• Для кнопок в формах:
  
  

• Явно указывать type="submit" или type="button"
  
   (по умолчанию <button> = submit, что может вызвать нежелательное поведение)
   

3.Доступность с клавиатуры

• Все кнопки должны быть доступны через Tab
  
  

Кнопки должны активироваться с клавиш:

• Enter

• Space

    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 на корректность и необходимость.
  
  

Исключить случаи:

• Назначение 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"), обязательно добавить:
  
  

  • rel="noopener noreferrer" — для безопасности (во избежание уязвимости window.opener).
    
    

Дополнительно:

• После реализации всех пунктов, обязательно провести аудит:
  
  

  • Lighthouse (в Chrome DevTools, вкладка "Аудит" или "Проверка");
    
    

  • axe DevTools — для глубокой проверки доступности.
    
    

• Результаты тестирования желательно зафиксировать в виде скриншотов до и после изменений.