Wytyczne dotyczące dostępności poczty e-mail lub spraw, aby Twoje e-maile były przyjazne dla wszystkich

Opublikowany: 2019-10-16

Dostępność poczty e-mail sprawia, że ​​wiadomości e-mail są przyjazne dla użytkownika dla wszystkich, w tym osób niepełnosprawnych, ponieważ umożliwia im łatwe odbieranie wiadomości e-mail i interakcję z nimi.

Istnieje kilka zmian w projekcie i kopiowaniu, które możesz wprowadzić, aby Twoje e-maile były bardziej dostępne. W tym artykule wyjaśnimy, w jaki sposób korzystanie z ułatwień dostępu wpłynie na kampanie e-mailowe, dlaczego ma to znaczenie i jak zastosować je w praktyce.

Zawartość
  1. Dlaczego dostępność ma znaczenie
  2. Jak stworzyć dostępną wiadomość e-mail
    1. Struktura
    2. Kod
    3. Czcionki
    4. Zabarwienie
    5. Powiększanie i pomniejszanie

Dlaczego dostępność ma znaczenie

Dlaczego więc martwić się dostępnością i jakie korzyści może ona przynieść Tobie i Twojej firmie? Rzućmy okiem na kilka faktów:

  1. Ogólnie rzecz biorąc, 15% światowej populacji, czyli 1 miliard ludzi, ma jakiś rodzaj niepełnosprawności. Według Światowej Organizacji Zdrowia około 1,3 miliarda ludzi na całym świecie żyje z jakąś formą upośledzenia wzroku: 36 milionów ludzi w ogóle nie widzi, a 217 milionów ma umiarkowaną lub ciężką wadę wzroku. Jak widać, bardzo duża liczba osób może mieć problemy z różnymi codziennymi sprawami, w tym interakcją z urządzeniami i czytaniem e-maili.
  2. Poza tym rynek osób niepełnosprawnych reprezentuje 1,2 biliona dolarów rocznego dochodu do dyspozycji.
  3. Według ostatnich badań przeprowadzonych przez Cone Communications 78% Amerykanów chce, aby firmy zajmowały się kwestiami społecznymi, a 87% kupiłoby produkt od firmy, która wspierała problem, na którym im osobiście zależało.

Tak więc, korzystając z dostępności poczty e-mail, nie tylko poszerzasz swoją publiczność i otwierasz nowe możliwości większego zysku, ale także okazujesz szacunek i troskę dla każdego i wszystkich, co zwiększa Twoją wiarygodność w oczach odpowiedzialnych społecznie użytkowników i osób niepełnosprawnych.

Jak stworzyć dostępną wiadomość e-mail

W tej sekcji przyjrzymy się siedmiu elementom, które pomogą Ci uczynić Twoje e-maile bardziej dostępnymi dla wszystkich:

  • Struktura;
  • kod;
  • alternatywny tekst;
  • linki i przyciski;
  • czcionki;
  • zabarwienie;
  • powiększanie i pomniejszanie.

Oprócz tych elementów zalecamy zapoznanie się z wytycznymi dotyczącymi dostępności listy kryteriów opracowanymi przez konsorcjum World Wide Web Consortium, które pomogą zapewnić dostępność treści internetowych dla osób niepełnosprawnych.

Struktura

Najpierw upewnij się, że treść wiadomości e-mail jest ułożona w logicznej kolejności, ponieważ czytniki ekranu rozumieją ją od lewej do prawej i od góry do dołu. Czytaj na głos swoje e-maile, aby sprawdzić, czy łatwo jest zrozumieć samą kopię bez patrzenia na obrazy.

Na przykład Collaborative Fund zachowuje dobrą strukturę logiczną w swoich wiadomościach e-mail, dzięki czemu bardzo łatwo jest śledzić ich wzrokiem i czytnikiem ekranu.

accessible email example
E-mail od Collaborative Fund z logiczną kolejnością treści

Dla osób z dysleksją i zaburzeniami poznawczymi zrozumienie dużych, złożonych fragmentów tekstu może być trudne. Dlatego zalecamy przejście od razu do sedna tekstu, skracanie zdań i unikanie długich lub żargonowych słów. Ułóż jedną myśl w jednym zdaniu i jeden temat w jednym akapicie.

Aby przetestować czytelność tekstu, skorzystaj z usług takich jak Readable. Możesz tam wkleić swój tekst, a narzędzie automatycznie podświetli długie zdania lub złożone słowa i zaproponuje łatwiejsze alternatywy i synonimy. Spójrz na Readable w akcji:

Sprawdzanie czytelności tekstu za pomocą funkcji Czytelny

Kod

Następnie spójrz na swój kod. Powinny istnieć elementy nagłówka, takie jak h1 , h2 i tag akapitu p , i tak dalej. Umożliwi to czytnikom ekranu poruszanie się po Twojej poczcie e-mail. Językowy tag HTML lang=”” pozwoli każdej technologii pomocniczej zrozumieć, jakiego profilu językowego użyć dla treści. Przejdź do listy wszystkich tagów języka HTML, aby znaleźć kod potrzebnego języka.

Aby wyczyścić kod i upewnić się, że nie masz żadnych niezamkniętych tagów ani innych problemów, możesz użyć różnych narzędzi do testowania poczty e-mail.

Na przykład, aby uniknąć problemów z prawidłowym wyświetlaniem treści w formacie wizualnym lub dźwiękowym, możesz wypróbować Dirty Markup. Po prostu wklej kod i kliknij „Wyczyść”.

Jak wyczyścić kod e-mail za pomocą Dirty Markup

Alternatywny tekst

Zawsze dołączaj szczegółowy tekst alternatywny lub tekst alternatywny dla obrazów – musisz przekazać cel lub znaczenie obrazu, aby subskrybenci korzystający z technologii wspomagających lub mający wyłączone obrazy zrozumieli ogólny kontekst.

Na przykładzie z Messy Nessy Chic widać, że każdy obraz ma tekst alternatywny, w tym przyciski mediów społecznościowych w stopce e-maila.

accessibility email example
Tekst alternatywny dla obrazów w wiadomości e-mail od Messy Nessy Chic

Jeśli Twój e-mail zawiera obrazy dekoracyjne — te, które służą do projektowania wizualnego i nie przypisują konkretnego znaczenia — powinieneś dodać do niego pusty atrybut alt=”” . Spowoduje to, że czytniki ekranu pominą obraz.

Linki i przyciski

Jeśli chodzi o tekst, unikaj tekstu typu „Kliknij tutaj” i umieść hiperłącze w kontekście zdania. Ułatwi to użytkownikom zrozumienie, dokąd przekieruje ich link. I pamiętaj, Twoje linki powinny być odróżnialne od otaczającego tekstu.

Spójrz na przykład z InsightTimer; używają czystego tekstu hiperłącza, który byłby łatwy do zrozumienia nawet dla tych, którzy nie potrafią samodzielnie przeczytać wiadomości e-mail.

accessible email example
Hiperłącza w wiadomości e-mail od InsightTimer

Jeśli chodzi o przyciski wezwania do działania, trzymaj je wystarczająco duże, aby można je było stuknąć dowolnym kciukiem na dowolnym urządzeniu. Otocz swoje przyciski wystarczającą ilością białej przestrzeni, aby nie było przypadkowych naciśnięć.

Czcionki

Rozmiar czcionki w dostępnym e-mailu nie powinien być mniejszy niż 14 pikseli. Ponadto powinieneś używać bezpiecznych czcionek internetowych, które będą poprawnie wyświetlane na większości urządzeń i systemów operacyjnych. Te czcionki to Arial, Comic Sans, Courier New, Georgia, Impact, Palatino, Tahoma, Trebuchet MS, Times New Roman i Verdana. Dowiedz się więcej o wyborze idealnej czcionki do wiadomości e-mail na naszym blogu.

Co więcej, radzimy zastosować wyrównanie do lewej dla tekstu. Podczas czytania początek każdej nowej linii służy jako kotwica dla naszych oczu. Gdy wyrównanie jest wyśrodkowane, każda linia zaczyna się w innym punkcie, co powoduje, że użytkownik przeskakuje z jednej linii do drugiej. Z kolei przy wyrównanym wyrównaniu odstępy między wyrazami są za każdym razem inne. Dlatego utrzymanie tej wizualnej kotwicy w tym samym miejscu lub użycie wyrównania do lewej strony jest najlepszym wyborem ze względu na czytelność.

Zaleca się również podzielenie tekstu według nagłówków, cudzysłowów i innych rodzajów formatowania.

Brain Pickings oferuje bardzo długie i bogate w treść e-maile, które składają się głównie z tekstu, ale łatwo je „przetrawić” ze względu na ich opcje formatowania.

accessible email example
Formatowanie tekstu w e-mailu od BrainPickings

Zabarwienie

Przede wszystkim sprawdź, czy kolory w e-mailu są wystarczająco kontrastowe, aby był dostępny dla osób, które mają problemy ze wzrokiem. Na przykład zaleca się, aby stosunek normalnego tekstu wynosił co najmniej 4,5:1 i 3:1 dla tekstu powiększonego, który jest często używany w nagłówkach.

Aby sprawdzić dobry kontrast pod względem dostępności poczty e-mail, możesz użyć narzędzi takich jak Tanaguru lub WebAIM. Pozwalają zobaczyć współczynnik kontrastu pierwszego planu i tła. Czy moje kolory są dostępne to kolejna świetna opcja, aby sprawdzić, czy łatwo jest zrozumieć wiadomość e-mail.

Na przykład, jeśli sprawdzimy standardową kombinację czarnego tekstu i białego tła, zobaczymy, że współczynnik kontrastu jest bardzo wysoki: 21:1. Gdy jednak zmienimy kolor tła na pomarańczowy, proporcja spada do 10,63:1.

Sprawdzanie współczynnika kontrastu w narzędziu Czy moje kolory są dostępne

Powiększanie i pomniejszanie

W przypadku użytkowników słabowidzących ustawienia powiększenia są często używane w celu zwiększenia rozmiaru tekstu i innych elementów wizualnych na ekranie. Sprawdź więc, czy możliwe jest powiększenie e-maila do co najmniej 200% bez utraty jakości treści.

Poniżej możesz zobaczyć fragment wiadomości The Futur, którą powiększyliśmy do 200% — cała treść wiadomości pozostała widoczna i można ją wyraźnie przeczytać.

accessible email example
Powiększanie wiadomości e-mail z The Futur

W sumie

Tworząc dostępny e-mail, pamiętaj o następujących kwestiach:

  1. Utrzymuj logiczną strukturę czytania wiadomości e-mail.
  2. Używaj czystego kodu z odpowiednimi tagami wymaganymi przez urządzenia wspomagające.
  3. Dołącz informacyjny tekst alternatywny do każdego obrazu w wiadomości e-mail, w tym przyciski mediów społecznościowych i logo.
  4. Upewnij się, że wszystkie linki i przyciski są użyteczne lub łatwe w obsłudze.
  5. Utrzymuj czcionki co najmniej 14 pikseli, używaj odpowiedniego formatowania i wyrównaj tekst do lewej.
  6. Zachowaj dobry kontrast między kolorami tła i pierwszego planu.
  7. Upewnij się, że zawartość można powiększyć do co najmniej 200% bez utraty zawartości.

Wdrożenie ułatwień dostępu do poczty e-mail bez wcześniejszego doświadczenia może być trudne. Kiedy jednak przeanalizujesz jego potencjalny wpływ, jasne jest, że warto wykonać tę pracę. Wypróbuj SendPulse, aby tworzyć przejrzyste i dostępne szablony wiadomości e-mail i wysyłać je do wszystkich subskrybentów.