Utforma tillgängligt innehåll accessible-content

Den europeiska tillgänglighetslagen är ett direktiv som är utformat för att förbättra den inre marknaden för tillgängliga produkter och tjänster genom att eliminera hinder som orsakas av olika nationella regler i medlemsstaterna.

I den här förordningen anges att all digital kommunikation, inklusive e-post, nyhetsbrev, PDF-filer och hämtningsbart innehåll, bör vara tillgänglig. När du skapar innehåll för dina mottagare måste du därför följa särskilda riktlinjer, t.ex. använda hjälpmedelsanpassade teckensnitt, läsbara format och tillhandahålla alternativ text för bilder.

Med Journey Optimizer Email Designer, som gör det möjligt för marknadsförare att skapa innehåll både för e-post och landningssidor, kan du enkelt följa det här direktivet, baserat på Web Content Accessibility Guidelines (WCAG) 2.1, nivå AA.

I enlighet med detta listas de bästa sätten att utforma hjälpmedelsanpassat innehåll med Journey Optimizer nedan.

Säkra textläsbarhet text-readability

Utnyttja fliken Styles i komponenten Text för att säkerställa att texten är läsbar, till exempel genom att använda rätt färgkontrast och enkla teckensnitt. Läs mer

{width="80%"}

För teckensnitt och text måste du följa riktlinjerna nedan:

Val av teckensnitt

Teckensnittsstorlek

Färgkontrast

Texttillgänglighet

Säkerställ visuell tillgänglighet visual-accessibility

Följ de bästa metoderna nedan för att se till att ditt innehåll är synligt:

I Journey Optimizer kan storleken och mellanrummet för de olika elementen i ditt innehåll förfinas ytterligare med formatparametrarna och attributen i e-postrutan för Designer Styles. Läs mer

Du kan till exempel uppdatera bakgrunden eller ändra marginalerna, utfyllnaden och justeringen för att förbättra innehållets visuella tillgänglighet. Läs mer

{width="80%"}

Dessutom kan du förhandsgranska och optimera designen för olika enheter och skärmstorlekar med e-post Journey Optimizer från Designer. Du kan när som helst Switch to live view för att kontrollera hur ditt innehåll kan återges på olika enhetsstorlekar.

{width="80%"}

Använd alternativ text för bilder alt-text

Använd komponenten Image för att ange alternativ text för bilder. Läs mer

{width="90%"}

För effektiv alternativ text i digitala produkter, följ riktlinjerna nedan:

Använd läsbart format readable-format

Använd den relevanta strukturen för e-postprogrammet för Designer och innehållskomponenter, samt alternativen i rutan Styles, för att ordna ditt innehåll på ett tydligt, logiskt och koncist sätt som är tillgängligt för alla.

{width="100%"}

Säkerställ läsbarhet readability

För att innehållet ska vara läsbart måste det vara klart, välstrukturerat och användbart för alla, även för personer med visuella, kognitiva eller läsrelaterade problem och för dem som använder hjälpmedelstekniker. Några saker du bör tänka på när du skapar hjälpmedelsanpassat innehåll är:

Om du vill utvärdera läsbarheten för e-post kan du använda det populära Flesch Reading Ease-testet som finns i Microsoft Word och som beräknar hur enkelt innehållet är att läsa på en skala från 0 till 100.

Testa innehållet test

Om du vill verifiera innehållets tillgänglighet kan du använda testfunktionerna i Journey Optimizer. De är inte särskilt utformade för att kontrollera om ditt innehåll är fullt tillgängligt, men de kan tillhandahålla en första verifieringsnivå.

{width="90%"}

Om du vill kontrollera på ett mer konsekvent sätt om innehållet är tillgängligt kan du gå till särskilda externa verktyg som:

Använd mörkt läge dark-mode

Mörkt läge förbättrar den visuella tillgängligheten för användare med ljuskänslighet eller synnedsättning, vilket ger en bättre visningsupplevelse.

{width="90%"}

Bland de bästa sätten att utforma innehåll i mörkt läge bör du använda genomskinliga PNG- eller SVG-filer, ställa in lämpliga metataggar och CSS och ge hjälpmedelsanpassad grundformatering om mörkt läge inte stöds. Slutligen måste du se till att dina e-postmeddelanden återges korrekt i mörkt läge genom att testa allt e-postinnehåll och alla gränssnittselement i både ljust och mörkt läge.

Detaljerade metodtips som är specifika för mörkt läge, inklusive riktlinjer för att säkerställa tillgänglighet, finns i det här avsnittet.

Använd specifika attribut för tillgänglighet attributes

Språkattribut language

När du skapar designer inkluderar du attributen lang (språk) och dir (textorientering) i innehållets brödtext. Dessa attribut hjälper hjälpmedelstekniker som skärmläsare att tolka och presentera innehållet på rätt sätt.

Skärmläsare förlitar sig på attributet lang för att använda rätt uttydningsregler, medan textriktning garanterar att innehållet flödar naturligt för språk som läses från vänster till höger eller från höger till vänster. Utan dessa attribut kan användare uppleva förvirrande läsordning eller feluttal. Därför ska du alltid radbryta din e-postbrödtext med rätt lang- och dir-attribut.

Tabeller tables

I HTML används ofta tabeller för layout. Som standard behandlar skärmläsare varje <table> som en datatabell, där rader, kolumner och struktur presenteras. Detta kan vara förvirrande om tabellen bara används för formatering.

Lägg till role="presentation" (eller role="none") i layouttabeller för att säkerställa att hjälpmedelstekniker hoppar över sin struktur och bara fokuserar på det faktiska innehållet.

<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">

  <tr>

    <td align="center">

      <h1>Hello World</h1>

      <p>Welcome to our newsletter</p>

    </td>

  </tr>

</table>

<table border="1" cellpadding="5" cellspacing="0">

  <tr>

    <th scope="col">Name</th>

    <th scope="col">Score</th>

  </tr>

  <tr>

    <td>Alice</td>

    <td>95</td>

  </tr>

  <tr>

    <td>Bob</td>

    <td>88</td>

  </tr>

</table>

Text för länkar links

Skärmläsare läser upp länkar med sin text. Om en länk endast heter"Klicka här" eller"Läs mer" kommer användare av hjälpmedelstekniker inte att känna till målet. För att säkerställa tillgänglighet behöver de beskrivande text som tydligt anger målet eller åtgärden.

Använd e-post-Designer för att lägga till en länk i ditt innehåll och redigera etiketten för att göra den identifierbar (synlig) och beskrivande (tydlig om syftet). Undvik otydliga etiketter som "here" eller "more".

{width="70%"}

<p>Learn more in the

<a href="https://adobe.com/release-notes">August release notes</a>.

</p>

<p>Learn more about our new features.

  <a href="https://adobe.com/release-notes">Click here</a>.

</p>

Stöd för tangentbordsnavigering och fokus keyboard

Med stöd för tangentbordsnavigering och -fokus kan personer som inte kan använda en mus få full tillgång till och interagera med innehållet. Det förbättrar också den övergripande användbarheten genom att ge alla användare ett tydligt och konsekvent sätt att gå igenom informationen.