E-mail dostopnost je velikokrat spregledana, namreč smo šele v fazi ko se dostopnost z veliko zamudo aplicira na klasične spletne strani. Vendar pa lahko z nekaterimi manjšimi prijemi dostopnost prenesemo na e-mail in izboljšamo uporabniško izkušnjo uporabnikom, ki uporabljajo podporne tehnologije, kot so npr. bralniki zaslona.
Hitro izboljšanje dostopnosti e-maila
Dostopnost hitro izboljšamo z uporabo naslednjih korakov:
- določimo jezik vsebine e-maila
- določimo naslov e-maila
- določimo ustrezno kodiranje e-maila
- določimo ustrezne sekcije e-maila
- poskrbimo za ustrezno semantično strukturo vsebine e-maila
- poskrbimo, da imajo slike ustrezne opise
Jezik vsebine e-maila
Da zagotovimo ustrezno izgovorjavo vsebine e-maila moramo določiti ustrezno jezik z atributom “lang”. Jezik izbirajte pravilno, saj bralniki zaslona nimajo vseh jezikov, zato so lahko prebrane besede popačene oz. nerazumljive.
<html lang="en"></html>Določimo naslov e-maila
Z definiranjem naslova omogočimo uporabnikom identifikacijo vsebine.
<title>Moj naslov</title>Določimo ustrezno kodiranje e-maila
Za pravilen prikaz znakov v e-mailu moramo določiti ustrezno kodiranje. Slednjega določimo v glavi dokumenta.
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />Določimo ustrezne sekcije e-maila
To naredimo s pomočjo ustreznega razreza tabel v e-mailu. Tabele so v osnovi namenjene prikazu tabelaričnih podatkov, zato vsebine v tabeli oz. star način izgradnje strani povzroča bralnikom zaslona težave. Namreč navigacija gre skozi vsako celico posebej, medtem, ko vsebina v DIV poljih omogoča skakanje iz enega polja v drugo.
Težavo s tabelami rešimo z uporabo značke role=”presentation”, slednja tabelo spremeni v DIV. Dostopnost samega e-maila se tako izboljša.
<table cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td>Vsebina</td>
</tr>
</table>Uporabimo ustrezno semantično strukturo naslovov in odstavkov
Uporabljamo semantične oznake H1, H2, H3, … <p>. Pomožne tehnologije tako lažje razlikujejo naslove in vsebino in različno globino vsebine.
Problem semantične uporabe je ta, da imajo te značke že določene pred stile, ki lahko podrejo oblikovanje e-maila, zato je potrebno slednje resetirati ali pa nastaviti drugačne in seveda testirati.
Osnovna izboljšanja (odmik spodaj in višina vrstice za Outlook kliente)
<h1 style="margin:0; mso-line-height-rule:exactly;">Naslov</h1>
<p style="margin:0;">Paragraf</p>Slike imajo ustrezne opise
Široko uporabljena praksa je, da imajo vse slike ustrezen ALT opis. To pomeni, da pri vsaki sliki v značko dodamo alternativno vsebino za sliko v primerih, ko se slika ne prikaže oz. v tem primeru za uporabnike, ki imajo težave z vidom. Podporne tehnologije lahko tako preberejo vsebine slik. ALT opis je zaželen tudi za spletno optimizacijo.
<img src="ime-slike.png" border="0" alt="Opisni stavek slike">Iz prebranega vidimo, da hitro izboljšanje dostopnosti e-maila ni tako težavna, potrebno se je le držati določenih korakov, ki kmalu postanejo rutina. Potem gre vse lažje in hitreje. Pri implementaciji novih procesov oz. sprememb kode je vedno potrebno opraviti ustrezne teste, da se izognemo morebitnim težavam v različnih pregledovalnikih e-mailov oz. težava v podpornih tehnologijah, kot so bralniki zaslona.
