EAA, czyli Europejski Akt o Dostępności, nakłada na właścicieli sklepów internetowych obowiązek dostosowania ich do standardów WCAG 2.1. Jako dostawca oprogramowania dla sklepów dostarczamy także wskazówek, które umożliwią Ci dostosowanie się do wymogów.
Zakres dostosowania oprogramowania – szablon Storefront
| Audyt WCAG | Szablon Storefront przeszedł zewnętrzny audyt i został dostosowany do wymogów WCAG 2.2 na poziomie AA (wymagana jest wersja 2.1, ale dostosowaliśmy również do wytycznych, które pojawiały się w nowej wersji, czyli aż 8. nowych kryteriów sukcesu). Nowe tworzone przez nas moduły są dodatkowo testowane pod kątem dostępności przy użyciu czytnika VoiceOver przed ich wydaniem. |
| Zakupy dostępne z użyciem klawiatury | Można znaleźć produkt w sklepie, wybrać jego warianty, dodać do koszyka i wypełnić potrzebne dane do zamówienia poruszając się wyłącznie klawiaturą. W sklepie nie ma pułapek dla klawiatury i wszystkie elementy i funkcje są dostępne dla osób, które nie korzystają z myszki komputerowej. Podczas poruszania się klawiaturą focus jest widoczny (ma odpowiedni kontrast). Poruszanie się klawiaturą zostało usprawnione również w wyskakujących oknach (modale) – focus przenoszony jest do otwartego okna np. logowania i porusza się tylko w obrębie tego okna. Ograniczenia poruszania się tylko po modalu działa również podczas korzystania z czytnika przy przechodzeniu strzałkami po elementach nieaktywnych. |
| Korzystanie z nawigacji | Menu w Storefront zostało dostosowane do poruszania się po nim klawiaturą i czytnikiem. Czytnik prawidłowo odczyta liczbę pozycji, jakie znajdują się w menu, a także poinformuje o stanie rozwinięcia i zwinięcia menu. Została również zmieniona kolejność odczytywania pozycji w menu oraz kolejność przechodzenia po menu przy użyciu klawiatury – dzięki temu łatwiej będzie zapoznać się z listą kategorii na drugim poziomie menu. Poprawione pod kątem dostępności zostanie również korzystanie z nawigacji breadcrumbs (okruszkami chleba) dla urządzeń mobilnych. |
| Dostosowanie do czytników | Korzystanie z technologii wspomagających, takich jak czytniki ekranu, to inny sposób odkrywania strony. Użytkownicy poruszający się po stronie mają swoje przyzwyczajenia i nawyki na przykład przemieszczają się po nagłówkach, co zastępuje szybkie skanowanie strony wzrokiem. Zadbaliśmy o prawidłową i intuicyjną hierarchię nagłówków w szablonie, aby umożliwić przeskakiwanie do interesujących sekcji, bez przeglądania całej treści krok po kroku. Nazwy produktów na liście oraz w modułach takich jak Promocje, Nowości zawsze mają ten sam nagłówek h3, co będzie pomocne dla osób, które odwiedzą sklep ponownie. Alternatywne opisy zdjęć produktów, zostaną odczytane dopiero na karcie produktu, dzięki temu można będzie szybciej poznać produkt i jego cenę bez zagłębiania się w dokładny opis. Szablon Storefront został wzbogacony o instrukcje, które są widoczne tylko dla czytnika i pomagają zrozumieć kontekst strony osobom z niepełnosprawnością wzroku np. zamiast 154 zł czytnik poinformuje “cena 154 zł”.Osoby korzystające z czytnika będą miały dostęp do tych samych komunikatów i alertów, ale również do dodatkowych informacji np. że został otwarty formularz do wypełnienia danych, a strzałka przewinie do następnego zdjęcia. Staraliśmy się również unikać powtórzeń, aby przyspieszyć odczytywanie całej strony oraz oznaczyć elementy, które przez czytnik mają zostać pominięte, bo pełnią funkcję dekoracyjną (są to np. separatory oddzielające wizualnie moduły). |
| Kontrast elementów w domyślnym szablonie | Odpowiedni kontrast w sklepie internetowym to kluczowy element zarówno dla dostępności, jak i doświadczenia użytkownika. Tekst musi wyraźnie odróżniać się od tła, najlepiej osiągając współczynnik kontrastu minimum 4,5:1 dla standardowego tekstu i 3:1 dla dużych nagłówków, zgodnie z wytycznymi WCAG. Przyciski typu „Dodaj do koszyka” czy „Zamów i zapłać” wymagają szczególnej dbałości o kontrast, ponieważ są kluczowymi elementami konwersji. Powinny one nie tylko spełniać minimalne wymogi kontrastu (3:1 i 4,5:1), ale również wyróżniać się na stronie. Domyślnie ustawione kolory w szablonie spełniają kryteria kontrastu. W sklepie został poprawiony kolor focusa, aby spełniał kryteria kontrastu (3:1). Kolor focusa korzysta z koloru głównego ustawionego w SVE, więc jeśli zadbasz o to, aby kolor przycisku miał prawidłowy kontrast, kolor focusa będzie również prawidłowy. W przypadku takich elementów jak buttony ramka focusa jest oddalona, aby zachować kontrast. Zasada ta dotyczy również pól formularza. Kontrast można sprawdzić np. https://webaim.org/resources/linkcontrastchecker/ |
Zakres dostosowania oprogramowania – Szablon podstawowy RWD
| Audyt WCAG | Szablon RWD dostosowujemy do wymogów WCAG 2.1 na poziomie AA. |
| Zakupy dostępne z użyciem klawiatury | Dostosowujemy szablon podstawowy tak, by możliwe były w nim zakupy za pośrednictwem klawiatury. Prace obejmują między innymi poprawki związane z prawidłowym focusem, czyli obramowaniem elementu, który obecnie zaznacza użytkownik. Podczas poruszania się klawiaturą focus jest widoczny (ma odpowiedni kontrast). Poruszanie się klawiaturą zostanie usprawnione również w wyskakujących oknach (modale) – focus przenoszony jest do otwartego okna np. logowania i porusza się tylko w obrębie tego okna. |
| Korzystanie z nawigacji | Nawigacja w sklepie zostanie poprawiona w zakresie kontrastów elementów oraz dostępności z klawiatury. Czytnik prawidłowo odczyta główne pozycje menu, ale i aktualną pozycję użytkownika na wybranej stronie (opisy paginacji). |
| Dostosowanie do czytników | Dostosowujemy szablon podstawowy do lepszej obsługi za pomocą czytników ekranów. Oznacza to, że wprowadzamy m.in. atrybuty. Dostarczają informacji o odpowiednim przeznaczeniu treści w sklepach oraz ich tekstowe alternatywy – osoby posługujące się czytnikami zyskują pełną informację o tym, jaki element przeglądają czy np. dodają do koszyka. (Pozwala to zrozumieć klientowi kontekst, np. którego produktu dotyczy przycisk “Do koszyka”. Uzupełniamy opisy komunikatów odczytywane przez czytniki podczas uzupełniania formularzy, by wnosiły wartość użytkową klientowi korzystającemu ze sklepu. Elementy, które nie wnoszą istotnych informacji, a mają jedynie walory dekoracyjne, zostają wyłączone dla czytników. To pozwala na zachowanie wysokiej czytelności treści. |
| Kontrast elementów w domyślnym szablonie | Zapewniamy w szablonie podstawowym prawidłowe wartości kontrastu dla elementów w sklepie. Odpowiedni kontrast w sklepie internetowym to kluczowy element zarówno dla dostępności, jak i doświadczenia użytkownika. Tekst musi wyraźnie odróżniać się od tła, najlepiej osiągając współczynnik kontrastu minimum 4,5:1 dla standardowego tekstu i 3:1 dla dużych nagłówków, zgodnie z wytycznymi WCAG. Przyciski typu „Dodaj do koszyka” czy „Zamów i zapłać” wymagają szczególnej dbałości o kontrast, ponieważ są kluczowymi elementami konwersji. Powinny one nie tylko spełniać minimalne wymogi kontrastu (4,5:1 – kontrast tła względem buttonu), ale również wyróżniać się na stronie (3:1 – jako element interfejsu do tła) – zweryfikuj je w sklepie internetowym klienta. Dokonaj dodatkowej oceny w zakresie wielkości fontów na przyciskach. Kontrast można sprawdzić np. https://webaim.org/resources/linkcontrastchecker/ |
Na co zwrócić szczególną uwagę w zmodyfikowanych szablonach?
Jako Shoper dokonujemy zmian wymaganych przez WCAG jedynie w szablonach podstawowych. Narzucenie aktualizacji widoków w sklepie mogłoby spowodować problemy i/lub konflikty z istniejącymi ustawieniami dokonanymi przez Ciebie. Oznacza to, że o zmodyfikowane szablony muszisz zadbać samodzielnie.
Zakres:
- zmodyfikowane pliki .tpl
- modyfikacje w kolorach
- modyfikacje kontrastów
- integracje dodatkowe
- dodatkowe kody CSS / JS
- makra własne i moduły własne (w technologii Storefront)
Co sprzedawca musi zrobić we własnym zakresie?
Skorzystaj z wiarygodnej ankiety: https://baforum.pl/czy-obejmie-cie-polski-akt-o-dostepnosci Rekomendujemy jednak, by niezależnie od wyniku ankiety każdy właściciel sklepu internetowego zadbał o dostępność sklepu celem poszerzania grupy odbiorców.
Nie tylko w trosce o pozycjonowanie, ale i o wsparcie klientów z niepełnosprawnościami (korzystających z czytników) – zadbaj o to, żeby wszystkie zdjęcia produktów w panelu miały opisane teksty alternatywne.
Jeśli w panelu pola zostaną wypełnione, opisy będą prawidłowo wykorzystywane w szablonie Storefront dla osób korzystających z technik wspomagających w wielu miejscach sklepu.
Dokładna informacja, co jest na zdjęciu produktu zostanie odczytana dopiero po przejściu na kartę produktu. Jest to sposób korzystania z listy produktów, jaki preferują osoby z niepełnosprawnością wzroku.
Istotne są również opisy alternatywne dla innych zdjęć, jakie występują w szablonie. Jeśli na stronie głównej umieszczasz baner – opisz co się na nim znalazło. Natomiast jeśli zdjęcie jest tylko dekoracją dla sloganu, pozostaw pole alt puste. Wtedy czytnik pominie tę informację.
Opisy zdjęć produktowych nie powinny być puste, nie powinny mieć nazwy zdjęcia np. 12b.jpg, ani powtarzać jedynie nazwy produktu. Opis alternatywny ma pomóc w wyborze i zakupie konkretnego produktu. Jeśli w sklepie prezentujemy zdjęcie z przodu, tyłu, boku, zbliżenie na detal i całą stylizację z użyciem produktu, to zdjęcia nie powinny mieć jednego wspólnego opisu alternatywnego “czarna bluza z kapturem”. Zamiast tego napisz, że modelka na zdjęciu do bluzy nosi jeansy z prostą nogawką, a stylizację uzupełniają duże złote kolczyki.
Pole Opis zdjęcia w panelu: (Produkty > Edycja produktu > Galeria) zostało rozdzielone na dwa pola:
Opis (SEO) – widoczny dla wyszukiwarek i czytników ekranu (atrybut “alt”),
Opis (dostępność) – tylko dla czytników ekranu (Pozostaw to pole puste, aby czytnik skorzystał z pola Opis(SEO)).
Opisy dodane w polu “Opis zdjęcia” będą nadal prawidłowo odczytane przez narzędzia asystujące (czytniki ekranu). Nie musisz ich przenosić ani kopiować. Polami można również zarządzać przez API.
W galerii pełnoekranowej będzie wyświetlany krótki “Opis (SEO)”. Nie musisz martwić się, że bardzo dokładne opisy będą rozpraszać klienta podczas oglądania galerii zdjęć. W szablonie Storefront opis wyświetlany nad zdjęciem można również ukryć w konfiguracji modułu “Galeria zdjęć”.
Po zmianie kolorów w Shoper Visual Editor, upewnij się że teksty, linki i przyciski np. “Do koszyka” nadal spełniają wymogi kontrastu. Kontrast koloru tekstu do koloru tła powinien wynosić 4,5:1. Kontrast przycisku do koloru tła powinien wynosić minimum 3:1 (a tekstu na przycisku do tła przycisku 4,5:1). Stany przycisku (hover, focus, active) również powinny zachowywać odpowiedni kontrast. Kontrast koloru linka do koloru tekstu to 3:1.
Korzystając z czytników można w prostu sposób nawigować po nagłówkach, aby szybciej odnaleźć interesujące treści. Zadbaj o to, żeby struktura nagłówków była intuicyjna. Podobnie jak wielkość nagłówka pomaga ocenić jego wagę, tak samo czytnik rozróżnia prawidłowo opisane nagłówki w kodzie strony. Nagłówki w wielu modułach mają domyślną wielkość h2, która jest zgodna z hierarchią nagłówków w domyślnym układzie szablonu Storefront i RWD. Pamiętaj również o nagłówkach na stronach informacyjnych.
Zamieść w regulaminie sklepu informację o tym czy: sklep spełnia / jest po audycie i aktywnie dąży do spełniania / częściowo spełnia kryteria dostępności WCAG 2.1 na poziomie AA. Dla e-commerce nie jest wymagana deklaracja dostępności przygotowana według wzoru PFRON. Przykład:
{shop_company_name} dokłada wszelkich starań, aby strona sklepu internetowego {shop_url} była zgodna z wymaganiami przewidzianymi ustawą z dnia 26 kwietnia 2024 r. o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze.
Zapewnienie zgodności wynika z dostosowania sklepu internetowego do wymagań standardu Web Content Accessibility Guidelines (WCAG) 2.1 na poziomie AA (odpowiadającym normie EN 301549: 2021 rozdział 9).
Jeśli nie uda Ci się spełnić wszystkich kryteriów WCAG 2.1 na poziomie AA, wskaż z jaką funkcją lub elementem sklepu jest problem. Zadeklaruj, w jakim terminie problem zostanie rozwiązany (nie później niż 28.06.2030 r.).
Poinformuj, jeśli przeprowadzono profesjonalny audyt sklepu lub napisz, na jakiej podstawie odbyła się samoocena. Można skorzystać z narzędzi wymienionych we wzorze:
- lista kontrolna GOV.PL lub A11Project
- i narzędzie służące do automatycznego wykrywania niektórych błędów dostępności cyfrowej WAVE
Dodatkowe elementy:
Jeśli dodajesz w sklepie film (moduł youtube), zadbać o to, aby uruchamiany był z wyłączonym dźwiękiem, zwłaszcza jeśli odtwarzany jest automatycznie. Dla użytkowników niewidomych dźwięki odtwarzane na stronie będą utrudniały zrozumienie głosu lektora z programu czytającego. Kontrola nad dźwiękiem wymagana jest już w WCAG na poziomie A (1.4.2).
Dodatkowo – warto uzupełniać opis filmu, który zostanie odczytany przez czytniki ekranu. Dzięki temu osoba niewidoma ma możliwość zrozumienia treści prezentowanych w filmie. Jeśli posiadasz film z audiodeskrypcją lub transkrypcję filmu możesz umieścić moduł “Treść i multimedia” pod modułem “Youtube” i dodać link do dodatkowych materiałów.