Mamy projekt w mojej pracy w momencie zapewnienia, że spełniamy standardy dostępności na naszej stronie internetowej.

Nasze e-maile są budowane przy użyciu układów chmury marketingowej Salesforce. Czy ktoś wie, jak możemy zobaczyć lub przetestować, jak są "dostępne"?

Mogę przetestować przy użyciu RETROTPATH, aby zobaczyć, jak renderują na różnych urządzeniach i daje mi wyniki dla ślepoty kolorów, ale nie jestem pewien, jak przetestować, jak dobrze lub nie zadziałały z czytnikiem ekranu na przykład

1
Lucy Winning 19 kwiecień 2021, 17:36

1 odpowiedź

Najlepsza odpowiedź

E-maile są trudne z perspektywy dostępności. Nadal utknęliśmy za pomocą tabel do układu nawet w 2021 roku!

Nie możemy używać WAI-ARIA i CSS jest bardzo ograniczona .

Jako takie mam mniejszą listę kontrolną na e-maile, które obejmują ważne rzeczy, które możemy kontrolować.

Głównymi rzeczami, na które chciałbym się podobać:

Porządek do czytania

Upewnij się, że e-mail odczytuje od lewej do prawej, a następnie w dół (zakładając, że język jest lewym językiem, w przeciwnym razie odwróć go)

Użyj nagłówków

Wyślij e-mail marketerzy często w stylu zwykłym tekstem zamiast wprowadzenia odpowiednich nagłówków

Upewnij się również, że nagłówki nie pominąć poziomów (więc nie przejdź z <h2> do <h4> na przykład).

Kontrast kolorów

Dokładne zasady dla stron internetowych dotyczą e-maili. Polecam prowadzić kolory przez Web Cel Contrast Contrast Checker dla tekstu i tła wokół tekstu , tła przycisków i tekst itp.

Atrybuty alt

Atrybuty alt na zdjęciach to duży, który musisz sprawdzić dla e-em>, zwłaszcza w wiadomościach e-mail, gdzie obrazy mogą być jedyną zawartością w hiperłączy. Ponieważ nie możesz użyć aria-label lub Wizualnie ukryty tekst w e-mailu alt Atrybuty są Jedynym sposobem, aby link miał znaczenie, jeśli zawiera obraz (plus jako klienci e-mail blokują obrazy, oznacza to, że nie ma znaczącego tekstu dla wszystkich, a nie tylko użytkowników czytników ekranu).

Znaczący tekst linku

Wzdłuż tych samych linii upewnij się, że linki nie tylko mówią "Czytaj więcej". Zamiast tego sprawia, że link tekst znaczący np. "Przeczytaj nasz artykuł na X y z".

Użyj opisowej linii tematu

Ten jest jedynym, który jest "trudny" jako marketer. Chcesz, aby linie podmiotowe do intrygowania ludzi do otwierania wiadomości e-mail, jednak dla osób z zaburzeniami poznawczymi Tryptyczne linie tematyczne mogą być niepokojące / mylące itp

Uzyskanie równowagi między "daniem meczu daleko" a znaczącą linie tematyczne jest trudne, jeśli nie jest pewien ERR w kierunku znaczącym (może pomóc w szybkości otwartej / konwersji i tak jest więc testowany!)


Widok w przeglądarce.

Ze względu na ograniczenia klientów poczty e-mail Najlepszym sposobem zapewnienia dostępności jest mieć niestandardowy "widoku w przeglądarce" link w e-mailu (jako salesforce itp. Są bardzo mało prawdopodobne, aby wykonać dobrą robotę wersji przeglądarki ich e-maili).

W ten sposób możesz użyć WAI-ARIA, visually hidden text itd. I zaznacz prawidłową stronę Z WCAG 2.1 (i wkrótce WCAG 2.2) wymagania.

Oczywiście zdaję sobie sprawę z ilości pracy, która pociąga za sobą, ale po zbudowaniu szablonu i komponentów, które są dostępne, staje się znacznie łatwiejsze.

Testowanie

Osobiście po prostu testowałbym ręcznie, ale jestem pewien, gdzieś istnieje tam usługa testowania e-mailem istnieje podobna do kontrolera Dostępność AX.

Ale biorąc pod uwagę długość typowego e-maila, powiedziałbym, że sprawdzenie ręczne zajmie tylko 2 minuty, kiedy wiesz, czego szukać, więc usługa może nie być tego warta.

Zawsze możesz skopiować i wkleić e-mail HTML w pliku i zapisać go za pomocą rozszerzenia .html, a następnie otwórz i przetestuj go w przeglądarce / dostępności Checker. Ale możesz uzyskać ładunek problemów, których nie możesz rozwiązać z powodu stosowania tabel do układu.

Wreszcie - nauka użycia czytnika ekranu zajmuje mniej niż godzinę , chwycić NVDA lub VoiceOver i przetestuj wiadomość e-mail, jeśli możesz go zrozumieć i uzyskać dostęp do wszystkich tych samych informacji, co wszyscy wyślą!

0
Graham Ritchie 19 kwiecień 2021, 17:49