Denne veiledningen vil lede deg gjennom en sjekkliste med over tretti forbedringer du kan lage til e-postene dine for å sikre at de er så tilgjengelige som mulig. Den er også fullpakket med nyttige koblinger og opplæringsprogrammer, så bookmark denne siden, og gjør den til din ressurs for e-post tilgjengelighet.

Merk: denne opplæringen er en del av en hel ukes verdi av e-postinnhold på Tuts + Web Design-sjekk ut læringsguiden for Mastering HTML Email for mer!

Email Professionals: Det er på tide å prioritere tilgjengeligheten

Vi legger stor vekt på nyhetsbrev, markedsføringskampanjer og andre e-postmeldinger vi sender. Vi produserer nøye den riktige meldingen. Vi utformer flittig bildene. Vi tester triumferende i Outlook.

Og det lønner seg. Email er fortsatt hvordan folk flest foretrekker å høre fra selskaper, og som en markedsføringskanal har den en gjennomsnittlig avkastning på 32 til 1.

Men fortsatt, de fleste av oss kunne gjøre enda bedre. HTML-e-post er ikke tradisjonelt utformet og kodet med tilgjengelighet i tankene. Som en følge av dette, kjemper mange av våre mottakere om å bli med, og vi vender bort fra publikum.

Noen ganger er forbedringer åpenbare. Hvis hele eposten din består av fin utskrift, vil de fleste av oss over 25 år ha det vanskelig å lese det. Men oftere er barrierene vi legger mellom vår melding og mottakerne våre mer subtile. Jeg innrømmer at det tok meg et øyeblikk å legge merke til problemet i følgende bilde:

Hva er galt med dette bildet? #accessfail pic.twitter.com/H7tAy5X5ud

- Elisha Friday Wright (@MsFridayology) 24. november 2016

Når vi blir oppmerksomme på disse problemene, er de ofte enkle å fikse. Ved å lese dette, tar du allerede et viktig første skritt mot å gjøre e-postene dine tilgjengelige for flere mennesker.

Hvis du er ny til koding av e-post, anbefaler jeg først å lese Nicole Merlins veiledning. Disse vil lære deg grunnleggende om HTML-e-post, og hvordan de adskiller seg fra nettsider.

Vi bygger videre på disse ferdighetene når vi lærer å søke tilgjengelighetshensyn til våre e-postmeldinger.

Hva betyr vi med "Tilgjengelighet"?

I utgangspunktet handler e-post tilgjengelighet om at e-postene dine er tilgjengelige for så mange av mottakerne som mulig, uansett omstendighetene deres. Vi tenker generelt på tilgjengelighet som å regne for ulike funksjonshemminger, og det er sant, men det er faktisk en bredere definisjon enn det, som skissert av Sami Keijonen:

"Vi er alle forskjellige, og våre behov kan endres over tid." - Sami Keijonen

Funksjonshemminger kommer i mange former og alvorlighetsgrader. WHOs verdensrapport om funksjonshemning anslår at 15% av verdens befolkning lever med funksjonshemming. Avhengig av deres situasjon, kan disse personene ha tilgang til hjelpeteknologi som gjør hverdagsoppgaver enklere. For å gjøre e-postene våre mer tilgjengelige, må vi unngå å plassere barrierer foran mennesker, samt verktøyene de stoler på.

Begynn med en baseline opplevelse

Velg en epost du har sendt nylig. Åpne den på skjermen, eller skriv den ut slik at du kan ta notater på den.

Hva er målet med e-posten? Hvilke tiltak skal mottakerne ta etter å ha lest det, eller hvilken informasjon skal de ha lært?

Hvilke elementer består e-posten av? Hvordan bidrar hver enkelt til målet? Ville e-posten fortsatt være fornuftig hvis en av avsnittene, linkene eller bildene ble fjernet?

Ved å stille disse spørsmålene, kan du definere en baseline erfaring-det bare minimum som må kommuniseres med mottakeren. Dette kan være så enkelt som en lenke og dens etikett, eller det kan være mer du trenger å komme over.

Fremfor alt må baseline-opplevelsen være tilgjengelig for alle mottakere for å få tilgang til og forstå. Og alt annet skal utformes for ikke å komme i veien. Nå for detaljer ...

1. Lag tekstlesbar

Unngå murer av tekst

Jo lengre avsnittet, desto vanskeligere er det å lese. Dette gjelder for alle, men spesielt personer med dysleksi eller andre funksjonshemming.

Her er noen tips for å gjøre teksten mer skannbar:

• Del lange avsnitt til kortere. Hvert avsnitt skal ha et enkelt fokus. Les hver setning og se om den fokuserer på det samme som den siste. Hvis ikke, start et nytt avsnitt.
• Gruppe relaterte avsnitt under beskrivende overskrifter. Hvis du bruker mer enn ett overskriftsnivå, sørg for at hierarkiet er fornuftig. vanligvis bruker du en 

  for hovedoverskriften,

  s for hver seksjon,

  s for underavsnitt, og så videre. Ved å bruke semantiske overskriftselementer gjør e-posten din lettere å navigere ved hjelp av skjermlesere.

• Bruk kursiv eller modig for vekt, men bruk dem sparsomt. Hvis du legger vekt på alt, skiller ingenting ut.
• Nåværende grupper av poeng som punktliste (
  ) eller nummerert (
  ) Lister for å gjøre dem lett fordøyelige.
  1. Inkluder grafikk for å visualisere og støtte tekstinnholdet.

  Bruk enkle ord

  Hvis du er designer eller utvikler, kan skriving ikke være en del av jobben din. I så fall bør du vurdere å dele denne veiledningen med kollegaen eller klienten din. Når vi arbeider for å gjøre e-postene tilgjengelige, er språket vi bruker minst like kritisk som de mer visuelle eller tekniske aspektene.

  Husk at folk leser på forskjellige lesenivåer, av mange grunner. Du kan få mottakere med dysleksi. Du kan skrive på sitt andre språk. Eller kanskje er de ikke kjent med motivets sjargong.

  Hvis du skriver til en gruppe mennesker om et emne, vil du ofte være mer opptatt i emnet enn dem. Jo mer vi vet om noe, jo mer glemmer vi hva det er å ikke vite. Dette fenomenet er kjent som "forbannelsen av kunnskap".

  Hvis du ikke er sikker på om folk som ikke er kjent med emnet, kan forstå skrivingen din, kan du finne noen til å be om tilbakemelding. Dine kolleger kan også lide av forbannelsen av kunnskap. Kanskje du kan få hjelp fra en venn, familiemedlem eller en av dine abonnenter?

  Da jeg logget på å skrive for Tuts +, sendte de meg deres stilguide som har noen eksempler på enkle engelske ordvalg:

  Bruk "kjøp", ikke "kjøp". Bruk "hjelp", ikke "hjelp". Bruk "om", ikke "omtrent".

  Kan du erstatte noen av ordene i e-postene dine med enklere? Hva med å holde en liste over forvirrende vilkår du vanligvis bruker, og ord som skal brukes i stedet?

  Det finnes også flere formler for måling av hvordan lesbar teksten din er. 
  

  Hvis du kopierer og limer inn innholdet ditt i Word eller Outlook, kan du få lesbarheten sin vurdert ved hjelp av to tester: Flesch Reading Ease-testen, som gir leseavstanden fra 0 til 100, og Flesch-Kincaid Grade Level-testen, som anslår at hva amerikansk skole grad nivå noen ville vanligvis forstå teksten.

  Disse tester ser på gjennomsnittlig antall ord per setning, og gjennomsnittlig antall stavelser per ord, som indikatorer på hvor lett teksten skal leses.

  For mer omfattende tester, prøv readable.io. Dette onlineverktøyet lar deg kjøre innholdet ditt gjennom flere lesbarhetstester. Deres betalte planer tilbyr til og med et verktøy spesielt for e-postmeldinger: videresend eposten til en bestemt e-postadresse, og de svarer med en automatisk lesbarhetsrapport.

  Bruk 14px skriftstørrelser eller større

  Å øke skriftstørrelsen er ikke bare et dumt lure for å gjøre essayet ditt lengre.

  Det er også en enkel måte å gjøre e-postene enklere å lese. 14px er absolutt bare minimum for kroppskopi. Teksten her på Tuts + har en skriftstørrelse på 18px, og det føles heller ikke for stort.

  Overskrifter bør være store nok til enkelt å skille seg ut fra kroppens kopi. Type Skala er et nyttig verktøy for å beregne og forhåndsvise passende skriftstørrelser. Lær mer om skala og hierarki fra disse veiledningene:

  Pass på at du bruker kontrastfarger
  

  Som en generell regel er mørk tekst på en lett bakgrunnsfarve lettest å lese for de fleste.

  Hvis du bruker en fargekombinasjon med lav kontrast, for eksempel lys grå tekst på en hvit bakgrunn, kan det være vanskelig å lese for personer med nedsatt syn eller fargeblindhet. Lav kontrast gjør det også lettere å lese tekst under dårlige belysningsforhold som direkte sollys.

  Lys tekst på en mørk bakgrunn kan også fungere godt, spesielt for personer med lysfølsomhet, eller når du bruker en lys skjerm i mørke omgivelser. Men for folk med presbyopi (uskarpt syn), skaper lett tekst på en mørk bakgrunn en slags halo eller glød effekt. Alle opplever til slutt gradvis presbyopi. Øynets evne til å fokusere reduseres med alderen, vanligvis starter en gang etter 40.

  Det er mange verktøy for å sjekke om fargekontrasten er høy nok:

  • contrast-ratio.com er et nyttig verktøy med et minneverdig domenenavn. Når du skriver inn en fargekombinasjon, forutsetter den øyeblikkelig kontrast og endrer adressefeltet til en direkte kobling, slik at du kan dele fargekombinasjonen.
  • Jeg liker også tanaguru-kontrastfinner, som antyder andre fargevalg hvis kontrasten din er for lav.

  
  

  Det er riktig, PapayaWhip og DarkSlateGrey, vakkert

  Unngå tynne skrifttypevekter

  Ultra-lette skrifttyper har vært populære hos designere i noen år nå, men de er mindre populære blant personer med nedsatt syn.

  Kontrast god, font vekt dårlig

  Når kombinert med lavfargekontrast og eldre skjermbilder, er disse skriftvektene spesielt vanskelige å lese. For en bedre leserfaring, bruk vekt fra 500 (normal) og oppover.

  Juster Kroppskopien, ikke rettferdiggjør eller Senter

  Språk som leses fra venstre til høyre, som engelsk, er lettest å lese når venstrejusteres. For høyre til venstre skript som de som brukes i arabisk, persisk og hebraisk, juster teksten til høyre.

  Selv om du foretrekker utseendet på sentrert tekst, bør du unngå det hvis du kan. Tekst er lettere for alle å lese når hver linje starter like under forrige. Dette gjelder selv for overskrifter, men er spesielt viktig for kroppseksemplar.

  Til slutt bør du aldri bruke rettferdig justering, der teksten er ordnet slik at den har jevne kanter på begge sider. Rettferdig tekst er vanskeligere å lese generelt, og spesielt i nettlesere og e-postklienter, som ikke behandler begrunnelse godt.

  Bruk stor nok linjehøyde

  Ord trenger rom for å puste.

  Hvis tekstlinjer er for tette sammen, kan de være vanskelige for øyet å skille seg fra. Det blir for lett å tilfeldigvis hoppe til feil linje. Hvis de er for langt fra hverandre, begynner de å se ut som separate avsnitt.

  Den beste linjens høyde som skal brukes, avhenger av skriftstørrelsen og linjelengden. Men hvis du vil ha en rask, generell regel, kan du ikke gå for feil med en linjehøyde på 1,5 ganger skriftstørrelsen. For eksempel vil en skriftstørrelse på 16px være behagelig å lese med en linjehøyde på 24px.

  E-postklientsupport for linjehøyde Egenskapen er for det meste solid, bortsett fra noe merkelig oppførsel i Outlook. Bruk px verdier i stedet for em, prosentvis eller "unitless" verdier for mer konsistente resultater.

  Lag linjelengden ("Mål") Lesbar

  Jo lengre du går langs en tekstlinje, desto vanskeligere er det å finne veien tilbake til der du startet.

  Hvis teksten går for bredt, må øyet bevege seg mye, og det er vanskelig å fortsette å lese fra en linje til den neste.

  For optimal lesbarhet, sikte på en linjelengde på rundt 45-75 tegn.

  Skriftstørrelsen, linjens høyde og linjelengden påvirker hverandre. Det er mange tilnærminger til å bestemme proporsjonene. Noen liker å bruke det gyldne forholdet (selv om de magiske egenskapene ikke nødvendigvis er en garantert oppskrift på suksess). Ved hjelp av Golden Ratio Typography kalkulatoren kan du raskt få linjehøydeanbefalinger og beregne den omtrentlige linjelengden (CPL eller tegn per linje) basert på skriftstørrelsen og kolonnebredden.

  Bruk Semantisk Markup

  Tradisjonelt har e-postutviklere kodet hver del av e-postene som tabelloppslag, inkludert separate tabellrader for hver overskrift og avsnitt. Dette er delvis fordi noen e-postklienter pleide å endre stilene til semantiske elementer, men også fordi folk ville bli så kjent med hvordan HTML-tabeller fungerte som de endte opp med å bruke dem som standard.

  Som det sier: Hvis alt du har er en hammer, ser alt ut som et negle.

  Men som e-postklienter har forbedret deres gjengivelse, og vi som e-postutviklere har samlet forbedret kodingspraksis, har mange funnet at det er flere ulemper enn fordeler med den tabellbaserte kodestilen.

  Hvis du i stedet kodes dine avsnitt, lister og overskrifter, som

  ,

  ,
  ,

  ,

  , etc., så vil folk som bruker skjermlesere og annen assistentteknologi lettere navigere og gi mening om innholdet ditt.

  Du vil fortsatt ha samme kontrollnivå over hvordan innholdet ditt ser ut ved å stylere det med CSS, og det vil være mer tilgjengelig, med mindre kode. Du vil ønske å bruke margene du vil ha for hvert element, mens stiler som kropps kopi skriftstørrelse og farge kan settes på et overordnet element og arvet av alle avsnittene.

  Her er et grunnleggende eksempel:

   
  Prektig arvelige banksaker
   
  Grundigere vitende enkeltstående beholder duer lengste, påfallende opplevd minne dunstkrets, kant observasjon drakt besynderlig tillatt telt.
   
  Hyss gjeldsbevis luftdraget embroidery, unyttig utgjør ringeaktende begriper.
   

  Bruke lang Egenskap

  De fleste datamaskiner og smarttelefoner leveres med skjermleserprogramvare som leser tekst ut som tale. For å kunne uttale ord korrekt, og ikke som en italiensk stuntmann, må skjermleserne vite hvilket språk teksten er skrevet inn i.

  For å angi innholdsspråket, vi bruker lang Egenskap. Her er et raskt eksempel på hvordan en fransk setning lyder med og uten språket spesifisert (video fra Léonie Watson):

  De lang Attributt fungerer med ethvert HTML-element. Hvis du bruker forskjellige elementer i samme e-post, angir du det riktige språket for hver del.
  

  Hovedspråket bør settes for element. Men fordi noen e-postklienter fjerner dette elementet når e-postadressen vises, er det sikreste å også gjenta attributtet på et innpakningselement inne i , som en

  rundt hele e-postens innhold.

  For å finne den riktige verdien som skal brukes til språket ditt, kan du se IANA Language Subtag Register, som er en lang tekstfil av språk og tilhørende subtag-verdier. Eller bruk det vennligere språket subtag oppslag som lar deg søke i samme informasjon.

  Her er den franske setningen fra før, med språket riktig satt:

  Jeg er glad for at du kommer til å føle deg hjemmefra.

  2. Bruk farge overveiende

  Kommuniser ikke bare med farge

  Tankefull bruk av farge kan bidra til å støtte meldingen eller formidle et humør. Men hvis du stoler på farge alene for å formidle viss informasjon, kan det bli savnet av mottakere som er blinde, fargeblind eller fra en kultur der disse fargene har annen betydning.

  For eksempel, i stedet for å bruke en rød eller grønn prikk for å indikere om et produkt er på lager, bruk tekst som "på lager" og "utsolgt", og bruk kun farge for å støtte det.

  Ta fargeblindhet inn i kontoen

  Det er forskjellige typer fargeblindhet som gjør at folk har problemer med å skille farger. Den vanligste typen er rødgrønn fargeblindhet, noe som gjør det vanskelig å fortelle røde og grønne farger. Total fargeblindhet, noe som gjør alt ser svart og hvitt ut, er sjeldent.

  Når du velger farger for tekst-, grafikk- og layoutelementer, vær oppmerksom på kombinasjoner av farger i rød-oransje-gul-grønt rekkevidde, plassert tett sammen. Spesielt hvis fargene er like i lysstyrke og metning.

  Det finnes også andre fargekombinasjoner som kan være vanskelig for personer med forskjellige fargeblindhetstyper å skille mellom. Du kan bruke en fargeblindhetssimulator til å fange eventuelle problemer i e-postene dine. Det er mange å velge mellom. 

  • Med Toptals Colorblind Web Page Filter, kan du skrive inn nettadressen til webversjonen av e-posten din. 
  • Litmus har et fargeblindhetsfilter bygget inn i e-posttester. 
  • Farge Oracle (Mac, Windows og Linux) og Sim Daltonism (Mac og IOS) er open source simulator verktøy.

  Ikke bruk for mye, myke farger

  For personer med lett følsomhet og migrene, stirrer på bakbelyste skjermer kan forårsake øyenstamme og fungere som en migreneutløser. Dette kan bli verre av lyse farger, spesielt i blå og røde fargetoner.

  For store områder som bakgrunnsfarger, bruk mer dempet farger når det er mulig.

  Unngå understreket eller farget ikke-koblet tekst (spesielt blå)

  Ikke alle koblinger er blå og understreket, men alle understreket og blå tekst er koblet sammen. I det minste er det hva leserne forventer.

  For å unngå forvirring og frustrasjon, bruk ikke underlag og farger for vektlegging.

  3. Sjekk at bildene dine er tilgjengelige

  Unngå tekst i bilder

  Mange avsendere designer fortsatt e-post med tekst i bilder i stedet for live HTML-tekst. Hvis arbeidsgiveren eller klienten krever pixel perfekt gjengivelse, er det lett å se hvordan dette kan virke som en god løsning. Men ulempene med å fange teksten i bildefiler oppveier fordelene.

  • Skjermlesere kan ikke lese tekst i bilder.
  • Hvis bildeblokkering er slått på i e-postklienten, eller hvis e-posten leses offline, brytes bildene.
  • Du kan ikke velge, kopiere og lime inn teksten.
  • Oversettelsessoftware kan ikke tolke innholdet.
  • Teksten kan ikke skannes riktig eller reflekses for å passe til forskjellige skjermstørrelser eller zoomnivåer.

  Noen av disse problemene kan delvis løses ved å sette innholdet som bildetes alternative tekst og styler det med CSS. Men e-postklienter deler dessverre ikke en konsekvent måte å håndtere bildeblokkering og alternativ tekst på. Og noe hierarki, for eksempel overskrifter, vil gå tapt i alternativ tekstversjon av innholdet.

  Hvis designet ditt krever tekst plassert over et bilde, hjelper backgrounds.cm deg med å kode dette på en måte som fungerer på de fleste store e-postklienter.

  Til slutt, i tilfeller hvor du ikke kan unngå å bruke bilder for tekst, legg til role = "text" til bildet så vil skjermleserne behandle sin alternative tekstverdi som vanlig tekst.

  Bruk Nyttig Alternativ Tekst

  Vi bruker bilder til mange forskjellige formål. Noen inneholder viktig informasjon, andre er illustrasjoner eller deler av oppsettet.

  Alle bildene må ha en alt attributt, men attributtet skal ikke alltid ha en verdi. I tilfeller der alternativ tekst ikke er nødvendig, bruk et tomt alt attributt for å hindre skjermlesere fra å stave ut bildefilnavnet eller lenkeadressen. Sjekk ut dette eksemplet fra Rémi Parmentier:

  
  

  Hvis bildet har verdifullt innhold, beskriv det i alternativ tekst. Eller hvis bildet er en lenke, legg til alternativ tekst for å beskrive hvor linken peker på.

  W3C har et praktisk beslutningstreet for alternativ tekst. Den dekker de fleste vanlige bruksområder for bilder, og hvordan man bruker alt attributt i hvert tilfelle.

  Bruk GIFs ansvarlig

  Vårt hovedalternativ for å inkludere animasjoner i våre e-postmeldinger som vil fungere i de fleste e-postklienter er å bruke GIFer. Vi har sett mange gode eksempler på GIF-er i e-post. De kan være flotte for å forklare ideer mer effektivt enn du kunne med et statisk bilde, eller for å legge til visuell interesse. Nedtelling timere og video forhåndsvisninger er andre populære bruksområder.

  Dessverre kan GIFs forårsake problemer for enkelte mottakere.

  I ekstreme eksempler kan intense animasjoner utløse anfall for personer med lysfølsomme epilepsi. Hvis du har GIF-er som har blinkende eller blinkende farger, eller dristige mønstre med høy kontrast, er det verdt å teste dem ved hjelp av Trace Center's gratis Photosensitive Epilepsy Analysis Tool (kun Windows). Dette verktøyet fanger animasjoner fra skjermen og identifiserer potensielle anfallsrisiko.

  Selv om mindre dramatiske, subtile animasjoner kan forårsake problemer også. GIF som sløyfe for alltid kan avlede fra ditt andre innhold, spesielt for personer med oppmerksomhetsunderskudds hyperaktivitetsforstyrrelse (ADHD) eller autisme. E-post på Acid tilbyr noen animasjonsbestemmelser for abonnenter med ADHD.

  4. Vær oppmerksom på layout og tabeller

  Unngå unødvendige tabeller

  Selv om HTML-tabeller er nødvendige for å få bestemte layouter til å vises riktig i e-postklienter, spesielt i Outlook, har e-utviklere en tendens til å overtale dem.

  Jeg vil anbefale å søke gjennom malekoden din for hver forekomst av  og vurdere om bordet er nødvendig. Jeg kommer ofte over

   merker som lett kan byttes ut med en mer lett tilgjengelig og lett tilgjengelig

  , eller til og med fjernet helt, uten at det påvirker hvordan e-posten gjøres.

  Bruk role = "presentasjon" på layouttabeller

  På de resterende tabellene legger du til role = "presentasjon" Egenskap. Skjermlesere annonserer vanligvis hver tabellcelle de møter, noe som kan gjøre e-postmeldinger veldig kjedelige å lese.

  Ved å legge til role = "presentasjon", du forteller skjermleseren å behandle bordet som et vanlig tekstelement, og ikke navigere det som datatabell. Se eksemplene på Tilgjengelighet i e-post: Del II av Mark Robbins.

  Hvis e-postene dine inneholder tabeller som inneholder faktiske tabelldata, må du ikke bruke rolle attributt på dem.

  Bruk aria-skjult = "true" på Spacer Elements

  Som margin og polstring har noe inkonsekvent støtte over e-postklienter, er det ikke uvanlig å bruke separate elementer som

  s eller til og med mellomrom for å legge til mellomrom til en e-postdesign.

  Slike spacerelementer legger ikke til noen verdi for folk som leser e-posten din med en skjermleser. For å få skjermlesere til å ignorere et mellomrom, legg til aria-skjult = "true" attributt til elementet.

  5. designe klare koblinger og klikk mål

  Gjør linker åpenbare, utover farge

  Lenker er ofte den viktigste delen av en epost, siden de er hvordan mottakerne tar neste skritt. Å gi dem en annen farge enn resten av innholdet, gjør dem lettere å finne. Blå tekst har den beste muligheten til å bli anerkjent som en lenke, men du kan bruke andre farger så lenge de skiller seg ut, selv til fargeblind brukere.

  Unngå å bruke koblingsfarge for unclickable tekst, for å unngå forvirring.

  Understreke teksten bidrar også til at det kan klikkes. Noen foretrekker å driste sine lenker isteden, av estetiske grunner, men det kan være verdt å reservere fet skrift for vektlegging.

  Det er generelt best å unngå "Ghost-knapper", en vanlig stil med knapper med en kontrastfarge, men en gjennomsiktig bakgrunn. Disse kan være vanskelig for mottakerne å gjenkjenne som klikkbare, spesielt når de plasseres på toppen av et bakgrunnsbilde. Knappstiler med kontrastfarge er enklere å oppdage.

  Bruk Nyttig Link Text

  Folk som leser e-posten din med en skjermleser, kan hoppe fra kobling til kobling uten å lese innholdet mellom dem. Og mottakere med lav visjon kan lese e-posten din zoomet inn, mangler sammenhengen rundt linkene dine. For at lenker skal være tilgjengelige for dem, må linkteksten være i stand til å stå alene og fortsatt være fornuftig.

  En kort og beskrivende lenketekst hjelper folk å navigere effektivt.

  Lenker som peker på forskjellige steder, bør ikke ha samme linktekst. Gjør hver av dem unike - ingen "Les mer" linker!

  Unngå å vise lange nettadresser som linktekst, siden de vanligvis ikke er nyttige som linktekst til alle mottakere. 

  Lag knapper som er store og fullt klikkbare

  For de viktigste linkene i e-posten din, kan en fin, stor Call-to-Action-knapp gi deg en fin økning i klikk gjennom tekstkoblinger.

  Å ha et stort nok område å klikke gjør knappen enklere for alle å treffe, spesielt mange brukere med fysiske funksjonshemninger.

  Litmus har en god oversikt over måter å kode e-postknapper på. For å unngå vanskeligheter og frustrasjon, velg en hvor hele knappens overflate er klikkbar.

  

  Sier det, jeg har en personlig preferanse for knapper. Cm.

  Ikke gjør alt til en kobling

  For å øke klikkfrekvensene kan det være fristende å slå alle overskrifter, bilder og til og med avsnitt til en kobling til destinasjonssiden din. Dette betyr også at folk kan klikke koblingen enkelt uten å være for nøyaktige. Det er imidlertid noen ulemper å lage alt en lenke.

  For folk som leser e-posten din med en skjermleser, leses hver lenke ut, slik at gjentakelse av den samme lenken for hvert element vil gjøre e-posten din kjedelig å navigere.

  Hvis du har elementer nær hverandre som skal knytte til samme sted, for eksempel et ikon med en tekstetikett, er det ofte en god løsning å pakke dem begge sammen i samme lenke, og opprette et enkelt klikkbart område.

  Hvis det meste av e-posten din består av koblinger, kan dette også gjøre e-posten vanskelig å rulle på mobiler og andre berøringsskjerm. Spesielt for personer med skjelv eller andre muskelkontrollproblemer kan det være en utfordring å gjøre det via en e-post uten å uhell å klikke på uventede koblinger..

  Ta i betraktning :sveve og :fokus Styles

  Gir koblinger en subtil :sveve stil er en enkel måte å bekrefte til folk at det de skal klikke på, er faktisk en lenke.

  Når du navigerer gjennom koblingene i en e-post med tastatur, :fokus stiler hjelpe leserne dine til å holde oversikt over hvilken lenke de er på. De fleste e-postklienter og nettlesere legger til en oversikt som standard :fokus stil for lenker. Det er generelt best å ikke fjerne denne oversikten, men hvis du gjør det, bør du sørge for at du erstatter det med en like klar :fokus stil.

  Hver gang du legger til en :sveve stil, er det vanligvis godt å bruke samme stil til :fokus slik at folk vil ha en lignende opplevelse om de navigerer med musen eller tastaturet.

  Link til tilgjengelig innhold

  Mens det ikke er noe du alltid kan kontrollere, når du knytter til nettsider, er det godt å favorisere innhold som også er tilgjengelig.

  Hvis du har et valg mellom å koble til to lignende artikler, hvor det er lett å lese og den andre har dårlig fargekontrast eller en liten skriftstørrelse - alt annet er like, gå med den mer tilgjengelige, hvis du kan.

  6. Ikke glem om vanlig tekst

  Inkluder en vanlig tekstversjon
  

  På grunn av tilgjengelighetsproblemene de kan oppleve med mange HTML-e-poster, velger enkelte mottakere å bruke vanlig tekstversjon av e-postmeldinger i stedet.

  Siden du ikke kan bruke bilder, skriftstørrelser, farger og så videre, er oppsettalternativene dine begrensede. Når du komponerer tekstversjonen, kan du tenke på hvordan du best presenterer kjernemeldingen din ved å bruke bare tekst, og bekymre deg mindre om å gjøre det konsistent med HTML-versjonen.

  Vær ekstra oppmerksom på hvordan du formaterer koblinger, siden bare linkadressen vil bli klikkbar. Et godt mønster er å skrive en beskrivende linketikett etterfulgt av et kolon på en linje, og deretter linkadressen på neste linje.

  ... Finn flere enkle formaterings tips her: https://www.campaignmonitor.com/blog/email-marketing/2015/01/plain-text-emails-conversion/... 

  Mange ESP-er (e-postleverandører) genererer automatisk en ren tekstversjon for deg, men hvis du gir den en gjennomgang, vil du vanligvis finne små måter å gjøre det lettere å lese.

  7. Bli kjent med testing og verktøy

  Bruk disse e-postspesifikke verktøyene

  Det er mange måter å teste e-posten din på, både for å finne tilgjengelighetsproblemer og for å kontrollere at reparasjonene fungerer som forventet.

  Et godt sted å starte er tilgjengelig-email.org, som gir deg en tilgjengelighetsrapport av e-posten din. Dette kontrollerer at alle bildene har en alt attributt, at overskriftsnivåene følger et riktig hierarki, og mange av de andre punktene vi har dekket her.

  Vanligvis grundig rapport fra accessible-email.org

  Hvis dette er første gang du vurderer tilgjengeligheten til e-postene dine, er sjansene at du får en fin sjekkliste over forbedringer du kan gjøre. Når du kommer tilbake til å teste din oppdaterte e-postkode, kan du se frem til tilfredsstillelsen av røde kryss som blir grønne taster.

  Med sitt populære sett med e-postverktøy kan Litmus du sjekke mange aspekter av e-postens tilgjengelighet, for eksempel vanlig tekstversjon, bilderevisningsvisning og forskjellige fargeblindhetssimuleringer av e-postdesignet ditt.

  Test med skjermlesere

  En god måte å oppleve e-posten på, som noen av mottakerne dine,, er å prøve å lese den ved hjelp av hjelpemidler som skjermlesere. De fleste operativsystemer har en skjermleser innebygd som du kan teste med:

  • VoiceOver i macOS og iOS.
  • TalkBack i Android.
  • Forteller i Windows.
    

  Du kan også vurdere å teste med tredjeparts skjermlesere. De mest brukte skjermleserne er JAWS (kommersielle) og NVDA (open source), som begge kjører på Windows. For JAWS er ​​en 90 dagers lisens tilgjengelig, noe som bidrar til å redusere kostnadene ved testing.

  Installer de ønskede nettleserverktøyene og pluginene

  Alle de store nettleserne kommer nå med innebygde utviklerverktøy for testing av tilgjengelighet. Selv om disse ikke er spesifikke for e-post, gjelder de fleste bekymringer bare det samme.
  

  Én jeg bruker ofte, er fanen Revisjon i Chromes utviklerverktøy, som viser siden og gir en praktisk oversikt over problemer som skal løses.

  I tillegg er det flere plugins for tredjepart som kan hjelpe deg med å få et litt annet perspektiv på det meste de samme punktene. Her er noen som jeg anbefaler:

  • tota11y kommer som en bokmerke og Chrome-utvidelse som du kan bruke i nettleseren til å teste din e-post. Dens sjekker inkluderer tekstfargekontrast og ARIA landemerker. Det viser deg også hvordan skjermlesere ser de forskjellige elementene i e-posten din.
  • Webutvikler er en nettleserutvidelse for Chrome, Firefox og Opera, som gjør det enkelt å teste å slå av bilder og innebygd CSS blant annet.
  • Funkify Chrome-utvidelsen består av et sett med "funksjonshemmede simulatorer". Hver modus endrer siden på måter som representerer ulike utfordringer, for eksempel dysleksi og skjelvende hender, for å hjelpe deg med å vurdere hvor godt utformingen holder opp. Funkify leveres også med tota11y inkludert som en av dens moduser.

  Forstå viktigheten av brukertesting

  Ingen verktøy eller simulator kan ganske erstatte å snakke med personer med funksjonshemninger og lære om hvordan de samhandler med e-poste

  Webdesign

  En nybegynners guide til Enqueuing jQuery

  En nybegynners guide til å tegne et grunnleggende antrekk på et tegn i Photoshop

  

  ×