Hogyan lehet hozzáférhetővé tenni a világ legrosszabb (vagy a legjobb?) E-mailt

Jó az esély arra, hogy látta a legutóbbi Litmus heti hírlevelünket – akár saját postaládájában, akár online módon. Az az esély is jó, hogy vagy jól kacagtál a retro dizájnból, vagy megborzongtál, amikor eszedbe jutott, hogy hasonló e-maileket kellett készítened a nap folyamán.

Ez nem a szokásos e-mailes hírleveled. A Litmus Weekly az Ön módja annak, hogy az e-mail körben maradjon. Olyan, mint egy új e-mail bestie, aki megszerez. Nem úgy, mint az IRL-es barátaid, akik folyamatosan viccelődnek, hogy spamküldő vagy (kivéve, ha igen, ebben az esetben balra csúsztatunk). Iratkozzon fel a Litmus Weekly-re →

Az április bolondok napja és az e-mail közelgő 50. évfordulója tiszteletére átkutattuk kollektív múltunkat, és újjáélesztettük az e-mail marketing történetének néhány klasszikus trópusát – gördülő szöveg, rikító grafika, slágerszámláló és mindenki kedvence: Comic Sans. Attól függően, hogy kit kérdez, ez vagy a világ legrosszabb e-mailje, vagy a legjobb.

Egy dolog, amit azonban nem élesztettünk fel, előfizetőink számára elérhetetlen élmény. E-mail csapatunk – Jaina, Lily és Carin – elkötelezett az elérhető e-mailek létrehozása mellett, függetlenül a stílusuktól. Szóval, hogyan tartottuk elérhetővé a világ legrosszabb (vagy a legjobb?) E-mail címét?

Hozzáférhető alapítvány

Valamennyi e-mailünk középpontjában a HTML, a CSS és a valódi szöveg alapja áll, amely segíti az összes kampányunk hozzáférhetőségét. Míg sok márka az összes képet tartalmazó e-maileket választja, mi inkább a lehető legtöbb szöveget használjuk – CSS-sel stilizáltuk, hogy a márkán maradjon -, hogy a segéd technológiát használó emberek, például a képernyőolvasók, tényleges tartalmat fogyasszanak.

A retro Litmus Hetilapunk sem különbözik ettől. Bár erősen stílusos, mindez CSS-sel történik Photoshop helyett.

Ha belemélyed a kódba, egy csomó HTML, CSS és szemantikai jelölés jelenik meg, amely nemcsak emberileg és géppel olvasható tartalmat, hanem kontextust is nyújt ahhoz, hogy ez a tartalom valójában mit jelent. Látni fog egy csomó HTML táblázatot is, amelyek zavaróak lehetnek a képernyőolvasókat használók számára. Ennek tudatában alkalmazzuk ARIA szerepkör minden táblaelemre, hogy ne olvashassuk táblának.

<table role=”presentation”></table>

A bemutató szerep pontosan azt csinálja, mint amilyennek hangzik: Minden segítő technológiának elmondja, hogy az elemet csak prezentációra használják, ezért ne foglalkozzon vele semmit. Ez az, ami megakadályozza a képernyőolvasókat abban, hogy minden egyes táblázat sort és cellát elolvassanak a felhasználók számára, ami nagyon rémisztő élmény.

Ha a dolgokat elrejtjük a képernyőolvasók elől, akkor hasonló ARIA funkciót használunk azokhoz a 90-es évek inspirált golyóihoz is. Az ARIA szerepkör helyett azonban az „aria-hidden” attribútumot felvesszük a gomb képekbe:

<img src="https://campaigns.litmus.com/_email/2021/April/04012021_Litmus_Weekly_retro/bullet-red.png" alt="" width="15" height="15" aria-hidden="true" />

Mivel a golyók pusztán díszek, az ARIA specifikációja szerint kivesszük őket:

… célja a segítő technológiák felhasználói élményének javítása a felesleges vagy idegen tartalom eltávolításával.

Dicsőséges GIF-ek, képek és animációk

A retro e-mailes hírlevél nem teljes anélkül, hogy nevetséges animált GIF-ek és visszadobott képek lennének, amelyek végig láthatók – a GIF tárcsázó modemetől a felsőig, a lenti látogatói számlálóig. Annak érdekében, hogy az összes kép hozzáférhető legyen, alternatív szöveget is mellékeltünk, hogy leírjuk azokat a segítő technológiát használó emberek számára. Például a „tárcsázási folyamat” GIF leírja, hogy mi az a kép:

„Tárcsázási folyamat” egy számítógép képével, amely animált pontokkal csatlakozik egy forgó földgömbhöz

És ez a kínos évkönyv fotók gyűjteménye a Litmus stábjától?

a 90-es évekbeli fejlövések összetétele a Litmus marketing osztályán

Az alternatív szöveg az egyik legjobb módszer az e-mailek hozzáférhetőségének növelésére mind a látó, mind a nem látó felhasználók számára. Még akkor is, ha valaki látja ezeket a képeket, nincs garancia arra, hogy a beérkező levelek mappában jelennek meg. Az alternatív szöveg segíti az üzenet átjutását, bármi is legyen.

Csodálatos sátrak

Az egyik kedvenc trükköm ebben a Litmus Hetilapban minden idők egyik legnagyobb HTML-címkéjének használata: sátor! Valószínűleg észrevette a görgetési dátumot az animált Litmus Weekly logó alatt. Míg sok ember úgy gondolta, hogy ez csak egy másik GIF, valójában élő animált szöveg.

Először a Microsoft Internet Explorer valóban régi verzióiban mutatták be, a sátor lehetővé teszi a szöveg görgetését és mozgatását a dokumentum körül. Ez régi, elavult, de az biztos, hogy szép. És mivel a HTML-ben szereplő élő szöveget animálja, eleve hozzáférhető a segítő technológiák számára.

Ennek ellenére a mozgalom elterelheti egyes felhasználók figyelmét, ezért óvatosan használja az olyan elemeket, mint a sátor (vagy bármely más animáció).

A hozzáférhetőségnek nem kell unalmasnak lennie

Nagyon jól éreztük magunkat a retro Litmus Hetilap létrehozásakor. Ennél is fontosabb, hogy örülünk, hogy nem kellett feláldoznunk az akadálymentességet a tervezés érdekében, még akkor sem, ha visszahoztuk az elmúlt évtizedek nevetséges tervezési trendjeit. A hozzáférhető e-mailek jól működhetnek és jól nézhetnek ki (vagy ízlésüktől függően szörnyűek).

Szeretné hozzáférhetőbbé tenni e-mailjeit? Az e-mail hozzáférhetőségről szóló végső útmutatónk áttekint mindent, amit tudnia kell a hozzáférhetőségről – a másolattól a kódig.

Töltse le még ma ingyenes példányát →