Wytyczne dotyczące dostępności poczty e-mail: standardy i najlepsze praktyki

Rozejrzyj się, posłuchaj, co się dzieje. Czy widzisz wszystko wyraźnie, w trybie pełnokolorowym? Czy dobrze słyszysz dźwięki i głosy? Gratulacje, z pewnością jesteś szczęściarzem. Co więcej, w rzeczywistości jesteś naprawdę szczęśliwy. Masz wzrok i słuch!

Może myślisz, że te umiejętności są powszechne i domyślnie dane wszystkim? Co jeśli powiem Ci, że 4,5% odbiorców na Twojej liście kontaktów cierpi na ślepotę barw, więc trudno im przeczytać lub zrozumieć treść Twojej wiadomości e-mail?

Chociaż ślepota barw nie jest jedynym rozpowszechnionym zaburzeniem. Tylko jeden fakt: 285 milionów ludzi na całym świecie cierpi na poważne zaburzenia widzenia, które sprawiają, że widzenie jest problemem nawet w soczewkach kontaktowych lub okularach.

A 5% populacji Ziemi ma wadę słuchu. Innymi słowy ponad 360 mln.

To jest coś do przemyślenia. Nie możemy ignorować tych wszystkich ludzi. Musimy zrobić wszystko, co w naszej mocy, aby być dla nich przyjaznym i uczynić ich życie lepszym. Na tym polega dostępność.

Teraz zrób sobie filiżankę herbaty lub kawy i zagłębimy się w szczegóły.

Co oznacza ułatwienia dostępu do poczty e-mail?

Są osoby, które cierpią na poważne zaburzenia widzenia, a nawet całkowitą ślepotę. Używają oprogramowania do czytania zawartości ekranu, aby wokalizować wiadomości e-mail w skrzynce odbiorczej — VoiceOver, Microsoft Narrator i inne podobne narzędzia. Dlatego naszym obowiązkiem jest dostosowanie naszych treści do tych asystentów.

Jeśli chodzi o ślepotę barw, od protanopii (kiedy ludzie nie potrafią odróżnić niektórych kolorów) po monochromatyczność — nie ma narzędzi, które pomogą osobom z tymi schorzeniami. Dlatego musimy sami zoptymalizować obrazy e-maili.

Inni cierpią na upośledzenie słuchu, dysleksję itp. W związku z tym istnieją zestawy zasad dostępności dla każdego rodzaju zaburzenia. W ten sposób doszliśmy do odpowiedzi na pytanie w nagłówku.

W skrócie oznacza to trzymanie się standardów, które sprawiają, że e-maile są czytelne dla osób o wszelkiego rodzaju specjalnych wymaganiach. Na szczęście współczesne narzędzia do tworzenia szablonów wiadomości e-mail w formacie HTML i inne oprogramowanie marketingowe zapewniają nam zaawansowane narzędzia do łatwego wdrażania tych standardów bez specjalnych umiejętności.

Poniżej podzielę się tymi standardami, a także kilkoma praktykami, które będą pomocne przy tworzeniu dostępnych e-maili.

Standardy dostępności

Tak więc, drodzy przyjaciele, nadszedł czas, aby przeanalizować jeden po drugim te zestawy zaleceń, których musimy przestrzegać, aby wysyłać „uniwersalne” e-maile, które będą łatwe do odczytania dla odbiorców z wszelkiego rodzaju wadami wzroku, słuchu i percepcji.

1. Ślepota kolorów

Istnieje lista typów ślepoty barw. Tutaj są:

Protanopia oznacza nieaktywne postrzeganie koloru czerwonego. Czytelnicy z protanopią, czyli osoby niewidome na czerwono, mają tendencję do mylenia czarnego koloru ze wszystkimi odcieniami czerwieni. Nie potrafią również odróżnić ciemnobrązowego od ciemnozielonego i nie widzą różnicy między kolorem niebieskim a środkową czerwienią. Spójrz na ten e-mail od Ubera:

A tak widzą to odbiorcy z protanopią:

Deuteranopia to zmniejszone postrzeganie zieleni. Ci ludzie mają również tendencję do mylenia środkowych czerwonych / zielonych diapazonów, jasnozielonych / żółtych i jasnoniebieskich / liliowych kolorów. Ponownie spójrz na ten sam e-mail: oryginał po lewej, a wersja deuteranopia po prawej.

Tritanopia oznacza ślepotę na kolor niebieski i jego odcienie. Dlatego osoby cierpiące na to upośledzenie zazwyczaj mylą jasnoniebieski/szary i ciemnofioletowy/czarny. Ten sam przykładowy e-mail, ale możesz zobaczyć jego postrzeganie tritanopii po prawej stronie:

Monochromatyczność jest dla całkowitej ślepoty barw. Ci ludzie widzą rzeczywistość namalowaną tylko w czerni, bieli i różnych odcieniach szarości. Żadnych innych kolorów. Wyobraź sobie świat na ekranie bardzo starego telewizora. Tak wygląda monochromia. Poważnie, przyprawia mnie to o gęsią skórkę.

Co powinniśmy zrobić?

• Wybierz rozmiar czcionki dla kopii wiadomości e-mail nie mniejszy niż 14 pikseli. Jednak polecam 16px, aby zapewnić odbiorcom przystępny projekt wiadomości e-mail;
• Unikaj rozwiązań kontrastowych opartych na kolorach, których klienci nierozróżniający kolorów mogą nie rozróżniać. Na przykład nie pisz tekstu z zielonym lub niebieskim tekstem na czerwonym lub liliowym tle. Spójrz na poniższy komunikat. Jest OK dla osób z pełną percepcją kolorów… ale czy jest tak samo dobry w przypadku widzenia protanopii czy monochromatycznego? nie sądzę…

(Wiadomość oryginalna)

(tak zobaczą to klienci z protanopią)

(sposób, w jaki monochromatycy widzą tę wiadomość)

Jak powinni zrozumieć, czy ich ulubiona drużyna wygrała, czy przegrała mecz?

• Zapomnij o dodawaniu zielonych przycisków na czerwonych zdjęciach lub odwrotnie. To samo dotyczy wszystkich wspomnianych powyżej „ryzykownych” kombinacji kolorystycznych. Pomysł jest naprawdę zły — ludzie z wadami percepcji kolorów mogą w ogóle nie zauważyć przycisku;
• Zawsze podawaj kolor produktu w nawiasach — klientki mogą nie rozróżniać np. koloru czerwonego, ale wiedzą, że czerwone koszule czy sukienki idealnie pasują do ich wizerunku;
• Pogrubiaj linki w e-mailach.

Tak, zwykły niebieski kolor tekstu linków nie wystarczy. I to nie tylko ze względu na daltonistów. Czy kiedykolwiek czytałeś e-maile na ulicy, gdy słońce bezlitośnie świeci wprost na ekran smartfona? W takim razie wiesz, o co mi chodzi — w ogóle trudno rozróżnić kolory. Dlatego pogrubiaj linki i nie podkreślaj ich. Czemu? Ponieważ podkreślanie może rozpraszać osoby z dysleksją. Nieco później porozmawiamy szczegółowo o dysleksji.

W tym e-mailu elementy menu są również pogrubione. Ten prosty pomysł optymalizuje nawigację klientów w newsletterze — z łatwością odnajdą pożądaną kategorię mieszkań.

Zwróć uwagę na link „Wyświetl szczegóły” ze strzałką. Mówi, że możesz zobaczyć więcej szczegółów, klikając go;

Jeśli dodajesz elementy interaktywne lub przeprowadzasz testy w swojej kampanii, wybierz kolor zielony/głęboki czerwony/jasnoniebieski, aby wyróżnić prawidłowe odpowiedzi. I odpowiednio czerwony/czarny/szary odpowiednio dla złego. Pamiętaj, aby zduplikować odpowiedzi tak/nie z tekstem.

Bardzo ważne jest, aby sprawdzić, czy e-mail spełnia wymagania osób cierpiących na niedobór kolorów. Dla Twojej wygody chciałbym dodać tę tabelę do naszego postu. Zapisz go, aby znaleźć pasujące kolory i uniknąć nieporozumień:

Dostępne jest również bezpłatne narzędzie symulatora ślepoty barw, które pokazuje Twoje zdjęcia w sposób, w jaki będą je postrzegać daltoniści.

Jak widzimy, testowanie kolorów nie jest zbyt skomplikowane — po prostu nie ignoruj ​​tego. Okaż troskę o wszystkich subskrybentów. Być dobrym.

2. Ślepota i poważne zaburzenia widzenia

Kolejny rozdział poświęcony jest standardom dostępności dla osób niewidomych i niedowidzących. Te zasady dotyczą również zaburzeń wzroku, ale zasady i rozwiązania tutaj są zupełnie inne. W tym przypadku nie mogą pomóc żadne schematy kolorów ani zestawienia kontrastów. Ten aspekt nauki o dostępności opiera się na wykorzystaniu oprogramowania do czytania ekranu.

W związku z tym naszą misją jest dostosowanie naszych e-maili do tych narzędzi. Innymi słowy, musimy sprawić, by e-maile były czytelne dla tych narzędzi.

Na co należy zwrócić szczególną uwagę?

Temat emaila

Zazwyczaj czytniki ekranu zaczynają czytać wiadomość e-mail od jej tematu.

Tak więc powszechnie przyjęta zasada jest prosta, ale skuteczna: postaraj się, aby temat był krótki i opisowy. Dobry temat powinien wyjaśniać istotę przekazu.

Ustawienia języka

Konfiguracja ustawień językowych w kopii wiadomości e-mail jest naprawdę ważna. To zadanie wymaga trochę wysiłku i pracy z kopią wiadomości e-mail, ale warto. Problem w tym, że tekst e-maila wypowiadany przez czytniki ekranu może brzmieć przerażająco, jeśli zignorujesz te ustawienia. Coś jak rozmowy orków z Władcy Pierścieni

Aby tego uniknąć, określ odpowiedni język w kodzie e-mail (jeśli jest dostępny).

Logiczna kolejność

Czytniki ekranu mają ścisłą kolejność, jak wokalizować e-maile. Odczytują pojemniki i bloki od lewej do prawej, a następnie przechodzą do następnego wiersza.

Aby zapewnić dostępność, określ tagi nagłówka, takie jak <h1> , <h2> , <p> , itp. w kodzie HTML. Te tagi dodają priorytet nad zwykłym tekstem, więc te elementy są najpierw udźwiękowione.

Ponadto rozmiar czcionki nie ma znaczenia, gdy określone są tagi. W powyższym przykładzie rozmiar czcionki nagłówka 2 to 24px, a normalna czcionka kopii jest większa — 27px. Ale czytniki ekranu będą najpierw wypowiadać nagłówek 2.

Tekst alternatywny

Technologie sztucznej inteligencji rozwijają się dziś stabilnie. Jednak narzędzia do czytania ekranu wciąż nie są wystarczająco inteligentne, aby „przejrzeć” zdjęcia w e-mailu i je opisać. Może w niedalekiej przyszłości… Jeśli chodzi o obecnie, te narzędzia mogą czytać tylko tekst alternatywny, czyli tekst alternatywny, który dodajemy do obrazów.

Jak dostosować tekst alternatywny do standardów dostępności? Dobrze zgadłeś, to całkiem oczywiste: spraw, aby ten tekst był zwięzły, opisowy i informacyjny. Jedna pomocna uwaga: unikaj słowa „obraz” w tym tekście. Tag obrazu już to określa, więc będzie trochę dziwnie usłyszeć zduplikowany „obraz obrazu…”

Linki, elementy CTA, ikony społecznościowe

Linki powinny być jak najbardziej zwięzłe i informacyjne. Dodaj do nich wyraźny tekst i pamiętaj, że czytniki ekranu zamienią ten tekst na głos! Poinformuj odbiorców, co im oferujesz i dokąd pójdą po kliknięciu.

Wystarczy spojrzeć na te linki:

Pierwszy link… uh… poważnie, boję się wyobrazić sobie, jak przerażająco to zabrzmi. Natomiast druga wyraźnie określa stronę internetową, datę publikacji i tytuł posta.

To samo dotyczy przycisków CTA i ikon mediów społecznościowych. W rzeczywistości te elementy są również hiperłączami, po prostu opakowanymi w estetycznie atrakcyjny wizualnie kształt. Każdy doświadczony e-mail marketer poświęca im największą uwagę, pracuje nad projektem i efektami, dobiera idealne rozwiązania kolorystyczne do generowania kliknięć…

Ale jeśli chodzi o czytniki ekranu i dostępność dla osób niewidomych, jedyną ważną rzeczą jest tutaj tekst. Spraw, aby był wystarczająco chwytliwy, aby ukończyć swoją misję — zmuś subskrybentów do kliknięcia przycisku.

Tak widzimy przycisk CTA w e-mailu:

Ale narzędzia do czytania ekranu nie dają latającej kaczki o wszystkich naszych sztuczkach projektantów i cudownych efektach zawisu. Wszystko, co widzi oprogramowanie, to sam tekst. Nic więcej. Upewnij się więc, że Twój tekst działa sam.

Jeśli chodzi o ikony mediów społecznościowych, niektórzy subskrybenci, którzy „nasłuchują” wiadomości e-mail w skrzynce odbiorczej, mogą nie rozumieć skrótów, które stosujemy do tych ikon. Napisz opisowy tekst alternatywny dla tych elementów.

To wszystko o ślepocie. Jeszcze jedna ważna uwaga: czytniki ekranu są dziś powszechnie używane nie tylko przez osoby z poważnymi zaburzeniami widzenia. Miliony odbiorców słuchają swoich e-maili, gdy są zajęci, na ulicy, w samochodzie itp. Ten aspekt dostępności jest więc jeszcze ważniejszy, niż można sobie wyobrazić.

3. Dysleksja

Osoby cierpiące na dysleksję mają tendencję do mylenia kolejności liter w tekście, pomimo normalnego poziomu IQ.

Oto praktyki dostępności dla odbiorców z dysleksją na podstawie postu opublikowanego przez ten Brytyjskie Stowarzyszenie Dysleksji.

• Unikaj podkreślania linków. Jak już wspomniałem nieco powyżej, pogrubiaj linki zamiast ich podkreślać;
• Nie zaczynaj nowego zdania na końcu wiersza. Nowe zdanie powinno być odpowiednio nowym wierszem;
• Bez CAPS LOCK, jeśli chcesz podkreślić/podkreślić pewien pomysł — zamiast tego użyj większej czcionki;
• Zapomnij o wyrównaniu do środka — tylko przy lewej stronie ekranu;
• Białe tło może rozpraszać odbiorców z dysleksją, kremowe kolory są łagodniejsze i nie sprawiają trudności;
• Zakończ wszystkie zdania kropką (.), należy również używać średników, gdy w kopii wiadomości e-mail znajdują się wypunktowania.

4. Głuchota i częściowe słyszenie

Dla osób z wadami słuchu istnieje jeden standard. Wszystkie filmy osadzone w e-mailach powinny być wyposażone w napisy lub opisy tekstowe.

Po prostu nie polegaj na automatycznych napisach udostępnianych przez YouTube i inne hostingi wideo. Często są, eh eh… delikatnie mówiąc, dalekie od ideału. A w niektórych przypadkach są nawet na granicy schizofazji.

Najważniejsze wskazówki dotyczące ułatwień dostępu do poczty e-mail

Zakończę dzisiaj przeglądem najlepszych praktyk ułatwień dostępu. Jak widać, ten aspekt pracy e-mail marketerów jest naprawdę istotny. W związku z tym nigdy nie pomijaj testowania dostępności przed kliknięciem przycisku „Wyślij”! Sprawdź swoje kampanie we wspomnianym symulatorze ślepoty barw, wyślij testową wiadomość e-mail na wszystkie dostępne urządzenia i wysłuchaj ich za pomocą różnych czytników ekranu.

Przypomnijmy teraz pokrótce kluczowe punkty tego postu. Jak zapewnić dostępność?

• Wybierz różne kolory, aby stworzyć schemat kontrastu, aby uniknąć nieporozumień;
• Napisz jasne i opisowe tematy;
• Nigdy nie zapomnij o tekście alternatywnym, dodaj go do wszystkich obrazów;
• Jeśli animacja GIF pełni rolę edukacyjną, dostarcz czytelnikom szczegółowy opis;
• Nie używaj różnych języków w jednym e-mailu, ponieważ czytniki ekranu mogą jednocześnie pracować tylko z jednym językiem;
• Sprawdź znaczenie swoich linków;
• Wyrównaj tekst do lewej strony;
• Twórz biuletyny i wyzwalane e-maile z prawdziwą miłością. Dbaj o wszystkich swoich subskrybentów.

Serdecznie życzę wszystkiego najlepszego. Szerz wokół siebie troskę i życzliwość!