Een Elementor-website toegankelijk maken

Koppen die per widget worden gekozen

In de Heading-widget kiest u zelf het HTML-niveau: H1 tot en met H6, of een gewone tekst. Dat is handig, maar ook de bron van veel fouten. Een ontwerper kiest H2 omdat die maat mooi staat, of H4 voor een kleine tussenkop in een kaart. Het resultaat is een koppenstructuur die nergens op slaat. De opmaak van een kop hoort u via het stijltabblad te regelen, het niveau via de inhoud.

Veel lagen code

Oudere Elementor-pagina's, gebouwd met secties, kolommen en widgets, leveren veel geneste elementen op. Op zichzelf is dat geen WCAG-fout, maar het maakt de pagina zwaarder en de leesvolgorde lastiger te controleren. Elementor heeft in nieuwere versies containers en lichtere code geïntroduceerd. Overstappen kan helpen, maar vraagt wel dat pagina's opnieuw worden opgebouwd.

Iconen zonder tekst

Een rij sociale-media-iconen, een telefoonicoon als link, een Icon Box met alleen een pictogram. Zonder tekst weet een screenreader niet wat zo'n link doet. In iconen zonder tekst leest u hoe u dat oplost.

Sliders, carrousels en animaties

De slider-widgets draaien vaak automatisch, zonder pauzeknop, en de pijltjes hebben niet altijd een naam. Ingangsanimaties ("fade in", "slide up") kunnen voor sommige bezoekers onprettig zijn. Of u een slider beter kunt laten staan of weghalen, staat in sliders en carrousels toegankelijk maken.

Pop-ups

Pop-ups van Elementor Pro moeten de focus naar zich toe trekken als ze openen, met Escape te sluiten zijn en de focus daarna teruggeven. Een pop-up die bij het laden van de pagina opent en de inhoud afdekt, is voor veel bezoekers het eerste obstakel.

Tabs, accordeons en uitklapblokken

Elementor heeft eigen widgets voor tabbladen en uitklapbare vragen, en veel add-ons voegen er nog varianten aan toe. Het verschil zit in de details. Een goed uitklapblok laat een screenreader horen of het open of dicht staat, en gaat open met Enter of de spatiebalk. Bij sommige add-on-widgets is de kop alleen met de muis aan te klikken, of staat de verborgen inhoud er al die tijd voor hulpsoftware gewoon tussen. Test daarom elke variant die u gebruikt, ook als hij er hetzelfde uitziet als de standaardwidget.

Formulieren in Elementor Pro

Het formulierwidget van Elementor Pro kan labels verbergen om ruimte te sparen. Dat oogt strak, maar dan blijft alleen de placeholder over. Zet de labels zichtbaar en controleer of foutmeldingen na het verzenden worden voorgelezen.

Knoppen die links zijn, en andersom

De Button-widget maakt een link. Wordt hij gebruikt om iets te openen op dezelfde pagina, zoals een uitklapblok of pop-up, dan klopt de rol niet en mist vaak de juiste status voor een screenreader.

• Kopniveaus per widget logisch kiezen: één H1 per pagina, daarna H2 voor de hoofdsecties en H3 daaronder.
• Alt-teksten invullen in de mediabibliotheek, en bij decoratieve afbeeldingen leeg laten.
• Kleuren in de globale instellingen controleren op contrast. Pas één globale kleur aan en het hele ontwerp volgt. De regels daarvoor staan op kleurcontrast verbeteren.
• Autoplay uit bij sliders en video's, of minstens een pauzeknop tonen.
• Ingangsanimaties beperken tot plekken waar ze iets toevoegen.
• Linkteksten bij knoppen die zeggen wat er gebeurt, niet "Lees meer" tien keer op een pagina.
• Pop-ups niet laten openen bij het laden van de pagina, maar na een handeling van de bezoeker.

• een toegankelijke naam toevoegen aan iconen en icoonlinks, bijvoorbeeld met verborgen tekst;
• de focusafhandeling van pop-ups, uitschuifmenu's en de mobiele menuknop verbeteren;
• een duidelijke, zichtbare focusstijl in het thema of via eigen CSS;
• widgets die als knop werken ook echt als knop laten gedragen;
• statusmeldingen, bijvoorbeeld na het verzenden van een formulier, laten voorlezen;
• widgets van externe add-ons vervangen als ze niet te repareren zijn.

Een voorbeeld van een icoonlink die een screenreader wel kan uitspreken:

<a href="tel:+31...">
  <svg aria-hidden="true" focusable="false">...</svg>
  <span class="screen-reader-text">Bel ons</span>
</a>

Het icoon wordt verborgen voor hulpsoftware, de tekst is onzichtbaar op het scherm maar wordt wel voorgelezen.

1. Templates eerst. Wij beginnen bij de header, footer, pop-ups en de Theme Builder-sjablonen, omdat fouten daar op elke pagina terugkomen.
2. Globale instellingen. Kleuren, lettertypen en focusstijl leggen wij centraal vast, zodat losse pagina's die automatisch overnemen.
3. Pagina's per type. Daarna lopen wij de pagina's per soort langs en corrigeren koppen, knoppen en iconen.
4. Add-ons beoordelen. Van elke extra widgetbibliotheek bekijken wij of hij te repareren is of beter kan verdwijnen.
5. Afspraken voor de redactie. U krijgt een korte werkwijze voor wie pagina's bouwt, zodat nieuwe pagina's niet dezelfde fouten krijgen.

Thema- en pluginvragen die niet specifiek voor Elementor zijn, behandelen wij zoals beschreven bij een bestaande WordPress-site toegankelijk maken.