¶ Dostępność cyfrowa (WCAG, EAA) w sklepie Hummerce
Dostępność cyfrowa w Hummerce określa, co szablon sklepu zapewnia osobom korzystającym z klawiatury, czytników ekranu i powiększenia, a co sklep musi zrobić sam, żeby zbliżyć się do wymagań dostępności. Platforma nie deklaruje zgodności z WCAG ani z Europejskim Aktem o Dostępności (EAA) - to, czy konkretny sklep spełnia wymagania, pokazuje dopiero audyt dostępności tego sklepu.
Stan na wersję Hummerce 2.33 (elementy dostępności w szablonie BS5; drobne poprawki BS4 w 2.34), aktualizacja 2026-09-28.
¶ Korzyści i zastosowania
- Klienci z niepełnosprawnościami, starsi i korzystający tylko z klawiatury mogą przejść całą ścieżkę zakupu - od wyszukania towaru do złożenia zamówienia.
- Wdrożenie na szablonie BS5 zaczyna się od gotowych podstaw (obszary strony, opisy przycisków, oznaczenia błędów), więc audyt i poprawki obejmują głównie grafikę i treści sklepu, a nie budowę szablonu od zera.
- Opisy zdjęć i poprawne nagłówki pomagają też w wyszukiwarkach (SEO).
- Kontrast i czytelne komunikaty błędów zmniejszają liczbę porzuconych formularzy u wszystkich klientów, także na telefonie w słońcu.
¶ Jak to wygląda
Zrzuty ze sklepu demonstracyjnego Hummerce (szablon BS5).
¶ Link "Przejdź do treści" po naciśnięciu Tab
¶ Formularz z komunikatami błędów przy polach
¶ Zasady działania
¶ Co zapewnia szablon BS5
- Link "Przejdź do treści" - pierwszy element na każdej stronie. Jest niewidoczny, dopóki klient nie naciśnie klawisza Tab, a wtedy pozwala pominąć nagłówek i menu.
- Podział strony na obszary - nagłówek, nawigacja, treść główna i stopka są oznaczone tak, że czytnik ekranu pozwala przeskakiwać między nimi.
- Język strony - strona ma ustawiony język zgodny z językiem, w którym klient przegląda sklep. Czytnik ekranu czyta treść z właściwą wymową.
- Powiększanie - sklep nie blokuje powiększania strony na telefonie i w przeglądarce.
- Opisy przycisków bez tekstu - przyciski z samą ikoną mają opis dla czytników ekranu, np. zmiana ilości ("Zwiększ ilość", "Zmniejsz ilość"), dodanie do ulubionych i porównania, przewinięcie do góry, logo sklepu.
- Menu i okna - rozwijane menu, panel filtrów, minikoszyk i okna (logowanie, opinie) informują czytnik ekranu, czy są otwarte i czego dotyczą.
- Potwierdzenie dodania do koszyka - komunikat jest od razu odczytywany przez czytnik ekranu.
- Formularze - pola rejestracji, logowania i adresu mają etykiety powiązane z polem. Po błędzie komunikat pojawia się przy polu, a pole jest oznaczone jako błędne także dla czytnika ekranu.
- Opisy zdjęć - zdjęcie towaru na liście i w galerii ma opis wpisany w panelu, a gdy go nie ma - nazwę towaru. Baner na stronie głównej ma opis wpisany przy obrazku, a gdy go nie ma - nazwę banera. Logo ma nazwę sklepu.
- Obsługa klawiaturą - nawigację, wyszukiwarkę, kartę towaru i formularze obsłużysz klawiszem Tab. Aktywny element (focus) jest wyróżniony obramowaniem - na części przycisków słabo, zob. Ograniczenia.
¶ BS5 i BS4
| Element | BS5 | BS4 |
|---|---|---|
| Link "Przejdź do treści" | jest | brak |
| Podział strony na obszary dla czytników ekranu | jest | brak |
| Język strony zgodny z językiem sklepu | jest | jest |
| Powiększanie strony nie jest blokowane | jest | jest |
| Opis zdjęć towarów na liście (nazwa, gdy brak opisu) | jest | tylko opis wpisany w panelu |
| Opis banera (nazwa, gdy brak opisu) | jest | tylko opis wpisany w panelu |
| Błąd pola oznaczony dla czytnika ekranu | jest | brak |
| Potwierdzenie dodania do koszyka dla czytnika ekranu | jest | brak |
| Opisy w minikoszyku | są | brak |
¶ Podział odpowiedzialności
¶ Wersja
- Elementy dostępności opisane wyżej są w szablonie BS5 od wersji 2.33, razem z samym szablonem.
- W wersji 2.34 doszły drobne poprawki w szablonie BS4 (opis przycisku wyszukiwarki, obrazek przycisku "przewiń do góry").
- W starszym szablonie BS4 większości tych elementów nie ma - zob. porównanie wyżej.
¶ Zależności
- Szablon BS5 w aktualnej wersji. Sklep z szablonem BS4 lub indywidualnym potrzebuje prac w szablonie - zob. Wdrożenie.
- Opisy zdjęć (tekst alternatywny) wpisuje sklep w panelu: w towarze, w sekcji zdjęć (Wspólny opis ALT, Opis specyficzny ALT), a przy obrazkach, np. banerów, w polu Opis (alt): (Banery, Menedżer plików i obrazków).
- Treści stron, opisy towarów i kategorii tworzy sklep (Strony statyczne, Edytor parametrów HTML (WYSIWYG)).
- Usługi zewnętrzne osadzone w sklepie (bramki płatności, mapy punktów odbioru, czaty, widżety opinii) odpowiadają za dostępność u siebie.
¶ Wdrożenie
- Działa po aktualizacji w szablonie BS5 - elementy opisane wyżej są częścią szablonu. Pełna zgodność z wymaganiami wymaga jednak audytu dostępności i prac w konkretnym sklepie, a to jest usługa. Zakres:
- audyt dostępności - testy automatyczne i ręczne (klawiatura, czytnik ekranu, powiększenie) na kluczowych stronach i na ścieżce zakupu, lista problemów z priorytetami,
- poprawki w szablonie sklepu - kontrast, wyróżnienie aktywnego elementu, opisy przycisków i linków, elementy dodane w sklepie (konfiguratory, widżety),
- w BS4 lub szablonie indywidualnym - dodanie brakujących podstaw: link "Przejdź do treści", obszary strony, opisy zdjęć, oznaczenie błędów w formularzach,
- wskazówki dla sklepu - co uzupełnić w treściach i opisach zdjęć,
- tłumaczenia nowych komunikatów.
- Minimalny szacowany czas:
- szablon BS5 - od 16 h,
- szablon BS4 - od 32 h.
- Czas konkretnego wdrożenia zależy od jego zakresu - wyceniamy go indywidualnie.
- Od czego zależy czas:
- szablon (BS5, BS4, indywidualny) i stopień indywidualizacji grafiki,
- liczba stron i elementów objętych audytem (konfiguratory, widżety, mapy),
- zakres zmian kolorystyki - zmiany kontrastu trzeba zaplanować z właścicielem grafiki,
- liczba języków,
- wersja sklepu - aktualizacja wyceniana osobno.
¶ Ograniczenia
- Platforma nie daje automatycznej zgodności z WCAG ani z przepisami o dostępności. Szablon zawiera elementy opisane wyżej, ale nie przeszedł audytu zgodności. Audyt dostępności konkretnego sklepu jest poza zakresem aktualizacji i wyceniany osobno.
- Po błędzie w formularzu kursor nie przechodzi sam do pierwszego błędnego pola.
- Formularz kontaktowy ma etykiety niepowiązane z polami.
- Przycisk zamknięcia części okien ma opis dla czytnika ekranu tylko po angielsku ("Close").
- W szablonie BS4 brakuje podstaw: linku "Przejdź do treści", podziału strony na obszary, oznaczenia błędów formularzy dla czytników ekranu. Opisy zdjęć są tylko tam, gdzie sklep je wpisał.
- Obrazek bez opisu w panelu i bez nazwy zastępczej nie ma opisu w ogóle. Dotyczy m.in. obrazków w treściach i części szablonów BS4.
- Platforma nie odpowiada za dostępność treści sklepu: opisów, nagłówków w treściach, plików PDF, filmów (napisy, transkrypcje), kolorów własnych banerów i grafik.
- Usługi zewnętrzne (bramki płatności, mapy punktów odbioru, reCAPTCHA, czaty) mają własne ograniczenia dostępności, na które sklep ma ograniczony wpływ.
- Panel administracyjny nie jest objęty tą stroną - wymagania dotyczą usługi dla konsumentów, czyli frontu sklepu.
- Nie weryfikujemy konfiguracji pod kątem zgodności z prawem - to sklep ocenia, czy podlega przepisom (np. wyłączenie mikroprzedsiębiorstw), przygotowuje deklarację dostępności i odpowiada za treści.
¶ Potencjał rozwoju
- Poprawa kontrastu i wyróżnienia aktywnego elementu w szablonie bazowym BS5.
- Przeniesienie kursora do pierwszego błędnego pola po wysłaniu formularza.
- Tłumaczone opisy przycisków zamknięcia okien i powiązanie etykiet w formularzu kontaktowym.
- Wzór strony z deklaracją dostępności do uzupełnienia przez sklep.
- Większe elementy do kliknięcia na telefonie (stopka, ikony).
¶ Najczęstsze pytania
Czy Hummerce spełnia wymagania WCAG i EAA?
Nie deklarujemy zgodności. Szablon BS5 zawiera elementy ułatwiające dostępność (link "Przejdź do treści", opisy dla czytników ekranu, obsługa klawiaturą), ale pełną zgodność potwierdza dopiero audyt konkretnego sklepu.
Czy szablon BS4 ma te same udogodnienia co BS5?
Częściowo. BS4 nie ma linku "Przejdź do treści", podziału strony na obszary ani oznaczenia błędów formularzy dla czytników ekranu - te elementy trzeba dodać we wdrożeniu.
Czy audyt dostępności jest częścią standardu platformy?
Nie. Audyt i poprawki w konkretnym sklepie to usługa wyceniana osobno, poza aktualizacją.
Ile trwa wdrożenie dostępności?
Od 16 h dla szablonu BS5, od 32 h dla szablonu BS4 - zakres zależy od stopnia indywidualizacji grafiki i liczby stron.
Czy panel administracyjny jest objęty wymaganiami dostępności?
Nie. Wymagania EAA dotyczą usługi dla konsumentów, czyli frontu sklepu, a nie panelu.
Kto odpowiada za treści i deklarację dostępności sklepu?
Sklep. Opisy, nagłówki, pliki PDF, napisy do filmów, kolory własnej grafiki i deklaracja dostępności są po jego stronie - platforma nie tworzy gotowej strony z deklaracją.
¶ Powiązane
- Banery - opis alternatywny obrazków banerów.
- Menedżer plików i obrazków - opisy alternatywne zdjęć towarów.
- Strony statyczne, Edytor parametrów HTML (WYSIWYG) - treści, za które odpowiada sklep.
- Sprzedaż B2C - przegląd - front sklepu dla klientów indywidualnych.
Chcesz sprawdzić, jak dostępność cyfrowa wygląda w Waszym sklepie? Umów bezpłatną prezentację.
¶ Szczegóły konfiguracji
¶ Dostęp w panelu
- Towar: sekcja zdjęć - Wspólny opis ALT i Opis specyficzny ALT.
- Obrazki: pole Opis (alt): przy obrazku, np. banera.
- Treść: strony statyczne, contenty i canvasy - tu sklep publikuje własną deklarację dostępności.
- Panel nie ma ustawień dostępności (trybu kontrastu, wielkości czcionki, nakładek dostępności).
¶ Komunikaty sklepu
Opisy przycisków i link "Przejdź do treści" to komunikaty sklepu - zmienisz je w Edytorze komunikatów, a opisy zdjęć w panelu przy towarze i obrazku. Wartości domyślne są po polsku i po angielsku.
| Klucz | Wartość domyślna |
|---|---|
msg.layout.skipToMainContent |
Przejdź do treści |
msg.item.quantity.plus |
Zwiększ ilość |
msg.item.quantity.minus |
Zmniejsz ilość |
msg.item.quantity.input |
Ilość |
msg.all.pages.scrollToTop |
Przewiń do góry |
msg.topMenu.navToggle |
Przełącz nawigację |
msg.topMenu.search |
Szukaj |
msg.filters.titleModal |
Filtry |
msg.indexSlider.bannerLabel |
Banner |