Projektowanie maili

Dostępność e-maili w sklepie internetowym — EAA, WCAG i newsletter czytelny dla każdego

Dlaczego dostępność maili to temat dla sklepu

Newsletter czyta nie tylko osoba z idealnym wzrokiem, na dużym monitorze, w jasnym pokoju. Czyta go też ktoś z czytnikiem ekranu, ktoś z powiększeniem tekstu na telefonie, osoba z daltonizmem albo klient, który przegląda pocztę w słońcu na przystanku. Jeśli cała treść maila jest w jednym obrazku z bladym tekstem, część tych osób nie dowie się, co sprzedajesz.

Od 28 czerwca 2025 roku w Polsce obowiązuje Polski Akt o Dostępności, który wdraża unijny European Accessibility Act. Właściciele sklepów słusznie pytają, czy dotyczy on także maili. Ten poradnik odpowiada na to pytanie uczciwie, bez straszenia karami, i pokazuje, jak w praktyce zrobić mail czytelny dla każdego.

EAA i Polski Akt o Dostępności: co wiadomo na pewno

• Usługi handlu elektronicznego są objęte przepisami. Ustawa z 26 kwietnia 2024 roku o zapewnianiu spełniania wymagań dostępności niektórych produktów i usług przez podmioty gospodarcze (Polski Akt o Dostępności, PAD) obowiązuje od 28 czerwca 2025 roku i obejmuje sprzedaż online (gov.pl: PAD — usługi handlu elektronicznego).
• Mikroprzedsiębiorcy świadczący usługi są wyłączeni. Chodzi o firmę, która w co najmniej jednym z dwóch ostatnich lat obrotowych zatrudniała średniorocznie mniej niż 10 osób i miała obrót albo sumę bilansową do równowartości 2 mln euro. To samo wyłączenie jest w unijnej dyrektywie (EUR-Lex, streszczenie EAA).
• Nadzór koordynuje Prezes Zarządu PFRON, który przyjmuje zawiadomienia o braku dostępności (BIP PFRON).
• Punktem odniesienia technicznego są wytyczne WCAG na poziomie AA. Organy nadzoru w krajach UE wskazują na WCAG 2.1 AA i zachęcają do przygotowania się na WCAG 2.2.

A co z mailami?

Przepisy dotyczą przede wszystkim strony i aplikacji sklepu oraz całej ścieżki zawarcia umowy: wyszukiwania, wyboru, logowania i płatności. Newslettery promocyjne nie są w ustawie wymienione wprost. Inaczej wygląda sytuacja maili, które są częścią obsługi zamówienia: potwierdzenie zamówienia, informacja o płatności, wysyłce, reset hasła czy odpowiedź na reklamację. Te wiadomości przekazują informacje potrzebne do skorzystania z usługi, więc rozsądnie jest traktować je jak część sklepu i projektować dostępnie.

Ten artykuł nie jest poradą prawną. Jeśli Twoja firma nie jest mikroprzedsiębiorstwem, ocenę obowiązków warto skonsultować z prawnikiem. Niezależnie od przepisów zasady poniżej po prostu poprawiają czytelność maili dla wszystkich odbiorców.

8 zasad dostępnego maila

1. Najważniejsza treść tekstem, nie w obrazku. Rabat, termin promocji i warunki napisz w HTML. Obrazek z napisem to dodatek. Wiele programów pocztowych domyślnie nie wyświetla obrazków, a czytnik ekranu nie przeczyta tekstu z grafiki.
2. Tekst alternatywny (alt) z treścią. Baner z rabatem: alt „Rabat 30% na kubki do niedzieli”. Grafiki czysto dekoracyjne (ozdobniki, separatory): pusty alt, żeby czytnik je pominął.
3. Kontrast co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego (WCAG AA, WCAG 2.2 Quick Reference). Jasnoszary tekst na białym tle i biały tekst na pastelowym przycisku to najczęstsze błędy.
4. Tekst co najmniej 14–16 px i wygodna interlinia. Na telefonie mały tekst jest dodatkowo pomniejszany.
5. Nagłówki i logiczna kolejność. Jeden główny nagłówek, krótkie akapity, treść czytana od góry do dołu w tej samej kolejności, w jakiej ją widać. Tabele tylko do układu, oznaczone jako prezentacyjne (role="presentation").
6. Opisowe linki i przyciski. „Zobacz kubki w promocji” zamiast „kliknij tutaj”. Czytnik ekranu potrafi wyświetlić listę samych linków, wtedy pięć razy „tutaj” nic nie mówi. Przycisk wystarczająco duży, żeby trafić palcem.
7. Nie tylko kolor. Cena promocyjna oznaczona słowem lub przekreśleniem, a nie wyłącznie czerwonym kolorem. Uwaga też na tryb ciemny, w którym kolory potrafią się odwrócić (pisaliśmy o tym w artykule dark mode w e-mailach).
8. Język i wersja tekstowa. Atrybut lang="pl" w kodzie maila pomaga czytnikowi poprawnie wymawiać słowa. Wersja tekstowa (plain text) przydaje się w programach, które nie wyświetlają HTML.

Dodatkowo: tytuł maila i preheader niech mówią, o co chodzi, a nie składają się z samych emoji. Czytnik ekranu przeczyta każdą ikonę jej nazwą, więc „🔥🔥🔥” zamienia się w trzykrotne „ogień”. O dobrych tematach piszemy w artykule jak pisać tematy maili.

Maile transakcyjne: od nich zacznij

Jeśli masz czas na poprawę tylko jednej grupy wiadomości, zacznij od maili związanych z zamówieniem. To w nich klient szuka numeru zamówienia, kwoty, terminu dostawy i linku do śledzenia przesyłki. Sprawdź, czy:

• numer zamówienia, kwota i sposób dostawy są tekstem, a nie częścią grafiki,
• link do śledzenia paczki i do formularza zwrotu ma opisową nazwę,
• tabela z produktami czyta się sensownie w kolejności od lewej do prawej, wiersz po wierszu,
• dane kontaktowe sklepu (e-mail, telefon) są w treści, a nie tylko w stopce-obrazku.

Różnice między mailami transakcyjnymi a marketingowymi opisaliśmy w artykule maile transakcyjne vs marketingowe.

Krok po kroku: audyt dostępności newslettera w 30 minut

1. Wybierz trzy wiadomości: ostatni newsletter, mail o porzuconym koszyku i potwierdzenie zamówienia.
2. Wyłącz obrazki w programie pocztowym i przeczytaj mail. Czy nadal wiesz, jaka jest oferta i co kliknąć?
3. Sprawdź kontrast tekstu i przycisków darmowym narzędziem do kontrastu (np. w narzędziach deweloperskich przeglądarki). Wszystko poniżej 4,5:1 dla zwykłego tekstu do poprawy.
4. Powiększ tekst do 200% na telefonie i komputerze. Czy nic się nie nakłada i nie trzeba przewijać w bok?
5. Włącz czytnik ekranu (VoiceOver w iPhonie albo TalkBack w Androidzie) i odsłuchaj początek maila. Zwróć uwagę na alt obrazków i nazwy linków.
6. Popraw szablon, nie pojedynczy mail. Kolory, rozmiary czcionek i przyciski ustaw raz w szablonie, żeby każda kolejna kampania była poprawna od początku.
7. Dopisz zasady do briefu kampanii: alt dla każdego obrazka z treścią, opisowy przycisk, tekst poza grafiką.

Jak to wygląda w GrowMail

W GrowMail kampanie i automatyzacje (powitanie, porzucony koszyk, maile po zakupie) budujesz na szablonach. To dobre miejsce, żeby zasady z tego artykułu wprowadzić raz: ustawić kolory o odpowiednim kontraście, rozmiar tekstu, styl przycisków i wersję z treścią w HTML, a potem korzystać z nich w każdej wysyłce. Przy wdrożeniu, które jest w cenie, możemy razem przejrzeć szablony pod kątem czytelności.

Checklista: dostępny mail sklepu

• Oferta, termin i warunki promocji są tekstem w HTML, nie tylko w obrazku.
• Każdy obrazek z treścią ma alt, a ozdobniki mają pusty alt.
• Kontrast tekstu co najmniej 4,5:1, dużego tekstu i przycisków co najmniej 3:1.
• Tekst co najmniej 14–16 px, krótkie akapity, jeden główny nagłówek.
• Linki i przyciski mają opisowe nazwy, bez „kliknij tutaj”.
• Informacja nie jest przekazywana wyłącznie kolorem, mail sprawdzony w trybie ciemnym.
• Kod maila ma lang="pl", tabele układu są prezentacyjne, jest wersja tekstowa.
• Maile transakcyjne (zamówienie, wysyłka, zwrot) przeszły test bez obrazków i z czytnikiem ekranu.
• Zasady są wpisane w szablon i brief kampanii, a nie poprawiane w każdym mailu osobno.

Podsumowanie

Polski Akt o Dostępności dotyczy przede wszystkim strony i ścieżki zakupu w sklepie, a mikroprzedsiębiorcy świadczący usługi są z niego wyłączeni. Dostępny mail to jednak nie tylko kwestia przepisów: tekst zamiast obrazka, dobry kontrast, opisowe przyciski i sensowny alt sprawiają, że wiadomość czyta więcej osób i więcej z nich klika. Zacznij od maili transakcyjnych i szablonu newslettera. Więcej o projektowaniu maili przeczytasz w artykule jak zaprojektować newsletter, a szersze poradniki dla sklepów znajdziesz w bazie wiedzy GrowCommerce.

Najczęstsze pytania

Czytaj dalej

Projektowanie

Jak zaprojektować newsletter

Układ, treść i przyciski, które działają.

Czytaj →

Projektowanie

Dark mode w e-mailach

Jak mail wygląda w trybie ciemnym.

Czytaj →

Automatyzacje

Maile transakcyjne vs marketingowe

Czym się różnią i jak je łączyć.

Czytaj →