Dostępny e-mail: co sprawdzić przed wysyłką
Dostępny e-mail to taki, który nadal ma sens, gdy czytnik ekranu odczytuje go na głos, gdy obrazki są wyłączone i gdy odbiorca nie odróżnia niektórych kolorów. Prosta sprawa. Czy zdarzyło ci się naprawdę odsłuchać własny newsletter w czytniku ekranu albo otworzyć go z zablokowanymi obrazkami? Jeśli nie, pewnie coś ci umknęło (jak większości z nas). Poniżej pięć rzeczy do sprawdzenia: struktura, tekst alternatywny, kontrast, treść linków i część tekstowa.
Co oznacza dostępność e-maila w newsletterze pełnym obrazków?
W newsletterze pełnym obrazków oznacza to, że najważniejsze rzeczy nie są zamknięte w grafikach. Wstaw ofertę, nagłówek albo przycisk do obrazka, a część odbiorców dostanie pustą wiadomość. Czytnik ekranu nie ma czego odczytać. Program pocztowy, który blokuje obrazki, pokazuje szare prostokąty i nic więcej. Jest też strona prawna. Europejski Akt o Dostępności może dotyczyć niektórych firm i usług, więc zapytaj swojego prawnika, czy obejmuje także twoją.
Struktura: ułóż kolejność, za którą nadąży czytnik ekranu
Czytnik ekranu idzie zgodnie z kolejnością kodu, więc twój HTML musi być ułożony w tej samej kolejności, w jakiej ludzie mają czytać treść. Używaj prawdziwych nagłówków tekstowych, zagnieżdżonych logicznie, a nie nagłówków zrobionych z obrazków albo z dużego pogrubionego tekstu. Tabele służące do układu dostają role=”presentation”, inaczej oprogramowanie wspomagające odczyta każdy wiersz i każdą komórkę (trudno tego słuchać). Ustaw też atrybut lang, żeby czytnik użył właściwej wymowy.
Treść zostaw jako żywy tekst wyrównany do lewej. Krótkie akapity, bloki w jednej kolumnie. Ten sam układ pomaga tworzyć e-maile działające na telefonach, gdzie wąskie ekrany i tak rozbijają złożone siatki. Dwie pieczenie na jednym ogniu.
Tekst alternatywny w e-mailach: co napisać przy każdym obrazku
Tekst alternatywny zastępuje obrazek osobom korzystającym z czytnika ekranu i każdemu, kto ma wyłączone obrazki, więc powinien mówić, jaką rolę obrazek pełni w wiadomości, a nie tylko co na nim widać. To, co napiszesz, zależy od rodzaju obrazka:
- Obrazki informacyjne: opisz treść krótko i w kontekście. Nigdy nazwa pliku, nigdy stos słów kluczowych.
- Obrazki dekoracyjne, takie jak odstępy, separatory i ozdobniki: użyj pustego alt=””, żeby czytniki ekranu je pomijały.
- Obrazki z tekstem: przenieś nagłówek, ofertę i najważniejsze daty do żywego HTML. Jeśli jakiś tekst naprawdę musi zostać w obrazku, powtórz go w tekście alternatywnym.
- Obrazki z linkiem i banery: napisz, dokąd prowadzi link, a nie jak wygląda grafika.
Potem zrób test z wyłączonymi obrazkami. Zablokuj je, otwórz e-mail i zadaj sobie pytanie: czy przekaz nadal dociera i czy główne działanie nadal jest oczywiste?
Kontrast kolorów w e-mailu: czytelność w trybie jasnym i ciemnym
Tekst musi wyraźnie odcinać się od tła, a kolor nigdy nie powinien być jedynym nośnikiem znaczenia. Przepuść każdą parę tekstu i tła przez narzędzie do sprawdzania kontrastu. Tak, każdą, łącznie z tekstem na obrazkach w tle i na przyciskach. Niektóre programy pocztowe odwracają kolory w trybie ciemnym, więc sprawdź tam również logo, przezroczyste pliki PNG i ten bladoszary tekst.
Podkreślaj linki. Ceny promocyjne i stany błędów oznaczaj słowami, a nie samą czerwienią lub zielenią. Wybierz taki rozmiar czcionki w treści, żeby dało się czytać bez mrużenia oczu, i zrezygnuj z cienkich krojów pisma oraz długich fragmentów pisanych wielkimi literami.
Treść linków i przyciski zrozumiałe bez kontekstu
Osoby korzystające z czytnika ekranu często przeskakują od linku do linku, więc każdy link i każdy przycisk musi mówić, dokąd prowadzi, bez pomocy otaczającego go tekstu. „Kliknij tutaj” i „więcej” nic im nie mówią. Zamień je na konkretne działanie, na przykład „Pobierz wiosenny katalog”. Buduj przyciski z HTML i CSS (nazywa się je bulletproof buttons), żeby były widoczne także przy wyłączonych obrazkach. Zrób je na tyle duże, żeby dało się w nie trafić palcem, zostaw trochę oddechu między sąsiednimi linkami i nie dawaj kilku linkom tej samej treści, jeśli prowadzą w różne miejsca.
Czy nadal potrzebujesz tekstowej wersji e-maila?
Tak. Część tekstowa, czyli część text/plain wiadomości multipart, to wersja zapasowa dla programów pocztowych i odbiorców, którzy nie radzą sobie z HTML, a do tego pomaga pokazać, że wiadomość jest wiarygodna. Napisz ją świadomie. Automatyczna kopia zwykle zawiera resztki kodu, długie adresy śledzące i nie ma czytelnej kolejności. Umieść w niej główny przekaz, najważniejsze linki zapisane w całości i dane nadawcy.
Proporcja tekstu do obrazków ma znaczenie także dla dostarczalności. Wiadomość złożoną głównie z grafik filtry antyspamowe czytają równie trudno jak ludzie, więc przed następną kampanią przeczytaj, dlaczego e-maile trafiają do spamu.
Lista kontrolna dostępności e-maila przed kliknięciem „wyślij”
Krótka rutyna przed wysyłką wyłapuje większość problemów w kilka minut. Przejdź przez nią przy każdej kampanii:
- Temat i preheader mają sens same w sobie.
- Nagłówki są ułożone logicznie, a kolejność czytania zgadza się z układem.
- Każdy obrazek ma tekst alternatywny, a obrazki dekoracyjne mają pusty alt.
- Kontrast jest wystarczający zarówno w trybie jasnym, jak i ciemnym.
- Treść linków i przycisków opisuje miejsce docelowe.
- Podgląd z wyłączonymi obrazkami nadal przekazuje treść wiadomości.
- Część tekstowa jest czysta i kompletna.
- E-mail został odsłuchany w czytniku ekranu, takim jak VoiceOver na Macu lub iPhonie albo NVDA w systemie Windows.
Chcesz zobaczyć, jak układ sprawdza się na różnych ekranach? W MailCraft responsywne szablony i podgląd na żywo pozwalają sprawdzić to przed wysyłką. Gdy układ przejdzie test, zapisz go jako szablon do ponownego użycia, żeby poprawki zostały na stałe. Więcej pomysłów znajdziesz w naszych artykułach o szablonach i projektowaniu e-maili.
Moja rada: przejdź przez tę listę już przy najbliższym newsletterze i zapisz każdą poprawkę w szablonie. Wtedy dostępny e-mail stanie się standardem każdej wysyłki, a nie łatką na ostatnią chwilę.
FAQ
Jak długi powinien być tekst alternatywny w e-mailu?
Krótki i skupiony na tym, jaką rolę obrazek pełni w wiadomości. Pomiń „obrazek przedstawiający”, bo czytniki ekranu i tak zapowiadają, że to obrazek. Potrzebujesz więcej niż jednego krótkiego zdania? To znaczy, że ta treść powinna być żywym tekstem.
Jak bez specjalnych narzędzi sprawdzić, czy e-mail jest przyjazny dla czytników ekranu?
Użyj VoiceOver, wbudowanego w Maca i iPhone’a, albo NVDA, darmowego czytnika ekranu dla systemu Windows. Odsłuchaj całą wiadomość od góry do dołu, a potem otwórz podgląd z wyłączonymi obrazkami. Jeśli w obu przypadkach wiadomość ma sens, największe ryzyka masz za sobą.
Czy Europejski Akt o Dostępności dotyczy mojego newslettera?
To zależy od twojej firmy i usług, które oferujesz. Akt nie obejmuje automatycznie newslettera każdej firmy, więc sprawdź to z prawnikiem. Tak czy inaczej dostępne e-maile warto tworzyć, po prostu dlatego, że więcej osób może je przeczytać.
