Jak zrobić e-mail dla wszystkich w 3 prostych krokach: nagrywanie webinaru + pytania i odpowiedzi

Dostępność poczty e-mail została uznana za jeden z najgorętszych trendów w projektowaniu wiadomości e-mail w 2019 roku i jest obecnie priorytetem dla większości marek. Ale prawdą jest również, że wielu marketerów nie wie, jak zacząć, aby ich e-maile były bardziej inkluzywne.

Wdrażanie najlepszych praktyk dotyczących ułatwień dostępu jest łatwiejsze niż myślisz. W tym seminarium internetowym eksperci ds. ułatwień dostępu z firmy Litmus, Jason Rodriguez i Alice Li, omawiają statystyki i badania, które dowodzą, że warto inwestować w dostępność, a także dzielą się 3 krokami, które należy wykonać, aby stworzyć lepszą pocztę e-mail dla wszystkich.

Nie miałeś okazji obejrzeć webinaru na żywo? Nie martw się. W każdej chwili możesz uzyskać dostęp do pełnego nagrania i przeczytać poniższe pytania i odpowiedzi.

Pytania i odpowiedzi

Wielkie podziękowania dla wszystkich, którzy włączyli się podczas webinaru z pytaniem! Oto podsumowanie naszych odpowiedzi na najpopularniejsze pytania, a także odpowiedzi na niektóre pytania, na które nie odpowiedzieliśmy podczas webinaru na żywo. Masz dodatkowe pytania? Prosimy o pozostawienie ich w komentarzach.

Jak wyjaśniasz ograniczenia poznawcze?

Bettina : Istnieje wiele różnych rodzajów zaburzeń poznawczych, od trudności z zapamiętywaniem lub zwracaniem uwagi na dysleksję lub autyzm. Każdy z tych warunków jest wyjątkowy, ale przestrzeganie wskazówek zawartych w sekcji copywritingu i projektowania tego webinaru znacznie zwiększy dostępność Twoich e-maili dla osób z ograniczeniami poznawczymi. Na przykład, staraj się, aby kopia wiadomości e-mail była jasna i zwięzła oraz unikaj używania trudnych słów lub żargonu. Zachowaj prostotę układów i opracuj przejrzystą hierarchię wizualną, która ułatwi subskrybentom skanowanie wiadomości e-mail i szybkie zrozumienie, co jest ważne (a co nie).

Jaki jest najczęściej używany czytnik ekranu? Jak to sprawdzasz?

Alice: Dwa najpopularniejsze czytniki ekranu to NVDA i JAWS . NVDA to bezpłatne narzędzie o otwartym kodzie źródłowym opracowane przez NV Access — to niesamowita organizacja, która poświęca swoją pracę na zwiększanie dostępności technologii dla osób z wadami wzroku. JAWS to popularne narzędzie do czytania ekranu oparte na subskrypcji.

Jeśli nie chcesz instalować oprogramowania, aby zrozumieć, jak brzmiałby Twój e-mail na czytniku ekranu, możesz użyć do tego Litmusa! Niedawno zintegrowaliśmy NVDA z Litmusem, dzięki czemu możesz teraz odsłuchać dźwiękowy podgląd swojego e-maila bezpośrednio w Liście kontrolnej Litmusa. Dowiedz się więcej .

Ponadto wszystkie nowoczesne systemy operacyjne oferują również pewien rodzaj natywnej obsługi czytania ekranu. Na przykład na Macu jest to VoiceOver .

Jakie marki wykonują świetną robotę optymalizując swoje e-maile pod kątem ułatwień dostępu? Chciałbym trochę inspiracji!

Jason : Jednym z moich ulubionych jest deque . Przeprowadzają wiele szkoleń dotyczących ułatwień dostępu, mają niesamowity blog i świetne e-maile! Ich e-maile nie tylko są zgodne ze sprawdzonymi metodami ułatwień dostępu, ale także zawierają świetne treści, które pomogą Ci poznać dany temat. Powinieneś zapisać się do ich biuletynu !

Ryzykując, że zabrzmię zarozumiale, jestem pod wrażeniem pracy, jaką Alice i zespół e-mailowy wykonali nad biuletynem Litmus . Jest nie tylko pięknie zaprojektowany, ale włożyli dużo pracy w udostępnienie go w oparciu o najlepsze praktyki omówione w The Ultimate Guide to Email Accessibility.

Jakiś wgląd w to, jak narzędzia takie jak "Alexa" lub "Siri" różnią się od innych czytników ekranu? A może funkcja „odczyt na głos” w Outlooku?

Jason : W ostatnim odcinku podcastu Delivering zagłębiłem się w asystentów głosowych. Odkryłem, że Alexa jest jedyną, która naprawdę czyta twoją wiadomość e-mail — ale będzie czytać tylko tekst HTML, ignorując wszelkie atrybuty alt, tabele lub inne elementy HTML. To różni się od tego, jak czytnik ekranu obsługiwał e-maile. Asystenci głosowi są nastawieni na wygodę, niekoniecznie na dostępność, więc nie działają w taki sam sposób, jak na przykład pełnowymiarowy czytnik ekranu, taki jak NVDA. W wielu przypadkach do poruszania się po treści nadal potrzebujesz telefonu lub laptopa, asystent głosowy tylko Cię wspiera. Aby dowiedzieć się, jak Alexa, Google Home, Siri i Cortana obsługują pocztę e-mail, obejrzyj ten odcinek podcastu.  

Co powiesz na animowane GIF-y? Używać ich czy nie? Czy powodują problemy dla czytelników?

Alice : Możesz ich używać, ale uważaj jak. Animacje mogą wywoływać napady padaczkowe światłoczułe, więc nigdy nie będziesz chciał dołączać GIF-a, który jest zbyt wstrząsający lub migający. Nie chcesz też umieszczać kluczowych informacji, takich jak kopia, w swoich plikach GIF. Kopia ukryta w pliku GIF nie jest dostępna dla czytników ekranu — i nie będzie wyświetlana w klientach poczty e-mail, w których obrazy są wyłączone — więc ryzykujesz utratę kluczowych części wiadomości.

Gdzie mogę znaleźć przykłady szablonów e-maili z ułatwieniami dostępu?

Jason : Jest tak wiele darmowych szablonów, ale niewiele z nich jest zoptymalizowanych pod kątem dostępności! Dlatego niedawno stworzyliśmy cztery zupełnie nowe szablony, które są zgodne ze sprawdzonymi metodami ułatwień dostępu — i są one dostępne bezpłatnie w Społeczności Litmus . Sprawdź nasze szablony, jeśli chcesz zbudować…

• Dostępne biuletyny
• Dostępne notatki osobiste
• Dostępne e-maile transakcyjne
• Dostępne ogłoszenia o produktach

Jak korzystanie z emotikonów wpływa na ułatwienia dostępu?

Jason: Chociaż większość czytników ekranu rozumie emotikony i potrafi je odczytać, może to nie być optymalne dla użytkowników. Posłuchajmy, jak NVDA czyta ten przykładowy temat z emotikonem:

Największa wyprzedaż roku

Możesz usłyszeć, jak chaotycznie brzmi emotikon obok tekstu. Chociaż emoji są teraz powszechne, a użytkownicy technologii wspomagających są prawdopodobnie przyzwyczajeni do ich słuchania, w zależności od emoji może to brzmieć niezręcznie. Jak każdy inny element lub kopię wiadomości e-mail, najlepszym sposobem sprawdzenia, czy działa, jest przetestowanie go i odsłuchanie wiadomości e-mail za pomocą narzędzia takiego jak NVDA lub Litmus Accessibility Checker.

Czy muszę również zastosować „role=presentation” do DIV?

Alice : Nie! role=”prezentacja” ma na celu jedynie poinformowanie czytników ekranu, aby ignorowały semantyczne znaczenie tagów, więc tabele ich potrzebują, ponieważ dane tabelaryczne, takie jak wykresy, wymagają wszystkich informacji z kolumn i wierszy, aby ludzie mogli je właściwie nawigować i zrozumieć. W wiadomościach e-mail programiści często polegają na tabelach do prezentacji zamiast na danych tabelarycznych, dlatego tabele tego wymagają. Z drugiej strony, DIV nie mają znaczenia semantycznego, które musiałoby zostać zastąpione przez czytniki ekranu.

W przypadku klientów, którzy nalegają na korzystanie z wiadomości e-mail opartych na obrazach, czy istnieją najlepsze praktyki, których powinniśmy przestrzegać?

Bettina : To jest trudne! Istnieje niezliczona ilość powodów, dla których wysyłanie wiadomości e-mail zawierających wszystkie obrazy jest okropnym pomysłem. Więc na początek zrób wszystko, co możesz, aby przekonać klienta, że ​​takie podejście wiąże się z okropnym doświadczeniem subskrybenta. Nasz post na blogu „ Dlaczego nie należy wysyłać wiadomości e-mail zawierających tylko obrazy” zawiera wiele informacji i wskazówek, które pomogą Ci przedstawić swoją sprawę.

Jeśli nie ma sposobu na skierowanie klienta na właściwą ścieżkę, wszystko, co możesz zrobić, to zoptymalizować widok wyłączony z obrazu za pomocą tekstu ALT ( możesz nawet wystylizować ten tekst ALT ) i użyć kuloodpornych przycisków , aby przynajmniej Twoje CTA nadal działa, gdy obrazy są wyłączone.

Czy korzystanie z czcionek internetowych ma wpływ na dostępność?

Alice : Z punktu widzenia kodu nie powinno. Z punktu widzenia projektowania oznacza to, że zawsze należy upewnić się, że zarówno czcionka internetowa, jak i jej bezpieczna w Internecie, bezpieczna w Internecie, spełniają standardy współczynnika kontrastu, aby były czytelne. Jeśli na przykład Twoja czcionka internetowa jest grubsza niż zastępcza, po prostu upewnij się, że zastępcza ma również wartości współczynnika kontrastu, ponieważ zamiast tego mogą zobaczyć ją użytkownicy, na przykład Gmaila.

Jedyną zmianą, której nie wprowadziliśmy w naszym szablonie kodu, jest użycie elementu semantycznego dla nagłówków lub akapitów. Obecnie stylizujemy komórkę tabeli na tekst. Jakie problemy może to stwarzać dla dostępności?

Alice : Zakładam, że tabela zawijania tekstu ma już ustawioną rolę „prezentacja” lub „brak”, aby ograniczyć niepotrzebny hałas czytnika ekranu. Poza tym problemem, nieużywanie poprawnych tagów nagłówka/akapitu stanowiłoby problem z nawigacją dla urządzeń pomocniczych, ponieważ niektóre technologie pozwalają użytkownikom przeskakiwać od nagłówka do nagłówka (i powiązanych z nim akapitów), tak jakby był to spis treści.

Czy czytniki ekranu mogą czytać znaki specjalne, takie jak kręcone apostrofy, cudzysłowy, ampersandy itp.?

Alice : To zależy. Ampersandy są często odczytywane jako „i”. Cudzysłów i kręcone apostrofy są ignorowane, tak jak ktoś może ich nie wymówić podczas czytania czegoś na głos. Inne znaki specjalne są rozpatrywane osobno dla każdego przypadku, tak jak wypunktowania są odczytywane jako „punktor”. Generalnie polecam zawsze testowanie, aby mieć pewność.

Jakieś sugestie dotyczące formatowania tekstu tylko pod kątem ułatwień dostępu? Używam kilku przerw „=” lub „-” między sekcjami. Jak się z nimi obchodzi?

Alice : Myślniki i podkreślenia nie są zwykle odczytywane, więc są w porządku. Jednak czytniki ekranu odczytają znak „równa się”, więc radzę go unikać.