Deze gids zal u door een checklist van meer dan dertig verbeteringen leiden die u in uw e-mails kunt aanbrengen om ervoor te zorgen dat ze zo toegankelijk mogelijk zijn. Het is ook boordevol handige koppelingen en zelfstudies, dus maak een bladwijzer van deze pagina en maak er uw go-to-resource van voor e-mailtoegankelijkheid.

Notitie: deze tutorial maakt deel uit van de e-mailinhoud van een hele week op Tuts + Web Design - bekijk de Mastering HTML Email Learning Guide voor meer informatie!

Professionals per e-mail: het is tijd om toegankelijkheid te prioriteren

We hebben veel energie gestoken in de nieuwsbrieven, marketingcampagnes en andere e-mails die we sturen. We maken zorgvuldig de juiste boodschap. We ontwerpen de visuals ijverig. We testen triomfantelijk in Outlook.

En het loont. E-mail is nog steeds de manier waarop de meeste mensen het horen van bedrijven en heeft als marketingkanaal een gemiddeld rendement op investering van 32 tot 1.

Maar toch zouden de meesten van ons het nog beter kunnen doen. HTML-e-mails zijn niet traditioneel ontworpen en gecodeerd met de toegankelijkheid in het achterhoofd. Dientengevolge worstelen veel van onze ontvangers om mee te doen en we keren een deel van ons publiek weg.

Soms zijn verbeteringen duidelijk. Als uw volledige e-mail uit fijne druk bestaat, zullen de meesten van ons boven de leeftijd van 25 het moeilijk hebben om het te lezen. Maar vaker zijn de barrières die we plaatsen tussen onze boodschap en onze ontvangers subtieler. Ik geef toe dat het me even duurde om het probleem op te merken op de volgende foto:

Wat is er mis met deze foto? #accessfail pic.twitter.com/H7tAy5X5ud

- Elisha Friday Wright (@MsFridayology) 24 november 2016

Zodra we ons bewust worden van deze problemen, zijn deze vaak eenvoudig op te lossen. Door dit te lezen, zet u al een belangrijke eerste stap om uw e-mails voor meer mensen toegankelijk te maken.

Als je nog niet bekend bent met het coderen van e-mails, raad ik je aan eerst de handleidingen van Nicole Merlin te lezen. Hiermee leer je de basisprincipes van HTML-e-mails en hoe deze verschillen van webpagina's.

We bouwen daarop voort en leren hoe we toegankelijkheidsoverwegingen kunnen toepassen op onze e-mails.

Wat bedoelen we met "Toegankelijkheid"?

De kern van de toegankelijkheid van e-mail is dat u uw e-mails beschikbaar maakt voor zoveel mogelijk ontvangers, ongeacht hun omstandigheden. Over het algemeen beschouwen we toegankelijkheid als het afrekenen met verschillende handicaps, en dat is waar, maar het is eigenlijk een bredere definitie dan die, zoals geschetst door Sami Keijonen:

"We zijn allemaal verschillend en onze behoeften kunnen veranderen in de tijd." - Sami Keijonen

Handicaps zijn er in vele vormen en ernst. WHO's World-rapport over invaliditeit schat dat 15% van de wereldbevolking met een handicap leeft. Afhankelijk van hun situatie hebben deze personen mogelijk toegang tot ondersteunende technologie die dagelijkse taken eenvoudiger maakt. Om onze e-mails toegankelijker te maken, moeten we vermijden dat er barrières voor mensen worden geplaatst, en ook op basis van de tools waar ze op vertrouwen.

Begin met een basiservaring

Kies een e-mail die je onlangs hebt verzonden. Open het op uw scherm of druk het af, zodat u aantekeningen kunt maken.

Wat is het doel van de e-mail? Welke actie moeten de ontvangers nemen na het lezen ervan, of welke informatie moeten zij hebben geleerd?

Uit welke elementen bestaat de e-mail? Hoe draagt ​​iedereen bij tot het doel? Zou de e-mail nog steeds zinvol zijn als een van de alinea's, koppelingen of afbeeldingen werd verwijderd??

Door dit soort vragen te stellen, kun je een a definiëren basislijnervaring-het absolute minimum dat met succes moet worden gecommuniceerd naar de ontvanger. Dit kan net zo eenvoudig zijn als een link en het label ervan, of er kan meer zijn dat u moet oversteken.

Bovenal moet de basiservaring beschikbaar zijn voor alle ontvangers om toegang te krijgen en te begrijpen. En al het andere moet zo zijn ontworpen dat het niet in de weg zit. Nu voor de details ...

1. Maak tekst leesbaar

Vermijd muren van tekst

Hoe langer de alinea, hoe moeilijker het is om te lezen. Dit geldt voor iedereen, maar vooral mensen met dyslexie of andere leerstoornissen.

Hier zijn enkele tips om uw tekst beter leesbaar te maken:

• Splits lange paragrafen in kortere alinea's. Elke alinea moet één focus hebben. Lees elke zin en kijk of deze zich op hetzelfde concentreert als de vorige. Als dat niet het geval is, begint u een nieuwe alinea.
• Groepgerelateerde paragrafen onder beschrijvende titels. Als u meer dan één koersniveau gebruikt, moet u ervoor zorgen dat de hiërarchie klopt; meestal gebruik je een 

  voor de hoofdrubriek,

  s voor elke sectie,

  s voor subsecties, enzovoort. Het gebruik van semantische headingelementen maakt ook dat uw e-mail gemakkelijker te navigeren is met behulp van schermlezers.

• Gebruik cursief of stoutmoedig voor de nadruk, maar gebruik ze spaarzaam. Als je alles benadrukt, valt er niets op.
• Huidige groepen punten zoals opsommingsteken (
  ) of genummerd (
  ) Lijsten om ze gemakkelijk verteerbaar te maken.
  1. Neem afbeeldingen op om de tekstinhoud te visualiseren en te ondersteunen.

  Gebruik eenvoudige woorden

  Als u een ontwerper of ontwikkelaar bent, is schrijven misschien geen onderdeel van uw werk. Overweeg in dat geval deze tutorial met uw collega of client te delen. Wanneer we eraan werken onze e-mails toegankelijk te maken, is de taal die we gebruiken minstens zo kritiek als de meer visuele of technische aspecten.

  Vergeet niet dat mensen om verschillende redenen op verschillende leesniveaus lezen. Mogelijk hebt u ontvangers met dyslexie. Je zou in hun tweede taal kunnen schrijven. Of misschien zijn ze niet bekend met het jargon van het onderwerp.

  Als u naar een groep mensen over een onderwerp schrijft, bent u vaak meer thuis in het onderwerp dan zij. Hoe meer we over iets weten, hoe meer we vergeten hoe het is om het niet te weten. Dit fenomeen staat bekend als de 'vloek van kennis'.

  Als je niet zeker weet of mensen die minder vertrouwd zijn met het onderwerp je schrijven kunnen begrijpen, zoek dan iemand om feedback te vragen. Uw collega's kunnen ook lijden aan de vloek van kennis. Misschien kun je hulp krijgen van een vriend, familielid of een van je abonnees?

  Toen ik me aanmeldde om voor Tuts + te schrijven, stuurden ze me hun stijlgids met enkele voorbeelden van eenvoudige Engelse woordkeuzen:

  Gebruik "kopen", niet "kopen". Gebruik "help", niet "assisteren". Gebruik "over", niet "bij benadering".

  Kun je de woorden in je e-mails vervangen door eenvoudigere? Hoe zit het met het bijhouden van een lijst met verwarrende termen die u vaak gebruikt, en woorden die u in plaats daarvan kunt gebruiken?

  Er zijn ook verschillende formules om te meten hoe leesbaar uw tekst is. 
  

  Als u uw inhoud kopieert en plakt in Word of Outlook, kunt u de leesbaarheid ervan beoordelen aan de hand van twee tests: de Flesch Reading Ease-test, die het leesgemak van 0 tot 100 laat zien, en de Flesch-Kincaid Grade Level-test, die op welk Amerikaans schoolniveau iemand de tekst doorgaans zou begrijpen.

  Deze tests kijken naar het gemiddelde aantal woorden per zin en het gemiddelde aantal lettergrepen per woord, als indicatoren voor hoe gemakkelijk de tekst te lezen is.

  Voor meer uitgebreide tests, probeer readable.io. Met deze online tool kunt u uw inhoud uitvoeren via meerdere leesbaarheidsonderzoeken. Hun betaalde plannen bieden zelfs een tool specifiek voor e-mails: stuur de e-mail door naar een specifiek e-mailadres en ze antwoorden met een automatisch leesbaarheidsrapport.

  Gebruik 14px lettergroottes of groter

  Het vergroten van de lettergrootte is niet alleen maar een dwaze truc om je essay langer te laten lijken.

  Het is ook een eenvoudige manier om uw e-mails gemakkelijker leesbaar te maken. 14px is het absolute minimum voor lichaamsexemplaren. De tekst hier op Tuts + heeft een lettergrootte van 18px en dat voelt ook niet te groot.

  Koppen moeten groot genoeg zijn om gemakkelijk te onderscheiden van de body-kopie. Type Scale is een handig hulpmiddel voor het berekenen en bekijken van geschikte lettergroottes. Meer informatie over schaal en hiërarchie in deze zelfstudies:

  Zorg ervoor dat u contrasterende kleuren gebruikt
  

  Over het algemeen is donkere tekst op een lichte achtergrond het gemakkelijkst te lezen voor de meeste mensen.

  Als u een kleurencombinatie gebruikt met een laag contrast, zoals lichtgrijze tekst op een witte achtergrond, kan het moeilijk te lezen zijn voor mensen met slechtziendheid of kleurenblindheid. Laag contrast maakt tekst ook moeilijk leesbaar bij slechte lichtomstandigheden zoals direct zonlicht.

  Lichte tekst op een donkere achtergrond kan ook goed werken, vooral voor mensen met lichtgevoeligheid, of bij gebruik van een helder scherm in een donkere omgeving. Maar voor mensen met presbyopie (wazig zicht) zorgt lichte tekst op een donkere achtergrond voor een soort halo of gloei-effect. Iedereen krijgt uiteindelijk tot op zekere hoogte presbyopie. Het concentratievermogen van onze ogen vermindert met de leeftijd, meestal ergens na 40 jaar.

  Er zijn veel hulpmiddelen om te controleren of uw kleurcontrast hoog genoeg is:

  • contrast-ratio.com is een handige tool met een gedenkwaardige domeinnaam. Wanneer u een kleurencombinatie invoert, wordt er onmiddellijk een voorbeeld van het contrast weergegeven en wordt de adresbalk gewijzigd in een rechtstreekse koppeling, zodat u de kleurencombinatie kunt delen.
  • Ik ben ook dol op tanaguru contrastzoeker, wat andere kleuropties suggereert als je contrast te laag is.

  
  

  Dat klopt, PapayaWhip en DarkSlateGrey, mooi

  Vermijd dunne lettergewichten

  Ultralichte lettertypen zijn al enkele jaren populair bij ontwerpers, maar zijn minder populair bij mensen met een slecht gezichtsvermogen.

  Contrast goed, lettertype slecht

  In combinatie met een laag kleurcontrast en oudere schermen zijn deze lettergewichten bijzonder moeilijk te lezen. Gebruik voor een betere leeservaring gewichten vanaf 500 (normaal) en hoger.

  Lijn uw lichaamskopie uit, niet uitvullen of centreren

  Talen die van links naar rechts worden gelezen, zoals Engels, zijn het gemakkelijkst te lezen wanneer ze links uitgelijnd zijn. Voor rechts-naar-links-scripts zoals die in het Arabisch, Perzisch en Hebreeuws, lijnt u de tekst rechts uit.

  Zelfs als je de voorkeur geeft aan gecentreerde tekst, moet je dit voorkomen als je kunt. Tekst is voor iedereen gemakkelijker te lezen wanneer elke regel net onder de vorige begint. Dit geldt zelfs voor koppen maar is vooral belangrijk voor body-copy.

  Ten slotte moet u nooit een gerechtvaardigde uitlijning gebruiken, waarbij de tekst zodanig is geplaatst dat deze aan beide zijden even randen heeft. Uitgevulde tekst is over het algemeen moeilijker te lezen, en vooral in webbrowsers en e-mailclients, die de afhandeling niet goed afhandelen.

  Gebruik een grote lijnhoogte

  Woorden hebben ruimte nodig om te ademen.

  Als tekstregels te dicht bij elkaar staan, kunnen ze moeilijk te scheiden zijn. Het wordt te gemakkelijk om per ongeluk naar de verkeerde lijn te springen. Als ze te ver uit elkaar liggen, beginnen ze eruit te zien als afzonderlijke paragrafen.

  De beste regelhoogte die moet worden gebruikt, is afhankelijk van de tekengrootte en de lengte van de regel. Maar als je een snelle, algemene regel wilt, kun je niet verkeerd gaan met een regelhoogte van 1,5 keer de lettergrootte. Een lettertypegrootte van 16px zou bijvoorbeeld comfortabel zijn om te lezen met een lijnhoogte van 24px.

  Ondersteuning van e-mailclients voor de lijnhoogte eigendom is meestal solide, behalve voor wat vreemd gedrag in Outlook. Gebruik px waarden in plaats van em, percentage, of "unitless" -waarden voor consistentere resultaten.

  Maak de regelafstand (de "Measure") leesbaar

  Hoe verder u een tekstlijn volgt, hoe moeilijker het is om de weg terug te vinden naar waar u bent begonnen.

  Als uw tekst te breed is, moet het oog veel bewegen en is het moeilijk om van de ene regel naar de volgende te blijven lezen.

  Voor optimale leesbaarheid streeft u naar een lijnlengte van ongeveer 45-75 tekens.

  De tekengrootte, lijnhoogte en lijnlengte beïnvloeden elkaar allemaal. Er zijn veel manieren om de verhoudingen te bepalen. Sommige mensen gebruiken graag de gulden snede (zelfs als de magische eigenschappen ervan niet noodzakelijk een recept voor succes zijn). Met de Golden Ratio-typografiecalculator kunt u snel aanbevelingen voor de hoogte van lijnen krijgen en de geschatte lijnlengte (CPL of tekens per regel) berekenen op basis van uw tekengrootte en kolombreedte.

  Gebruik Semantic Markup

  Traditioneel hebben e-mailontwikkelaars elk deel van hun e-mails gecodeerd als tabelopmaak, inclusief afzonderlijke tabelrijen voor elke kop en alinea. Dit komt deels omdat sommige e-mailclients de stijlen van semantische elementen veranderden, maar ook omdat mensen zo vertrouwd zouden raken met de manier waarop HTML-tabellen werkten dat ze er uiteindelijk standaard gebruik van maakten.

  Zoals het gezegde luidt: als alles wat je hebt een hamer is, lijkt alles op een spijker.

  Maar omdat e-mailclients hun weergave hebben verbeterd en wij als e-mailontwikkelaars onze codeermethoden gezamenlijk hebben verbeterd, hebben velen geconstateerd dat er meer nadelen zijn dan voordelen voor de op tabellen gebaseerde codeerstijl.

  Als u in plaats daarvan uw alinea's, lijsten en koppen codeert, als

  ,

  ,
  ,

  ,

  , enz., dan zullen mensen die schermlezers en andere hulptechnologieën gebruiken gemakkelijker kunnen navigeren en uw inhoud begrijpen.

  U behoudt nog steeds dezelfde mate van controle over hoe uw inhoud eruitziet door deze te structureren met CSS, en deze zal beter toegankelijk zijn, met minder code. U wilt de marges gebruiken die u voor elk element wilt gebruiken, terwijl stijlen zoals de body-copy lettergrootte en -kleur kunnen worden ingesteld op een bovenliggend element en worden overgenomen door alle alinea's.

  Hier is een eenvoudig voorbeeld:

   
  Prekig arvelige banksaker
   
  Grundigere vitende enkelstående bevares duer sum lengste, påfallende opplevet hukommelse dunstkrets, kant observasjon drakt besynderlig tillatt tent.
   
  Hyss gjeldsbevis luftdraget broderi, unyttig hvorledes ringeaktende discussieer.
   

  Gebruik de LANG Attribuut

  De meeste computers en smartphones worden geleverd met schermleessoftware die de tekst leest als spraak. Om de woorden correct uit te spreken, en niet zoals een Italiaanse stuntman, moeten schermlezers weten in welke taal uw tekst is geschreven.

  Om de inhoudstaal te specificeren, wij gebruiken de LANG attribuut. Hier is een kort voorbeeld van hoe een Franse zin klinkt met en zonder de opgegeven taal (video van Léonie Watson):

  De LANG kenmerk werkt met elk HTML-element. Als u verschillende elementen binnen dezelfde e-mail gebruikt, geeft u de juiste taal voor elk onderdeel op.
  

  De hoofdtaal moet worden ingesteld voor de element. Maar omdat sommige e-mailclients dit element zullen verwijderen bij het weergeven van de e-mail, is het het veiligst om ook het attribuut op een wrapper-element binnen de , zoals een

  rond de volledige inhoud van de e-mail.

  Om de juiste waarde voor uw taal te vinden, kunt u verwijzen naar het IANA Language Subtag Registry, een lang tekstbestand met talen en de bijbehorende subtag-waarden. Of gebruik de lookup van de subtag van de vriendelijkere taal waarmee u dezelfde informatie kunt doorzoeken.

  Dit is de Franse zin van vóór, met de juiste taal ingesteld:

  l'eau monte au fur et à mesure de la fonte des neiges.

  2. Gebruik Consistately kleur

  Communiceer niet alleen met kleur

  Doordacht kleurgebruik kan uw boodschap ondersteunen of een gemoedstoestand overbrengen. Maar als u alleen op kleur vertrouwt om bepaalde informatie te communiceren, kan deze worden gemist door geadresseerden die blind zijn, kleurenblind zijn of uit een cultuur waarin die kleuren een andere betekenis hebben.

  Gebruik bijvoorbeeld tekst in plaats van een rode of groene punt om aan te geven of een product op voorraad is, gebruik de tekst 'in voorraad' en 'uitverkocht' en gebruik alleen kleur om dit te ondersteunen.

  Breng Color Blindness naar uw account

  Er zijn verschillende soorten kleurenblindheid waardoor mensen problemen hebben om kleuren te onderscheiden. Het meest voorkomende type is rood-groene kleurenblindheid, waardoor het moeilijk is om rode en groene tinten uit elkaar te houden. Totale kleurenblindheid, waardoor alles er zwart en wit uitziet, is zeldzaam.

  Wanneer u kleuren kiest voor tekst, afbeeldingen en lay-outelementen, moet u rekening houden met combinaties van kleuren in het rood-oranje-geel-groene bereik, die dicht bij elkaar zijn geplaatst. Vooral als de kleuren qua helderheid en verzadiging vergelijkbaar zijn.

  Er zijn ook andere kleurencombinaties die lastig kunnen zijn voor mensen met verschillende kleurenblindheidstypes om ze te onderscheiden. U kunt een kleurenblindheidssimulator gebruiken om problemen in uw e-mails op te vangen. Er zijn veel om uit te kiezen. 

  • Met het kleurenblind-webpaginafilter van Toptal kunt u de URL van de webversie van uw e-mail invoeren. 
  • Litmus heeft een kleurenblindheidsfilter ingebouwd in de e-mailtests. 
  • Kleur Oracle (Mac, Windows en Linux) en Sim Daltonism (Mac en iOS) zijn open source simulatortools.

  Gebruik geen overmatige, verzadigde kleuren

  Voor mensen met lichte gevoeligheid en migraine, kan staren op schermen met achtergrondverlichting oogvermoeidheid veroorzaken en fungeren als een migraine-trigger. Dit kan nog worden verergerd door felle kleuren, vooral in blauwe en rode tinten.

  Voor grote gebieden zoals achtergrondkleuren, gebruik indien mogelijk meer gedempte kleuren.

  Vermijd onderstreepte of gekleurde niet-linktekst (vooral blauw)

  Niet alle links zijn blauw en onderstreept, maar alle onderstreepte en blauwe tekst is gekoppeld. Dat verwachten de lezers tenminste.

  Gebruik geen accentuering en kleuren om verwarring en frustratie te voorkomen.

  3. Controleer of uw afbeeldingen toegankelijk zijn

  Vermijd tekst in afbeeldingen

  Veel afzenders ontwerpen nog steeds e-mails met tekst in afbeeldingen in plaats van live HTML-tekst. Als uw werkgever of klant een pixel-perfecte weergave vereist, is het gemakkelijk om te zien hoe dit een goede oplossing lijkt. Maar de nadelen van het vangen van de tekst in afbeeldingsbestanden wegen zwaarder dan de voordelen.

  • Schermlezers kunnen geen tekst in afbeeldingen lezen.
  • Als het blokkeren van afbeeldingen is ingeschakeld in de e-mailclient of als de e-mail offline wordt gelezen, worden de afbeeldingen verbroken.
  • U kunt de tekst niet selecteren, kopiëren en plakken.
  • Translatiesoftware kan de inhoud niet interpreteren.
  • De tekst kan niet goed worden geschaald of opnieuw worden geplaatst om in verschillende schermformaten of zoomniveaus te passen.

  Sommige van deze problemen kunnen gedeeltelijk worden opgelost door de inhoud in te stellen als de alternatieve tekst van de afbeelding en deze in te delen met CSS. Maar helaas delen e-mailclients geen consistente manier van omgaan met beeldblokkering en alternatieve tekst. En elke hiërarchie, zoals koppen, zou verloren gaan in de alternatieve tekstversie van de inhoud.

  Als uw ontwerp om tekst vraagt ​​die over een afbeelding wordt geplaatst, helpt backgrounds.cm u dit te coderen op een manier die werkt voor de meeste grote e-mailclients.

  Tot slot, in situaties waar je niet kunt vermijden afbeeldingen te gebruiken voor tekst, voeg je de role = "text" voor de afbeelding zullen schermlezers de alternatieve tekstwaarde als reguliere tekst beschouwen.

  Gebruik nuttige alternatieve tekst

  We gebruiken afbeeldingen voor veel verschillende doeleinden. Sommige bevatten belangrijke informatie, andere zijn illustraties of een deel van de lay-out.

  Alle afbeeldingen moeten een alt attribuut, maar het attribuut zou niet altijd een waarde moeten hebben. Gebruik een blanco als alternatieve tekst niet nodig is alt attribuut om te voorkomen dat schermlezers de afbeeldingsbestandsnaam of link-URL spellen. Bekijk dit voorbeeld van Rémi Parmentier:

  
  

  Als de afbeelding waardevolle inhoud bevat, beschrijf deze dan in de alternatieve tekst. Of als de afbeelding een koppeling is, voegt u alternatieve tekst toe om te beschrijven waarnaar de koppeling verwijst.

  W3C heeft een handige beslissingsboom voor alternatieve tekst. Het behandelt de meeste algemene toepassingen voor afbeeldingen en het gebruik van de alt attribuut in elk geval.

  Gebruik GIF's op verantwoorde wijze

  Onze belangrijkste optie voor het opnemen van animaties in onze e-mails die in de meeste e-mailclients zullen werken, is om GIF's te gebruiken. We hebben veel geweldige voorbeelden van GIF's in e-mail gezien. Ze kunnen goed zijn om ideeën effectiever uit te leggen dan met een statische afbeelding, of om visuele interesse toe te voegen. Countdown timers en video previews zijn andere populaire toepassingen.

  Helaas kunnen GIF's problemen veroorzaken voor sommige ontvangers.

  In extreme voorbeelden kunnen intense animaties aanvallen veroorzaken voor mensen met lichtgevoelige epilepsie. Als u GIF's hebt met knipperende of knipperende kleuren of krachtige patronen met een hoog contrast, is het de moeite waard om ze te testen met behulp van de gratis Fotogevoelige epilepsie-analysehulpprogramma van Windows (alleen Windows). Deze tool legt animaties vast van uw scherm en identificeert potentiële risico's voor aanvallen.

  Hoewel minder dramatische, subtiele animaties ook problemen kunnen veroorzaken. GIF's die voor altijd in een lus staan, kunnen afleiden van uw andere inhoud, vooral voor mensen met Attention Deficit Hyperactivity Disorder (ADHD) of autisme. Email on Acid biedt best practices voor animaties voor abonnees met ADHD.

  4. Aandacht besteden aan lay-out en tabellen

  Vermijd onnodige tabellen

  Hoewel HTML-tabellen nodig zijn om bepaalde lay-outs correct weer te geven in e-mailclients, vooral in Outlook, hebben e-mailontwikkelaars de neiging om ze te veel te gebruiken.

  Ik raad aan om voor elke instantie te zoeken in uw sjablooncode  en evalueren of die tafel nodig is. Ik kom het vaak tegen

   tags die gemakkelijk kunnen worden vervangen door een meer toegankelijk en lichtgewicht

  , of zelfs helemaal verwijderd, zonder dat dit invloed heeft op hoe de e-mail wordt weergegeven.

  Gebruik role = "presentatie" op lay-outtabellen

  Voeg de volgende tabellen toe aan de resterende tabellen role = "presentatie" attribuut. Schermlezers melden meestal elke tabelcel die ze tegenkomen, waardoor e-mails vervelend zijn om te lezen.

  Door toe te voegen role = "presentatie", u vertelt de schermlezer om de tabel te behandelen als een regulier tekstelement en om er niet in te navigeren als een gegevenstabel. Bekijk de voorbeelden over toegankelijkheid in e-mail: deel II van Mark Robbins.

  Als uw e-mails tabellen met actuele tabelgegevens bevatten, gebruik dan niet de rol attribute op die.

  Gebruik aria-verborgen = "true" op afstandselementen

  Omdat marge en opvulling enigszins inconsistente ondersteuning bieden voor e-mailclients, is het niet ongebruikelijk om afzonderlijke elementen zoals te gebruiken

  s of zelfs old-school spacer-afbeeldingen om ruimte toe te voegen aan een e-mailontwerp.

  Dergelijke spacer-elementen voegen geen waarde toe aan mensen die uw e-mail lezen met een schermlezer. Om de schermlezer een spatie te laten negeren, voegt u de aria-verborgen = "true" attribuut aan het element.

  5. Ontwerp duidelijke links en klikdoelen

  Maak links duidelijk, Beyond Color

  Links zijn vaak het belangrijkste onderdeel van een e-mail, omdat ze zijn hoe uw ontvangers de volgende stap zetten. Door ze een andere kleur te geven dan de rest van de inhoud zullen ze gemakkelijker te vinden zijn. Blauwe tekst biedt de meeste kans om als een link te worden herkend, maar u kunt andere kleuren gebruiken zolang ze opvallen, zelfs voor kleurenblinde gebruikers.

  Vermijd het gebruik van uw linkkleur voor niet-klikbare tekst om verwarring te voorkomen.

  Het onderstrepen van de tekst helpt ook om te suggereren dat deze klikbaar is. Sommigen geven de voorkeur aan het vet maken van hun links, om esthetische redenen, maar het is misschien de moeite waard vetgedrukte tekst te reserveren voor nadruk.

  Het is over het algemeen het beste om 'Ghostknoppen' te vermijden, een veel voorkomende stijl van knoppen met een omtrekkleur maar een transparante achtergrond. Deze kunnen voor ontvangers moeilijk herkend kunnen worden als klikbaar, vooral als ze bovenop een achtergrondafbeelding worden geplaatst. Knopstijlen met een contrasterende achtergrondkleur zijn gemakkelijker te ontdekken.

  Gebruik nuttige linktekst

  Mensen die uw e-mail met een schermlezer lezen, kunnen van koppeling naar link overslaan zonder de inhoud tussen hen te lezen. Ontvangers met een laag gezichtsvermogen kunnen lezen dat uw e-mail is ingezoomd en de context rond uw links missen. Om links voor hen toegankelijk te maken, moet de linktekst op zichzelf staan ​​en toch logisch zijn.

  Een korte en beschrijvende linktekst helpt mensen efficiënt te navigeren.

  Links die naar verschillende plaatsen verwijzen, mogen niet dezelfde linktekst bevatten. Maak ze allemaal uniek - geen "Meer lezen" -links!

  Vermijd het weergeven van lange website-URL's als linktekst, omdat ze meestal minder handig zijn als linktekst voor alle ontvangers. 

  Maak knoppen groot en volledig klikbaar

  Voor de belangrijkste links in uw e-mail kan een mooie grote call-to-action-knop u een mooie toename van de doorklikmogelijkheden geven via tekstlinks.

  Als er voldoende ruimte is om te klikken, is de knop voor iedereen gemakkelijker te raken, vooral veel gebruikers met een lichamelijke beperking.

  Litmus heeft een goed overzicht van manieren om e-mailknoppen te coderen. Om problemen en frustratie te voorkomen, kies er een waar het volledige knoopoppervlak klikbaar is.

  

  Als ik dat zeg, heb ik een persoonlijke voorkeur voor buttons.cm.

  Maak niet alles een link

  Om doorklikmogelijkheden te vergroten, kan het verleidelijk zijn om elke kop, afbeelding en zelfs paragraaf te veranderen in een link naar uw bestemmingspagina. Dit betekent ook dat mensen eenvoudig op de link kunnen klikken zonder te nauwkeurig te zijn. Er zijn echter enkele nadelen aan het maken alles een link.

  Voor mensen die uw e-mail lezen met een schermlezer, wordt elke link voorgelezen, dus het herhalen van dezelfde link voor elk element maakt uw e-mail vervelend om te navigeren.

  Als u elementen bij elkaar in de buurt heeft die naar dezelfde plaats moeten verwijzen, bijvoorbeeld een pictogram met een tekstlabel, is het vaak een goede oplossing om ze beide in dezelfde koppeling in te pakken en een klikbaar gebied te maken.

  Als het grootste deel van uw e-mail uit links bestaat, kan dit uw e-mail ook moeilijk maken om te bladeren op mobiele apparaten en andere touchscreens. Vooral voor mensen met tremoren of andere spierbeheersingsproblemen, kan het een uitdaging zijn om een ​​e-mail door te nemen zonder per ongeluk op onverwachte links te klikken.

  Overwegen : hover en :focus stijlen

  Links subtiel weergeven : hover stijl is een eenvoudige manier om mensen te bevestigen dat wat ze willen klikken, in feite een link is.

  Bij het navigeren door de links in een e-mail via het toetsenbord, :focus stijlen helpen uw lezers bij te houden op welke link ze zijn. De meeste e-mailclients en browsers voegen standaard een omtrek toe :focus stijl voor links. Het is over het algemeen het beste om dit overzicht niet te verwijderen, maar als u dit doet, moet u ervoor zorgen dat u het vervangt door een even duidelijk :focus stijl.

  Telkens wanneer u een toevoegt : hover stijl is het meestal goed om dezelfde stijl toe te passen :focus dus mensen zullen een vergelijkbare ervaring hebben, of ze nu navigeren met hun muis of toetsenbord.

  Link naar toegankelijke inhoud

  Hoewel het niet iets is dat je altijd onder controle hebt, is het bij het linken naar webpagina's goed om content te kiezen die ook toegankelijk is.

  Als je de keuze hebt tussen koppelen aan twee vergelijkbare artikelen, waarbij de ene gemakkelijk te lezen is en de andere een slecht kleurcontrast of een kleine lettergrootte heeft - al het andere gelijk is, ga dan met de meer toegankelijke als je kunt.

  6. Vergeet niet over platte tekst

  Een versie met platte tekst opnemen
  

  Vanwege de toegankelijkheidsproblemen die ze kunnen ondervinden met veel HTML-e-mails, kiezen sommige ontvangers ervoor om de gewone tekstversie van e-mails te gebruiken.

  Omdat u geen afbeeldingen, lettergroottes, kleuren, enzovoort kunt gebruiken, zijn uw lay-outopties beperkt. Denk bij het samenstellen van de platte-tekstversie na over hoe u uw kernboodschap het beste kunt presenteren met alleen tekst, en maak u minder zorgen over het consistent maken met de HTML-versie.

  Besteed extra aandacht aan hoe u links opmaakt, omdat alleen de link-URL kan worden aangeklikt. Een goed patroon is om een ​​beschrijvend linklabel te schrijven gevolgd door een dubbele punt op één regel en vervolgens de link-URL op de volgende regel.

  ... Vind hier meer tips voor het formatteren van platte tekst: https://www.campaignmonitor.com/blog/email-marketing/2015/01/plain-text-emails-conversion/... 

  Veel ESP's (e-mailserviceproviders) zullen automatisch een tekstversie voor u genereren, maar als u het doorleest, zult u meestal kleine manieren vinden om het leesbaarder te maken.

  7. Maak kennis met testen en hulpmiddelen

  Gebruik deze e-mailspecifieke hulpmiddelen

  Er zijn veel manieren om uw e-mail te testen, beide om toegankelijkheidsproblemen te helpen oplossen en om te controleren of uw fixes werken zoals verwacht.

  Een goede plaats om te beginnen is accessible-email.org, dat u een toegankelijkheidsrapport van uw e-mail geeft. Hiermee wordt gecontroleerd of alle afbeeldingen een alt attribuut, dat kopniveaus een correcte hiërarchie volgen en veel van de andere punten die we hier hebb

  Web ontwerp

  Een beginnershandleiding voor jQuery

  Een beginnershandleiding voor het tekenen van een basisuitrusting op een personage in Photoshop

  

  ×