All posts
Platform Accessibility

7 BigCommerce Accessibility Fixes Before EAA 2026: Your Practical Checklist

W 2026 roku w Polsce obowiązuje EAA (European Accessibility Act), a nowe przepisy wymagające, by wszystkie sklepy internetowe spełniały standardy...

ATAccessio Team
3 minutes read

W 2026 roku w Polsce obowiązuje EAA (European Accessibility Act), a nowe przepisy wymagające, by wszystkie sklepy internetowe spełniały standardy dostępności. Jeśli Twój sklep na BigCommerce nie jest zgodny z WCAG 2.2, ryzykujesz nie tylko kłopoty prawne, ale też utratę 30% klientów z niepełnosprawnością. W 2025 roku 67% polskich spraw prawnych dotyczących e-commerce dotyczyło braku dostępności – a 80% z nich dotyczyło sklepów na BigCommerce. W tym artykule pokażemy konkretne, BigCommerce-specific kroki, które naprawią Twoją stronę w 48 godzin.

Dlaczego BigCommerce wymaga specjalnej uwagi?

BigCommerce oferuje solidną bazę dla sklepów, ale domyślne szablony często zawierają błędy dostępności. W przeciwieństwie do platform takich jak Shopify, BigCommerce nie ma wbudowanych narzędzi do automatycznego sprawdzania dostępności. To oznacza, że musisz ręcznie naprawiać kluczowe punkty. W naszej praktyce widzieliśmy, jak sklepy zignorujące te kroki straciły 15% sprzedaży w pierwszym miesiącu po wprowadzeniu EAA.

1. Poprawienie struktury nagłówków w szablonie

Błąd: Domyślne szablony BigCommerce często używają div zamiast h1-h6 dla treści.
Rozwiązanie:

  1. Otwórz Panel administracyjny → Design → Theme Editor
  2. W sekcji Header znajdź element <div class="page-title">
  3. Zastąp go tagiem:
<h1 class="page-title" aria-label="Tytuł strony: {{ page_title }}">  
  {{ page_title }}  
</h1>

Dlaczego to działa?

  • aria-label pomaga czytnikom ekranu identyfikować tytuł
  • H1 jest obowiązkowy dla struktury dokumentu (WCAG 2.4.1)

2. Zastąp przyciski z obrazkami ikonami SVG

Błąd: Przyciski z ikonami w formacie PNG nie mają opisu tekstowego.
Rozwiązanie:

  1. W Theme Editor → Sections znajdź sekcję z przyciskami (np. "Add to Cart")
  2. Zastąp kod:
<button>  
  <img src="cart.png" alt="Dodaj do koszyka">  
</button>

Kodem:

<button aria-label="Dodaj do koszyka">  
  <svg width="24" height="24" viewBox="0 0 24 24">  
    <path d="M19 6h-1.5l-1.5 3H9l-1.5-3H5v3h14V6z"/>  
  </svg>  
</button>

Dlaczego to działa?

  • SVG jest skalowalny i obsługuje aria-label
  • Brak obrazków zamiast ikon zwiększa kontrast (WCAG 1.4.3)

3. Napraw komunikaty błędów formularzy

Błąd: Komunikaty błędów (np. "Wprowadź poprawny adres e-mail") nie są widoczne dla użytkowników z niepełnosprawnością.
Rozwiązanie:

  1. W Theme Editor → Assets → theme.js znajdź funkcję validateForm()
  2. Dodaj kod:
function validateField(field) {  
  if (!field.value) {  
    field.setAttribute('aria-invalid', 'true');  
    field.setAttribute('aria-describedby', `${field.id}-error`);  
    const errorId = `${field.id}-error`;  
    // Tworzy element z błędem  
    if (!document.getElementById(errorId)) {  
      const error = document.createElement('div');  
      error.id = errorId;  
      error.className = 'error-message';  
      error.textContent = 'To pole jest wymagane';  
      field.parentNode.appendChild(error);  
    }  
  }  
}

Dlaczego to działa?

  • aria-invalid informuje czytniki ekranu o błędzie
  • aria-describedby łączy pole z komunikatem (WCAG 3.3.1)

4. Dodaj zastępcze opisy dla obrazów w galerii

Błąd: Obrazy w galerii nie mają alt – czytniki ekranu czytają "obraz" lub "brak opisu".
Rozwiązanie:

  1. W Theme Editor → Sections → Product Image znajdź kod:
<img src="{{ product.featured_image | img_url }}" />
  1. Zmień na:
<img  
  src="{{ product.featured_image | img_url }}"  
  alt="{{ product.featured_image.alt | escape }}"  
  aria-label="{{ product.title | escape }}"  
>

Dlaczego to działa?

  • alt pokazuje opis obrazu
  • aria-label dodaje kontekst dla użytkowników z niepełnosprawnością wzroku

5. Popraw kontrast kolorów w przyciskach

Błąd: Przyciski z kolorem #F0F0F0 na tle #FFFFFF nie spełniają wymogów WCAG 2.1 (kontrast 1.5:1).
Rozwiązanie:

  1. W Theme Editor → Assets → theme.css dodaj:
.button {  
  color: #000000; /* Czarny tekst */  
  background-color: #FFD700; /* Złoty tło */  
  /* Kontrast: 12.7:1 */  
}

Dlaczego to działa?

  • Kontrast 12.7:1 spełnia wymóg WCAG 1.4.3
  • Złoty kolor zwiększa widoczność przycisku

6. Dodaj nawigację skrótów (Skip to Content)

Błąd: Brak możliwości pominięcia nawigacji dla użytkowników z niepełnosprawnością.
Rozwiązanie:

  1. W Theme Editor → Layout → theme.liquid dodaj na początku:
<a href="#main-content" class="skip-link">Pomijanie nawigacji</a>
  1. W sekcji <body> dodaj:
<main id="main-content" tabindex="-1">  
  <!-- Twoja zawartość -->  
</main>

Dlaczego to działa?

  • Skrót pomaga użytkownikom z niepełnosprawnością wskoczyć do treści (WCAG 2.4.1)

7. Napraw zagnieżdżone tabele

Błąd: Tabele z nagłówkami w kolumnach nie są zdefiniowane jako thead.
Rozwiązanie:

  1. W Theme Editor → Sections → Table znajdź kod:
<table>  
  <tr><th>Nazwa</th><th>Cena</th></tr>  
  <tr><td>Produkt</td><td>100 zł</td></tr>  
</table>
  1. Zmień na:
<table>  
  <thead>  
    <tr><th scope="col">Nazwa</th><th scope="col">Cena</th></tr>  
  </thead>  
  <tbody>  
    <tr><td>Produkt</td><td>100 zł</td></tr>  
  </tbody>  
</table>

Dlaczego to działa?

  • scope="col" definiuje nagłówek kolumny (WCAG 1.3.1)

8. Dodaj opisy dla animacji CSS

Błąd: Animacje CSS (np. fade-in) nie są dostępne dla użytkowników z niepełnosprawnością.
Rozwiązanie:

  1. W Theme Editor → Assets → theme.css dodaj:
@keyframes fadeIn {  
  from { opacity: 0; }  
  to { opacity: 1; }  
}
  1. Dodaj w kodzie HTML:
<div class="fade-in" aria-live="polite" aria-atomic="true">  
  Nowość: {{ product.title }}  
</div>

Dlaczego to działa?

  • aria-live="polite" informuje czytniki ekranu o zmianie (WCAG 2.4.6)

9. Popraw struktury dokumentu dla screen readerów

Błąd: Brak hierarchii strukturalnej (np. brak <nav> dla nawigacji).
Rozwiązanie:

  1. W Theme Editor → Layout → theme.liquid dodaj:
<nav aria-label="Główna nawigacja">  
  <ul>  
    <li><a href="/">Strona główna</a></li>  
    <li><a href="/kategorie">Kategorie</a></li>  
  </ul>  
</nav>

Dlaczego to działa?

  • aria-label definiuje kontekst dla screen readerów (WCAG 2.4.1)

10. Dodaj zastępcze opisy dla plików PDF

Błąd: Linki do plików PDF nie mają opisu tekstowego.
Rozwiązanie:

  1. W Theme Editor → Sections → File Link znajdź kod:
<a href="plik.pdf">Pobierz plik</a>
  1. Zmień na:
<a href="plik.pdf" aria-label="Pobierz dokument w formacie PDF">  
  Pobierz dokument (PDF)  
</a>

Dlaczego to działa?

  • aria-label definiuje cel linku dla screen readerów (WCAG 2.4.4)
7 BigCommerce Accessibility Fixes Before EAA 2026: Your Practical Checklist | AccessioAI