Kompletny przewodnik po dostępnych wiadomościach e-mail

Jako marketerzy e-mail staramy się dostarczać naszym subskrybentom doskonałe wrażenia z poczty e-mail. Upewniamy się, że nasze e-maile są wysyłane we właściwym czasie w oparciu o nasze analizy i trafiają do skrzynki odbiorczej, monitorując naszą dostarczalność i przeprowadzając testy spamu. Personalizujemy nasze treści, aby były bardziej trafne i majstrowaliśmy przy naszym projekcie, aby upewnić się, że nasze e-maile są idealnie renderowane na niezliczonych urządzeniach i w każdym kliencie poczty e-mail.

To wszystko są zalecane kroki, aby upewnić się, że Twoje e-maile prowadzą do konwersji. Jednak Twoje e-maile mogą zostać pominięte przez znaczną część Twoich subskrybentów — osoby z niepełnosprawnością wzrokową, fizyczną lub poznawczą i neurologiczną.

Wystarczy kilka małych kroków, aby Twoje e-maile były bardziej dostępne dla wszystkich Twoich subskrybentów. W tym poście omówimy, jakie są te kroki i jak mogą ulepszyć pocztę e-mail dla wszystkich.

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 →

Co to jest dostępność?

Dostępność stanowi jeden z podstawowych filarów doświadczenia użytkownika i projektowania. W przypadku poczty e-mail oznacza to upewnienie się, że każdy może odebrać i zrozumieć Twoją wiadomość, niezależnie od rodzaju niepełnosprawności lub urządzeń pomocniczych, z których korzysta.

Możesz myśleć o dostępności w poczcie e-mail jako o rozszerzeniu radzenia sobie z klientami poczty e-mail ze słabym wsparciem. Uwzględnienie obejść i rozwiązań awaryjnych zapewnia każdemu subskrybentowi pozytywne wrażenia.

Jako programiści poczty e-mail spędzamy godziny, aby uzyskać wiadomość e-mail, aby wyglądała dobrze w kliencie z mniej niż 1% udziałem w rynku, ale bardzo niewielu z nas poświęci kilka minut na udostępnienie wiadomości e-mail.
– Mark Robbins, Rebelmail

Dostępność w projektowaniu e-maili

Zacznijmy od przyjrzenia się wizualnym aspektom wiadomości e-mail, które mogą wpływać na dostępność i gdzie można wprowadzić ulepszenia.

Inteligentnie korzystaj z koloru

Odbiorcy ze ślepotą barw mogą nie być w stanie rozróżnić niektórych kolorów w wiadomości e-mail, więc upewnij się, że kolor nie jest jedynym sposobem przekazywania informacji.

Kontrast kolorów może również stanowić problem dla subskrybentów mających problemy ze wzrokiem. Użyj wysokiego kontrastu kolorów między różnymi elementami w wiadomości e-mail, zwłaszcza między kolorami kopii i tła. Jednym ze sposobów, aby to zrobić, jest użycie narzędzia do sprawdzania kontrastu kolorów WebAim, aby sprawdzić współczynnik kontrastu kolorów w wiadomości e-mail.

Czy Twoje e-maile są dostępne? Zobacz, jak Twoje e-maile wyglądają dla osób niedowidzących, korzystając z filtra ślepoty barw w programie Lakmusowy podgląd wiadomości e-mail. Wypróbuj Litmus za darmo →

Nie twórz szkodliwych treści

Treści, które migają z określoną częstotliwością lub wzorami, takie jak animowane pliki GIF, mogą u niektórych osób powodować napady fotoczułe. Unikaj migania treści lub dołączania linków do filmów, które mogą mieć podobną treść.

Zrównoważ tekst i obrazy

Podczas gdy widzący użytkownicy mogą wizualnie skanować lub pomijać nieistotne treści, niewidomi użytkownicy muszą odsłuchiwać całą treść wiadomości e-mail, pojedynczo. Dostosuj pisemną treść wiadomości e-mail, aby dostarczyć główną wiadomość. Zastanów się również, jak kompatybilny jest Twój projekt z popularnymi czytnikami ekranu, takimi jak JAWS lub Window-Eyes.

Popraw czytelność swojego e-maila

Użyj większych rozmiarów czcionek

Wszystko, co jest mniejsze niż 14 pikseli na ekranie komputera stacjonarnego lub laptopa, wymaga pewnego wysiłku. Użytkownicy mogą zwiększyć poziom powiększenia na swoich urządzeniach, aby pomóc im czytać ekrany, ale może to mieć negatywny wpływ na Twój e-mail, który może wyglądać na uszkodzony lub ucięty.

Tekst może wydawać się mniejszy na urządzeniach mobilnych, zmuszając użytkowników do cięższej pracy przy czytaniu wiadomości e-mail. Użyj zapytań o media, aby zwiększyć minimalny rozmiar czcionki z 14 do 16 pikseli na mniejszych urządzeniach, aby ułatwić użytkownikom czytanie wiadomości e-mail:

 @media screen and (max-width: 600px) { p.mobile {font-size: 16px;}}

Daj swojej kopii przestrzeń do oddychania

Niektórym może być trudno czytać akapity i bloki tekstu, w których wiersze tekstu są rozmieszczone blisko siebie. Ustaw odpowiednią wysokość linii w tekście, aby ułatwić wszystkim czytanie. Zalecamy wybranie wysokości linii o 4 piksele większej niż rozmiar czcionki.

 <p style=”font-size:14px; line-height:18px;>Paragraph with font-size and line-height set</p>

Wskazówka: zwiększając rozmiar czcionki dla urządzeń mobilnych, nie zapomnij również o zwiększeniu wysokości linii.

Akapity kopii również potrzebują miejsca na oddech, aby poprawić czytelność. Podczas skanowania wiadomości e-mail powinno być łatwo identyfikować akapity i być w stanie zachować swoje miejsce. Utwórz wystarczającą ilość białego miejsca nad i pod akapitami.

Jeszcze jednym krokiem, aby tekst był łatwiejszy do odczytania, jest odsunięcie go od krawędzi wiadomości e-mail. Pomoże Ci w tym dodanie wypełnienia do komórki tabeli lub tagu akapitu.

Unikaj uzasadnionej kopii w wiadomości e-mail

Kopia „wyjustowana” oznacza, że ​​odstępy między literami i wyrazami są dopasowywane tak, aby tekst przylegał do lewego i prawego marginesu. Choć powszechne w druku, niespójne odstępy między wyrazami mogą utrudniać czytanie uzasadnionej kopii. Udowodniono, że tekst wyrównany do lewej jest łatwiejszy do odczytania dla wszystkich.

Wybierz odpowiedni krój pisma

Korzystanie z czcionek internetowych zwiększyło pulę możliwych krojów pisma, których można użyć w wiadomościach e-mail, ale zanim zdecydujesz się użyć Lobster jako czcionki treści, zastanów się, jak bardzo jest ona dostępna. Wybierając krój pisma, wybierz taki, który jest równomiernie rozmieszczony i niezbyt skondensowany. To dobry pomysł nie tylko ze względu na ułatwienia dostępu, ale także dla użytkowników mobilnych.

Użyj elementów semantycznych

Uwzględnienie elementów semantycznych daje subskrybentom korzystającym z czytników ekranu opcję „przeskanowania” wiadomości e-mail według nagłówka. Możesz to zrobić za pomocą znaczników <p> i <h>. Są one obsługiwane w każdym kliencie, więc jest to dobre miejsce na rozpoczęcie zwiększania dostępności poczty e-mail.

Historycznie rzecz biorąc, stylizacja tagów <p> i <h> nie była łatwa, dlatego wciąż dość rzadko zdarza się, aby te tagi były używane w wiadomościach e-mail. Marginesy wokół tekstu owiniętego w jeden z tych tagów były trudne do zarządzania, ale używając takiego kodu, będziesz w stanie kontrolować te białe znaki:

 <h1 style=”mso-line-height-rule:exactly; Margin:0; font-size:24px; line-height:28px;”>This is a title in an email</h1>

 <p style=”Margin:0; font-size:14px; line-height:18px;”>And this is the paragraph</p>

Wskazówka: za pomocą mso-line-height-rule:exactly; w tagach <h> zachowa regułę wysokości linii ustawioną w klientach poczty Microsoft Outlook.

Obejrzyj ten klip z Litmus Live 2017, w którym programista poczty e-mail Paul Airy wyjaśnia, dlaczego i w jaki sposób używa semantycznych elementów HTML w swoich e-mailach, aby uczynić je bardziej dostępnymi:

Tweetuj ten film →

Ucz się od ekspertów z Litmus Live Zostań lepszym e-mail marketerem dzięki poradom z prawdziwego świata, najlepszym praktykom i praktycznym wynosom, gdy dołączysz do nas na konferencji Litmus Live. Dowiedz się więcej →

Napisz czytelną kopię

Stworzenie bardziej dostępnej i czytelnej wiadomości e-mail nie zależy tylko od sposobu zakodowania wiadomości e-mail, ale także od sposobu pisania kopii. Sprawienie, by Twoja kopia e-maila była bardziej ludzka, poprawi jej czytelność i pomoże zbudować komunikację 1:1 między Tobą a Twoimi subskrybentami.

Najpopularniejszy test, znany jako test Flesch-Kincaid Reading Ease, można znaleźć w programie Microsoft Word i oblicza, jak łatwe jest czytanie treści w skali od 0 do 100. To znaczy:

• Wynik 90-100 będzie łatwo zrozumiały dla 11-letniego studenta
• Wynik 60-70 punktów z łatwością zrozumieją uczniowie w wieku od 13 do 15 lat
• Wynik 30-50 zostanie zrozumiany przez studentów
• Wynik 0-30 zostanie lepiej zrozumiany przez absolwentów uczelni

Stworzenie czegoś bardziej „czytelnego” nie powinno oznaczać, że unikasz trudnych tematów lub ważkich tematów. Zamiast ogłupiać twoje pisanie, odnosi się do dostępności tekstu. Twój najlepszy punkt to od 60 do 70, aby przyciągnąć ogólną publiczność. Oczywiście, jeśli Twoi odbiorcy są dobrze wykształceni, nie bój się używać bardziej złożonego języka.

Możesz również zwiększyć czytelność, edytując swoją kopię, aby była bezpośrednia i na temat.

Twórz dostępne treści

Spraw, aby linki można było klikać/dotykać

Zapewnienie, że rozmiar kuloodpornych przycisków jest wystarczająco duży, aby można je było używać kciukami i palcami na urządzeniach mobilnych, pomoże również w uzyskaniu dostępu do poczty e-mail. Większy przycisk przyda się tym, którzy nie potrafią precyzyjnie sterować myszą.

Lubię duże guziki i nie umiem kłamać.
– Justine Jordan, Litmus

Chociaż wytyczne Apple dotyczące interfejsu użytkownika iPhone'a zalecają minimalną szerokość i wysokość przycisków na poziomie 44 pikseli, liczba ta różni się w zależności od producenta urządzenia mobilnego. Alternatywną praktyczną zasadą byłoby użycie minimalnej szerokości i wysokości 72 pikseli, ponieważ jest to średnia szerokość kciuka w pikselach.

Usuń kopię linku „Kliknij tutaj”

Unikaj używania „kliknij tutaj” jako kopii linków. Użytkownicy czytników ekranu często przeglądają zawartość, przeskakując ją w celu przeskanowania wiadomości e-mail. Nadanie kontekstu linkom pomoże tym użytkownikom zdecydować, czy chcą klikać, czy nie.

Na przykład, jeśli masz link, który prowadzi do listy produktów z butami, użycie tekstu linku, takiego jak „Zobacz więcej butów”, zmniejsza niejednoznaczność linku dla użytkowników czytników ekranu. Zmniejszenie niejednoznaczności linków jest korzystne dla wszystkich subskrybentów, ponieważ nie wymaga od nich czytania kontekstu otaczającego link — jest to dobre rozwiązanie dla tych, którzy rutynowo skanują wiadomości e-mail, nie ogarniając ich wszystkich.

Nie chodzi tylko o ułatwienia dostępu, zablokowanie linków „kliknij tutaj” sprawi, że treść wiadomości e-mail będzie bardziej niezależna od urządzenia. Chociaż „kliknij tutaj” może mieć sens dla subskrybenta korzystającego z laptopa lub komputera stacjonarnego, ale nie dla osoby korzystającej z urządzenia mobilnego lub tabletu, gdzie wymagane jest stuknięcie.

Używaj poprawnie atrybutu ALT

Atrybut ALT jest najlepszą praktyką e-mail od zarania wiadomości e-mail w formacie HTML, ze względu na to, że klienci poczty domyślnie blokują obrazy. Tekst używany w atrybucie ALT dołączonym do obrazu jest wyświetlany, gdy obraz się nie ładuje. Pomaga to subskrybentowi „zobaczyć” wiadomość e-mail, jeśli domyślnie ma wyłączone obrazy w swoim kliencie poczty e-mail lub jeśli używa czytnika ekranu do odczytania wiadomości e-mail.

Aby poprawnie użyć atrybutu ALT, kontekst obrazu musi być w pełni zrozumiały w odniesieniu do otaczającej go treści. Najpierw musisz zdecydować, czy obraz jest funkcjonalny, poglądowy czy dekoracyjny.

Wszystkie obrazy wymagają atrybutów ALT, więc w przypadku obrazów, które nie muszą być odczytywane przez czytniki ekranu ani nie reprezentują niczego istotnego dla subskrybenta, należy użyć pustego atrybutu ALT.

Wyświetl wiadomość e-mail z wyłączonymi wszystkimi obrazami, aby pomóc Ci zdecydować, które obrazy wymagają atrybutu ALT, a które mogą mieć atrybut null.

Aby głębiej zrozumieć, w jaki sposób kontekst wpływa na użycie atrybutu ALT w obrazach, odwiedź stronę WebAim na temat atrybutu ALT.

Użyj roli = „prezentacja” na wszystkich stołach prezentacyjnych

W projektowaniu wiadomości e-mail tabele służą do przechowywania treści, a także struktury projektu wiadomości e-mail. Tabele nigdy nie miały być używane do projektowania; jednak ze względu na ograniczenia w klientach poczty e-mail, takich jak Outlook, projektanci poczty zostali zmuszeni do używania elementu <table> jako elementu projektu.

Aby pomóc czytelnikom ekranu zrozumieć różnicę między elementami <table>, które przechowują treść, a tymi, które służą wyłącznie do projektowania, użyj funkcji add role=”presentation” na każdej tabeli zawierającej treść, którą subskrybent musi przeczytać. Wystarczy dodać go do każdego elementu <table>, a nie do każdego <td>. Pozwala to uniknąć zmuszania czytnika ekranu do czytania każdej komórki w tabelach pojedynczo i pomaga subskrybentowi przejść bezpośrednio do ważnej treści.

Oprócz role="presentation" aria-hidden="true" to kolejny atrybut HTML, który można dodać do elementów w kodzie HTML, które są przeznaczone do treści wizualnych i które powinny być ukryte przed czytnikami ekranu:

 <table role="presentation" aria-hidden="true" cellpadding="0" cellspacing="0" border="0"> <tr> <td></td> </tr> </table>

role=”prezentacja” może być również używana na obrazach. Programista poczty Remi Parmienter odkrył pewne nietypowe zachowanie w Chrome dla użytkowników VoiceOver — aplikacji czytnika ekranu dla systemu MacOS. VoiceOver rozpoczął odczytywanie nazw plików obrazów, nawet jeśli atrybut ALT jest obecny, ale pusty. Zaleca się używanie atrybutu HTML role=”presentation” na dowolnym obrazie z pustym atrybutem ALT, aby uniknąć odczytywania nazwy obrazu.

Dostępne wiadomości e-mail w akcji

Możemy wdrożyć poziom dostępności, jeśli spojrzymy poza wyzwania. Skoncentruj się na tym, co możesz zrobić, a nie na tym, czego nie możesz.
– Paul Airy, Poza kopertą

Członkowie społeczności Litmus wzięli udział w konkursie społeczności, aby stworzyć dostępną wiadomość e-mail. Zgłoszenia ilustrowały małe kroki, które można podjąć, aby otworzyć pocztę e-mail dla nowych odbiorców.

Odbiorcy tego e-maila będą mogli zwiększyć rozmiar tekstu w swojej przeglądarce nawet o 200% bez naruszania projektu e-maila. Zawiera animowany GIF, który zatrzymuje się po trzech cyklach (w ciągu pięciu sekund) dla tych, którzy cierpią na napady światłoczułe.

Eyal Bitton stworzył wiadomość e-mail, która używa kopii linków, które mają sens poza kontekstem, a Eyal sygnalizuje koniec wiadomości niewidomym subskrybentom, używając ukrytego tekstu.

Biuletyn Type E korzysta z interaktywnego, progresywnego rozszerzenia, aby umożliwić subskrybentowi wybór między standardowym lub dużym rozmiarem tekstu. Programista poczty e-mail, Paul Airy, uwzględnił również opcję opartą na opcji zgody, w której subskrybent może wyświetlić wiadomość e-mail z przyciemnionym tłem, jeśli cierpi na pewne niepełnosprawności.

Te e-maile pokazują, że wystarczy kilka małych kroków, aby e-maile były bardziej dostępne i potencjalnie docierały do ​​szerszego grona odbiorców. Wiele z tych kroków nie tylko ułatwia dostępność, ale także pomaga ulepszyć wiadomości e-mail dla wszystkich.

PODGLĄD SWOICH E-MAILI Z WŁĄCZONYMI I WYŁĄCZONYMI OBRAZAMI

Chcesz zobaczyć, jak wyglądają Twoje e-maile w ponad 60 klientach na komputery, urządzenia mobilne i pocztę internetową, w tym w widokach bez obrazów? Wypróbuj Litmusa za darmo!

Zacznij testować teraz →

Kompletny przewodnik po dostępności poczty e-mail Ten 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 →