Europejski akt o dostępności (EAA) a sklep Shoper – co trzeba sprawdzić

Zdjęcia i teksty alternatywne

Tekst alternatywny opisuje zdjęcie osobom korzystającym z czytników ekranu. W Shoperze opis dostępności zdjęcia uzupełnisz w galerii produktu, w polu opisu przeznaczonym dla dostępności. Dobry alt mówi, co jest na zdjęciu i co jest ważne dla klienta, np. „Granatowa kurtka puchowa z kapturem, widok z tyłu”, a nie „IMG_2045” czy „kurtka kurtka zimowa tanio”. Zdjęcia czysto dekoracyjne nie wymagają opisu.

Uważaj na banery i grafiki z tekstem. Jeśli najważniejsza informacja, np. „-20% do niedzieli” albo warunki promocji, istnieje tylko jako napis na obrazku, czytnik ekranu jej nie przeczyta, a na telefonie bywa nieczytelna. Kluczowe treści umieszczaj w tekście strony lub w opisie alternatywnym. Więcej o przygotowaniu grafik piszemy w poradniku o zdjęciach produktów w Shoperze.

Kontrast, nagłówki i opisy produktów

Drugim obszarem jest czytelność. Tekst powinien mieć kontrast z tłem co najmniej 4,5:1 dla zwykłej treści – jasnoszary napis na białym tle często tego nie spełnia. Sprawdź kolory przycisków, cen, etykiet promocji i linków. Na stronie powinien być jeden nagłówek H1, a w opisach produktów logiczny układ H2 i H3 zamiast pogrubionych akapitów udających nagłówki.

• Kontrast – sprawdź kolory tekstu, przycisków i etykiet w narzędziu do badania kontrastu.

• Nagłówki – jeden H1 na stronie, kolejne poziomy w logicznej kolejności.

• Linki – opis linku mówi, dokąd prowadzi, zamiast ogólnego „kliknij tutaj”.

• Tabele – parametry i tabele rozmiarów jako tekst, nie jako zdjęcie tabeli.

• Język – proste zdania, wyjaśnione skróty, jednostki przy liczbach.

O strukturze karty produktu piszemy w artykule o karcie produktu w Shoperze, a o porządkowaniu filtrów, które także muszą działać z klawiatury – w tekście o filtrach i atrybutach w Shoperze.

Koszyk, formularze i dodatki

Najważniejszy test dostępności to złożenie zamówienia bez myszy – tylko klawiszem Tab, strzałkami i Enterem. Sprawdź, czy da się wybrać wariant, dodać produkt do koszyka, wybrać dostawę i płatność oraz wypełnić dane. Pola formularzy powinny mieć widoczne etykiety, a komunikaty błędów mówić, co poprawić. Jak uprościć ścieżkę zakupu, opisujemy w artykule o koszyku i checkoucie w Shoperze. [#chart:sh84b]

Dodatki to częste źródło problemów: pop-up, którego nie da się zamknąć klawiaturą, czat zasłaniający treść albo baner cookies bez widocznego fokusu. Przed instalacją aplikacji zapytaj dostawcę o dostępność, a po instalacji sprawdź ją sam. Wskazówki dotyczące okien na stronie znajdziesz w artykule o pop-upach w Shoperze, a o widżetach czatu – w tekście o czacie i obsłudze klienta.

[#przyklad] Sklep z artykułami do domu miał nowoczesny szablon z jasnoszarymi cenami i przyciskiem „Do koszyka” w pastelowym kolorze. Test kontrastu wykazał, że ceny i przycisk są trudne do odczytania. Zespół przyciemnił kolory, dodał alty do zdjęć bestsellerów i zamienił grafiki z tabelami wymiarów na tabele tekstowe. Przy okazji poprawiła się czytelność na telefonach w pełnym słońcu, a klienci rzadziej pytali o wymiary.

Jak przeprowadzić audyt dostępności sklepu

Audyt zacznij od kilku typów stron: strony głównej, kategorii, karty produktu, koszyka, formularza zamówienia i stron informacyjnych. Narzędzia automatyczne wychwycą część problemów, np. brak altów, zbyt niski kontrast czy brak etykiet w polach, ale nie zastąpią testu ręcznego. Sprawdź zakup z klawiatury, powiększenie strony do 200% i działanie z czytnikiem ekranu na komputerze oraz telefonie.

Wyniki zapisz w prostej tabeli: problem, miejsce, priorytet, kto poprawia. Treści poprawisz sam w panelu, zmiany w szablonie zleć osobie znającej Storefront lub agencji. Wersję mobilną sprawdź osobno – podpowiadamy, jak to zrobić, w artykule o wersji mobilnej sklepu Shoper. Opublikuj też informację o dostępności sklepu i wskaż kanał, przez który klient może zgłosić problem.

Informacja o dostępności i zgłoszenia od klientów

Przepisy kładą nacisk nie tylko na sam wygląd sklepu, ale też na informowanie klientów. Warto przygotować stronę informacyjną, na której prostym językiem opiszesz, jak sklep spełnia wymagania dostępności, jakie elementy mogą jeszcze sprawiać trudność i jak się z Tobą skontaktować w takiej sytuacji. Taka strona może być częścią regulaminu albo osobną podstroną podlinkowaną w stopce.

Podaj co najmniej jeden łatwy kanał zgłoszeń, np. adres e-mail lub formularz, i ustal, kto odpowiada na takie wiadomości. Jeśli klient nie może złożyć zamówienia przez stronę, zaproponuj alternatywę: zamówienie telefoniczne lub mailowe z pomocą obsługi. Każde zgłoszenie zapisuj i traktuj jako wskazówkę do kolejnych poprawek.

Dostępność a wygląd, szybkość i SEO

Poprawki dostępności rzadko kłócą się z dobrym projektem. Wyraźne przyciski, czytelne czcionki i porządek w nagłówkach pomagają wszystkim klientom, a opisowe alty i linki ułatwiają też pracę wyszukiwarkom. Lżejsza strona z mniejszą liczbą skryptów działa lepiej z czytnikami ekranu i szybciej się ładuje – o tym, co spowalnia sklep, piszemy w poradniku o szybkości sklepu na Shoperze. Przy wyborze nowego motywu porównuj gotowe szablony także pod kątem kontrastu i obsługi klawiatury – podpowiadamy, na co patrzeć, w artykule o szablonach Shoper.

Najczęstsze błędy w dostępności sklepów

1. Brak altów – zdjęcia produktów bez opisu albo z nazwą pliku.

2. Niski kontrast – jasnoszary tekst, pastelowe przyciski, ceny na zdjęciu.

3. Tekst w grafice – warunki promocji tylko na banerze.

4. Pop-upy bez obsługi klawiatury – okno, którego nie da się zamknąć.

5. Nagłówki udawane pogrubieniem – brak struktury dla czytników ekranu.

6. Brak testu po zmianach – nowa aplikacja psuje dostępność koszyka.

[#checklista] Dostępność sklepu Shoper: ustalony obowiązek i ewentualne zwolnienie; alty zdjęć i banerów; kontrast co najmniej 4,5:1; jeden H1 i logiczne nagłówki; tabele jako tekst; zakup tylko z klawiatury; etykiety pól i komunikaty błędów; dostępne pop-upy, czat i cookies; informacja o dostępności i kanał zgłoszeń; test po każdej zmianie szablonu.

Najczęściej zadawane pytania

Czy mój sklep na Shoperze musi spełniać wymagania EAA?

Jeśli sprzedajesz konsumentom i nie jesteś mikroprzedsiębiorcą, najpewniej tak. Mikroprzedsiębiorcy świadczący usługi są co do zasady zwolnieni. W przypadku wątpliwości warto potwierdzić status firmy z prawnikiem lub księgowym.

Czy Shoper zapewnia dostępność za mnie?

Shoper odpowiada za kod platformy i standardowe elementy szablonów. Sprzedawca odpowiada za treści, zdjęcia, kolory, własne modyfikacje szablonu i aplikacje. Dostępność to więc wspólne zadanie platformy i właściciela sklepu.

Gdzie w Shoperze dodać tekst alternatywny do zdjęcia?

Opis zdjęcia dla dostępności uzupełnisz w galerii produktu, w polu opisu przeznaczonym dla dostępności. Opisz, co widać na zdjęciu i co jest ważne dla klienta.

Jaki kontrast tekstu jest wystarczający?

Dla zwykłego tekstu przyjmuje się współczynnik kontrastu co najmniej 4,5:1, a dla dużego tekstu niższy próg. Sprawdzisz to w darmowych narzędziach do badania kontrastu kolorów.

Jak często testować dostępność sklepu?

Przy każdej większej zmianie: nowym szablonie, modyfikacji wyglądu, instalacji aplikacji wpływającej na stronę. Dodatkowo warto zrobić krótki przegląd raz na kilka miesięcy.

Czy dostępność wpływa na sprzedaż i SEO?

Dostępny sklep łatwiej obsłużyć wszystkim klientom, także na telefonie i w trudnych warunkach. Elementy takie jak alty, nagłówki i opisowe linki pomagają też wyszukiwarkom zrozumieć treść strony.

Podsumowanie

Europejski akt o dostępności sprawia, że dostępność sklepu przestała być dodatkiem. W sklepie na Shoperze platforma zapewnia podstawę, a Twoim zadaniem jest zadbać o treści, kolory, dodatki i proces testowania. Zacznij od altów, kontrastu i zakupu z klawiatury, opisz dostępność sklepu i sprawdzaj ją po każdej zmianie. Jeśli chcesz przejrzeć swój sklep pod kątem dostępności i konwersji, zobacz, jak prowadzimy wdrożenie i rozwój sklepu Shoper.