Naprawa błędów technicznych na stronie OpenCart

Strona: https://gerts.com.ua/ 

Problemy: 

Nagłówki H1-H6

Co należy zrobić:

1. Pozostawić tylko jeden <h1> na stronie

Możliwość edytowania przez panel administracyjny

2. Używać <h2> tylko dla głównych sekcji:

• Katalog produktów
  
  

• Hity sprzedaży
  
  

• Oferty promocyjne
  
  

• Co mówią o produktach
  
  

• O nas
  
  

• Odpowiedzi na pytania
  
  

• Ostatnie artykuły
  
  

3. Wewnątrz sekcji „Katalog produktów” — używać <h3> tylko dla podkategorii:

Przykład:
<h2>Katalog produktów</h2>

  <h3>Celowniki</h3>

  <h3>Naklejki</h3>

4. Nazwy samych produktów NIE powinny być nagłówkami

Zamiast <h3>Nazwa produktu</h3> użyj:

<strong class="product-title">

  <a href="/product-url">Nazwa produktu</a>

</strong>

lub

<a href="/product-url" class="product-title">Nazwa produktu</a>

Zalety (np. 1 mln+, 20+, 3 lata itp.)

• Można pozostawić jako <p> lub <div>, w razie potrzeby stylizować wizualnie jako nagłówek, ale nie używać <h2> lub <h3>, jeśli nie mają wartości strukturalnej.
  
  

6. Sprawdzić końcową strukturę

• Upewnić się, że hierarchia nie jest naruszona (<h3> nie pojawia się wcześniej niż <h2>, brak powtarzających się <h2> bez kontekstu)
  
  

• Sprawdzić poprawność HTML
  
  

Moduł obsługi obrazów WebP:

Należy, aby moduł automatycznie konwertował obrazki do formatu WebP

• Zainstalować i skonfigurować moduł Gum Image Optimizer

Co dodatkowo należy zrobić:

1. Sprawdzić, czy WebP jest faktycznie wysyłane do przeglądarek
   
   

• Upewnić się, że serwer poprawnie wysyła wersje WebP zamiast oryginalnych (JPEG/PNG), jeśli przeglądarka je obsługuje
  
  

• Sprawdzić plik .htaccess

2. Włączyć i sprawdzić Lazy Load
   Jeśli używany jest plugin (np. WP Rocket, natywne lazy load, Gum), upewnić się, że:
   
   

• Lazy Load jest włączony
  
  

• Wszystkie tagi <img> otrzymują atrybut loading="lazy"
  
  

3. Sprawdzić rozmiary i responsywność
   
   

• Wszystkie obrazki muszą mieć ustawione width i height
  
  

• Poprawić srcset i sizes, aby przeglądarka ładowała odpowiedni rozmiar
  
  

4. Sprawdzić cache'owanie
   
   

• Upewnić się, że obrazki są cache'owane po stronie przeglądarki (expires, cache-control)
  
  

5. Sprawdzić Lighthouse
   
   

• Przeprowadzić test strony za pomocą Google Lighthouse (w DevTools)
  
  

• Upewnić się, że nie ma ostrzeżeń dotyczących obrazów (rozmiar, format, lazy load itp.)
  
  

Rezultat:

• Obrazy ładują się szybko, nie „psują” układu
  
  

• Brak duplikatów lub zbędnego obciążenia
  
  

• WebP działa
  
  

• Wyniki Lighthouse bez błędów dotyczących obrazów
  
  

Zapewnić, aby wszystkie przyciski na stronie:

• były poprawnie oznaczone (<button> lub <a>)
  
  

• działały z klawiatury
  
  

• były dostępne dla czytników ekranu
  
  

• zgadzały się z zaleceniami WCAG 2.1 i Lighthouse

1. Semantyka

• Używać tylko natywnych tagów:
  
  

• <button> — do działań (wysyłanie, zamykanie, otwieranie itp.)
  
  

• <a href="..."> — do przejść na strony
  
  

• Zakazuje się używania <div> lub <span> jako przycisków (chyba że dodano role="button" + tabindex + obsługa Enter/Space — ale lepiej zamienić na <button>)

2. Typ przycisku

• Dla przycisków w formularzach:
  
  

• Wyraźnie wskazać type="submit" lub type="button"
  
   (domyślnie <button> = submit, co może powodować niepożądane zachowanie)
   

3. Dostępność z klawiatury

• Wszystkie przyciski muszą być dostępne przez Tab
  
  

Przyciski aktywuje się klawiszami:

• Enter

• Space

    4. atrybuty aria i opis

• Wszystkie przyciski muszą mieć:
  
  

• lub widoczny tekst (<button>Pobierz</button>)
  
  

• lub aria-label="Pobierz" — jeśli przycisk zawiera tylko ikonę
  
  

Zapewnić dostępność wszystkich elementów formularza

Cel: Zwiększyć dostępność formularzy dla użytkowników z szczególnymi potrzebami i spełnić standardy WCAG.

Sprawdzić i poprawić zachowanie pola wyboru kraju (wprowadzanie telefonu)

Co zrobić:

• Element .iti__selected-flag nie powinien być samodzielnie fokusem, jeśli nie pełni funkcji zarządzania wprowadzaniem.
  
  

• Usunąć tabindex="0" i role="combobox" z elementów, które nie są aktywnymi elementami sterującymi.
  
  

• Upewnić się, że przejście klawiaturą (Tab) odbywa się wyłącznie po interaktywnych elementach (wprowadzanie, select, przycisk).

Sprawdzić obecność i poprawność oznaczenia przycisku wysyłania formularza

Co zrobić:

• Upewnić się, że w formularzu znajduje się przycisk <button type="submit"> lub <input type="submit">.
  
  

• Jeśli nie, dodać:

Ulepszyć atrybuty ARIA

Co zrobić:

• Zostawić aria-label lub aria-labelledby, jeśli nie ma label, ale najlepiej używać <label> jako głównego środka.
  
  

• Jeśli są pola z walidacją, dodać aria-describedby="id-komunikatu" i aria-invalid="true" przy błędzie.

Testowanie skupienia i nawigacji

Przetestować ręcznie:

• Klawisz Tab powinien kolejno przechodzić przez:
  
  

  • pole „Imię”;
    
    

  • pole „Email”;
    
    

  • pole telefonu;
    
    

  • przycisk wysyłki.
    
    

• Klawisze Enter/Space powinny aktywować wysyłkę i elementy klikalne.
  
  

• Nie powinno być „skoków” lub fokusa na elementach dekoracyjnych.
  
  

Zmniejszyć opóźnienie przy podłączaniu do zewnętrznych usług

• Zidentyfikować wszystkie zewnętrzne skrypty ładowane (np. analityka, czcionki, widgety).
  
  

• Dla nieistotnych skryptów zaimplementować ładowanie opóźnione (lazy loading).
  
  

Zapewnić odpowiedni kontrast między kolorem tła a tekstem

• Używać narzędzi do sprawdzania kontrastu (np. WebAIM Contrast Checker).

• Sprawdzić, czy kontrast między tekstem a tłem spełnia minimalne wymagania WCAG:

• Poziom AA: nie mniej niż 4.5:1 dla zwykłego tekstu, 3:1 dla dużego.

• Poziom AAA (zalecany): 7:1 dla zwykłego tekstu.

Zapewnić poprawną semantyczną strukturę <li>

Cel: zachować poprawną strukturę HTML i poprawić percepcję treści przez technologie wspomagające.

Co należy zrobić:

• Wszystkie tagi <li> muszą być używane tylko wewnątrz list <ul>, <ol> lub <menu>.
  
  

• Wykluczyć przypadki:
  
  

• <li> poza nadrzędną listą;
  
  

• <div><li>...</li></div> bez zagnieżdżenia w <ul> lub <ol>.
  
  

• W razie potrzeby zamienić niepoprawne <li> na <div>, <p> lub inne semantycznie odpowiednie tagi.
  
  

• Upewnić się, że struktura list jest logiczna i poprawnie zagnieżdżona (zagnieżdżone listy poprawnie wyświetlają się i są poprawnie sformatowane).

Naprawić nieprawidłowe przypisanie ról ARIA

Cel: zapewnić poprawną pracę z technologiami wspomagającymi (czytniki, VoiceOver itp.).

Co należy zrobić:

• Sprawdzić wszystkie atrybuty role pod kątem poprawności i konieczności.
  
  

Wykluczyć przypadki:

• Przypisanie role="button" do <button> — jest nadmiarowe;
  
  

• role="link" do <a> z href — też jest zbędne;
  
  

• Używanie przestarzałych ról lub nieistniejących wartości.
  
  

• Używać tylko dozwolonych wartości z oficjalnej  specyfikacji WAI-ARIA.
  
  

• Sprawdzić, czy wszystkie role ARIA są logiczne w kontekście, np.:
  
  

• role="navigation" — dla bloku z menu;
  
  

• role="dialog" — dla okien modalnych;
  
  

• role="alert" — dla powiadomień o błędach i ostrzeżeniach.

Poprawne wypełnienie atrybutu href w linkach

Cel: zapewnić poprawną nawigację i zachowanie linków na stronie.

Co należy zrobić:

• Wszystkie tagi <a> muszą mieć wypełniony atrybut href. Unikać:
  
  

• href="";
  
  

• href="#" — tylko jeśli jest używany z JavaScript, i wtedy z preventDefault() (np. w popupach).
  
  

• Dla zasobów zewnętrznych — pełne linki z protokołem https:// i z atrybutem rel="nofollow noopener noreferrer"
  
  

• Jeśli link otwiera się w nowej karcie (target="_blank"), koniecznie dodać:
  
  

  • rel="noopener noreferrer" — dla bezpieczeństwa (zapobieganie lukom w window.opener).
    
    

Dodatkowo:

• Po wdrożeniu wszystkich punktów, koniecznie przeprowadzić audyt:
  
  

  • Lighthouse (w Chrome DevTools, zakładka "Audyt" lub "Проверка");
    
    

  • axe DevTools — do głębokiej analizy dostępności.
    
    

• Wyniki testów warto zapisać w formie zrzutów ekranu przed i po zmianach.