Leestijd: 2 min Toegankelijke e-mails zijn de sleutel tot inclusie. Ze zorgen ervoor dat elke ontvanger, ongeacht zijn of haar vaardigheden of beperkingen, je inhoud gemakkelijk kan begrijpen. Je mailing zorgt voor een betere gebruikerservaring, versterkt je merk en kan zelfs leiden tot een hogere conversie.
Hoe de toegankelijkheidstest werkt in onze nieuwsbriefeditor:
Open de mailing waarvoor je de test wilt uitvoeren via het menu-item E-mails.
Rechtsboven onder Voorbeeld vind je het item Toegankelijkheidstest.
Er wordt een pop-upvenster over de hele pagina geopend. Hier kun je je bestaande testquota bekijken, tests uitvoeren, meer tests kopen en eerdere tests ophalen.
Klik op Toegankelijkheidstest starten. Uw mailing wordt gescand en u krijgt het volgende overzicht: Onder het tabblad Verbeteringen vindt u de criteria die u moet aanpassen. Klik op de pijl-omlaag rechts voor meer informatie en om te zien welk HTML-fragment is aangetast. In de tabel Uitleg van de regel-ID's (verbetersuggesties) aan het einde van dit artikel vind je meer uitleg.
Klik op de x in de rechterbovenhoek om terug te keren naar de editor en pas daar de verbetersuggesties aan.
Klik opnieuw op Voorbeeld nadat u uw aanpassingen hebt gemaakt > Toegankelijkheidstest. Je kunt klikken op Vorige test ophalen (zie screenshot stap 3) om de suggesties opnieuw te bekijken of klik op Toegankelijkheidstest starten om de test opnieuw uit te voeren ter controle. om de test opnieuw uit te voeren.
Uitleg van de regel-ID's (suggesties voor verbetering na de test)
Je mailing wordt gecontroleerd op deze regels met de toegankelijkheidstest (zie screenshot stap 4):
Regel ID
Beschrijving
toegangstoetsen
Zorgt ervoor dat elke accesskey attribuutwaarde uniek is
gebied-alt
Zorgt ervoor dat <gebied> elementen van afbeeldingskaarten alternatieve tekst hebben.
aria-goedgekeurd-attr
Zorgt ervoor dat ARIA-attributen zijn toegestaan voor de rol van een element
aria-goedgekeurde-rol
Zorgt ervoor dat het role attribuut een geschikte waarde heeft voor het element
aria-verbergen-lichaam
Zorgt ervoor dat aria-hidden='true' niet aanwezig is in de body van het document.
aria-progressbar-naam
Zorgt ervoor dat elke ARIA voortgangsbalkknoop een toegankelijke naam heeft
aria-vereiste-attr
Zorgt ervoor dat elementen met ARIA-rollen alle vereiste ARIA-attributen hebben
aria-vereiste-kinderen
Zorgt ervoor dat elementen met een ARIA-rol die kinderrollen vereisen, deze bevatten
aria-vereiste-ouder
Zorgt ervoor dat elementen met een ARIA-rol die bovenliggende rollen vereisen, door hen worden ingesloten
aria-beschrijving
Zorg ervoor dat aria-roledescription alleen wordt gebruikt op elementen met een impliciete of expliciete rol
aria-roles
Zorgt ervoor dat alle elementen met een role attribuut een geldige waarde gebruiken
aria-omschakelveld-naam
Zorgt ervoor dat elk ARIA toggle-veld een toegankelijke naam heeft
aria-tooltip-naam
Zorgt ervoor dat elke ARIA tooltip-node een toegankelijke naam heeft
aria-valide-attr-waarde
Zorgt ervoor dat alle ARIA-attributen geldige waarden hebben
aria-valide-attr
Zorgt ervoor dat attributen die beginnen met aria- geldige ARIA-attributen zijn
kleurcontrast
Zorgt ervoor dat het contrast tussen de voorgrond- en achtergrondkleuren voldoet aan de minimale contrastratio's van WCAG 2 AA.
inhoudstype
Zorgt ervoor dat "meta content-type" en tekenset zijn gedefinieerd
definitielijst
Zorgt ervoor dat <dl> elementen correct zijn gestructureerd.
dlitem
Zorgt ervoor dat <dt> en <dd> elementen worden bevat door een <dl>
documenttitel
Zorgt ervoor dat elk HTML-document een niet-leeg <title> element bevat.
duplicaat-id
Zorgt ervoor dat elke id-attribuutwaarde uniek is
lege kop
Zorgt ervoor dat koppen duidelijke tekst hebben
rubrieksvolgorde
Zorgt ervoor dat de volgorde van de koppen semantisch correct is
html-has-lang
Zorgt ervoor dat elk HTML-document een lang-attribuut heeft
html-lang-valide
Zorgt ervoor dat het lang attribuut van het <html> element een geldige waarde heeft.
html-xml-lang-mismatch
Zorg ervoor dat HTML-elementen met zowel geldige lang- als xml:lang-attributen overeenkomen wat de basistaal van de pagina is.
beeld-alt
Zorgt ervoor dat <img> elementen alternatieve tekst of een rol van geen of presentatie hebben.
beeld-redundant-alt
Zorg ervoor dat het afbeeldingsalternatief niet wordt herhaald als tekst
verantwoording
Zorgt ervoor dat de inhoud niet gecentreerd is
landmark-no-duplicate-main
Zorgt ervoor dat het document maximaal één belangrijk oriëntatiepunt heeft
landmark-uniek
Landmarks moeten een unieke rol of rol/label/titel (d.w.z. toegankelijke naam) combinatie hebben
linknaam
Zorgt ervoor dat links herkenbare tekst hebben
lijst
Zorgt ervoor dat lijsten correct zijn gestructureerd
listitem
Zorgt ervoor dat <li> elementen semantisch worden gebruikt.
meta-viewport-groot
Zorgt ervoor dat <meta name="viewport"> aanzienlijk kan schalen.
meta-viewport
Zorgt ervoor dat <meta name="viewport"> het schalen en zoomen van tekst niet uitschakelt.
object-alt
pagina-has-heading-één
Zorg ervoor dat de pagina of ten minste één van de frames een niveau-één-koptekst bevat
presentatie-rol-conflict
Markeert elementen waarvan de rol geen of presentatie is en die de rolconflictresolutie veroorzaken.
rol-img-alt
Zorgt ervoor dat [role='img'] elementen alternatieve tekst hebben
tabindex
Zorgt ervoor dat de waarden van het tabindexkenmerk niet groter zijn dan 0
tabel-rollen
Zorgt ervoor dat tabelrollen gedefinieerd zijn
svg-img-alt
Zorgt ervoor dat <svg> elementen met een img, graphics-document of graphics-symbool rol een toegankelijke tekst hebben.
geldige taal
Zorgt ervoor dat lang attributen geldige waarden hebben