Ob spoznavanju e-mail dostopnosti in vsemu kar spada zraven hitro dobimo občutek, da moramo spremeniti tako oblikovanje, kot programsko kodo. Posledično to predstavlja precej velik zalogaj, če imamo omejena sredstva in človeške vire.
Prej ko dostopnost implementiramo v vse svoje pore, lažje bo oz. hitreje se bomo prilagodili. Tako kot CGP oz. oblikovne sisteme imamo lahko tudi sisteme za dostopnost. Dostopne e-maile bi lahko strukturirali na: dostopno vsebino, dostopne grafične elemente, ustrezno topografijo, kontrast, akcijske gumbe in ustrezno kodo.
Kako se lotiti e-mail dostopnosti
Razvoj e-mail dostopnosti zahteva veliko empatije in razumevanja uporabnikov z določenimi omejitvami, ter veliko tehničnega znanja, ustreznega pisanja, oblikovanja, programiranja, da dosežemo dobre rezultate.
Dostopna vsebina
Vsebina mora biti jedrnata in jasna. Kratki stavki in več odstavkov je lažje prebirati, kot pa dolge. Držite se nekako treh stavkov na odstavek. Vsebina mora biti za naše jezikovno območje ravnana levo, centrirano besedilo ali obojestranska poravnava je težko berljiva.
Naslovi in podnaslovi v vsebini omogočajo, da se dolgi e-maili razbijejo na lažje berljive module. Za uporabnike z bralniki zaslona pa omogočajo lažje preskakovanje vsebine, lažjo uporabo tipkovnice pri navigaciji. Uporabljajte ustrezne semantične oznake: h1, h2, h3, …
Dostopni grafični elementi
V grafične elemente, npr. slike ne vstavljajte pomembnih informacij. Uporabljajte jih le za podporne elemente z ustreznimi alternativami. Uporabljajte ALT opise. Problem slik je tudi, če e-mail klient blokira slike uporabnik teh informacij ne vidi.
Ustrezna tipografija
Najmanjša velikost tipografije v e-mailu bi morala biti 16px za osnovno ali body besedilo. Uporabite tudi ustrezno berljivo tipografijo, to pomeni da se bere v majhni in veliki velikosti, ima ustrezno razlikovanje med posameznimi črkami, … skratka preverite v specifikacij fonta ali so ustrezni.
Kontrast
Eden najpomembnejših korakov je ustrezen kontrast. Ta se običajno nanaša že na korak pri izbiri ustreznih barv brenda – CGPju. Običajno se barve določijo pri oblikovanju blagovne znamke, če ta v osnovi nima ustreznih kontrastov bodo posledični vsi materiali manj ustrezni. Ena najpogostejših okvar oz. oviranosti je barvna slepota in z njo povezane težave.
WCAG priporoča kontrast v razmerju 4.5:1 za besedilo na podlagi, da dosežemo AA nivo. Za doseganja nivoja AAA pa kontrast v razmerju 7:1.
Akcijski gumbi (CTA)
Tako, kot pri bannerjih so tudi v e-mailih kliki kralj oz. kraljica, ker je kralj vsebina. Zato so akcijski gumbi (CTA) eden glavnih in najpomembnejših elementov. Tu je potrebno, da uporabljamo ustrezno kodo, namreč če uporabimo sliko in se slednja ne naloži lahko uporabniki popolnoma spregledajo gumb oz. klik. Za gumbe je tako priporočljivo uporabljat ustrezne tehnike -> kodo, ki se na večini e-mail klientov prikazuje ustrezno.
Ustrezna koda
E-maili so že sami po sebi precej bolj težavni za programiranje, kot spletne strani. Če dodamo temu še nivo dostopnosti pa so zadeve še bolj kompleksne.
Včasih smo za nastavljeni velikosti in odmikov uporabljali pixle (px). Zadnje smernice pa priporočajo uporabo em enot. Tako je priporočljivo uporabljati em enote za velikost fontov, gumbe, margin in padding. Zaželena je tudi uporaba atributa jezika (lang=”en”), ki vnaprej definira jezik v katerem je napisan e-mail. Slovenska oznaka je sl – vir.
Seveda ne smemo pozabiti na semantičen HTML, vloge tabel nastaviti na “presentation” (role=”presentation”), tako jih bralniki zaslona razumejo, da so del postavitve in ne del podatkov kar je osnovni namen tabel. Uporabno je tudi skrivanje določenih vsebin pred bralniki zaslona (aria-hidden=”true”), tako vsebine ki niso pomembne in imajo bolj lepotno vlogo skrijemo.
V e-mail dostopnosti si je dobro zapomniti:
- berljiva tipografija (pisava, ki je enostavna za branje)
- ustrezen kontrast (v primerjavi z podlago)
- velikost med 16-21px za osnovno besedilo
- odstavki so ravnani levo in ne sredinsko ali obojestransko
- grafični elementi imajo ustrezno alternativo (npr. ALT opis)
- ustrezna koda za CTA gumbe
Vedno svoja popotovanja v dostopnost ustrezno testirajte.