Europejski Akt o Dostępności (EAA) – Ustawa dotycząca wymogów dostępności produktów i usług w Unii Europejskiej.

Europejski Akt o Dostępności (EAA)

Spis treści

Czym jest Europejski Akt o Dostępności (EAA) i ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług? (Ustawa)

Od kiedy będą obowiązywały nowe przepisy?

Kogo dotyczy ustawa?

Jakie obowiązki nakłada ustawa na usługodawców?

Jak zapewnić dostępność strony internetowej?

Jak działa WCAG? Najważniejsze zasady dostępności cyfrowej.

Jakie są kary za niedostosowanie się do ustawy?

Comarch e-Sklep a ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług.

Czym jest Europejski Akt o Dostępności (EAA) i ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług (Ustawa)?

Dyrektywa w sprawie wymogów dostępności produktów i usług, znana także pod nazwą „Europejski Akt o dostępności (EAA)”, to regulacja Unii Europejskiej, która ma na celu harmonizację wymogów dostępności dla wybranych produktów i usług. Kluczowym założeniem dyrektywy jest eliminacja barier, które mogą być utrudnieniem w swobodnym przepływie produktów i usług oraz zapewnienie ich dostępności dla osób z niepełnosprawnościami oraz osób starszych. EAA odnosi się do różnych typów niepełnosprawności, w tym:
  • Niepełnosprawności sensoryczne – np. osoby niewidome, słabowidzące, niesłyszące lub niedosłyszące.
  • Niepełnosprawności ruchowe – osoby z ograniczoną mobilnością, np. poruszające się na wózkach inwalidzkich lub mające trudności z obsługą urządzeń.
  • Niepełnosprawności poznawcze – osoby z dysleksją, zaburzeniami koncentracji, autyzmem czy innymi trudnościami w przetwarzaniu informacji.
  • Niepełnosprawności neurologiczne – np. osoby z epilepsją, chorobą Parkinsona czy stwardnieniem rozsianym.
  • Niepełnosprawności związane z wiekiem – seniorzy, którzy mogą mieć problemy ze wzrokiem, słuchem, pamięcią czy motoryką.
Ustawa z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług to polski akt prawny wdrażający Europejski Akt o Dostępności (EAA), czyli unijną dyrektywę 2019/882. Jej celem jest zapewnienie, że kluczowe produkty i usługi będą dostępne dla wszystkich użytkowników, w tym osób z niepełnosprawnościami.

Od kiedy będą obowiązywały nowe przepisy?

Przedsiębiorcy mają czas do 28 czerwca 2025 roku, aby dostosować swoje produkty i usługi do nowych wymogów.

Kogo dotyczy ustawa?

Ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług (Ustawa) implementująca w polskim prawie Europejski Akt o Dostępności (EAA), obejmuje producentów, importerów, dystrybutorów oraz dostawców usług, nakładając na nich konkretne obowiązki związane z zapewnieniem dostępności produktów i usług dla osób z ograniczeniami.
  • Dystrybutor – osoba lub firma, która sprzedaje produkt na rynku, ale nie jest jego producentem ani importerem.
  • Importer – osoba lub firma z siedzibą w UE, która sprowadza produkty spoza Unii Europejskiej lub EFTA na rynek UE.
  • Upoważniony przedstawiciel – osoba lub firma z pełnomocnictwem od producenta do działania w jego imieniu na terenie UE.
  • Usługodawca – osoba lub firma, która oferuje usługi konsumentom na terenie UE.
W zakresie usług, nowe obowiązki będą dotyczyć przedsiębiorców oferujących m.in. usługi handlu elektronicznego. Jako usługi handlu elektronicznego należy rozumieć wszelkie formy zakupu na odległość, np. przez strony internetowe lub aplikacje mobilne, realizowane na żądanie klienta. Co ważne swoich produktów i usług do wymogów dostępności nie muszą dostosowywać mikroprzedsiębiorcy – ich nie dotyczą przepisy Ustawy.

Jakie obowiązki nakłada ustawa na usługodawców?

Od 28 czerwca 2025 usługodawcy, którzy podlegają przepisom Ustawy będą zobowiązani m.in.:
  • Udzielać odpowiednich informacji o usługach i ich dostępności w regulaminach świadczenia usług.
  • Przeprowadzać ocenę dostępności.
  • Zapewnić dostępność i jednolitość swoich stron internetowych.

Jak zapewnić dostępność strony internetowej?

W ramach usług handlu elektronicznego Ustawa nawiązując do wytycznych WCAG wprowadza obowiązek dla usługodawców stosowania przy świadczeniu usług 4 zasad:
  • Postrzegalność – właściwość usługi lub jej części lub informacji o produkcie albo usłudze umożliwiającą ich odbiór przez użytkownika za pomocą zmysłów słuchu, wzroku lub dotyku.
  • Funkcjonalność – właściwość usługi lub jej części umożliwiającą użycie przez użytkownika wszystkich oferowanych przez nie funkcji.
  • Kompatybilność  –  właściwość produktu albo usługi lub ich części umożliwiającą niezakłócone współdziałanie z innymi produktami lub usługami, w tym produktami i usługami, do których nie mają zastosowania przepisy ustawy, albo systemami, w tym z narzędziami wspomagającymi, przeznaczonymi do korzystania z tego produktu albo tej usługi.
  • Zrozumiałość – właściwość usługi lub jej części lub informacji o produkcie albo usłudze umożliwiającą zrozumienie treści i informacji związanych z korzystaniem z produktu albo usługi zgodnie z ich przeznaczeniem.

Jak działa WCAG? Najważniejsze zasady dostępności cyfrowej.

WCAG  (Web Content Accessibility Guidelines) to zestaw wytycznych opracowanych przez World Wide Web Consortium (W3C), które mają na celu zapewnienie dostępności treści internetowych dla jak najszerszego grona użytkowników, w tym osób z niepełnosprawnościami.

Postrzegalność

Treści muszą być przedstawione w sposób, który użytkownicy mogą dostrzec, np. poprzez alternatywne opisy dla obrazów czy odpowiedni kontrast kolorów. O takim dostosowaniu mówią kryteria WCAG:
  • 1.4.3 Kontrast (Minimalny) – Tekst musi mieć kontrast co najmniej 4,5:1 względem tła, a dla dużych czcionek (powyżej 150%) 3:1. Aby to sprawdzić, możesz użyć narzędzi do analizy kontrastu, np. WAVE,
  • 1.4.11 Kontrast elementów interfejsu – Grafiki i elementy istotne dla treści muszą mieć kontrast co najmniej 3:1 względem tła, aby były czytelne dla osób z problemami wzroku,
  • 1.4.1 Użycie koloru – Informacje nie mogą być przekazywane wyłącznie przez kolor. Linki powinny mieć dodatkowe wyróżnienie, np. podkreślenie, aby były dostępne dla osób z zaburzeniami widzenia kolorów.

Funkcjonalność

Strony muszą być łatwe w nawigacji i obsłudze, np. za pomocą klawiatury. Strony powinny być zaprojektowane tak, aby sprzyjały intuicyjnej nawigacji. Oznacza to, że użytkownicy powinni mieć łatwy dostęp do treści i funkcji strony bez zbędnego wysiłku. Zasady, które pomagają osiągnąć ten cel, to:
  • Różne sposoby nawigacji – użytkownicy powinni mieć więcej niż jeden sposób dotarcia do treści, np. poprzez menu nawigacyjne, wyszukiwarkę, mapę strony czy breadcrumbs.
  • Czytelna struktura – nagłówki (<h1>, <h2>, <h3>) powinny być logicznie uporządkowane, a sekcje strony dobrze oznaczone.
  • Dostępność klawiatury – strona powinna być w pełni obsługiwana za pomocą klawiatury, bez konieczności używania myszy.
  • Widoczne linki i przyciski – elementy interaktywne powinny być dobrze oznaczone i mieć odpowiedni kontrast względem tła.
  • Unikanie pułapek nawigacyjnych – użytkownik nie powinien utknąć w miejscu bez możliwości powrotu lub przejścia dalej.

Zrozumiałość

Treści i funkcje muszą być łatwe do zrozumienia, np. poprzez jasny język i logiczną strukturę. Zasada ta pomaga osobom z trudnościami poznawczymi, takimi jak dysleksja czy zaburzenia koncentracji, lepiej korzystać z treści online. Zwiększa to komfort użytkowania dla wszystkich, eliminując niejasne komunikaty i nieprzewidywalne zmiany na stronie.

Solidność

Strony powinny być kompatybilne z różnymi technologiami wspomagającymi, takimi jak czytniki ekranowe. Oznacza to, że strony sklepów internetowych muszą być dostosowane do współpracy z czytnikami ekranów i innych technologii wspomagających, takich jak na przykład:
  • NVDA,
  • VoiceOver,
  • ChromeVox. 

Jakie są kary za niedostosowanie się do ustawy?

Brak spełnienia wymogów dostępności może spowodować nałożenie na firmę kary pieniężnej. Wysokość kar będzie ustalać PFRON lub właściwy organ nadzoru rynku. Decyzja o wysokości kary musi uwzględniać zakres naruszenia przepisów ustawy, w tym jego wagę, liczbę produktów albo usług niespełniających wymagań dostępności i liczbę osób, na które wpływa ono negatywnie. Wysokość kary pieniężnej jest ustalana na podstawie przeciętnego wynagrodzenia i obrotu przedsiębiorcy. Nie może jednak przekroczyć ani 10-krotności przeciętnego wynagrodzenia, ani 10% obrotu firmy za poprzedni rok.

Comarch e-Sklep a ustawa o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług.

Obecnie pracujemy nad tym, by dostosować Comarch e-Sklep do wymogów ustawy. Niebawem udostępnimy kolejne artykuły, które pomogą Ci zaktualizować oferty i dostosować je zarówno w e-Commerce jak i powiązanych integracjach. Śledź nasze Centrum Pomocy, by być na bieżąco! Comarch e-Sklep będzie zgodny z ustawą o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze . Jeśli korzystasz z gotowych szablonów, takich jak Rubin, Topaz, One Page Shop, Dla Gastronomii i Szafir, to nie musisz się martwić się o samodzielne wprowadzanie zmian w kodzie szablonu. Usprawnienia będą dostępne wraz z jego aktualizacją.
Wskazówka
Niniejszy artykuł ma charakter wyłącznie informacyjny i nie stanowi porady prawnej. W przypadku jakichkolwiek wątpliwości dotyczących poruszanych kwestii, zaleca się skonsultowanie z prawnikiem, celem upewnienia się, że Twój sklep spełnia wymogi Ustawy. Dodatkowo wszystkie informacje zapisane są bezpośrednio na oficjalnej stronie rządowej.

Spełnij kryteria WCAG 2.1/2.2. Przewodnik dla programistów oraz Partnerów Comarch.

Spis treści

Wstęp

Najlepsze praktyki dostępności

Podsumowanie

Wstęp

Z dniem 28 czerwca 2025 roku w życie wejdą przepisy związane z implementacją ustawy z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług. Wdraża ona do polskiego prawa tzw. Europejski Akt o Dostępności (EAA) – unijną dyrektywę 2019/882. Celem ustawy jest zapewnienie, że kluczowe produkty i usługi będą dostępne dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Przedsiębiorcy mają czas do 28 czerwca 2025 roku, aby dostosować swoje produkty i usługi do nowych wymogów.
Wskazówka
Chcesz dowiedzieć się więcej o tych przepisach? Sprawdź artykuł w naszym Centrum Pomocy: Europejski Akt o Dostępności (EAA) i zapoznaj się ze szczegółami
Niniejszy artykuł przedstawia fundamentalne zasady i techniczne wytyczne, których wdrożenie przyczyni się do zwiększenia dostępności witryny internetowej. Ma on na celu ma na celu pomóc programistom Liquid w tworzeniu dostępnych cyfrowo aplikacji i stron internetowych.  

Najlepsze praktyki dostępności

Dostępność stron internetowych jest obecnie kluczowym aspektem ich projektowania, mającym na celu zapewnienie równego dostępu do treści dla wszystkich użytkowników, niezależnie od ich indywidualnych potrzeb czy ograniczeń. Przestrzeganie najlepszych praktyk w zakresie dostępności nie tylko wspiera osoby korzystające z technologii asystujących, ale również poprawia ogólną użyteczność i funkcjonalność serwisu. W tym artykule przedstawiamy najlepsze praktyki dotyczące dostępności, które powinny być stosowane w kodzie HTML i CSS. Każdy z tych elementów odgrywa istotną rolę w budowaniu przyjaznego i dostępnego środowiska cyfrowego. Omówione zagadnienia obejmują:
  • Stosowanie semantycznych znaczników HTML,
  • Zapewnienie odpowiedniego kontrastu kolorystycznego,
  • Właściwe oznaczanie grafik poprzez teksty alternatywne,
  • Dostosowanie mechanizmów nawigacyjnych dla użytkowników korzystających z klawiatury.
 
Wskazówka
Ten artykuł przeznaczony jest dla osób z zaawansowaną wiedzą dotyczącą modyfikacji kodu szablonu. Jeśli nie jesteś programistą i nie dokonujesz zmian w kodzie, to przejdź do artykułów ogólnych:
 

Zasady ogólne

  • Semantyczne znaczniki HTML Używaj odpowiednich znaczników HTML, takich jak <header>, <nav>, <main>, <footer>, aby struktura strony była logiczna i zrozumiała. Jeśli w szablonie znajdują się niestandardowe struktury lub elementy, upewnij się, że są one odpowiednio oznaczone i dostępne dla czytników ekranu, np. za pomocą landmarków ARIA Landmarks.
  • Kolory i kontrast Zapewnij odpowiedni kontrast między tekstem, a tłem. Używaj narzędzi do sprawdzania kontrastu, aby upewnić się, że spełniasz standardy WCAG. Wykorzystaj devtools do sprawdzania kontrastu kolorów, takie jak np. WebAIM Contrast Checker, lub skorzystaj z narzędzia WAVE dostępnego jako rozszerzenie do przeglądarki.
  • Tekst alternatywny Zawsze dodawaj tekst alternatywny do obrazów, aby osoby korzystające z czytników ekranu mogły zrozumieć ich zawartość. W większości przypadków wykorzystanie filtra Liquid Img automatycznie zapewni odpowiednie atrybuty alt, natomiast jeśli używasz niestandardowych obrazów, upewnij się, że dodajesz alt lub aria-label do elementu <img>.
  • Nawigacja klawiaturą Zagwarantuj opcję poruszania się po stronie przy użyciu klawiatury, jednocześnie dbając o dostępność wszystkich interaktywnych elementów. Pamiętaj o zdefiniowaniu stylu swojego :focus oraz :focus-visible, aby użytkownicy mogli łatwo zidentyfikować, który element jest aktualnie aktywny. Niektóre znaczniki HTML5 są domyślnie dostępne dla nawigacji klawiaturą, takie jak <button>, <a>, <input>, ale jeśli używasz niestandardowych elementów, takich jak <div> lub <span>, upewnij się, że dodajesz tabindex=”0″ i odpowiednie role ARIA.
  • Czytelność Używaj prostego i zrozumiałego języka. Unikaj skomplikowanych zdań i terminologii, która może być trudna do zrozumienia dla niektórych użytkowników.
 

Elementy interaktywne

  • Formularze Używaj odpowiednich znaczników formularzy, takich jak <input>, <select>, <textarea>. Zapewnij, że są one poprawnie oznaczone. Używaj aria-label lub aria-labelledby, jeśli etykiety nie są widoczne. Jeśli natomiast w szablonie wykorzystywane są customowe pola formularzy, np. przy użyciu wykorzystania elementów <div> lub <span> to upewnij się, że są one dostępne dla czytników ekranu i użytkowników korzystających z klawiatury, np. poprzez dodanie role=”checkbox” lub role=”button” oraz odpowiednich atrybutów ARIA.
  • Przyciski Używaj <button> zamiast <div> lub <span> do tworzenia przycisków. Jeśli używasz ikon jako przycisków, dodaj aria-label lub title, aby opisać ich funkcję. Ikony, które nie mają znaczenia informacyjnego, powinny mieć aria-hidden=”true” lub role=”presentation”, aby nie były odczytywane przez czytniki ekranu.
  • Linki Używaj <a> do tworzenia linków. Tekst linku powinien jasno opisywać jego cel. Unikaj używania ogólnych fraz, takich jak „kliknij tutaj”. Jeśli chcesz dostarczyć dodatkowe informacje, użyj aria-label np. w przypadku linków do pobrania plików, np. <a href=”plik.pdf” aria-label=”Pobierz plik PDF”>Pobierz</a>.
  • Role ARIA Używaj ról ARIA, aby poprawić dostępność elementów, które nie mają semantycznego znaczenia w HTML. Na przykład, jeśli używasz <div> jako przycisku, dodaj role=”button” i zapewnij odpowiednie atrybuty ARIA, takie jak aria-pressed dla przycisków przełączających. Dodaj tłumaczenia do szablonu, aby zapewnić tłumaczenie tekstów używanych w atrybutach ARIA, takich jak aria-label, aria-labelledby i aria-describedby, aby były dostępne w różnych językach. np. aria-label=”{{translations.DownloadFile}}”.
 

Struktura treści

  • Nagłówki Używaj nagłówków od <h1> do <h6> w logicznej hierarchii. Nagłówek <h1> powinien być używany tylko raz na stronie, a kolejne nagłówki powinny być używane zgodnie z hierarchią.
  • Listy Używaj <ul> dla list nieuporządkowanych i <ol> dla list uporządkowanych. Unikaj używania <div> lub <span> do tworzenia list.
  • Tabele Używaj tabel do prezentacji danych. Dodaj <caption> opisujący tabelę i używaj nagłówków <th> z atrybutem scope=”col” lub scope=”row” dla kolumn i wierszy, aby poprawić dostępność.
  • Animacje i ruch Unikaj automatycznych animacji, które mogą być dezorientujące dla użytkowników. Jeśli musisz użyć animacji, zapewnij możliwość ich wyłączenia lub ograniczenia. Używaj prefers-reduced-motion w CSS, aby dostosować animacje do preferencji użytkownika.
  • Wideo i audio Zapewnij napisy i transkrypcje dla materiałów wideo i audio. Używaj znaczników <video> i <audio> z odpowiednimi atrybutami, takimi jak controls, aby umożliwić użytkownikom interakcję z multimediami.
  • Dynamiczne treści Jeśli używasz JavaScript do dynamicznego aktualizowania treści, upewnij się, że zmiany są ogłaszane dla czytników ekranu. Używaj aria-live i aria-atomic, aby kontrolować, jak zmiany są komunikowane użytkownikom korzystającym z technologii asystujących.
  • Testowanie dostępności Regularnie testuj swoją stronę pod kątem dostępności, używając narzędzi, takich jak Lighthouse, Axe lub WAVE. Te narzędzia pomogą zidentyfikować problemy z dostępnością i zasugerują poprawki. Ręczne testowanie dostępności jest również ważne. Używaj czytników ekranu, takich jak NVDA lub VoiceOver, aby sprawdzić, jak Twoja strona jest odczytywana przez użytkowników korzystających z technologii asystujących. Testuj na różnych urządzeniach i przeglądarkach, aby upewnić się, że dostępność jest zachowana we wszystkich warunkach. Testuj również z użytkownikami korzystającymi z technologii asystujących, aby uzyskać rzeczywiste opinie na temat dostępności Twojej strony.
 
Wskazówka
Szczegółowy zakres wymagań związanych z przepisami, znajdziesz w:
 

Podsumowanie

Dostępność jest kluczowym aspektem tworzenia stron internetowych i aplikacji. Stosowanie się do najlepszych praktyk dostępności pomoże zapewnić, że Twoje treści są dostępne dla wszystkich użytkowników, niezależnie od ich zdolności. Pamiętaj, że dostępność to proces ciągły, a regularne testowanie i aktualizowanie treści jest niezbędne, aby utrzymać wysokie standardy dostępności.

Posiadam własny szablon. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?

Spis treści

Wstęp

Sprawdź, jaki szablon posiadasz

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam gotowych szablonów Comarch? 

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Pozostałe zmiany

Gdzie należy uzupełnić teksty alternatywne (alt)? 

Zalecenia dla udostępnianych treści – ogranicz migające elementy

Dostosuj komunikację mailową – aktualizacja lub zmiana treści e-mail

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Podsumowanie

Wstęp

Z dniem 28 czerwca 2025 roku w życie wejdą przepisy związane z implementacją ustawy z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług. Wdraża ona do polskiego prawa tzw. Europejski Akt o Dostępności (EAA) – unijną dyrektywę 2019/882. Celem ustawy jest zapewnienie, że kluczowe produkty i usługi będą dostępne dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Przedsiębiorcy mają czas do 28 czerwca 2025 roku, aby dostosować swoje produkty i usługi do nowych wymogów.
Wskazówka
Chcesz dowiedzieć się więcej o przepisach? Sprawdź artykuł w naszym Centrum Pomocy: Europejski Akt o Dostępności (EAA) i zapoznaj się ze szczegółami
W niniejszym artykule wskazujemy, jakie czynności należy wykonać, jeśli posiadasz własny, indywidualnie zmodyfikowany szablon.

Sprawdź, jaki szablon posiadasz

Nie wiesz, który szablon posiadasz? Możesz to sprawdzić w panelu administracyjnym Comarch e-Sklep. Aby to zrobić, z poziomu panelu administracyjnego przejdź do zakładki Wygląd sklepu> Ustawienia, a następnie, pod przyciskiem "Więcej" wybierz "Edytuj ustawienia zaawansowane". W obszarze, który został wyświetlony, pojawi się kilka zakładek, a wśród nich zakładka "Szablon". Wybierz ją, po czym sprawdź szablon:   Jeśli Twój szablon jest indywidualny, to możesz przejść do pozostałej części artykułu. Jeśli natomiast posiadasz jeden z szablonów: Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii, to odpowiednia instrukcja znajduje się w artykule: Posiadam szablon Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2? Jeśli posiadasz szablon Bursztyn, Agat lub Opal, to przejdź do artykułu: Posiadam szablon Bursztyn, Opal lub Agat, jak mogę go dostosować do kryteriów WCAG 2.1/2.2?

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam własnego szablonu?

Aby twój szablon spełniał wymagania wynikające z przepisów ustawy z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług, rozważ jedną z dwóch propozycji:

Dostosuj szablon samodzielnie lub zleć te prace naszym Partnerom

Najważniejszym elementem związanym z nowymi przepisami jest rozpoznanie prac i zmian, jakich one wymagają. Aby to wykonać, przejdź przez przedstawione niżej punkty:
  1. Zapoznaj się z zasadami WCAG 2.1/2.2. Jest to niezwykle istotne w kontekście dostosowania strony internetowej Twojego e-Sklepu. Szczegóły znajdziesz na stronie: World Wide Web Consortium (W3C).
  2. Przeprowadź audyt strony swojego sklepu internetowego. Pomoże Ci to zidentyfikować ewentualne ograniczenia. Możesz to zrobić samodzielnie lub z pomocą specjalistów. W samodzielnym przeprowadzeniu audytu pomoże Ci lista kontrolna. Stanowi ona zbiór pytań, które pozwalają wykryć zdecydowaną większość problemów związanych z dostępnością na stronie internetowej. Lista kontrolna do badania dostępności cyfrowej strony internetowej jest dostępna do pobrania z oficjalnej strony rządowej. Za przygotowanie listy kontrolnej do badania dostępności cyfrowej strony internetowej odpowiadają eksperci z Ministerstwa Cyfryzacji. Dodatkowo, obszerna lista narzędzi do oceny dostępności stron internetowych, zgodnych z WCAG znajduje się na stronie: Web Accessibility Evaluation Tools List .
  3. Zacznij wprowadzać potrzebne zmiany. Na podstawie wyników audytu należy wprowadzić zmiany w kodzie strony, we wskazanych przez pomocne narzędzia miejscach. Zmiany należy wprowadzić także w treściach oraz funkcjonalnościach. Należy także zadbać o odpowiednie kontrasty i kolory Twojego szablonu.
Zespół Comarch e-Sklep po wykonaniu powyższych punktów zdecydował, że szablony graficzne należy przeanalizować i zmienić w następującym zakresie:
  • Umożliwienia sterowania klawiaturą
Sterowanie klawiaturą umożliwia obsługę strony lub aplikacji bez myszki, co jest istotne dla osób z ograniczoną mobilnością. Obejmuje logiczną nawigację klawiszem „Tab”, widocznym wskaźnikiem aktywnego elementu i prostą obsługę formularzy oraz menu. Obsługa wymaga aby elementy, po których przemieszcza się użytkownik były elementami interaktywnymi. W tym celu została poprawiona semantyka kodu, co wiąże się z tym, że przyciski są znacznikami „button”, lub jeśli nie jest to możliwe, mają przypisaną role=”button”.  Włączenie interaktywności przycisku lub jej zablokowanie obsłużone zostało za pomocą atrybutu „tabindex”. Do obsługi klawiszy innych niż „Tab” napisane zostały inne funkcje java script, przypisane do konkretnych eventów przeglądarki.
  • Struktury i nawigacji
Logika w strukturze strony oraz intuicyjna nawigacja wpływają na dostępność. Elementy takie jak dobrze opisane nagłówki, linki oraz menu są łatwe do zrozumienia i obsługi zarówno dla użytkowników, jak i technologii wspomagających, takich jak czytniki ekranu. Zwróć uwagę zwłaszcza na obsługę tekstów alternatywnych (atrybuty „alt”) w kodzie szablonu dla zdjęć i obrazków zgodnie z wymogami. Semantyka kodu została dostosowana pod odpowiednie zachowanie danej sekcji na stronie np. przez zastosowanie odpowiednich znaczników związanych ze strukturą kodu. Uporządkowano używanie znaczników, takich jak: header, footer, button, section, main, picture.
  • Responsywności i dostępności mobilnej
Sklep internetowy jest w pełni responsywny, czyli dostosowuje się do różnych ekranów – od dużych monitorów po smartfony. Aplikacje mobilne muszą spełniać te same wymagania dostępności, co witryny internetowe, aby użytkownicy mogli korzystać z nich w każdym środowisku. W Comarch e-Sklep możesz także zadbać o wyświetlanie dedykowanych obrazków na różnych urządzeniach mobilnych. Sprawdź, jakie możliwości dają bannery. W szablonach Comarch e-Sklep do zapewnienia responsywności wykorzystujemy sposób pisania kodu z wykorzystaniem media query.
  • Obsługi formularzy kontaktowych i zamówień
Formularze na stronie będą łatwe w obsłudze, będą posiadać jasne etykiety i umożliwiać nawigację za pomocą klawiatury. Unikamy wymuszania zbyt wielu kroków, a komunikaty błędów są jasne i wskazują konkretne rozwiązania. Zostały uzupełnione odpowiednie opisy (label) dla formularzy oraz obsłużono zaznaczenie aktualnie aktywnego elementu (focus).
  • Obsługi mapy strony (sitemap)
W Twoim e-Sklepie będzie dostępna strona z listą zawierającą wszystkie dostępne strony na witrynie internetowej. Jest to szczególnie ważne z punktu widzenia WCAG, ponieważ ułatwia nawigację osobom z niepełnosprawnościami, które korzystają z technologii wspomagających, takich jak czytniki ekranu. Dzięki mapie strony użytkownicy mogą szybko zlokalizować treści, bez potrzeby przeszukiwania całej witryny. W Comarch e-Sklep zostanie dodana nowa strona. Udostępnimy w niej obiekt zawierający listę stron sklepu. Przygotowano szablon dla tej strony i zostanie ona umieszczona domyślnie w stopce e-Sklepu.
  • Dostosowania kolorów i kontrastów w gotowych szablonach, dostępnych w Kreatorze Wyglądu
Zapewniamy odpowiednie rozwiązania w zakresie kolorów i kontrastu w domyślnych szablonach, dostępnych w Kreatorze Wyglądu. Wszystkie nasze szablony będą spełniały wymogi WCAG 2.1/2.2, w tym minimalny współczynnik kontrastu (4.5:1 dla tekstu zwykłego i 3:1 dla tekstu dużego). Sposób mierzenia kontrastu został opisany w niniejszym artykule w rozdziale: Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA.
  • Struktury i semantyki kodu zgodnej ze standardami kodu XHTML określonymi w standardzie WCAG
Struktura i znaczenie kodu dostosowanego do XHTML odnoszą się do reguł konstruowania i budowania stron internetowych zgodnie z normami wyznaczonymi przez język XHTML (Extensible Hypertext Markup Language). XHTML to bardziej wymagająca odmiana HTML, nakazuje stosowanie dobrze ustrukturyzowanego, poprawnego i logicznego kodu. Zmiany odbywały się poprzez dostosowanie nazw znaczników, aktualizację ich atrybutów lub dodanie brakujących.
 
Wskazówka
Jeśli chcesz dowiedzieć się więcej i poznać szczegółowy zakres modyfikacji, przejdź do artykułu dla użytkowników zaawansowanych: Spełnij kryteria WCAG 2.1/2.2. Przewodnik dla programistów oraz Partnerów Comarch.
  Szczegółowy zakres wymagań związanych z przepisami, znajdziesz w:
 

Albo wybierz jeden ze standardowych szablonów Comarch

Jeśli zdecydujesz, że nie chcesz modyfikować swojego obecnego szablonu, to możesz wykorzystać gotowe szablony Comarch, które są dostosowane do przepisów. Wybierz jeden ze standardowych szablonów Comarch. Dla sklepów detalicznych (w modelu B2C) polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir (dostępne w sklepach Enterprise i B2B). Sprawdź szczegółowe informacje na temat aktualnych szablonów B2C oraz B2B.   Wybór standardowego szablonu Comarch e-Sklep
Wskazówka
Aktualizację szablonu wykonaj wtedy, kiedy będzie ona dostępna. Realizacja wersji 2025.4 przewidywana jest przed 28 czerwca 2025 roku. Będzie ona zawierała zmiany związane z omawianymi tutaj przepisami.

Jak zaktualizować szablon?

Aby zaktualizować szablon i przejść na Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii, należy skorzystać z aktualnej wersji Kreatora Wyglądu. Pamiętaj, że szablony Rubin i Szafir przeznaczone są tylko dla sklepów Enterprise i B2B. Odnośnik znajduje się również w panelu administracyjnym e-Sklepu w sekcji Wygląd sklepu > Kreator wyglądu.  Istnieją trzy możliwości aktualizacji tych szablonów:
  • Wygenerowanie zupełnie nowego szablonu w Kreatorze Wyglądu oraz wgranie go do e-Sklepu,
  • Wybór i edycja jednego z gotowych układów i jego modyfikacja,
  • Import posiadanego szablonu do Kreatora Wyglądu oraz ponowne wygenerowanie go w najnowszej wersji.
Wygenerowany z Kreatora Wyglądu szablon należy wgrać do e-Sklepu. W panelu administracyjnym e-Sklepu, w sekcji Wygląd sklepu znajduje się bezpośredni odnośnik do importu szablonu z Kreatora wyglądu. Szczegółowa instrukcja dostępna jest w artykule Jak wyeksportować i zaimportować swój szablon w e-Sklepie?
Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.
Wskazówka
Informacje na temat aktualizacji znajdują się w Centrum Pomocy: Jak zaktualizować szablon do najnowszej wersji?  
Więcej informacji na temat Kreatora Wyglądu B2C oraz B2B znajduje się w Centrum Pomocy:

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Jednym z głównych wymogów WCAG jest stosowanie odpowiednich kontrastów na stronach internetowych. Odpowiedni kontrast między tekstem a tłem jest kluczowy dla osób z dysfunkcjami wzroku. WCAG 2.1 określa minimalny współczynnik kontrastu (4.5:1 dla tekstu zwykłego i 3:1 dla tekstu dużego). Ważne jest również unikanie łączenia kolorów, które mogą być trudne do rozróżnienia, takich jak czerwony i zielony. Kontrasty po modyfikacji kolorów możesz sprawdzić np. narzędziem WAVE. WAVE to popularny, dostępny dla wszystkich zestaw narzędzi do oceny dostępności stron internetowych. Rozszerzenia WAVE dla Chrome, Firefox i Edge, umożliwiają testowanie bezpośrednio w tych przeglądarkach, bez przesyłania danych na serwer WAVE. WAVE znajdziesz pod linkiem: WAVE Web Accessibility Evaluation Tools.  

Jak sprawdzić kontrast?

Przejdź na stronę swojego e-Sklepu. Włącz wtyczkę WAVE. Po prawej stronie ekranu wyświetli się panel boczny, na pierwszej zakładce widać podsumowanie całej strony: Już na tym etapie możesz przejść do szczegółów, klikając "View details". Możesz w tym miejscu przejść także do zakładki "Contrast".   Czerwone kwadraty oznaczają obszar do poprawy. Przejdź przez stronę, aby zobaczyć szczegóły każdego z nich. Po kliknięciu na jeden z kwadratów pokaże się komunikat dotyczący kontrastu: W panelu bocznym pojawi się dokładna informacja na temat koloru. W tym miejscu, korzystając z suwaków możesz od razu dostosować kolor tak, aby był odpowiedni i sprawdzić, czy spełnia wymagania WCAG.  

Gdzie dostosować kolory dla szablonu?

Kolory należy zmienić samodzielnie w miejscu, gdzie w przypadku Twojego szablonu, zostało ono wyznaczone. Może to być np. kod szablonu, lub obszar znajdujący się w panelu administracyjnym Comarch e-Sklep  Wygląd Sklepu > Ustawienia.  

Pozostałe zmiany

Poza zmianami w szablonie graficznym sklepu należy uzupełnić szereg danych. Znaczącą część tych elementów możesz wykonać już teraz, nie czekając na aktualizację Comarch e-Sklep

Teksty alternatywne ("Alt") w Comarch e-Sklep.

Wskazówka
Twój szablon musi obsługiwać parametr "alt" w obrazkach. Jeśli wykorzystasz aktualny szablon standardowy od Comarch to obsługę zapewnia Comarch e-Sklep, jeśli zdecydowałeś się na indywidualny szablon lub samodzielną aktualizację starszej wersji to upewnij się, że w szablonie są obsługiwane parametry "alt" we wskazanych elementach.
Teksty alternatywne („alt”) to krótkie opisy obrazków, które pozwalają osobom korzystającym z czytników ekranu zrozumieć, co znajduje się na zdjęciu. Atrybut „alt” jest szczególnie ważny dla zdjęć produktów, ponieważ umożliwia przekazanie najważniejszych informacji o produktach.  Dlaczego tekst alternatywny jest taki ważny? 
  • Pomaga osobom korzystającym z czytników ekranu, które odczytują tekst alternatywny na głos,
  • Poprawia dostępność stron internetowych, czyniąc je bardziej przyjaznymi dla wszystkich użytkowników,
  • Wpływa na pozycjonowanie w wyszukiwarkach, ponieważ dobrze opisane obrazy są lepiej interpretowane przez algorytmy Google.   
Dobrze sformułowany opis powinien być zwięzły, ale wystarczająco informacyjny. Poniżej prezentujemy przykłady dobrego i złego zastosowania opisów alternatywnych:
Przyklad
Poprawne :
  • Czerwona sukienka maxi z rozcięciem, modelka na tle miejskiego pejzażu.
  • Białe sneakersy z grubą podeszwą, ustawione na drewnianej podłodze.
  • Nowoczesna sofa w kolorze szarym, z drewnianymi nogami, ustawiona w minimalistycznym salonie.
  • Słuchawki bezprzewodowe z aktywną redukcją szumów, na białym tle.
Niepoprawne:
  • Sukienka.
  • Buty sportowe.
  • Fajna kanapa.
  • Najlepszy sprzęt w dobrej cenie!

Gdzie należy uzupełnić teksty alternatywne (alt)?

1. Dla zdjęć towarów w systemach Comarch ERP.

Korzystam z Comarch ERP Optima
Po uruchomieniu Comarch ERP Optima przejdź na pozycję cennika, a następnie edytuj wybrany towar. Następnie przejdź na zakładkę "Atrybuty", a później do sekcji "Zdjęcia i załączniki". W tym miejscu zobaczysz kolumnę "Atrybut Alt".
Po dwukrotnym kliknięciu możliwe jest uzupełnienie opisu alternatywnego: Po dokonaniu zmian należy je zapisać. Po wykonaniu wszystkich modyfikacji należy wykonać synchronizację.

Korzystam z Comarch ERP XL

Po uruchomieniu ERP XL przejdź do Sprzedaż > Towary , a następnie na zakładkę "Załączniki". Opis alternatywny dla towaru stanowi Kod:    
Korzystam z Comarch ERP XT
Przejdź na kartę produktu, a następnie do zakładki "Zdjęcia". Wśród pól do uzupełnienia znajdziesz "Opis alternatywny (Alt)".   W tym miejscu wpisz odpowiednią treść, a następnie zapisz wprowadzone zmiany.  

2. Dla zdjęć w bannerach – w panelu administracyjnym Comarch e-Sklep

Pamiętaj, alby alty (opisy alternatywne) były uzupełnione także w przypadku bannerów. Aby to zrobić, przejdź z poziomu panelu administracyjnego do Wygląd sklepu > Ustawienia > Bannery  do edycji swoich bannerów. Klikając na odpowiedni kafelek pojawią się opcje z uzupełnieniem Alt:

3. Dla zdjęć stosowanych na stronach z treściami formalnymi – w panelu administracyjnym Comarch e-Sklep

Obrazki możesz dodawać także do treści, które udostępniasz na specjalnych stronach, takich jak np. Regulamin sklepu, Polityka prywatności, Wysyłka itp. W obszarze do edycji, który jest dostępny z poziomu panelu administracyjnego w sekcji Ustawienia > Treści formalne edytuj interesującą Cię treść, a dodając obrazek uzupełnij alt:    

4. Dla zdjęć wprowadzonych w opisie towaru i opisie kategorii

Dodając opisy produktów i kategorii, warto upewnić się, że linkowane zdjęcia zawierają poprawnie uzupełniony atrybut "alt". To kluczowe dla osób korzystających z czytników ekranu. Dbałość o ten detal poprawia dostępność strony i zwiększa jej widoczność w sieci. Opis towaru i kategorii możesz dodać w systemach Comarch ERP.  Opis kategorii możesz ustawić również z poziomu panelu administracyjnego, bez konieczności korzystania z systemu ERP. Szczegółowe informacje znajdują się w artykule: Jak edytować kategorię w Comarch e-Sklep? 

5. Dla zdjęć w Blogu

Obrazki, które dodawane są dla wpisów blogowych od wersji 2025.4 będą posiadały atrybuty ALT oraz Title. Ich uzupełnienie będzie możliwe przy przejściu z poziomu panelu administracyjnego Comarch e-Sklep do sekcji Marketing > Blog przy dodawaniu wpisu.

 

6. Dla zdjęć w plikach użytkownika "Twoje pliki"

Pliki użytkownika w e-Sklepie to dedykowana przestrzeń do przechowywania własnych materiałów, które mogą zostać wykorzystane w sklepie internetowym. Pliki można przesyłać za pośrednictwem panelu administracyjnego, w sekcji Ustawienia > Twoje pliki. Maksymalny rozmiar pojedynczego pliku: 3 MB. Pliki, które dodawane są we wspomnianym obszarze, od wersji 2025.4 będą posiadały atrybuty ALT oraz Title. Ich uzupełnienie będzie możliwe przy przejściu z poziomu panelu administracyjnego do sekcji Ustawienia > Twoje pliki, przy edycji pliku lub jego dodaniu.
Wskazówka
Jeśli posiadasz sklep wielojęzyczny, to we wszystkich tych wymienionych powyżej obszarach, znajdują się również obrazki dla danego języka. Pamiętaj, alby atrybut ALT zdefiniować dla każdego z nich!
 

Atrybut Title - obowiązkowy czy nie?

Atrybut title jest przydatny do przekazywania dodatkowych informacji o elementach HTML, widocznych jako podpowiedź po najechaniu kursorem. Może być używany w ikonach bez podpisu, formularzach czy linkach, aby dostarczyć kontekst. Nie jest jednak obowiązkowy według WCAG, ponieważ czytniki ekranu często go ignorują, a osoby nawigujące klawiaturą mogą nie mieć do niego dostępu.  

Zalecenia dla udostępnianych treści - ogranicz migające elementy

Jako właściciel sklepu musisz sam zadbać o to, jakie treści umieszczasz na swojej stronie. Migające elementy, takie jak animacje czy reklamy, mogą wywoływać problemy u osób z padaczką fotogenną. Według kryteriów WCAG 2.1 zalecane jest ograniczenie migających treści do maksymalnie trzech błysków na sekundę lub ich całkowite usunięcie. Jako właściciel sklepu musisz dbać o statyczne elementy lub spokojne animacje. Również treści zawarte w różnego typu prospektach, gazetkach czy folderach informacyjnych w formie dokumentów powinny być zgodne z wytycznymi WCAG.

1.Obrazki i bannery

W szablonach standardowych takie elementy mogą pojawić się na przykład w bannerach i elementach tekstowych ze zdjęciem. Upewnij się, że grafiki tam zamieszczone są odpowiednie, zwróć uwagę zwłaszcza na pliki w formacie GIF. Sprawdź, w jaki sposób możesz skonfigurować bannery oraz elementy tekstowe ze zdjęciem.

2.Materiały audio i viedo

Aby sklep internetowy był w pełni dostępny zgodnie z WCAG, właściciele muszą zadbać o dodanie audiodeskrypcji i transkrypcji do materiałów multimedialnych (filmy, nagrania dźwiękowe). Choć oba rozwiązania służą poprawie dostępności, mają różne funkcje.
  • Audiodeskrypcja to dodatkowy opis dźwiękowy, który przedstawia istotne elementy wizualne nagrania osobom niewidzącym,
  • Transkrypcja to zapis tekstowy całej treści audio, umożliwiający odbiór treści osobom niesłyszącym, może to być w formie napisów dla audiodeskrypcji.
Dodanie tych elementów leży po stronie właścicieli sklepów. Ich brak może wykluczyć część użytkowników i wpłynąć na komfort korzystania ze strony. Dobre praktyki dostępności to nie tylko wymóg, ale też inwestycja w lepsze doświadczenie klientów.  

3.Załączniki (m.in. instrukcje, katalogi)

Należy zadbać o to, aby wszystkie udostępniane w sklepie załączniki, takie jak instrukcje czy katalogi, były zgodne z wytycznymi WCAG, zapewniając tym samym ich pełną dostępność dla wszystkich użytkowników.

Dostosuj komunikację mailową - aktualizacja lub zmiana treści e-mail

Dostosowanie treści e-mail zgodnie z wytycznymi WCAG to kluczowy krok w budowaniu dostępnej i klarownej komunikacji. W tej części artykułu przedstawiamy rozwiązania zarówno dla domyślnych wiadomości, jak i tych modyfikowanych, aby zapewnić ich lepszą czytelność i dostępność dla wszystkich odbiorców.

1.Treści mailowe są domyślne, nie zostały sformatowane

Jeśli treści nie zostały przez Ciebie zmienione i stanowią domyślne treści, które są dostępne w Comarch e-Sklep, to wystarczy, że zaktualizujesz je. Aby to zrobić, należy przejść w panelu administracyjnym do zakładki Ustawienia > Treści formalne, a następnie wybrać „Wysyłka e-mail i SMS”. Zakładka ta zawiera treści wiadomości wysyłane do klientów po wykonaniu określonych akcji, np. po zakupie czy rejestracji. W Comarch e-Sklep istnieje możliwość przywrócenia standardowej treści pojedynczej wiadomości e-mail lub wszystkich jednocześnie. Opcja ta stanowi również aktualizację treści e-mail. "Przywróć domyślną treść" dostępna jest w panelu administracyjnym e-Sklepu w menu Ustawienia/ Treści formalne/ Wysyłka e-mail i SMS na szczegółach każdej wiadomości, po kliknięciu w przycisk Więcej:  

2.Treści mailowe są modyfikowane, zostały przeze mnie zmienione

Jeśli posiadasz własne, dostosowane do Twojej komunikacji marketingowej treści e-mail, to sprawdź, czy są one odpowiednio napisane i sformatowane. Zastosuj się do poniższych wskazówek. W jaki sposób poprawnie napisać i sformatować treści?
  • Struktura Stosuj nagłówki (<h1>, <h2> itd.) dla przejrzystości. Używaj krótkich akapitów i list punktowanych.
  • Tekst i formatowanie Zapewnij wysoki kontrast między tekstem a tłem. Wybieraj czytelne czcionki (sans-serif, min. 12-14 px). Nie używaj wyłącznie koloru do przekazywania informacji.
  • Obrazy i multimedia Dodawaj tekst alternatywny (alt text) do obrazów. Unikaj tekstu osadzonego w grafikach, jeśli można go przesłać jako tekst.
  • Linki i przyciski Stosuj opisowe teksty linków zamiast „Kliknij tutaj”. Upewnij się, że są łatwe do kliknięcia na ekranach dotykowych.
  • Język i czytelność Używaj prostego i zrozumiałego języka. Unikaj skrótów i branżowego żargonu, jeśli odbiorca może ich nie znać.
  • Testowanie Sprawdź wiadomość na różnych urządzeniach i czytnikach ekranu. Zweryfikuj zgodność ze standardami WCAG.
Szczegółowe informacje na temat edycji treści e-mail znajdują się a artykule: E-mail i SMS  

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Przystosowanie e-Sklepu do wymogów nie musi wiązać się z dużymi wydatkami na zmiany w kodzie. Kluczowe aspekty dostępności można wdrożyć samodzielnie, wykorzystując opcje dostępne w systemach Comarch ERP, a także Kreatorze Wyglądu czy Panelu Administracyjnym. Warto pamiętać, że poprawa dostępności to nie tylko obowiązek wynikający z przepisów, ale także realna szansa na zwiększenie grona klientów oraz podniesienie komfortu ich zakupów. Istnieje kilka ogólnodostępnych narzędzi, które pomogą Ci dostosować sklep do wymogów. Obszerna lista narzędzi do oceny dostępności stron internetowych, zgodnych z WCAG znajduje się na stronie: Web Accessibility Evaluation Tools List .  

Podsumowanie

Dostępność cyfrowa to nie jednorazowe przedsięwzięcie, lecz ciągły rozwój i udoskonalanie. Regularne sprawdzanie funkcjonalności, optymalizacja elementów wizualnych i dostosowywanie sposobów interakcji pozwalają na stałe podnoszenie jakości doświadczeń użytkowników. Dążenie do pełnej zgodności ze standardami WCAG 2.1/2.2 oraz wymogami Europejskiego Aktu o Dostępności (EAA) nie tylko ułatwia nawigację wszystkim odwiedzającym, ale także buduje pozytywny wizerunek i wzmacnia pozycję na rynku. Wdrażanie kolejnych usprawnień to inwestycja w przyszłość, która przynosi korzyści zarówno właścicielom, jak i ich klientom.

Posiadam szablon Bursztyn, Opal lub Agat. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?

Spis treści

Wstęp

Sprawdź, jaki szablon posiadasz

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używasz szablonu Bursztyn, Opal lub Agat? 

Aktualizacja szablonu

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Pozostałe zmiany

Gdzie należy uzupełnić teksty alternatywne (alt)? 

Zalecenia dla udostępnianych treści – ogranicz migające elementy

Dostosuj komunikację mailową – aktualizacja lub zmiana treści e-mail

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Podsumowanie

Wstęp

Z dniem 28 czerwca 2025 roku w życie wejdą przepisy związane z implementacją ustawy z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług. Wdraża ona do polskiego prawa tzw. Europejski Akt o Dostępności (EAA) – unijną dyrektywę 2019/882. Celem ustawy jest zapewnienie, że kluczowe produkty i usługi będą dostępne dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Przedsiębiorcy mają czas do 28 czerwca 2025 roku, aby dostosować swoje produkty i usługi do nowych wymogów.
Wskazówka
Chcesz dowiedzieć się więcej o tych przepisach? Sprawdź artykuł w naszym Centrum Pomocy: Europejski Akt o Dostępności (EAA) i zapoznaj się ze szczegółami
W niniejszym artykule wskazujemy, jakie czynności należy wykonać, jeśli posiadasz jeden ze starszych szablonów Comarch, czyli np.: Bursztyn, Opal lub Agat.

Sprawdź, jaki szablon posiadasz

Nie wiesz, który szablon posiadasz? Możesz to sprawdzić w panelu administracyjnym Comarch e-Sklep. Aby to zrobić, z poziomu panelu administracyjnego przejdź do zakładki Wygląd sklepu/ Ustawienia a następnie, pod przyciskiem "Więcej" wybierz Edytuj ustawienia zaawansowane. W obszarze, który został wyświetlony, pojawi się kilka zakładek, a wśród nich zakładka "Szablon". Wybierz ją, po czym sprawdź szablon:   Jeśli Twój szablon to Bursztyn, Agat lub Opal, to możesz przejść do kolejnej części artykułu. Jeśli natomiast posiadasz jeden z szablonów: Topaz, One Page Shop, Dla Gastronomii, Rubin lub Szafir, to odpowiednia instrukcja znajduje się w artykule: Posiadam szablon Topaz, One Page Shop lub Dla Gastronomii, jak mogę go dostosować do kryteriów WCAG 2.1/2.2?  Jeśli posiadasz własny szablon z indywidualnymi modyfikacjami, to przejdź do artykułu: Posiadam własny szablon, jak mogę go dostosować do kryteriów WCAG 2.1/2.2?   

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używasz szablonu Bursztyn, Opal lub Agat?

Przypominamy, że zgodnie z wcześniejszą komunikacją, wskazane szablony nie są już aktualizowane i wspierane. Nie będą one także dostosowane do wskazywanych w tym artykule przepisów. Aby twój szablon spełniał wymagania wynikające z przepisów ustawy z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług, rozważ jedną z dwóch propozycji:

Dostosuj szablon samodzielnie lub zleć te prace naszym partnerom

Jeśli nie chcesz zmieniać swojego obecnego szablonu graficznego to możesz dostosować go do wymogów ustawy samodzielnie lub zlecić te prace Autoryzowanym Partnerom Comarch. Zakres prac do wykonania możesz znaleźć w:
Wskazówka
Jeśli chcesz dowiedzieć się więcej i poznać szczegółowy zakres modyfikacji, przejdź do artykułu dla użytkowników zaawansowanych: Spełnij kryteria WCAG 2.1/2.2. Przewodnik dla programistów oraz Partnerów Comarch.
 

Wybierz jeden ze standardowych szablonów Comarch

Wybierz jeden ze standardowych szablonów Comarch. Dla sklepów detalicznych (w modelu B2C) polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir (dostępne w sklepach Enterprise i B2B). Sprawdź szczegółowe informacje na temat aktualnych szablonów B2C oraz B2B.  

Aktualizacja szablonu

Wskazówka
Aktualizację szablonu wykonaj wtedy, kiedy będzie ona dostępna. Realizacja wersji 2025.4 przewidywana jest przed 28 czerwca 2025 roku, poinformujemy o niej w aktualnościach. Będzie ona zawierała zmiany związane z omawianymi tutaj przepisami.

Jak zaktualizować szablon?

Aby zaktualizować szablon i przejść na Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii, należy skorzystać z aktualnej wersji Kreatora Wyglądu. Pamiętaj, że szablony Rubin i Szafir przeznaczone są tylko dla sklepów Enterprise i B2B. Odnośnik znajduje się również w panelu administracyjnym e-Sklepu w sekcji Wygląd sklepu > Kreator wyglądu.  Istnieją trzy możliwości aktualizacji tych szablonów:
  • Wygenerowanie zupełnie nowego szablonu w Kreatorze Wyglądu oraz wgranie go do e-Sklepu,
  • Wybór i edycja jednego z gotowych układów i jego modyfikacja,
  • Import posiadanego szablonu do Kreatora Wyglądu oraz ponowne wygenerowanie go w najnowszej wersji.
Wygenerowany z Kreatora Wyglądu szablon należy wgrać do e-Sklepu. W panelu administracyjnym e-Sklepu, w sekcji Wygląd sklepu znajduje się bezpośredni odnośnik do importu szablonu z Kreatora wyglądu. Szczegółowa instrukcja dostępna jest w artykule Jak wyeksportować i zaimportować swój szablon w e-Sklepie?
Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.
Wskazówka
Informacje na temat aktualizacji znajdują się w Centrum Pomocy: Jak zaktualizować szablon do najnowszej wersji?  
Więcej informacji na temat Kreatora Wyglądu B2C oraz B2B znajduje się w Centrum Pomocy:

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Jednym z głównych wymogów WCAG jest stosowanie odpowiednich kontrastów na stronach internetowych. Jeśli w wybranym szablonie graficznym wykorzystujesz któryś ze standardowych motywów kolorystycznych dostępnych w kreatorach, to zostaną one dostosowane do wymagań wynikających z przepisów. Jeśli natomiast masz przygotowany własny motyw kolorystyczny lub chcesz zmienić część kolorów zastosowanych w szablonie, to pamiętaj, że muszą one posiadać odpowiednie kontrasty. Wszelkich zmian kolorystycznych możesz dokonać w Kreatorze Wyglądu.  Odpowiedni kontrast między tekstem a tłem jest kluczowy dla osób z dysfunkcjami wzroku. WCAG 2.1 określa minimalny współczynnik kontrastu (4.5:1 dla tekstu zwykłego i 3:1 dla tekstu dużego). Ważne jest również unikanie łączenia kolorów, które mogą być trudne do rozróżnienia, takich jak czerwony i zielony. Kontrasty po modyfikacji kolorów możesz sprawdzić np. narzędziem WAVE. WAVE to popularny, dostępny dla wszystkich zestaw narzędzi do oceny dostępności stron internetowych. Rozszerzenia WAVE dla Chrome, Firefox i Edge, umożliwiają testowanie bezpośrednio w tych przeglądarkach, bez przesyłania danych na serwer WAVE. WAVE znajdziesz pod linkiem: WAVE Web Accessibility Evaluation Tools.  

Jak sprawdzić kontrast?

Przejdź na stronę swojego e-Sklepu. Włącz wtyczkę WAVE. Po prawej stronie ekranu wyświetli się panel boczny, na pierwszej zakładce widać podsumowanie całej strony: Już na tym etapie możesz przejść do szczegółów, klikając "View details". Możesz w tym miejscu przejść także do zakładki "Contrast".   Czerwone kwadraty oznaczają obszar do poprawy. Przejdź przez stronę, aby zobaczyć szczegóły każdego z nich. Po kliknięciu na jeden z kwadratów pokaże się komunikat dotyczący kontrastu: W panelu bocznym pojawi się dokładna informacja na temat koloru. W tym miejscu, korzystając z suwaków możesz od razu dostosować kolor tak, aby był odpowiedni i sprawdzić, czy spełnia wymagania WCAG.  

Gdzie dostosować kolory?

Kolory w szablonie możesz zmienić korzystając z Kreatora Wyglądu. Po imporcie szablonu, edycji lub stworzeniu nowego projektu, przejdź do zakładki "Style" i edytuj motyw kolorystyczny:   Następnie możesz zmieniać swobodnie kolor na wybranych elementach:   Zmian możesz dokonać także z poziomu panelu administracyjnego, przechodząc do zakładki Wygląd Sklepu > Ustawienia.

Pozostałe zmiany

Poza zmianami w szablonie graficznym sklepu należy uzupełnić szereg danych. Znaczącą część tych elementów możesz wykonać już teraz, nie czekając na aktualizację Comarch e-Sklep. Poniżej znajduje się lista zmian, które należy wdrożyć w swoim e-Sklepie.

Teksty alternatywne ("Alt", alty) w Comarch e-Sklep

Twój szablon musi obsługiwać parametr "alt" w obrazkach. Jeśli wykorzystasz aktualny szablon standardowy od Comarch to obsługę zapewnia Comarch e-Sklep, jeśli zdecydowałeś się na indywidualny szablon lub samodzielną aktualizację starszej wersji to upewnij sie, że w szablonie są obsługiwane parametry "alt" we wskazanych elementach. Teksty alternatywne („alt”) to krótkie opisy obrazków, które pozwalają osobom korzystającym z czytników ekranu zrozumieć, co znajduje się na zdjęciu. Atrybut „alt” jest szczególnie ważny dla zdjęć produktów, ponieważ umożliwia przekazanie najważniejszych informacji o produktach.  Dlaczego tekst alternatywny jest taki ważny? 
  • Pomaga osobom korzystającym z czytników ekranu, które odczytują tekst alternatywny na głos,
  • Poprawia dostępność stron internetowych, czyniąc je bardziej przyjaznymi dla wszystkich użytkowników,
  • Wpływa na pozycjonowanie w wyszukiwarkach, ponieważ dobrze opisane obrazy są lepiej interpretowane przez algorytmy Google.   
Dobrze sformułowany opis powinien być zwięzły, ale wystarczająco informacyjny. Poniżej prezentujemy przykłady dobrego i złego zastosowania opisów alternatywnych:
Przyklad
Poprawne :
  • Czerwona sukienka maxi z rozcięciem, modelka na tle miejskiego pejzażu.
  • Białe sneakersy z grubą podeszwą, ustawione na drewnianej podłodze.
  • Nowoczesna sofa w kolorze szarym, z drewnianymi nogami, ustawiona w minimalistycznym salonie.
  • Słuchawki bezprzewodowe z aktywną redukcją szumów, na białym tle.
Niepoprawne:
  • Sukienka.
  • Buty sportowe.
  • Fajna kanapa.
  • Najlepszy sprzęt w dobrej cenie!

Gdzie należy uzupełnić teksty alternatywne (alt)?

1. Dla zdjęć towarów w systemach Comarch ERP

Korzystam z Comarch ERP Optima
Po uruchomieniu Comarch ERP Optima przejdź na pozycję cennika, a następnie edytuj wybrany towar. Następnie przejdź na zakładkę "Atrybuty", a następnie do sekcji "Zdjęcia i załączniki". W tym miejscu zobaczysz kolumnę "Atrybut Alt".
Po dwukrotnym kliknięciu możliwe jest uzupełnienie opisu alternatywnego: Po dokonaniu zmian należy je zapisać. Po wykonaniu wszystkich modyfikacji należy wykonać synchronizację.

Korzystam z Comarch ERP XL

Po uruchomieniu ERP XL przejdź do Sprzedaż > Towary , a następnie na zakładkę "Załączniki". Opis alternatywny dla towaru stanowi Kod:    
Korzystam z Comarch ERP XT
Przejdź na kartę produktu, a następnie do zakładki "Zdjęcia". Wśród pól do uzupełnienia znajdziesz "Opis alternatywny (Alt)".   W tym miejscu wpisz odpowiednią treść, a następnie zapisz wprowadzone zmiany.  

2. Dla zdjęć w bannerach – w panelu administracyjnym Comarch e-Sklep

Pamiętaj, alby alty (opisy alternatywne) były uzupełnione także w przypadku bannerów. Aby to zrobić, przejdź z poziomu panelu administracyjnego do Wygląd sklepu > Ustawienia > Bannery  do edycji swoich bannerów. Klikając na odpowiedni kafelek pojawią się opcje z uzupełnieniem Alt:

3. Dla zdjęć stosowanych na stronach z treściami formalnymi – w panelu administracyjnym Comarch e-Sklep

Obrazki możesz dodawać także do treści, które udostępniasz na specjalnych stronach, takich jak np. Regulamin sklepu, Polityka prywatności, Wysyłka itp. W obszarze do edycji, który jest dostępny z poziomu panelu administracyjnego w sekcji Ustawienia > Treści formalne edytuj interesującą Cię treść, a dodając obrazek uzupełnij alt:    

4. Dla zdjęć wprowadzonych w opisie towaru i opisie kategorii.

Dodając opisy produktów i kategorii, warto upewnić się, że linkowane zdjęcia zawierają poprawnie uzupełniony atrybut "alt". To kluczowe dla osób korzystających z czytników ekranu. Dbałość o ten detal poprawia dostępność strony i zwiększa jej widoczność w sieci. Opis towaru i kategorii możesz dodać w systemach Comarch ERP.  Opis kategorii możesz ustawić również z poziomu panelu administracyjnego, bez konieczności korzystania z systemu ERP. Szczegółowe informacje znajdują się w artykule: Jak edytować kategorię w Comarch e-Sklep? 

5. Dla zdjęć w Blogu

Obrazki, które dodawane są dla wpisów blogowych od wersji 2025.4 będą posiadały atrybuty ALT oraz Title. Ich uzupełnienie będzie możliwe przy przejściu z poziomu panelu administracyjnego Comarch e-Sklep do sekcji Marketing > Blog przy dodawaniu wpisu.

6. Dla zdjęć w plikach użytkownika w sekcji "Twoje pliki"

Pliki użytkownika w e-Sklepie to dedykowana przestrzeń do przechowywania własnych materiałów, które mogą zostać wykorzystane w sklepie internetowym. Pliki można przesyłać za pośrednictwem panelu administracyjnego, w sekcji Ustawienia > Twoje pliki. Maksymalny rozmiar pojedynczego pliku: 3 MB. Pliki, które dodawane są we wspomnianym obszarze, od wersji 2025.4 będą posiadały atrybuty ALT oraz Title. Ich uzupełnienie będzie możliwe przy przejściu z poziomu panelu administracyjnego do sekcji Ustawienia > Twoje pliki przy edycji pliku lub jego dodaniu.
Wskazówka
Jeśli posiadasz sklep wielojęzyczny, to we wszystkich tych wymienionych powyżej obszarach, znajdują się również obrazki dla danego języka. Pamiętaj, alby atrybut ALT zdefiniować dla każdego z nich!
 

Atrybut Title - obowiązkowy czy nie?

Atrybut title jest przydatny do przekazywania dodatkowych informacji o elementach HTML, widocznych jako podpowiedź po najechaniu kursorem. Może być używany w ikonach bez podpisu, formularzach czy linkach, aby dostarczyć kontekst. Nie jest jednak obowiązkowy według WCAG, ponieważ czytniki ekranu często go ignorują, a osoby nawigujące klawiaturą mogą nie mieć do niego dostępu.  

Zalecenia dla udostępnianych treści - ogranicz migające elementy

Jako właściciel sklepu musisz sam zadbać o to, jakie treści umieszczasz na swojej stronie. Migające elementy, takie jak animacje czy reklamy, mogą wywoływać problemy u osób z padaczką fotogenną. Według kryteriów WCAG 2.1 zalecane jest ograniczenie migających treści do maksymalnie trzech błysków na sekundę lub ich całkowite usunięcie. Jako właściciel sklepu musisz dbać o statyczne elementy lub spokojne animacje. Również treści zawarte w różnego typu prospektach, gazetkach czy folderach informacyjnych w formie dokumentów powinny być zgodne z wytycznymi WCAG.

1.Obrazki i bannery

W szablonach  graficznych takie elementy mogą pojawić się na przykład w bannerach i elementach tekstowych ze zdjęciem. Upewnij się, że grafiki tam zamieszczone są odpowiednie, czyli bez intensywnych animacji i nieodpowiednich kolorów. Szczególną uwagę zwróć na pliki w formacie GIF. Sprawdź, w jaki sposób możesz skonfigurować bannery oraz elementy tekstowe ze zdjęciem.  

2.Materiały audio i viedo

Aby sklep internetowy był w pełni dostępny zgodnie z WCAG, właściciele muszą zadbać o dodanie audiodeskrypcji i transkrypcji do materiałów multimedialnych (filmy, nagrania dźwiękowe). Choć oba rozwiązania służą poprawie dostępności, mają różne funkcje.
  • Audiodeskrypcja to dodatkowy opis dźwiękowy, który przedstawia istotne elementy wizualne nagrania osobom niewidzącym,
  • Transkrypcja to zapis tekstowy całej treści audio, umożliwiający odbiór treści osobom niesłyszącym, może to być w formie napisów dla audiodeskrypcji. 
Dodanie tych elementów leży po stronie właścicieli sklepów. Do filmów, które udostępniasz, dodaj zatem widoczne napisy, a także dobrej jakości opis dźwiękowy. Ich brak może wykluczyć część użytkowników i wpłynąć na komfort korzystania ze strony. Dobre praktyki dostępności to nie tylko wymóg, ale też inwestycja w lepsze doświadczenie klientów.  

3.Załączniki (m.in. instrukcje, katalogi)

Należy zadbać o to, aby wszystkie udostępniane w sklepie załączniki, takie jak instrukcje czy katalogi, były zgodne z wytycznymi WCAG, zapewniając tym samym ich pełną dostępność dla wszystkich użytkowników.

Dostosuj komunikację mailową - aktualizacja lub zmiana treści e-mail

Dostosowanie treści e-mail zgodnie z wytycznymi WCAG to kluczowy krok w budowaniu dostępnej i klarownej komunikacji. W tej części artykułu przedstawiamy rozwiązania zarówno dla domyślnych wiadomości, jak i tych modyfikowanych, aby zapewnić ich lepszą czytelność i dostępność dla wszystkich odbiorców.

1.Treści mailowe są domyślne, nie zostały sformatowane

Jeśli treści nie zostały przez Ciebie zmienione i stanowią domyślne treści, które są dostępne w Comarch e-Sklep, to wystarczy, że zaktualizujesz je. Aby to zrobić, należy przejść w panelu administracyjnym do zakładki Ustawienia > Treści formalne, a następnie wybrać „Wysyłka e-mail i SMS”. Zakładka ta zawiera treści wiadomości wysyłane do klientów po wykonaniu określonych akcji, np. po zakupie czy rejestracji. W Comarch e-Sklep istnieje możliwość przywrócenia standardowej treści pojedynczej wiadomości e-mail lub wszystkich jednocześnie. Opcja ta stanowi również aktualizację treści e-mail. "Przywróć domyślną treść" dostępna jest w panelu administracyjnym e-Sklepu w menu Ustawienia/ Treści formalne/ Wysyłka e-mail i SMS na szczegółach każdej wiadomości, po kliknięciu w przycisk Więcej:  

2.Treści mailowe są modyfikowane, zostały przeze mnie zmienione

Jeśli posiadasz własne, dostosowane do Twojej komunikacji marketingowej treści e-mail, to sprawdź, czy są one odpowiednio napisane i sformatowane. Zastosuj się do poniższych wskazówek. W jaki sposób poprawnie napisać i sformatować treści?
  • Struktura Stosuj nagłówki (<h1>, <h2> itd.) dla przejrzystości. Używaj krótkich akapitów i list punktowanych.
  • Tekst i formatowanie Zapewnij wysoki kontrast między tekstem a tłem. Wybieraj czytelne czcionki (sans-serif, min. 12-14 px). Nie używaj wyłącznie koloru do przekazywania informacji.
  • Obrazy i multimedia Dodawaj tekst alternatywny (alt text) do obrazów. Unikaj tekstu osadzonego w grafikach, jeśli można go przesłać jako tekst.
  • Linki i przyciski Stosuj opisowe teksty linków zamiast „Kliknij tutaj”. Upewnij się, że są łatwe do kliknięcia na ekranach dotykowych.
  • Język i czytelność Używaj prostego i zrozumiałego języka. Unikaj skrótów i branżowego żargonu, jeśli odbiorca może ich nie znać.
  • Testowanie Sprawdź wiadomość na różnych urządzeniach i czytnikach ekranu. Zweryfikuj zgodność ze standardami WCAG.
Szczegółowe informacje na temat edycji treści e-mail znajdują się a artykule: E-mail i SMS  

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Przystosowanie e-Sklepu do wymogów nie musi wiązać się z dużymi wydatkami na zmiany w kodzie. Kluczowe aspekty dostępności można wdrożyć samodzielnie, wykorzystując opcje dostępne w systemach Comarch ERP, a także Kreatorze Wyglądu czy Panelu Administracyjnym. Warto pamiętać, że poprawa dostępności to nie tylko obowiązek wynikający z przepisów, ale także realna szansa na zwiększenie grona klientów oraz podniesienie komfortu ich zakupów. Istnieje kilka ogólnodostępnych narzędzi, które pomogą Ci dostosować sklep do wymogów. Obszerna lista narzędzi do oceny dostępności stron internetowych, zgodnych z WCAG znajduje się na stronie: Web Accessibility Evaluation Tools List .  

Podsumowanie

Dostępność cyfrowa to nie jednorazowe przedsięwzięcie, lecz ciągły rozwój i udoskonalanie. Regularne sprawdzanie funkcjonalności, optymalizacja elementów wizualnych i dostosowywanie sposobów interakcji pozwalają na stałe podnoszenie jakości doświadczeń użytkowników. Dążenie do pełnej zgodności ze standardami WCAG 2.1/2.2 oraz wymogami Europejskiego Aktu o Dostępności (EAA) nie tylko ułatwia nawigację wszystkim odwiedzającym, ale także buduje pozytywny wizerunek i wzmacnia pozycję na rynku. Wdrażanie kolejnych usprawnień to inwestycja w przyszłość, która przynosi korzyści zarówno właścicielom, jak i ich klientom.

Posiadam gotowy szablon Comarch. Jak mogę go dostosować do kryteriów WCAG 2.1/2.2?

Spis treści

Wstęp

Sprawdź, jaki szablon posiadasz

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam gotowych szablonów Comarch? 

Jak zacząć?

Aktualizacja szablonu

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Pozostałe zmiany

Gdzie należy uzupełnić teksty alternatywne (alt)? 

Zalecenia dla udostępnianych treści – ogranicz migające elementy

Dostosuj komunikację mailową – aktualizacja lub zmiana treści e-mail

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Podsumowanie

Wstęp

Z dniem 28 czerwca 2025 roku w życie wejdą przepisy związane z implementacją ustawy z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług. Wdraża ona do polskiego prawa tzw. Europejski Akt o Dostępności (EAA) – unijną dyrektywę 2019/882. Celem ustawy jest zapewnienie, że kluczowe produkty i usługi będą dostępne dla wszystkich użytkowników, w tym osób z niepełnosprawnościami. Przedsiębiorcy mają czas do 28 czerwca 2025 roku, aby dostosować swoje produkty i usługi do nowych wymogów.
Wskazówka
Chcesz dowiedzieć się więcej o tych przepisach? Sprawdź artykuł w naszym Centrum Pomocy: Europejski Akt o Dostępności (EAA) i zapoznaj się ze szczegółami
W niniejszym artykule wskazujemy, jakie czynności należy wykonać, jeśli posiadasz jeden ze standardowych szablonów Comarch, czyli: Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii.   

Sprawdź, jaki szablon posiadasz

Nie wiesz, który szablon posiadasz? Możesz to sprawdzić w panelu administracyjnym Comarch e-Sklep. Aby to zrobić, z poziomu panelu administracyjnego przejdź do zakładki Wygląd sklepu/ Ustawienia a następnie, pod przyciskiem "Więcej" wybierz Edytuj ustawienia zaawansowane. W obszarze, który został wyświetlony, pojawi się kilka zakładek, a wśród nich zakładka "Szablon". Wybierz ją, po czym sprawdź szablon:   Jeśli Twój szablon to Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii, to możesz przejść do kolejnej części artykułu. Jeśli posiadasz własny szablon z indywidualnymi modyfikacjami, to przejdź do artykułu: Posiadam własny szablon, jak mogę go dostosować do kryteriów WCAG 2.1/2.2?  Jeśli posiadasz szablon Bursztyn, Agat lub Opal, to przejdź do artykułu: Posiadam szablon Bursztyn, Opal lub Agat, jak mogę go dostosować do kryteriów WCAG 2.1/2.2?  

Co zrobić jako właściciel e-Sklepu lub Partner, jeśli używam gotowych szablonów Comarch?

Jako właściciel e-Sklepu lub Partner Comarch zadbaj, aby zadbać o dostosowanie swojej witryny do obowiązujących przepisów. Nowe wymogi to wspólna odpowiedzialność:
  • Comarch e-Sklep – zajmiemy się kwestiami technicznymi w przypadku Gotowych Szablonów Comarch, do których należą m.in. zmiany w kodzie,
  • Właściciel, administrator lub Partner sklepu – musisz zadbać o treści i elementy, które dodajesz samodzielnie. Chodzi tu głównie opis produktów, zdjęcia i grafiki czy identyfikację wizualną. 
 

Jak zacząć?

Jeśli korzystasz z gotowych szablonów, takich jak Rubin, Szafir, Topaz, One Page Shop lub Dla Gastronomii, nie musisz przejmować się samodzielnym edytowaniem ich kodu. Wszystkie usprawnienia zostaną udostępnione wraz z aktualizacją, która pojawi się w czerwcu 2025 roku.

Aktualizacja szablonu

Wskazówka
Aktualizację szablonu wykonaj wtedy, kiedy będzie ona dostępna. Realizacja wersji 2025.4 przewidywana jest przed 28 czerwca 2025 roku, poinformujemy o niej w aktualnościach. Będzie ona zawierała zmiany związane z omawianymi tutaj przepisami.

Jak zaktualizować szablon?

Aby zaktualizować szablon i przejść na Topaz, One Page Shop, Dla Gastronomii, Rubin lub Szafir, należy skorzystać z aktualnej wersji Kreatora Wyglądu. Pamiętaj, że szablony Rubin i Szafir przeznaczone są tylko dla sklepów Enterprise i B2B. Odnośnik znajduje się również w panelu administracyjnym e-Sklepu w sekcji Wygląd sklepu > Kreator wyglądu.  Istnieją trzy możliwości aktualizacji tych szablonów:
  • Wygenerowanie zupełnie nowego szablonu w Kreatorze Wyglądu oraz wgranie go do e-Sklepu,
  • Wybór i edycja jednego z gotowych układów i jego modyfikacja,
  • Import posiadanego szablonu do Kreatora Wyglądu oraz ponowne wygenerowanie go w najnowszej wersji.
Wygenerowany z Kreatora Wyglądu szablon należy wgrać do e-Sklepu. W panelu administracyjnym e-Sklepu, w sekcji Wygląd sklepu znajduje się bezpośredni odnośnik do importu szablonu z Kreatora wyglądu. Szczegółowa instrukcja dostępna jest w artykule Jak wyeksportować i zaimportować swój szablon w e-Sklepie?
Pamiętaj o zapisaniu szablonu oraz opublikowaniu go w e-Sklepie. Zmiany wprowadzone w ustawieniach zostaną zsynchronizowane do sklepu po 10 minutach.
Wskazówka
Informacje na temat aktualizacji znajdują się w Centrum Pomocy: Jak zaktualizować szablon do najnowszej wersji?  
Więcej informacji na temat Kreatora Wyglądu B2C oraz B2B znajduje się w Centrum Pomocy:

Odpowiedni kontrast kolorów w e-Sklepie – wymóg WCAG na poziomie AA

Jednym z głównych wymogów WCAG jest stosowanie odpowiednich kontrastów na stronach internetowych. Jeśli w wybranym szablonie graficznym wykorzystujesz któryś ze standardowych motywów kolorystycznych dostępnych w kreatorach, to zostaną one dostosowane do wymagań wynikających z przepisów. Jeśli natomiast masz przygotowany własny motyw kolorystyczny lub chcesz zmienić część kolorów zastosowanych w szablonie, to pamiętaj, że muszą one posiadać odpowiednie kontrasty. Wszelkich zmian kolorystycznych możesz dokonać w Kreatorze Wyglądu.  Odpowiedni kontrast między tekstem a tłem jest kluczowy dla osób z dysfunkcjami wzroku. WCAG 2.1 określa minimalny współczynnik kontrastu (4.5:1 dla tekstu zwykłego i 3:1 dla tekstu dużego). Ważne jest również unikanie łączenia kolorów, które mogą być trudne do rozróżnienia, takich jak czerwony i zielony. Kontrasty po modyfikacji kolorów możesz sprawdzić np. narzędziem WAVE. WAVE to popularny, dostępny dla wszystkich zestaw narzędzi do oceny dostępności stron internetowych. Rozszerzenia WAVE dla Chrome, Firefox i Edge, umożliwiają testowanie bezpośrednio w tych przeglądarkach, bez przesyłania danych na serwer WAVE. WAVE znajdziesz pod linkiem: WAVE Web Accessibility Evaluation Tools.  

Jak sprawdzić kontrast?

Przejdź na stronę swojego e-Sklepu. Włącz wtyczkę WAVE. Po prawej stronie ekranu wyświetli się panel boczny, na pierwszej zakładce widać podsumowanie całej strony: Już na tym etapie możesz przejść do szczegółów, klikając "View details". Możesz w tym miejscu przejść także do zakładki "Contrast".   Czerwone kwadraty oznaczają obszar do poprawy. Przejdź przez stronę, aby zobaczyć szczegóły każdego z nich. Po kliknięciu na jeden z kwadratów pokaże się komunikat dotyczący kontrastu: W panelu bocznym pojawi się dokładna informacja na temat koloru. W tym miejscu, korzystając z suwaków możesz od razu dostosować kolor tak, aby był odpowiedni i sprawdzić, czy spełnia wymagania WCAG.  

Gdzie dostosować kolory?

Kolory w szablonie możesz zmienić korzystając z Kreatora Wyglądu. Po imporcie szablonu, edycji lub stworzeniu nowego projektu, przejdź do zakładki "Style" i edytuj motyw kolorystyczny:   Następnie możesz zmieniać swobodnie kolor na wybranych elementach:   Zmian możesz dokonać także z poziomu panelu administracyjnego, przechodząc do zakładki Wygląd Sklepu > Ustawienia.

Pozostałe zmiany

Poza zmianami w szablonie graficznym sklepu należy uzupełnić szereg danych. Znaczącą część tych elementów możesz wykonać już teraz, nie czekając na aktualizację Comarch e-Sklep. Poniżej znajduje się lista zmian, które należy wdrożyć w swoim e-Sklepie.

Teksty alternatywne ("Alt", alty) w Comarch e-Sklep

Twój szablon musi obsługiwać parametr "alt" w obrazkach. Jeśli wykorzystasz aktualny szablon standardowy od Comarch to obsługę zapewnia Comarch e-Sklep, jeśli zdecydowałeś się na indywidualny szablon lub samodzielną aktualizację starszej wersji to upewnij się, że w szablonie są obsługiwane parametry "alt" we wskazanych elementach. Teksty alternatywne („alt”) to krótkie opisy obrazków, które pozwalają osobom korzystającym z czytników ekranu zrozumieć, co znajduje się na zdjęciu. Atrybut „alt” jest szczególnie ważny dla zdjęć produktów, ponieważ umożliwia przekazanie najważniejszych informacji o produktach.  Dlaczego tekst alternatywny jest taki ważny? 
  • Pomaga osobom korzystającym z czytników ekranu, które odczytują tekst alternatywny na głos,
  • Poprawia dostępność stron internetowych, czyniąc je bardziej przyjaznymi dla wszystkich użytkowników,
  • Wpływa na pozycjonowanie w wyszukiwarkach, ponieważ dobrze opisane obrazy są lepiej interpretowane przez algorytmy Google.   
Dobrze sformułowany opis powinien być zwięzły, ale wystarczająco informacyjny. Poniżej prezentujemy przykłady dobrego i złego zastosowania opisów alternatywnych:
Przyklad
Poprawne :
  • Czerwona sukienka maxi z rozcięciem, modelka na tle miejskiego pejzażu.
  • Białe sneakersy z grubą podeszwą, ustawione na drewnianej podłodze.
  • Nowoczesna sofa w kolorze szarym, z drewnianymi nogami, ustawiona w minimalistycznym salonie.
  • Słuchawki bezprzewodowe z aktywną redukcją szumów, na białym tle.
Niepoprawne:
  • Sukienka.
  • Buty sportowe.
  • Fajna kanapa.
  • Najlepszy sprzęt w dobrej cenie!

Gdzie należy uzupełnić teksty alternatywne (alt)?

1. Dla zdjęć towarów w systemach Comarch ERP

Korzystam z Comarch ERP Optima
Po uruchomieniu Comarch ERP Optima przejdź na pozycję cennika, a następnie edytuj wybrany towar. Następnie przejdź na zakładkę "Atrybuty", a następnie do sekcji "Zdjęcia i załączniki". W tym miejscu zobaczysz kolumnę "Atrybut Alt".
Po dwukrotnym kliknięciu możliwe jest uzupełnienie opisu alternatywnego: Po dokonaniu zmian należy je zapisać. Po wykonaniu wszystkich modyfikacji należy wykonać synchronizację.

Korzystam z Comarch ERP XL

Po uruchomieniu ERP XL przejdź do Sprzedaż > Towary , a następnie na zakładkę "Załączniki". Opis alternatywny dla towaru stanowi Kod:    
Korzystam z Comarch ERP XT
Przejdź na kartę produktu, a następnie do zakładki "Zdjęcia". Wśród pól do uzupełnienia znajdziesz "Opis alternatywny (Alt)".   W tym miejscu wpisz odpowiednią treść, a następnie zapisz wprowadzone zmiany.  

2. Dla zdjęć w bannerach – w panelu administracyjnym Comarch e-Sklep

Pamiętaj, alby alty (opisy alternatywne) były uzupełnione także w przypadku bannerów. Aby to zrobić, przejdź z poziomu panelu administracyjnego do Wygląd sklepu > Ustawienia > Bannery  do edycji swoich bannerów. Klikając na odpowiedni kafelek pojawią się opcje z uzupełnieniem Alt:

3. Dla zdjęć stosowanych na stronach z treściami formalnymi – w panelu administracyjnym Comarch e-Sklep

Obrazki możesz dodawać także do treści, które udostępniasz na specjalnych stronach, takich jak np. Regulamin sklepu, Polityka prywatności, Wysyłka itp. W obszarze do edycji, który jest dostępny z poziomu panelu administracyjnego w sekcji Ustawienia > Treści formalne edytuj interesującą Cię treść, a dodając obrazek uzupełnij alt:    

4. Dla zdjęć wprowadzonych w opisie towaru i opisie kategorii

Dodając opisy produktów i kategorii, warto upewnić się, że linkowane zdjęcia zawierają poprawnie uzupełniony atrybut "alt". To kluczowe dla osób korzystających z czytników ekranu. Dbałość o ten detal poprawia dostępność strony i zwiększa jej widoczność w sieci. Opis towaru i kategorii możesz dodać w systemach Comarch ERP.  Opis kategorii możesz ustawić również z poziomu panelu administracyjnego, bez konieczności korzystania z systemu ERP. Szczegółowe informacje znajdują się w artykule: Jak edytować kategorię w Comarch e-Sklep? 

5. Dla zdjęć w Blogu

Obrazki, które dodawane są dla wpisów blogowych od wersji 2025.4 będą posiadały atrybuty ALT oraz Title. Ich uzupełnienie będzie możliwe przy przejściu z poziomu panelu administracyjnego Comarch e-Sklep do sekcji Marketing > Blog przy dodawaniu wpisu:

6. Dla zdjęć w plikach użytkownika w sekcji "Twoje pliki"

Pliki użytkownika w e-Sklepie to dedykowana przestrzeń do przechowywania własnych materiałów, które mogą zostać wykorzystane w sklepie internetowym. Pliki można przesyłać za pośrednictwem panelu administracyjnego, w sekcji Ustawienia > Twoje pliki. Maksymalny rozmiar pojedynczego pliku: 3 MB. Pliki, które dodawane są we wspomnianym obszarze, od wersji 2025.4 będą posiadały atrybuty ALT oraz Title. Ich uzupełnienie będzie możliwe przy przejściu z poziomu panelu administracyjnego do sekcji Ustawienia > Twoje pliki przy edycji pliku lub jego dodaniu.
Wskazówka
Jeśli posiadasz sklep wielojęzyczny, to we wszystkich tych wymienionych powyżej obszarach, znajdują się również obrazki dla danego języka. Pamiętaj, alby atrybut ALT zdefiniować dla każdego z nich!
 

Atrybut title - obowiązkowy czy nie?

Atrybut title jest przydatny do przekazywania dodatkowych informacji o elementach HTML, widocznych jako podpowiedź po najechaniu kursorem. Może być używany w ikonach bez podpisu, formularzach czy linkach, aby dostarczyć kontekst. Nie jest jednak obowiązkowy według WCAG, ponieważ czytniki ekranu często go ignorują, a osoby nawigujące klawiaturą mogą nie mieć do niego dostępu.  

Zalecenia dla udostępnianych treści - ogranicz migające elementy

Jako właściciel sklepu musisz sam zadbać o to, jakie treści umieszczasz na swojej stronie. Migające elementy, takie jak animacje czy reklamy, mogą wywoływać problemy u osób z padaczką fotogenną. Według kryteriów WCAG 2.1 zalecane jest ograniczenie migających treści do maksymalnie trzech błysków na sekundę lub ich całkowite usunięcie. Jako właściciel sklepu musisz dbać o statyczne elementy lub spokojne animacje. Również treści zawarte w różnego typu prospektach, gazetkach czy folderach informacyjnych w formie dokumentów powinny być zgodne z wytycznymi WCAG.

1.Obrazki i bannery

W szablonach graficznych takie elementy mogą pojawić się na przykład w bannerach i elementach tekstowych ze zdjęciem. Upewnij się, że grafiki tam zamieszczone są odpowiednie, czyli bez intensywnych animacji i nieodpowiednich kolorów. Szczególną uwagę zwróć na pliki w formacie GIF. Sprawdź, w jaki sposób możesz skonfigurować bannery oraz elementy tekstowe ze zdjęciem.  

2.Materiały audio i viedo

Aby sklep internetowy był w pełni dostępny zgodnie z WCAG, właściciele muszą zadbać o dodanie audiodeskrypcji i transkrypcji do materiałów multimedialnych (filmy, nagrania dźwiękowe). Choć oba rozwiązania służą poprawie dostępności, mają różne funkcje.
  • Audiodeskrypcja to dodatkowy opis dźwiękowy, który przedstawia istotne elementy wizualne nagrania osobom niewidzącym,
  • Transkrypcja to zapis tekstowy całej treści audio, umożliwiający odbiór treści osobom niesłyszącym, może to być w formie napisów dla audiodeskrypcji.
Dodanie tych elementów leży po stronie właścicieli sklepów. Do filmów, które udostępniasz, dodaj zatem widoczne napisy, a także dobrej jakości opis dźwiękowy. Ich brak może wykluczyć część użytkowników i wpłynąć na komfort korzystania ze strony. Dobre praktyki dostępności to nie tylko wymóg, ale też inwestycja w lepsze doświadczenie klientów.

Dostosuj komunikację mailową - aktualizacja lub zmiana treści e-mail

Dostosowanie treści e-mail zgodnie z wytycznymi WCAG to kluczowy krok w budowaniu dostępnej i klarownej komunikacji. W tej części artykułu przedstawiamy rozwiązania zarówno dla domyślnych wiadomości, jak i tych modyfikowanych, aby zapewnić ich lepszą czytelność i dostępność dla wszystkich odbiorców.

1.Treści mailowe są domyślne, nie zostały sformatowane

Jeśli treści nie zostały przez Ciebie zmienione i stanowią domyślne treści, które są dostępne w Comarch e-Sklep, to wystarczy, że zaktualizujesz je. Aby to zrobić, należy przejść w panelu administracyjnym do zakładki Ustawienia > Treści formalne, a następnie wybrać „Wysyłka e-mail i SMS”. Zakładka ta zawiera treści wiadomości wysyłane do klientów po wykonaniu określonych akcji, np. po zakupie czy rejestracji. W Comarch e-Sklep istnieje możliwość przywrócenia standardowej treści pojedynczej wiadomości e-mail lub wszystkich jednocześnie. Opcja ta stanowi również aktualizację treści e-mail. "Przywróć domyślną treść" dostępna jest w panelu administracyjnym e-Sklepu w menu Ustawienia/ Treści formalne/ Wysyłka e-mail i SMS na szczegółach każdej wiadomości, po kliknięciu w przycisk Więcej:  

2.Treści mailowe są modyfikowane, zostały przeze mnie zmienione

Jeśli posiadasz własne, dostosowane do Twojej komunikacji marketingowej treści e-mail, to sprawdź, czy są one odpowiednio napisane i sformatowane. Zastosuj się do poniższych wskazówek. W jaki sposób poprawnie napisać i sformatować treści?
  • Struktura Stosuj nagłówki (<h1>, <h2> itd.) dla przejrzystości. Używaj krótkich akapitów i list punktowanych.
  • Tekst i formatowanie Zapewnij wysoki kontrast między tekstem a tłem. Wybieraj czytelne czcionki (sans-serif, min. 12-14 px). Nie używaj wyłącznie koloru do przekazywania informacji.
  • Obrazy i multimedia Dodawaj tekst alternatywny (alt text) do obrazów. Unikaj tekstu osadzonego w grafikach, jeśli można go przesłać jako tekst.
  • Linki i przyciski Stosuj opisowe teksty linków zamiast „Kliknij tutaj”. Upewnij się, że są łatwe do kliknięcia na ekranach dotykowych.
  • Język i czytelność Używaj prostego i zrozumiałego języka. Unikaj skrótów i branżowego żargonu, jeśli odbiorca może ich nie znać.
  • Testowanie Sprawdź wiadomość na różnych urządzeniach i czytnikach ekranu. Zweryfikuj zgodność ze standardami WCAG.
Szczegółowe informacje na temat edycji treści e-mail znajdują się a artykule: E-mail i SMS  

3.Załączniki (m.in. instrukcje, katalogi)

Należy zadbać o to, aby wszystkie udostępniane w sklepie załączniki, takie jak instrukcje czy katalogi, były zgodne z wytycznymi WCAG, zapewniając tym samym ich pełną dostępność dla wszystkich użytkowników.  

Dodatkowe narzędzia pomocne przy wdrażaniu WCAG

Przystosowanie e-Sklepu do wymogów nie musi wiązać się z dużymi wydatkami na zmiany w kodzie. Kluczowe aspekty dostępności można wdrożyć samodzielnie, wykorzystując opcje dostępne w systemach Comarch ERP, a także Kreatorze Wyglądu czy Panelu Administracyjnym. Warto pamiętać, że poprawa dostępności to nie tylko obowiązek wynikający z przepisów, ale także realna szansa na zwiększenie grona klientów oraz podniesienie komfortu ich zakupów. Istnieje kilka ogólnodostępnych narzędzi, które pomogą Ci dostosować sklep do wymogów. Obszerna lista narzędzi do oceny dostępności stron internetowych, zgodnych z WCAG znajduje się na stronie: Web Accessibility Evaluation Tools List .  

Podsumowanie

Dostępność cyfrowa to nie jednorazowe przedsięwzięcie, lecz ciągły rozwój i udoskonalanie. Regularne sprawdzanie funkcjonalności, optymalizacja elementów wizualnych i dostosowywanie sposobów interakcji pozwalają na stałe podnoszenie jakości doświadczeń użytkowników. Dążenie do pełnej zgodności ze standardami WCAG 2.1/2.2 oraz wymogami Europejskiego Aktu o Dostępności (EAA) nie tylko ułatwia nawigację wszystkim odwiedzającym, ale także buduje pozytywny wizerunek i wzmacnia pozycję na rynku. Wdrażanie kolejnych usprawnień to inwestycja w przyszłość, która przynosi korzyści zarówno właścicielom, jak i ich klientom.