Toegankelijke inhoud ontwerpen accessible-content

De ​ Europese toegankelijkheidswet ​ is een richtlijn die wordt ontworpen om de interne markt voor toegankelijke producten en diensten te verbeteren door barrières weg te nemen die door verschillende nationale regels in de lidstaten worden veroorzaakt.

Deze verordening bepaalt dat alle digitale communicatie, inclusief e-mails, nieuwsbrieven, PDF's en downloadbare inhoud, toegankelijk moet zijn. Wanneer u inhoud maakt voor uw ontvangers, moet u daarom bepaalde richtlijnen volgen, zoals het gebruik van toegankelijke lettertypen, leesbare indelingen en het aanbieden van alternatieve tekst voor afbeeldingen.

Journey Optimizer ​ E-mail Designer ​, die marketers toelaat om inhoud zowel voor e-mail als het landen pagina's te bouwen, staat u toe om gemakkelijk aan deze richtlijn te voldoen, die op de Richtlijnen van de Toegankelijkheid van de Inhoud van het Web (WCAG) 2.1, niveauAA wordt gebaseerd.

In lijn hiermee worden de aanbevolen procedures voor het ontwerpen van toegankelijke inhoud met Journey Optimizer hieronder weergegeven.

Zorg ervoor dat de tekst leesbaar is text-readability

Gebruik de tab Styles van de component Text om ervoor te zorgen dat de tekst leesbaar is, bijvoorbeeld door een juist kleurcontrast en eenvoudige lettertypen te gebruiken. Meer informatie

{width="80%"}

Volg onderstaande richtlijnen voor lettertypen en tekst:

de selectie van de Doopvont

het rangschikken van doopvont

Contrast van de Kleur

de toegankelijkheid van de Tekst

Zorg voor visuele toegankelijkheid visual-accessibility

Volg onderstaande tips om te controleren of uw inhoud visueel toegankelijk is:

In Journey Optimizer kunt u de grootte en tussenruimte van de verschillende elementen in uw inhoud verder verfijnen met de opmaakparameters en -kenmerken uit het deelvenster Designer e-mailen Styles . Meer informatie

Bijvoorbeeld, kunt u de ​ achtergrond ​ bijwerken, of de marges veranderen, opvullen en groepering om de visuele toegankelijkheid van uw inhoud te verbeteren. Meer informatie

{width="80%"}

Bovendien kunt u met de Journey Optimizer Email Designer een voorvertoning weergeven van het ontwerp van verschillende apparaten en schermgrootten en het ontwerp ervan optimaliseren. U kunt op elk gewenst moment Switch to live view gebruiken om te controleren hoe uw inhoud op verschillende apparaatgrootten wordt gerenderd.

{width="80%"}

Alternatieve tekst gebruiken voor afbeeldingen alt-text

Gebruik de component Image om alternatieve tekst voor afbeeldingen te bieden. Meer informatie

{width="90%"}

Volg onderstaande richtlijnen voor effectieve alternatieve tekst in digitale producten:

Leesbare indeling gebruiken readable-format

Gebruik de e-mail van Designer relevante structuur en ​ inhoudscomponenten ​, evenals de opties in de Styles ruit, om uw inhoud op een duidelijke, logische en beknopte manier te organiseren die voor allen toegankelijk is.

{width="100%"}

Leesbaarheid van inhoud garanderen readability

Om leesbaar te zijn, moet uw inhoud duidelijk zijn, goed gestructureerd, en bruikbaar voor iedereen, met inbegrip van mensen met visuele, cognitieve, of lezingsmoeilijkheden en degenen die hulptechnologieën gebruiken. Enkele punten waarmee u rekening moet houden bij het maken van toegankelijke inhoud zijn:

Om uw e-mailleesbaarheid te evalueren, kunt u de populaire ​ test van de Versnelling van de Lezing van de Vlesch gebruiken ​, die in Microsoft Word kan worden gevonden en berekent hoe gemakkelijk uw inhoud op een schaal van 0-100 moet lezen.

Uw inhoud testen test

Om de toegankelijkheid van uw inhoud te controleren, kunt u de testmogelijkheden gebruiken die door Journey Optimizer worden verstrekt. Ze zijn niet specifiek ontworpen om te controleren of uw inhoud volledig toegankelijk is, maar ze kunnen wel een eerste verificatieniveau bieden.

{width="90%"}

Als u op een meer consistente manier wilt controleren of uw inhoud betrouwbaar toegankelijk is, gaat u naar specifieke externe gereedschappen, zoals:

Donkere modus gebruiken dark-mode

De donkere modus verbetert de visuele toegankelijkheid voor gebruikers met lichtgevoeligheid of een visuele handicap voor een betere kijkervaring.

{width="90%"}

U kunt onder andere het beste transparante PNG's of SVG's gebruiken bij het ontwerpen van inhoud in de donkere modus, de juiste metatags en CSS instellen en een toegankelijke fallback-stijl bieden als de donkere modus niet wordt ondersteund. Zorg er ten slotte voor dat uw e-mailberichten correct worden weergegeven in de donkere modus door alle e-mailinhoud en UI-elementen te testen in zowel de lichte als de donkere modus.

Gedetailleerde beste praktijken specifiek voor donkere wijze, met inbegrip van richtlijnen om toegankelijkheid te verzekeren, zijn vermeld in ​ deze sectie ​.

Specifieke kenmerken voor toegankelijkheid gebruiken attributes

Taalkenmerken language

Wanneer u ontwerpen maakt, neemt u de kenmerken lang (taal) en dir (tekstrichting) op in de hoofdtekst van de inhoud. Deze kenmerken helpen ondersteunende hulpmiddelen, zoals schermlezers, om uw inhoud op de juiste manier te interpreteren en te presenteren.

Schermlezers vertrouwen op het kenmerk lang om de juiste uitspraakregels toe te passen, terwijl de tekstrichting ervoor zorgt dat de inhoud op natuurlijke wijze doorloopt voor talen die van links naar rechts of van rechts naar links worden geschreven. Zonder deze kenmerken kunnen gebruikers last krijgen van verwarrende leesvolgorde of verkeerde uitspraak. Plaats daarom altijd de juiste kenmerken voor lang en dir in de hoofdtekst van de e-mail.

Tabellen tables

In HTML-inhoud worden tabellen vaak gebruikt voor de lay-out. Standaard behandelen schermlezers elke <table> als een gegevenstabel, waarbij rijen, kolommen en structuur worden aangekondigd. Dit kan verwarrend zijn als de tabel alleen wordt gebruikt voor opmaak.

Voeg role="presentation" (of role="none" ) toe aan indelingstabellen om ervoor te zorgen dat ondersteunende hulpmiddelen hun structuur overslaan en alleen de werkelijke inhoud activeren.

<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>

Tekst voor koppelingen links

Schermlezers lezen koppelingen voor met behulp van hun tekst. Als een koppeling alleen 'Klik hier' of 'Meer lezen' heet, weten gebruikers van ondersteunende hulpmiddelen niet wat het doel is. Om toegankelijkheid te waarborgen, hebben ze beschrijvende tekst nodig die het doel of de actie duidelijk aangeeft.

Gebruik E-mail Designer om ​ een verbinding ​ aan uw inhoud toe te voegen en het etiket uit te geven om het (zichtbaar) en beschrijvend (duidelijk over doel) te maken. Vermijd vage labels zoals 'here' of '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>

Ondersteuning voor toetsenbordnavigatie en focus bieden keyboard

Dankzij toetsenbordnavigatie en focusondersteuning hebben mensen die geen muis kunnen gebruiken, volledige toegang tot en interactie met inhoud. Het verbetert ook de algemene bruikbaarheid door alle gebruikers een duidelijke en consistente manier te geven om door informatie te bewegen.