Dostępność w e-mail marketingu: 7 prostych sztuczek, które sprawią, że Twój kod będzie bardziej dostępny
Opublikowany: 2019-04-16Dostępność szybko staje się filarem e-mail marketingu, podobnie jak w przypadku doświadczenia użytkownika i projektowania. Coraz więcej marek upewnia się, że ich kampanie e-mailowe mogą cieszyć się każdym subskrybentem, niezależnie od tego, czy ma niepełnosprawność fizyczną, wzrokową czy poznawczą – lub nawet jeśli po prostu nie mogą przeglądać obrazów w swoich wiadomościach e-mail ze względu na otoczenie korporacyjne.
Jako marketerzy e-maili wszyscy staramy się dostarczać świetne e-maile do skrzynek odbiorczych naszych subskrybentów. Przeprowadzamy testy spamu i testy poczty e-mail, aby upewnić się, że nasz projekt wyświetla się idealnie na wszystkich urządzeniach i klientach poczty e-mail. Czasami jednak zapominamy o ustawieniu tagów ALT dla naszych obrazów, używamy kombinacji kolorów, która jest trudna do odczytania lub nie optymalizujemy naszych e-maili pod kątem czytników ekranu – co zraża niektórych naszych subskrybentów.
Jeśli dopiero zaczynasz zwiększać dostępność kodu e-mail, sytuacja może być przytłaczająca. Istnieje jednak kilka prostych sztuczek, które można łatwo wdrożyć — i które mają duży wpływ na dostępność poczty e-mail.
Oto jak sprawdzić swoją pocztę e-mail pod kątem dostępności dla wszystkich subskrybentów, sekcja po sekcji.
 | Czy Twój e-mail jest dostępny?Kontrole dostępności w Litmus Checklist ułatwiają testowanie wiadomości e-mail pod kątem kluczowych najlepszych praktyk w zakresie ułatwień dostępu, identyfikują obszary wymagające poprawy i sprawiają, że wiadomości e-mail są bardziej dostępne dla wszystkich subskrybentów. Dowiedz się więcej → |
Twoja lista kontrolna ułatwień dostępu
1. Dodaj kod języka do swojego <HTML>
Nie wszyscy subskrybenci będą czytać Twoją pocztę na swoich laptopach lub telefonach — niektórzy będą korzystać z czytników ekranu, aby uzyskać dostęp do Twojej poczty. Ponieważ treść wiadomości e-mail będzie odczytywana na głos, powinna być ona napisana we właściwym języku, aby wymowa była poprawna — nie chciałbyś, aby Twój e-mail napisany po francusku był wymawiany w amerykańskim angielskim, prawda?
Aby temu zapobiec, musisz poinformować czytniki ekranu, w jakim języku jest napisany Twój e-mail. Jeśli w Twoich e-mailach nie ma określonego kodu języka, czytniki ekranu nie będą w stanie poprawnie wymówić kopii — a Twój elokwentny e-mail może zostać wysłany brzmi kompletnie źle.
Dlatego kluczowe jest sprawdzenie kodu języka <HTML> — jest to prosty fragment kodu określający język wiadomości e-mail. Jeśli nie ma go jeszcze w kodzie, dodaj lang="xx" — zastąp xx odpowiednim kodem języka w wiadomości e-mail. Listę wszystkich możliwych kodów językowych i miejscowości — która pozwala uwzględnić różne akcenty, takie jak rozróżnienie między angielskim a amerykańskim — można znaleźć tutaj .
Należy wziąć pod uwagę kilka specjalnych przypadków:
- Jeśli w tagu <HTML> używasz dowolnego kodu XML, musisz również dodać xml:lang=“xx” .
- Jeśli w kodzie wiadomości e-mail uwzględniasz poprawkę 120 dpi dla programu Outlook, będziesz potrzebować tego rozwiązania, aby określić język. Oto jak wygląda nasz kod z tą poprawką:
<html xmlns_v="urn:schemas-microsoft-com:vml" xmlns_o="urn:schemas-microsoft-com:office:office" lang="en" xml_lang="en">
Wskazówka dla profesjonalistów: możliwe jest dynamiczne wypełnianie kodu języka, jeśli masz skonfigurowaną lokalizację w swoim ESP.
2. Zawsze dołączaj tagi ALT do swoich obrazów
Pamiętaj, że obrazy w Twoich e-mailach mogą nie zawsze być widoczne dla subskrybentów. Może mają wyłączone obrazy, mają złe połączenie lub używają czytnika ekranu — a jeśli na obrazach umieścisz wiele ważnych informacji, wiadomość zostanie utracona. To miejsce, gdzie tekst ALT przychodzi. Można ustawić tekst, który jest widoczny dla swoich abonentów (lub odczytywane przez swojego czytnika ekranu), więc nadal uzyskać ten sam wiadomości jako ludzi, którzy widzą swoje obrazy.
Gdziekolwiek masz tag <IMG> w kodzie e-mail, pamiętaj, aby ustawić tag ALT. Jeśli masz już wypełnione tagi ALT, sprawdź, czy tekst pasuje do tekstu na obrazie. Jeśli masz puste tagi ALT, upewnij się, że na obrazie nie ma żadnego tekstu, który należy wypełnić, aby czytnik ekranu mógł go zobaczyć. Jeśli nie ma żadnych tagów Alt na obrazach i nie tekst w samej albo brak tekstu niezbędne dla rozumieniu obrazu email-pamiętaj, aby dodać pustą ALT tag: alt = „”. Jeśli tego nie podasz, czytniki ekranu odczytają adres URL obrazu — i nikt nie chce, aby odczytywał im długi adres URL!
Po ustawieniu wszystkich tagów ALT — pustych lub nie — dla obrazów w wiadomości e-mail, dodaj styl czcionki do tagu <IMG> dla tekstu ALT ze stylem . Ta stylizacja pozwala na wymyślenie tekstu ALT i umożliwia zmianę wyglądu czcionki, koloru, rozmiaru, stylu i grubości.
3. Dołącz atrybut role="presentation" do wszystkich elementów <TABLE>
Większość sprzedawców e-maili opiera się na tabelach, aby uporządkować układ wiadomości e-mail, ale mogą one powodować poważne problemy dla czytników ekranu. Jeśli czytnik ekranu zidentyfikuje tabelę w kodzie wiadomości e-mail, zostanie ona odczytana na głos jako jedna. Może dosłownie powiedzieć, ile jest wierszy i kolumn, informując o pozycji i zawartości każdej kolumny, co uniemożliwia zrozumienie wiadomości.
Dlatego ważne jest, aby poinformować czytnik ekranu, że używasz tabeli wyłącznie do celów związanych z układem. Możesz to zrobić, dodając role="presentation" do każdej tabeli w e-mailu. Ta rola nakazuje czytnikom zawartości ekranu usunięcie wszelkich znaczeń semantycznych z tabel — zamiast odczytywać numery wierszy i kolumn, zamiast tego skupiają się na zawartości.
Spójrzmy na ten naprawdę prosty nagłówek wiadomości e-mail z jednego z naszych e-maili:
Zanim zoptymalizowaliśmy dostępność, nasz kod wyglądał tak:
<table width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" /> </a> <table cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> </td></tr></table> </td></tr></table>Czy zauważyłeś, że brakuje atrybutów ALT, a tabele nie są ustawione na role=”presentation” ?
Te drobne niedopatrzenia mają duży wpływ na dostępność. Oto jak czytnik ekranu interpretuje powyższy kod:
Czytnik ekranu: niedostępny nagłówek wiadomości e-mail
A oto ten sam kod, który został zrefaktoryzowany przez dodanie atrybutu ALT=”” i roli=”prezentacja” do tagów <TABLE> , aby był przyjazny dla czytnika ekranu:
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr> <td align="center" bgcolor="#2f343c" valign="top"> <table role="presentation" class="w100p" width="600" cellpadding="0" cellspacing="0" border="0"><tr> <td class="w100p" width="600" align="center"> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> <a href="https://litmus.com?utm_campaign=soeanalytics2019rt&utm_source=email&utm_medium=marketing&utm_content=%%dynamic_content_1456%%"> <img src="https://pages.litmus.com/l/31032/2016-08-16/954sb7/31032/95886/litmus_logo_white.png" width="134" height="50" alt="Litmus" /> </a> <table role="presentation" cellpadding="0" cellspacing="0" border="0"> <tr><td> </td></tr></table> </td></tr></table> </td></tr></table>Czytnik ekranu: dostępny nagłówek wiadomości e-mail
Jak słyszysz, jest spora różnica!
4. Używaj elementów semantycznych do strukturyzowania treści
Elementy semantyczne ułatwiają wyróżnienie hierarchii treści, pokazując subskrybentom (i czytnikom ekranu), co jest nagłówkiem, a co jest kopią akapitu. Uwzględnienie elementów semantycznych daje subskrybentom, którzy korzystają z czytników ekranu, możliwość łatwiejszego „przeskanowania” wiadomości e-mail.
Podczas dwukrotnego sprawdzania kopii upewnij się, że każda kopia godna nagłówka jest ujęta w tagu <H> : <H1> , <H2> , <H3> i tak dalej. Podobnie upewnij się, że każda kopia treści znajduje się w znaczniku <P> . Podczas przeglądania wiadomości e-mail czytniki zawartości ekranu kładą nacisk na określone nagłówki, a skonfigurowanie tych tagów <H> i <P> ułatwi nawigację po wiadomościach e-mail.
5. Wyrównaj swoją kopię do lewej, jeśli to możliwe
Jeśli chodzi o tekst podstawowy, może być kuszące wyrównanie do środka. Jednakże, jeśli chodzi o dostępność, to zdecydowanie nie !
Po wyśrodkowaniu tekstu krawędź początkowa zmienia się dla każdego wiersza, co zmusza subskrybentów do cięższej pracy, aby znaleźć początek każdego wiersza — a to jest wyzwaniem dla osób z dysleksją i innymi zaburzeniami czytania. Jeśli masz kopię dłuższą niż dwa wiersze, wyrównaj tę kopię do lewej. Jest to szczególnie ważne w przypadku urządzeń mobilnych, ponieważ wąska szerokość często daje więcej wierszy tekstu, niż możesz sobie wyobrazić. Być może trzeba będzie odpowiednio wyrównać tekst do lewej na telefonie komórkowym.
6. Sprawdź kontrast swojej kopii
Sprawdź współczynnik kontrastu kolorów tekstu z kolorami tła wiadomości e-mail. Możesz mieć subskrybentów, którzy mają deficyty kolorów, a jeśli Twoje kolory nie zapewniają im wystarczającego kontrastu, mogą nie być w stanie przeczytać Twojej wiadomości e-mail. Współczynnik kontrastu można sprawdzić na dwa sposoby:
- Jeśli możesz hostować swój kod HTML i utworzyć adres URL do użycia, to jest to mój ulubiony sposób sprawdzania kolorów: http://www.checkmycolours.com/
- Jeśli chcesz ręcznie wprowadzić kody kolorów, sprawdź https://contrast-ratio.com/
7. Dodaj efekty najechania na CTA, linki i obrazy
W Litmus używamy efektów najechania na nasze wezwania do działania, linki i obrazy, aby wskazać klikalność. Efekty najechania to prosty interaktywny element, który może sprawić, że Twoje e-maile będą bardziej angażujące i poprawić wrażenia subskrybentów. Chociaż efekty najechania są obsługiwane tylko w AOL, Apple Mail, Gmail i Yahoo! Mail, to popularny efekt, który warto zaimplementować w swoim kodzie e-mail. Możesz wyblaknąć obraz, zmienić kolor przycisku wezwania do działania, dodać wyskakującą kartę i nie tylko. 
Zobacz pełny e-mail w Litmus Builder →
Chcesz więcej wskazówek e-mailowych?
 | Kompletny przewodnik po dostępności poczty e-mailTen przewodnik zawiera szczegółowe informacje i porady, których potrzebujesz, aby pisać, projektować i kodować wiadomości e-mail, z których może korzystać każdy — niezależnie od jego umiejętności. Pobierz e-booka → |
Uzyskaj najlepsze wskazówki dotyczące marketingu e-mailowego i projektowania, statystyki i zasoby bezpośrednio do swojej skrzynki odbiorczej i pozostań w czołówce innowacji w zakresie e-maili, rejestrując się w serwisie Litmus News.
Bądź na bieżąco →