Wanneer je zelf een webshop wil bouwen, kom je al snel bij de WordPress plugin WooCommerce uit. Deze zeer uitgebreide en toegankelijke plugin biedt je de mogelijkheid om zelf, zonder veel technische kennis, een webwinkel te maken op je eigen site die goed te bedienen is voor mensen die blind of slechtziend zijn en gebruik maken van schermleessoftware. Echter, zodra je het iets geavanceerder wil, heb je al snel extra plugins nodig en voor je het weet is je toegankelijke webshop niet meer toegankelijk.
In dit artikel leg ik je uit hoe ik dat heb opgelost en welke plugins ik daarvoor heb gebruikt.
Geen WooCommerce?
Geen probleem! Ik daag je hoe dan ook uit dit artikel te lezen. Misschien dat de technische toepassing niet op jou van toepassing is, maar alsnog hoop ik dat je een aantal inzichten meeneemt over de inrichting van je webshop.
Let op: Ik ben geen boekhouder. De informatie in dit artikel gaat alleen over de technische en toegankelijke werking van je webwinkel met WooCommerce. Voor de financiële vragen verwijs ik je graag door naar je boekhouder of accountant.
Winkelwagen en betalen op één pagina
WooCommerce heeft er een handje van om je bezoekers onnodig vaak te laten doorklikken tijdens het betaalproces. Hierdoor wordt het afrekenen een onoverzichtelijke bezigheid. Een simpele en gratis manier om dit te verbeteren is door de winkelwagen en het betalen op één pagina te zetten. Op die manier worden eventuele belastingen op basis van het factuuradres meteen weergegeven bij de totalen en komt je klant niet voor vervelende verrassingen te staan.
Ik maak hiervoor gebruik van de plugin One page checkout and layouts for Woocommerce van BluePlugins. De gratis versie van deze plugin is voldoende. Zorg er voor dat je voor de ‘1 kolom layout’ kiest bij de algemene instellingen en bij ‘Replace text’ de juiste teksten invult.
Het resultaat is een overzichtelijke betaalpagina met winkelmandje. Doordat de koppen hier al op de juiste manier zijn ingesteld, bespaar je je bezoeker onverwachte verrassingen en eindeloos heen en weer geklik tussen het winkelmandje en de betaalpagina.
Btw afhandeling
Dit is alleen van belang als je aan bedrijven binnen andere EU-landen verkoopt.
Als je als bedrijf aan andere bedrijven binnen de EU verkoopt, dien je de btw te verleggen. Technisch komt het er op neer dat je de btw niet aan je klant doorberekend. Hiervoor is wel een geldig btw-nummer uit de EU nodig. Bij het invullen van een geldig nummer (Nederlandse btw-nummers uitgesloten) wordt de btw automatisch herberekend zodat je achteraf geen btw hoeft terug te betalen.
Er is eigenlijk maar één plugin die dit op een toegankelijke manier regelt. WooCommerce EU BTW Assistent van Aelia controleert de opgegeven btw-nummers en verrekend bij een geldige controle het bijpassende btw-tarief. Dit gebeurt realtime en veroorzaakt op de betaalpagina geen hinder voor gebruikers met schermleessoftware.
Let op: In de plugin is het mogelijk om de positie van het btw-veld op de betaalpagina aan te geven. Voor een goede werking adviseer ik om het btw-veld onder het adres en boven het telefoonnummer en het e-mailadres te zetten. Op die manier is de juiste btw berekent als je klant klaar is met invullen. Standaard staat dit veld helemaal onderaan en dan kan het soms even duren voordat de juiste btw zichtbaar is in het winkelmandje.
Antispam beveiliging
Natuurlijk wil je voorkomen dat er valse bestellingen geplaatst worden. Eén manier om dit op te lossen is om de bezoeker direct te laten betalen. Echter voorkomt dit niet dat je af en toe valse, niet afgeronde bestellingen ontvangt die een doorn in het oog kunnen zijn.
Helaas zijn veel antispan beveiligingen niet toegankelijk en is het vaak zelfs onmogelijk om sommige captcha-services te passeren als je niks of weinig ziet. Dit vraagt om een heel eigen artikel, maar voor WooCommerce zijn er een aantal diensten die goed toegankelijk zijn. Ik kan je er twee aanraden:
Google reCaptcha
De beste captcha is de onzichtbare captcha. De Google reCaptcha V3 doet dit allemaal, maar helaas is deze niet zonder uitgebreide technische kennis of betaalde plugins van derde te installeren in WooCommerce. Dit is jammer, want het gebruik van de Google reCaptcha V3 API is gratis. Iemand verdient dus geld aan het integreren van een dienst die verder gratis is en dat is iets waar ik persoonlijk wel moeite mee heb.
Als je geïnteresseerd bent in het integreren van Google reCaptcha V3 in je WooCommerce winkel, dan zijn er verschillende plugins die in prijs variëren van € 24 tot rond de € 40,–.
Friendly Captcha
Een betaalbaar en toegankelijk alternatief voor Google reCaptcha is de plugin Friendly Captcha. Deze is weliswaar zichtbaar, maar geeft volledig toegankelijke uitdagingen als dit nodig is. Bovendien is deze plugin ook buiten WooCommerce te gebruiken in andere plugins voor contactformulieren.
Bovendien gebruikt Friendly Captcha geen cookies en slaan ze geen gegevens op van je klanten. Dit kan bij de Google reCaptcha af en toe wel twijfelachtig zijn.
Friendly Captcha is gratis voor persoonlijk gebruik. Voor commercieel gebruik starten de prijzen op € 9,– per maand voor 1 website.
hCaptcha
Als laatste wil ik je absoluut afraden om hCaptcha te gebruiken. Hoewel zij beweren dat ze doormiddel van een cookie mensen met schermleessoftware kunnen helpen de captcha op te lossen, is mij dit nog nooit gelukt. Helaas ken ik genoeg mensen in mijn omgeving met dezelfde ervaring. Dit is dus een absolute afrader! Bovendien is de methode van hCaptcha onhandig en achterhaald, aangezien de diensten hierboven geen extra acties van de eindgebruiker vragen. Aangezien hCaptcha wel een populaire dienst is en helaas door te veel websites gebruikt wordt, wou ik deze hier wel even benoemen.
Layout
Soms is het wenselijk om overige aanpassingen te doen in je WooCommerce winkel. Denk bijvoorbeeld aan het aanpassen van de layout van je winkel of de betaalpagina. Dit kan ik me goed voorstellen. Echter is dit vaak het moment waarop een toegankelijke winkel verandert in een ontoegankelijke winkel. Let daarom op het volgende:
- Het is prima om je formuliervelden een ander kleurtje of randje te geven. Maak hierbij alleen gebruik van de css-attributen die beschikbaar zijn in WooCommerce in je thema.
- Vervang knoppen en formulierelementen niet door plaatjes. Deze zijn dan namelijk niet meer herkenbaar voor spraakprogramma’s.
- Verander behalve de kleur niks aan de dropdown menu’s. Deze werken goed zoals ze zijn.
- Volg de W3C-richtlijnen als je de koppen (headings) op je product-, winkelwagen- of betaalpagina aanpast.
- Zorg dat je betaalmethode niet in een iFrame staan. Maak bijvoorbeeld gebruik van Mollie, maar vermijd het gebruiken van iDeal via PayPal.
Hulp of controle nodig?
Staat je webshop online en wil je mijn mening of advies over de toegankelijkheid van jouw online store? Neem dan contact met me op.