Wat we doen

Ons team bestaat uit stuk voor stuk gedreven en enthousiaste young professionals. Voor ieder vraagstuk hebben wij de specialist, marketing avonturiers voor creatieve uitingen en campagnes en website helden voor een prachtige volledig responsieve website of webshop. Wil je liever opvallen met een unieke app voor een evenement of een bedrijfsgame? Onze app nerds bouwen de mooiste apps, perfect werkend op iedere tablet en smartphone.

Neem contact op

Waar we trots op zijn

Benieuwd waar wij eerder aan gewerkt hebben? Wij zijn ontzettend trots op onze breed georentieerde projecten en laten ze dan ook dolgraag zien. Van een luxe meubelfabrikant (LINTELOO) tot een netwerkorganisatie in de haven van Rotterdam (iTanks).
Ontdek onze opdrachtgevers én opdrachten hiernaast.

Neem contact op

De software van HubSpot zorgt ervoor dat je de klantreis door middel van de marketing automation tools zo frictieloos mogelijk kan laten verlopen. Op basis van data geef je potentiële klanten de informatie waar zij behoefte aan hebben op het juiste moment. Zo ondersteun je je kwalitatieve leads, in plaats van dat je hen stoort met de verkeerde reclame op het verkeerde moment.

Download ook onze whitepaper met 33 HubSpot hacks om nog meer uit de tools te halen!

Download de whitepaper met 33 HubSpot-hacks

Wat is HubSpot en welke tools biedt HubSpot?

HubSpot is een (gratis) CRM met een marketing hub, een sales hub en een service hub. Daarnaast biedt HubSpot ook een CMS aan. Het software-platform biedt zo alles dat het commerciële team van je bedrijf nodig heeft. Er zijn drie belangrijke voordelen boven een ander CRM:

  • De integratie van marketing, sales en services zorgt ervoor dat je alle informatie bij elkaar hebt. Hiermee kun je de customer journey verbeteren en de klanttevredenheid verhogen. Ook bevordert het de samenwerking tussen de verschillende teams.
  • Door integraties met social media, eigen landingspagina’s, CTA’s, formulieren en marketingmails, verzamelt HubSpot meer data over je potentiële klanten dan andere CRM’s. Deze data kun je inzetten van je marketing automation.
  • Het softwareplatform is ontworpen om bij de strategie van inbound marketing te passen. De marketingstrategie is ontworpen door HubSpot en focust op klanttevredenheid. Het basisidee erachter is dat je met tevreden klanten, meer nieuwe klanten kan binnenhalen.
HubSpot CRM

Met de gratis CRM-tool van HubSpot houd je al je klantgegevens bij. Iedereen in je organisatie kan zo makkelijk bij contactgegevens van leads en klanten komen en inzien welke eerdere contactmomenten er al zijn geweest. Het gaat dan niet alleen over persoonlijk contact als mails en belletjes, maar ook over webpagina’s die bezocht zijn, formulieren die zijn ingevuld en automatische mails die zijn verstuurd. Met het CRM krijg je een miljoen gratis contacten, een 360 graden beeld van die contacten en handige functies om tijd en geld te besparen. Zo is het CRM zowel geschikt voor kleine als grote bedrijven.

Wil je meer weten over CRM-systemen? Lees dan ook ons blog over de voordelen en nadelen van de verschillende CRM’s.

Marketing Hub

De marketing hub is er voor vindbaarheid, lead generation, lead nurturing en lead management. Integreer je topic clusters, social media en online advertentie-campagnes om een goed beeld te krijgen van de vindbaarheid van je website. Met landingspagina’s, formulieren en CTA’s helpt HubSpot je vervolgens bij het verzamelen van contactgegevens van leads. Hiervoor heb je overigens niet het HubSpot CMS nodig. De formulieren en CTA’s kunnen ook op andere websites geïntegreerd worden. Met automatische workflows kun je deze lead vervolgens aan je binden. Lees hier onze tips om HubSpot beter in te zetten voor lead nurturing.

Sales Hub

In de sales hub van HubSpot kun je een sales funnel inrichten. Zo houd je controle over je deal management en heb je zicht op resultaten en activiteiten. Ook hier kun je activiteiten automatiseren om tijd te besparen, zoals het versturen van sales e-mails, maar ook een groot deel van de administratieve taken. Als je ook de chatfunctie integreert op je website verlaag je tevens de drempel om contact op te nemen met het salesteam. Alle gegevens uit de chat worden netjes bijgehouden in het CRM, net als e-mails, telefoongesprekken en offertes. Lees hier onze tips om HubSpot beter in te zetten voor sales.

Service Hub

De livechat en het 360 graden klantbeeld komen ook je customer service ten goede. De medewerkers van de helpdesk kunnen de klanten van je bedrijf zo snel en efficiënt te woord staan. Ook hier kunnen weer taken geautomatiseerd worden, zoals het omzetten van klantvragen in tickets. Denk ook aan e-mailtemplates om klanten consistent en duidelijk te woord te staan of de mogelijkheid om de antwoorden op veelgestelde vragen makkelijk om te zetten naar hulpartikelen. Het serviceteam kan verder profiteren van de automation door het gebruik van de HubSpot chatbot die 20% tot 40% van de klantvragen af kan vangen. Zo houden je serviceteam meer tijd over voor complexere klantvragen. Lees hier meer over de voordelen van de HubSpot Service hub.

CMS

Het HubSpot CMS biedt je bedrijf de mogelijkheid om onafhankelijk van een developer mooie pagina’s in elkaar te zetten. De pagina’s kunnen makkelijk gebouwd worden met een drag & drop module. Een groot voordeel boven een standaard-CMS als WordPress is de mogelijkheid gepersonaliseerde, dynamische content aan te bieden. Net zoals je e-mails afgestemd zijn, kan je webpagina dat ook zijn. Een MQL ziet dan bijvoorbeeld een andere CTA dan een SQL. Voor een conversiegerichte website is het ook mogelijk om hier eenvoudig A/B testen op te draaien.

De kracht van HubSpot: inbound marketing

Het idee achter inbound marketing is eenvoudig: tevreden klanten leiden tot meer klanten. Een klant die tevreden is zal immers goede reclame voor je maken, die veel geloofwaardiger is dan welke eigen advertentiecampagne dan ook. De marketing automation tool van HubSpot is dan ook primair gericht op inbound marketing en tevreden klanten. De customer journey, bestaande uit drie fases attract, engage en delight, speelt daarom een belangrijke rol in HubSpot.

Het CRM geeft je de mogelijkheid om contacten te segmenteren, bijvoorbeeld op basis van hun plek in de marketing funnel. Dat maakt het mogelijk om je marketing perfect aan te laten sluiten bij de verschillende fases van de customer journey. Maak ook gebruik van het moment: als iemand een bepaald formulier op je website invult, wil dat zeggen dat hij interesse heeft in jouw bedrijf. Met workflows en specifieke triggers kun je deze kwalitatieve leads op het juiste moment bereiken. Lees hier meer over inbound marketing.

De kracht van HubSpot: data tracken

Alle gegevens van je klanten worden netjes bijgehouden in HubSpot. Dit geeft je inzicht in individuele leads: welke contactmomenten hebben ze al gehad en hoe hebben ze hierop gereageerd. Handige informatie bij klantcontact. Maar het geeft je ook inzicht in de data van je marketing en sales als geheel: hoeveel mensen gaan er naar je landingspagina, hoeveel klikken er op een CTA, hoeveel downloaden een whitepaper enzovoort.

Om deze data in te zetten in het licht van inbound marketing is het goed om in de gaten te houden welke data horen bij welke fase van de customer of buyer journey. Wil je weten hoeveel potentiële klanten je aan je hebt kunnen aantrekken (attract)? Bekijk dan het aantal websitebezoekers. Wil je weten of je deze bezoekers ook hebt kunnen verbinden (engage)? Kijk dan naar het aantal gekwalificeerde leads (MQL en SQL) bij de contactgegevens. Wil je weten hoe tevreden je klanten zijn? Kijk dan naar de NPS score, waarmee aangegeven wordt hoeveel klanten jouw bedrijf of organisatie aan zouden bevelen aan een ander. Via slimme mails kun je deze gegevens verzamelen.

Wil je meer weten over hoe je gegevens over potentiële klanten verzamelt, lees dan ons blog over lead recognition.

De kracht van HubSpot: automatiseren

Het laatste pluspunt van de marketing automation tool is – ja, je verwacht het niet – de mogelijkheid om je marketing (en sales en service) taken te automatiseren. Daarmee bespaar je tijd en geld en heb tegelijkertijd de mogelijkheid om je bedrijf te laten groeien. In het bovenstaande zijn al wat voorbeelden genoemd, zoals e-mail automation, het automatisch aanmaken van contacten bij bijvoorbeeld het invullen van formulieren of het automatisch aanmaken en toewijzen van tickets bij klantvragen. Deze automatisering heeft voordelen zoals de schaalbaarheid en de meetbaarheid ervan. Lees hier meer over de voordelen (en nadelen) van marketing automation.

Workflows met e-mails zijn ook voordelig voor je marketingstrategie. Een goed uitgedachte en foutloze flow levert je waarschijnlijk meer op dan een medewerker die elke e-mail afzonderlijk moet schrijven. Dat maakt het wel extra belangrijk om goed na te denken over je automatische workflow. Denk er wel aan om mails te testen en je contacten goed te segmenteren. Zo kun je persoonlijke geautomatiseerde mails bezorgen op het juiste moment, in plaats van bulkmails die de plank volledig misslaan. Lees hier meer over e-mail automation.

Meer weten?

We begrijpen dat je wel wat inspiratie kan gebruiken bij het opzetten van je e-mailflow. Daarom geven we je nog vijf tips voor workflows die elk e-commerce bedrijf moet hebben. Bekijk ze hier.

Wil je starten met HubSpot? Of werk je al met HubSpot en kun je wel wat hulp gebruiken om alles uit de tools te halen? Neem contact op met Social Brothers.

Download de whitepaper met 33 HubSpot-hacks

Voordat we doorgaan naar de voordelen van een chatbot, eerst wat algemene informatie. Er zijn verschillende soorten chatbots. Zo zijn er rule-based chatbot die bepaalde vragen kunnen beantwoorden of meerkeuzevragen kunnen stellen. Maar er zijn ook complexere chatbots die op basis van AI of NLP zelfstandig een normaal gesprek kunnen voeren met je klanten en bezoekers. Een combinatie tussen beide is ook mogelijk.

Chatbots verschillen natuurlijk ook in identiteit. Bedrijven geven hun chatbots verschillende eigenschappen: is het een man of een vrouw? Staat er een plaatje bij van een normaal persoon, of juist niet? Wat je ook kiest, het is belangrijk dat je chatbot bij je bedrijf past, ook qua manier van communiceren. Je wilt zo veel mogelijk een Conversational Human Voice (CHV) waarbij je chatbot op een menselijk manier, bijvoorbeeld met empathie, communiceert. Lees hier meer over de keuze van een chatbot.

En dan nu: welke voordelen biedt een chatbot?

1. Je bent beter bereikbaar

Het eerste voordeel van een chatbot: je bedrijf is elk moment beschikbaar. Dat is extra handig voor internationale organisaties met klanten in andere tijdzones. Ook hoeven je klanten nooit meer te wachten: een chatbot kan namelijk tegelijkertijd meerdere mensen helpen, terwijl een medewerker maar een beperkt aantal chats kan afhandelen. Hierdoor maken chatbots je bedrijf schaalbaar. Verder is een chatbot een laagdrempelige manier van contact voor je klanten. Dit alles zorgt er samen voor dat je bedrijf beter bereikbaar is door een chatbot.

2. Je bespaart tijd

Afhankelijk van je bedrijf kan een chatbot 20% tot 40% van de klantvragen afhandelen. Hierdoor houden je medewerkers meer tijd over voor de complexere klantvragen. Ze kunnen voor deze complexere zaken de tijd nemen, zonder dat andere klanten ontevreden worden door lange wachttijden. Dit is een win-winsituatie. Klanten met relatief simpele vragen die door de chatbot kunnen worden beantwoord zijn geholpen, maar ook de klanten die juist wel persoonlijke aandacht nodig hebben.

3. Goede investering

Implementatie van een speciaal voor jouw bedrijf ontworpen chatbot kost tijd en geld, maar voor bedrijven met veel traffic is het uiteindelijk wel de beste investering. Kleine bedrijven kunnen bijvoorbeeld gebruik maken van de gratis chatbot-software van HubSpot. Hierdoor kun je ook met een lager budget je eigen chatbot bouwen. Zo kan elk bedrijven profiteren van de voordelen van een chatbot. Wil je meer weten over HubSpot? Lees dan ons blog erover.

4. Verhoogt klanttevredenheid

Een belangrijk voordeel van een chatbot is dat hij de klanttevredenheid verhogen. Klantvragen worden meteen beantwoord, zonder wachttijd en ook buiten kantooruren. De chatbot heeft toegang toe alle informatie in je database, waardoor hij snel en efficiënt antwoord kan geven. Je medewerker moet mogelijk nog zaken opzoeken, je chatbot heeft alles meteen bij de hand. Daar komt nog bij dat een chatbot geduldig is. Ook als hij voor de honderdste keer op een dag dezelfde vraag beantwoordt, blijft hij beleefd.

5. Verhoogde tevredenheid van je medewerkers

Maar niet alleen je klanten worden blij van een chatbot. Ook je medewerkers zullen er tevreden over zijn. Ze hoeven namelijk minder routinewerkzaamheden uit te voeren, zoals het herhaaldelijk beantwoorden van dezelfde vraag. Hierdoor hebben je de medewerkers van de klantenservice meer tijd voor complexe taken en kunnen ze een extra stap zetten voor de klanten voor wie dit nodig is. Zo halen ze meer voldoening uit hun werk.

6. Een chatbot verzamelt data

Je chatbot kan informatie verzamelen over wat je klanten willen weten. Deze kun je weer gebruiken, bijvoorbeeld om je website te optimaliseren. Zo maakt je chatbot het mogelijk om ervoor te zorgen dat in je FAQ ook daadwerkelijk de meest gestelde vragen staan. Ook is het mogelijk om te inventariseren wie contact heeft met de chatbot en eventueel op basis daarvan de status van je leads in je CRM aan te passen. Voor wie datagedreven wil werken, is een chatbot dus een groot voordeel. Meer informatie over wat je met deze data kan, vind je in ons blog over lead recognition.

7. Een chatbot is persoonlijk

Ja, je leest het goed. Via koppeling aan je CRM kan je chatbot persoonlijke informatie gebruiken en daardoor zijn antwoord afstemmen op de vragensteller. Moderne chatbots worden ook steeds ‘empathischer’, doordat ze geleerd hebben bij bijvoorbeeld een verkeerd geleverd product eerst aan te geven dat dat vervelend is. Ze ontwikkelen dus steeds meer een Conversational Human Voice.

8. Echt persoonlijk contact blijft mogelijk

Echt persoonlijk en empathisch contact, kan een chatbot uiteraard niet bieden. Maar een chatbot op je website wil niet zeggen dat contact met een medewerker niet mogelijk is. Weet de chatbot het niet of is een vraag te complex? Dan kan hij bezoekers doorschakelen naar een medewerker. Die kan vervolgens des te sneller aan de slag omdat de chatbot al belangrijke informatie verzameld heeft, zoals het ordernummer. De chatbot wordt zo de ideale werkvoorbereider.

Meer weten?

Wil je meer weten over chatbots in het algemeen of de HubSpot chatbot? Social Brothers helpt je graag.

Of officeel partner van HubSpot kunnen we je op weg helpen met alle onderdelen van de marketing automation tool. Lees hier meer over onze dienstverlening.

Download de whitepaper met 33 HubSpot-hacks

Stap 1 voor marketing automation: user onboarding

Als je ergens nieuw bent, verwacht je een hartelijk welkom waarbij je meteen kennis kan maken. Zo gaat dat ook met nieuwe klanten van je online winkel. Laat ze met een automatische mail weten dat je blij met ze bent en stel je meteen voor.

Dit is het moment om de toon te zetten en te laten weten waar jouw bedrijf voor staat. Onderschat dit niet en neem de tijd voor deze belangrijke stap in je marketing automation. Ga voor een e-mailflow die past bij jouw bedrijf en die klantvriendelijk is. Goede voorbeelden vind je bij CoolBlue en bol.com.

Dit is overigens niet een tip die alleen voor B2C-bedrijven is. Ook in de B2B-sector kun je bij het eerste contactmoment, zoals het invullen van een leadform een dergelijke mail sturen.

Raak je klanten niet kwijt: re-engagement

Stel, je hebt van een goede vriend al lang niets meer gehoord. Wat doe je dan? Juist je neemt zelf contact op. Dat kan ook met klanten die al lang niets meer bij je gekocht hebben. Mail ze met de nieuwe aanbiedingen om ze weer bij je winkel te betrekken.

Hebben klanten een verlanglijstje gemaakt in jouw online omgeving, herinner ze dan aan hun eigen wensen. Hebben je leads geen wensen achtergelaten, dan kun je ook speciale gelegenheden zoals het einde van het jaar aangrijpen om iedereen weer bij de les te krijgen. Zo zorg je ervoor dat je automatische marketing aansluit bij klant en tijdstip.

Wat doe je met verlaten winkelwagentjes?

En tip vooral voor de B2C-sector: stel iemand is bij je langs geweest, maar is zijn sjaal vergeten. Ook dan laat je dat weten. Waarom zou je dus geen contact opnemen met mensen die een volle winkelwagen midden in de e-shop hebben laten staan?

Herinner ze aan hun aankoopintentie en haal ze eventueel over met een extra korting. Er is immers een reden dat iemand niet tot aankoop is overgegaan. Geef dus nog een extra motivatie om toch te kopen.

Aan overtuigde klanten verkoop je meer: upselling

Mensen overtuigen om iets te kopen, is het makkelijkst als ze al overtuigd zijn. Dat is het principe van upselling. Iemand die al eerder keukenapparatuur bij je gekocht heeft, heeft misschien ook interesse in een keukenmachine. Laat aankopen dus ook triggers zijn voor je marketing automation. Dit is natuurlijk ook van toepassing op de B2B-sector. Wie een webdeveloper zoekt, heeft mogelijk ook interesse in online marketing.

Niet vergeten: customer happiness

Het is altijd goed om te weten of je klanten tevreden over je zijn. Volgens het principe van Inbound Marketing zorgen tevreden klanten namelijk voor meer tevreden klanten. Hoe tevreden je klanten zijn, kun je meten met de Net Promoter Score. Hiermee worden klanten ingedeeld in ontevreden klanten, tevreden klanten en promoters, klanten die zo tevreden zijn over je product dat ze het ook aan andere aan zouden raden. En dat wil je natuurlijk. Door klanten na een aankoop een korte enquête in te laten vullen, kun je dit in de gaten houden en erop sturen.

Meer weten over marketing automation?

Meer weten over de mogelijkheden van marketing automation met HubSpot? Lees dan ook onze blogs over e-mailautomation en lead nurturing. Of ontdek alles wat je wilt weten over HubSpot op deze overzichtspagina.

Klaar om workflows op te zetten om je klanten omver te blazen? Laat het ons weten, we denken graag met je mee.

Download de whitepaper met 33 HubSpot-hacks

Als webdesigner is het mijn taak om na te gaan of een website digitaal toegankelijk is. Dat is belangrijk, omdat 20% van de Nederlandse bevolking behoefte heeft aan duidelijkere en betere websites. Kun je klikken zonder muis? Kan er op meerdere manieren genavigeerd worden, bijvoorbeeld via footer, zoekbalk en breadcrumbs? Is er voldoende kleurcontrast? Is het lettertype groot genoeg en kun je zonder problemen tot 200% schalen? Kan de website probleemloos gebruikt worden met hulpprogramma’s en hulpapparatuur?

Als specialist in digitale toegankelijkheid en design kan ik voor een groot deel voorzien of een website geschikt is voor groepen die problemen hebben met de online wereld. Het gaat dan om mensen met een visuele beperking, een auditieve beperking of een motorische beperking. Maar ook om minderbegaafden, laaggeletterden en mensen met dyslexie. De doelgroep zelf is echter de beste tester van digitaal toegankelijk webdesign.

 

Digitoegankelijkheid en UX Design

In principe heeft digitoegankelijk design veel overeenkomsten met UX design: het gaat allebei om ontwerpen met het oog op de best mogelijke gebruikerservaring. Digitoegankelijk design gaat wel verder dan UX design. Mensen die niet ervaren hoe het is om een trillende hand te hebben, zullen knoppen altijd te klein maken of te dicht op elkaar plaatsen. Daarom is het belangrijk om specifiek vanuit deze doelgroep naar webdesign te kijken.

Wat daarbij kan helpen zijn user stories van mensen die een beperking hebben, zoals: ‘Als website-bezoeker wil ik dat de taal van de site is aangegeven, zodat mijn schermlezer in de juiste taal voorleest.’

Het is ook belangrijk om een goed beeld te hebben van de beperkingen en wat dit betekent voor een website. Daarvoor maak ik onder andere gebruik van de Funkify Disablity Simulator. Dat is een plug-in van Google Chrome waarmee je kan ervaren hoe het is om met een bepaalde beperking een website te gebruiken.

Verder is het belangrijk om te testen en te blijven testen. Dat kan met deze doelgroep pas als de website helemaal af. Je kan niet met een paper prototype of wireframe aan de slag, onder andere omdat schermlezers en brailletoetsenborden hier niet op werken. Dat er pas in de laatste fase met de doelgroep getest kan worden, maakt het des te belangrijk dat designers goed kunnen voorzien wat wel en niet werkt voor deze doelgroep.

 

Digitale toegankelijkheid in concrete vorm

Digitoegankelijk design hebben we toegepast bij SiR Intergov. Deze instelling biedt start-ups, scale-ups en MKB-bedrijven de mogelijkheid om innovatieve oplossingen voor te dragen binnen overheidsorganen. Omdat SiR Intergov een overheidsinstelling is, zijn ze verplicht te voldoen aan niveau AA van de WCAG-richtlijnen. We hebben hier ingezet op alle algemene zaken als voldoende kleurcontrasts, grootte van het font, grootte van knoppen enzovoort.

Maar we werken nu ook voor Eyescan, een ooglaserkliniek. Op de website komen natuurlijk veel mensen met visuele beperkingen zoals staar. Dan is het belangrijk om hier extra aandacht aan te besteden in het design en daarbij gaan we verder dan wat de richtlijnen voorschrijven. Dat een website aan de richtlijnen voldoet betekent namelijk niet altijd dat de gebruiker er goed mee overweg kan.

 

De waarde van de digitoegankelijkheidsverklaring

Dat een website is goedgekeurd wil helaas niet altijd zeggen dat een website inderdaad digitaal toegankelijk is. Er wordt gekeken naar een aantal criteria, bijvoorbeeld of alle links uniek zijn en er geen flitsende onderdelen zijn. Maar een onlogische website waar de gebruiker in vastloopt, krijgt nog steeds het keurmerk. Voor dit soort zaken is testen met de doelgroep veel belangrijker dan de richtlijnen.

Het keurmerk is uiteraard wel een goede eerste stap, omdat het mensen bewust maakt van het probleem. En het geeft mensen met een beperking een opening om aandacht te vragen voor de problemen waar ze online tegenaan lopen. Overheidswebsites moeten namelijk een toegankelijkheidsverklaring online hebben staan met een contactpersoon erbij. Je weet dan wel waar je naartoe kan bij problemen rondom de digitale toegankelijkheid van bijvoorbeeld de website van je gemeente.

Alle overheidsinstanties hebben nu een digitoegankelijkheidsverklaring, maar daar mag ook in staan op welke vlakken ze nog willen verbeteren. Er is dus ook bij de overheid nog heel veel winst te behalen. De overheid heeft zoveel websites: het kan simpelweg niet dat die nu allemaal in orde zijn. In principe kan je als instantie zeggen: we moeten alles nog verbeteren en dan is de website officieel digitaal toegankelijk. Je moet dat dan wel binnen bepaalde tijd opgelost hebben en dat wordt ook gecontroleerd.

 

Samenwerking development

Bij Social Brothers gaan design en development naast elkaar en hand in hand. Hierdoor kunnen we snel problemen inzien en oplossen. Daarnaast hoeft digitale toegankelijkheid niet altijd zichtbaar te zijn in het design.

Denk bijvoorbeeld aan knoppen als ‘lees meer’. Om deze knoppen duidelijk te maken voor iemand met een schermlezer is het belangrijk dat je ook aangeeft waarover je meer gaat lezen als je op de knop drukt. Maar dit hoeft niet noodzakelijk op de knop te staan. Je kan dit als het ware verstoppen in de code, waardoor het wel voorgelezen wordt, maar niet zichtbaar is. Dit soort oplossingen maken een goede samenwerking tussen developers en designers extra belangrijk. Lees hier meer over digitoegankelijk development.

 

Digitale toegankelijkheid in de toekomst

Vroeger kwamen mensen bij ons om een website te laten maken die ook geschikt is voor mobiel gebruik. Nu vraagt niemand dat meer, omdat het als vanzelfsprekend wordt beschouwd dat een website geschikt is voor mobiel. Ik denk dat het met digitaal toegankelijke websites dezelfde kant opgaat. Over vijf jaar komen mensen vragen om een digitoegankelijke website te ontwerpen en over tien jaar is het de standaard.

Om dat te bereiken denk ik dat het nodig is dat elk bedrijf een adviseur digitale toegankelijkheid heeft. Die let dan op de toegankelijkheid van websites, app en pdf’s, maar zet zich ook in om awareness over het onderwerp te creëren. Dit is natuurlijk belangrijk voor elk bedrijf, maar vooral voor bedrijven de content, documenten en websites beheren.

 

Meer weten of meedenken?

Wil je meer weten over digitale toegankelijkheid? Lees dan ook onze blog Wat is digitoegankelijkheid? of download onze whitepaper voor nog meer informatie. Of doe de scan om te ontdekken hoe digitoegankelijk jouw website is.

Behoor je tot de 20% van de bevolking die behoefte heeft aan toegankelijkere websites? Dan horen we graag van jou waar je tegenaan loopt. Neem contact op via sjors@socialbrothers.nl om met ons in gesprek te gaan.

Digitoegankelijkheid betekent simpel gezegd dat iedereen een website kan bedienen. Ook als je blind bent of een andere beperking hebt, moet je op een website alle functionaliteiten kunnen gebruiken die een persoon zonder beperking ook kan gebruiken. Het is belangrijk én wettelijk verplicht om niemand uit te sluiten.

Als je kijkt naar bijvoorbeeld openbare gebouwen zoals een station, dan zie je dat het daar normaal is om naast een trap ook een lift aan te bieden. Zo is er een alternatief om ook met een beperking op het perron te komen. Zo’n alternatief is online ook essentieel.

Digitoegankelijk development

Als we specifiek spreken over digitoegankelijk development, dan is het nodig om te realiseren dat websites bestaan uit code. Het belangrijk om die code gestructureerd op te bouwen. Als de code niet goed gestructureerd is, gaat iemand die met het toetsenbord navigeert of die gebruikt maakt van een screenreader op een heel onlogische manier door de website. Als je bovenaan de code voor de footer zet, en onderaan die voor de navigatie, dan gaat een screenreader dat verkeerd om oplezen.

Door via html-tags aan te geven welk onderdeel de header is, welk onderdeel kop 1, welk onderdeel kop 2, welk onderdeel de footer enzovoorts, kun je ervoor zorgen dat er ook met alternatieve methoden op dezelfde manier genavigeerd wordt als je met ogen en/of muis zou doen. De html-tags structureren de content en relateren de verschillende onderdelen van de website aan elkaar.

Dit soort tags zijn overigens ook belangrijk voor je SEO, omdat ze ervoor zorgen dat zoekmachines weten welke onderdelen belangrijk zijn, zoals de koppen. Zo sla je met digitoegankelijk development twee vliegen in één klap.

Een ander voorbeeld van de juiste structuur is het definiëren van de taal van je website, zodat de screen reader weet in welke taal hij voor moet lezen. Denk ook aan het correct afsluiten van html-code, omdat ook dit ervoor kan zorgen dat de screenreader niet goed doorheeft wat de volgorde is.

Samenwerking voor toegankelijkheid

Belangrijk voor een goede digitoegankelijk website is samenwerking tussen developers, designers en webredacteurs. Bij het design moet al nagedacht worden over digitoegankelijk development, omdat je anders het risico loopt dat er zaken ontworpen worden die niet digitoegankelijk te ontwikkelen zijn.

Zo dien je bijvoorbeeld voorzichtig te zijn met het gebruik van tabellen. Als die op een verkeerde manier ontworpen zijn, zijn ze in html niet digitoegankelijk te maken, waardoor een screen reader dit nooit voor kan lezen. Ook sliders zijn een lastig punt, omdat ze op heel veel verschillende manieren ontworpen kunnen worden. Als designers en developers hier op voorhand over overleggen, vang je deze problemen voor een groot stuk op. Lees hier meer over digitale toegankelijkheid en webdesign.

De webredacteur moet op zijn beurt er weer voor zorgen dat er in de content bijvoorbeeld goed gebruik wordt gemaakt van koppen. Maar met alleen een goede webredacteur heb je nog geen digitoegankelijke website. Als de html-code van de navigatie bijvoorbeeld niet goed in elkaar zit, kun je niet eens bij de content komen.

Hoe vind je een goede digitoegankelijke developer?

Als je een partner zoekt voor het ontwerpen van een digitoegankelijke website, is het belangrijk om een bedrijf te zoeken met ervaring met web accessibility. Vraag ook of de designers en developers gecertificeerd zijn en de benodigde cursussen hebben gevolgd. Ik heb zelf veel geleerd van de digitoegankelijkheidscursus, bijvoorbeeld om te denken vanuit het oogpunt van iemand die de muis niet kan gebruiken of van iemand die het beeldscherm niet kan zien. Dat is echt een bepaalde denkwijze.

Digitoegankelijkheid is meer dan de checklist

Digitoegankelijkheid gaat om meer dan het volgen van de regels en het voldoen aan de WCAG-checklist. Sommige zaken worden wel goedgekeurd, maar zijn net niet makkelijk om mee te werken. Dat is dan niet relevant voor het bereiken van niveau A, AA of zelfs AAA, maar wel voor gebruiksvriendelijkheid.

Digitoegankelijk development gaat ook om meer dan het installeren van bijvoorbeeld de Siteimprove Accessibility Checker Plugin. Er zijn meer van dat soort tools en ze zijn zeker nuttig voor de basischecks. Maar ze geven nooit een volledig beeld: ze zien bijvoorbeeld niet of je alternatieven aanbiedt, zoals ondertiteling bij een video. Je kan bij wijze van spreken 100% scoren met zo’n tool en toch heel veel fout hebben gedaan.

Daarom moet er ook altijd met de hand getest worden. Het heeft ook veel toegevoegde waarde om met groep mensen met een beperking te testen, omdat dan altijd zaken naar voren komen waar je niet aan hebt gedacht.

Bij Social Brothers beheersen we het developmentstuk en weten we hoe de regels van de WCAG 2.1 in elkaar zitten, maar we hebben ook een uitgebreide UX-ervaring. Daarbij draait het vooral om de daadwerkelijke ervaring van gebruikers met een beperking en het testen van verschillende opties hiervoor. Dit gaat dus verder dan het behalen van het verplichte niveau. Een ander sterk punt van ons digital agency is de goede samenwerking tussen developers en designer voor het beste resultaat.

Wanneer kies je voor digitoegankelijk development?

Voor overheidsinstanties, inclusief semi-overheid en zelfstandige bestuursorganen, zijn digitoegankelijke websites vanaf 23 september van dit jaar verplicht. Volgend jaar volgt ook de verplichting voor apps.

Let ook goed op of je moet voldoen aan de eisen. We merken dat onze klanten niet genoeg op de hoogte zijn. Als je organisatie deels wordt gefinancierd door overheidsgeld, moet je al voldoen aan niveau AA van de WCAG 2.1. Wij spelen daar vaak een adviserende rol in, want wij willen uiteraard een website opleveren die wel voldoet aan de eisen waaraan hij moet voldoen.

Voor andere organisaties en bedrijven is het een afweging die je zelf moet maken. Het is ook een stukje verantwoordelijkheid én een commerciële afweging. Als je website of app niet digitoegankelijk is, sluit je meteen een groep mensen uit die misschien wel geïnteresseerd is in je bedrijf, service of product. Ik sluit overigens ook niet uit dat digitoegankelijkheid voor meer instanties verplicht gaat worden in de toekomst.

Meer weten?

Overtuigd van de noodzaak van digitoegankelijk development? Neem contact op met Social Brothers!

Wil je meer weten, lees dan ook onze whitepaper over digitoegankelijkheid of vraag de gratis digitoegankelijkheidscan aan.

React Native is ontwikkeld door Facebook en is al sinds 2015 open source beschikbaar. Inmiddels is het een volwassenen en stabiele tool. De beta-versie van Flutter is gereleased in februari 2018 door Google. Sindsdien is de community groeiend, maar nog steeds beperkt. Dat als introductie, maar wat is er nu echt belangrijk bij een vergelijking van React Native vs. Flutter?

React Native en Flutter verschillen van elkaar qua programmeertaal, de manier waarop native componenten toegankelijk zijn, de documentatie, de testmogelijkheden en de manier waarop de export naar IOS & Android plaatsvindt. Laten we die elementen verder bekijken.

Twijfel je nog tussen hybrid of cross platform app-development? Lees dan ons blog over native. vs. hybrid vs. cross platform app-development.

Programmeertaal

React Native maakt gebruik van JavaScript, een veel gebruikte programmeertaal. Verder gebruikt React Native zoals de naam als zegt het framework React. Omdat dit veruit het meest gebruikte webdevelopment framework is, zal voor veel developers de stap naar React Native klein zijn. Verder zijn er genoeg tutorials te vinden en is het makkelijk om code te hergebruiken.

Flutter daarentegen werkt met de in 2011 door Google geïntroduceerde taal Dart. Deze relatief nieuwe programmeertaal wordt amper gebruikt. Door object oriented concepts is de taal makkelijk te leren voor developers die bekend zijn met Java, PHP of C#. Als de complexiteit van de apps toeneemt, is het echter nodig om meer over Dart te leren. Daarnaast wordt Dart door relatief weinig IDEs & text editors ondersteund.

Programmeertaal React Native vs. Flutter

Community

React Native heeft een grote community. Veel developers hebben ermee gewerkt en veel grote spelers op de markt gebruiken React Native, zoals Instagram, Facebook en Skype. De community deelt veel informatie met elkaar via GitHub en meetings. Deze grote community heeft als voordeel dat je als app-eigenaar makkelijk een developer kan vinden, en dat je als developer makkelijk informatie kan vinden. Het framework is hierdoor ook volledig battle-tested en voor bijna elke bug kun je op het internet een oplossing vinden.

De community van Flutter is al enkele jaren groeiende, maar nog niet erg groot om veelvoorkomende problemen op te lossen. Dat wil zeggen dat het lastiger is developers te vinden met veel ervaring met dit framework en het ook lastiger is om support te vinden in de community. Wel zijn er (online) meetups en andere events. Een ander nadeel van een kleine community is dat er relatief weinig extensies en plug-ins beschikbaar zijn. Ontwikkelaars van extensies en plug-ins gaan immers eerder aan de slag met veel gebruikte frameworks.

 

Hoe kom je aan native componenten?

De kern van React Native bevat UI rendering en API’s. Met die API’s kan React Native native modules bereiken. Veel van deze modules zijn van derden. Dat geeft veel mogelijkheden, maar kan ook leiden tot instabiliteit. Gelukkig is React Native al geruime tijd beschikbaar waardoor de meeste API’s stabiel zijn. Daar komt bij dat het werken met de native componenten betekent dat de apps gemaakt met React Native overeenkomen met de standaarden van de verschillende besturingssystemen (iOS/Android).

Flutter is widget-based. In plaats van met native componenten, werkt Flutter met een canvas-based rendering engine. Elke widget wordt uitgerust met een canvas waarop de widget zichzelf kan tekenen. Dit wordt samengesteld tot een scène die vervolgens gepresenteerd wordt als een pixelmatrix. In feite is de engine een volledige Software Development Kit (SDK) met componenten van UI rendering, API’s, navigatie, testmogelijkheden en veel bibliotheken. Ook zijn er widgets voor Material Design. Zo heeft Flutter alles al in zich om met hybrid app-development aan de slag te gaan.

React Native vs. Flutter

Documentatie

Voor vragen over React Native kun je vaak terecht bij de community, bijvoorbeeld via GitHub. Flutter heeft dit minder, maar daar staat tegenover dat Google wel uitgebreide documentatie aanbiedt, in de vorm van een getting-started-guide. Ook is er goede documentatie van livegang en CI/CD-support.

Handig is ook de CLI-tool Flutter Doctor die je door de setup loodst en het CI/CD-systeem Code Magic. Sinds 2019 heeft React Native echter ook een Doctor Command die onder andere kan helpen met trouble shooting en het automatisch oplossen van errors. Verder is er ook voor dit framework uitgebreide documentatie beschikbaar.

Testen

React Native maakt voor testen gebruik van tools van derden en API’s om dit mogelijk te maken, terwijl Flutter test tools ingebouwd heeft. JavaScript heeft weinig testing frameworks voor units en daarom zul je bij React Native tools van derden als Appium of Detox nodig hebben.

Flutter daarentegen heeft ingebouwde mogelijkheden voor het testen van zowel units als widgets en integraties. Ook over de testmogelijkheden is documentatie beschikbaar.

React Native vs. Flutter

En hoe werkt ‘ie?

Nadat je je app ontwikkeld hebt, moet hij uiteraard naar IOS en Android gepusht worden. React Native maakt hiervoor gebruik van de JavaScript Bridge API. Deze ‘mapt’ de JavaScript code naar native code. De Bridge wordt aangeroepen met een bepaalde functie en zorgt ervoor dat dit doorgestuurd wordt naar de bijbehorende functies op Android en iOS zonder compilation stap. Hierin zit een korte vertraging. Flutter heeft als hybrid app geen Bridge nodig. De app zal daardoor iets sneller functioneren.

React Native vs. Flutter?

Met React Native snel aan de slag kun je over het algemeen snel aan de slag en er is een grote community om op terug te vallen. Dat is handig zowel als je een nieuwe developer zoekt, als wanneer je als developer vragen hebt. Het framework is stabiel bijvoorbeeld qua API’s. Het is volwassen en betrouwbaar en wordt door veel grote spelers gebruikt.

Flutter heeft voordelen op het gebied van documentatie en de canvas-rendering-engine en testmogelijkheden, maar dat weegt niet op tegen de nadelen van het gebruik van Dart en de kleine community. Voorlopig zijn er nog teveel obstakels om Flutter een goed alternatief te laten zijn voor React Native.

Meer weten?

Social Brothers heeft veel expertise op het gebied van app development. Wil je meer weten over app development of wil je een app laten bouwen voor jouw organisatie? Neem dan contact op. Wij helpen je graag verder.

Download de WCAG-checklist als pdf

WCAG-checklist

Wat is DigiToegankelijk?

DigiToegankelijk is de Nederlandse naam voor de standaard waarmee overheidsorganisaties hun websites en apps toegankelijk moeten maken voor alle burgers. Toegankelijk betekent hier bruikbaar voor iedereen: jong, oud, met of zonder beperking.

De Nederlandse overheid wil dat openbare voorzieningen te gebruiken zijn voor alle burgers. Niet alleen ge- bouwen of het openbaar vervoer, maar ook digitale voorzieningen als websites en apps. Daarom is digitale toegankelijkheid wettelijk verplicht voor alle overheidsorganisaties (“DigiToegankelijk | Logius,” n.d.).

De deadline voor een digitoegankelijke website was op 23 september 2020 en de deadline voor digtoegankelijke apps is op 23 juni 2021.

Maar liefst 25% van de bevolking (4.500.000 mensen) heeft een beperking. Door je website DigiToegankelijk te maken stel je je website open aan een groot deel van onze samenleving.

Heb je een digitoegankelijke website nodig of wil je de toegankelijkheid van je app verbeteren? Bekijk dan onze dienstenpagina digitoegankelijkheid en vraag meteen een gratis scan aan!

 

Wat heb je aan een toegankelijke website?

  • Efficiëntie gebruik van jouw website
  • Participatie van gebruikers
  • Kwaliteit, duurzaamheid en gebruiksvriendelijkheid
  • Vindbaarheid en doorzoekbaarheid van je informatie
  • Tevredenheid bij bezoekers en medewerkers
  • Sociale bewustwording in je organisatie
  • Goed voor je sociale profiel en diversiteit
  • Duidelijke communicatie met leveranciers
  • Kostenreductie

Wat valt er allemaal onder een website?

  • Alles wat je via de browser binnenkrijgt
  • Webpagina’s met afbeelding, tekst
  • Multimedia content (video, audio, VR, etc)
  • Interactieve onderdelen en processen
  • Externe content waar je verantwoordelijk voor bent
  • (Mobiele) applicaties (pas vanaf 23 juni 2021 verplicht)
  • Documenten (PDF etc.)

Gebaseerd op de WCAG

DigiToegankelijk is gebaseerd op een internationale toegankelijkheidsstandaard: de Web Content Accessibility Guidelines (WCAG). Deze standaard is in beheer bij het World Wide Web Consortium (W3C). Als een website of app aan de eisen van Digitoegankelijk voldoet, garandeert dit maximale toegankelijkheid door het toepassen van technische en inhoudelijke ontwerpprincipes (WGAC, 2020).

 

De onderwerpen

De regels in dit document zijn afkomstig van de WCAG versie 2.1. Deze zijn gebaseerd op 4 belangrijke principes:

Principe 1: Waarneembaar

Informatie en componenten op de website moeten waarneembaar zijn voor de gebruiker.

Principe 2: Bedienbaar

Onderdelen van de website en navigatie moeten goed bedienbaar zijn door de gebruiker.

Principe 3: Begrijpelijk

Informatie en de werking van de website moet duidelijk zijn voor de gebruiker.

Principe 4: Robuust

De inhoud van de webpagina moet goed beschikbaar zijn voor hulpmiddelen zoals een screenreader.

Op basis van deze 4 principes zijn er succescriteria die zijn opgedeeld in de volgende niveaus:

  • Niveau A: het minimale toegankelijkheidsniveau (30 criteria)
  • Niveau AA: goede toegankelijkheid (extra 20 criteria)
  • Niveau AAA: uitstekende toegankelijkheid, ook voor specifiekere beperkingen (extra 28 criteria)

Om te voldoen aan de minimale eisen van de overheid moet een DigiToegankelijke website voldoen aan niveau A en AA. In dit document hebben we de 50 succescriteria uitgelegd zodat je makkelijk kan checken of jouw website DigiToegankelijk is. De nummering van de kopjes komt overeen met de nummer in de WCAG, zodat je het makkelijk terug kan vinden.

 

Principe 1 Waarneembaarheid

Informatie en componenten op de website moeten waarneembaar zijn voor de gebruiker.

 

1.1 Tekst alternatief

Als je niet tekstuele content plaats op de website zoals afbeeldingen, buttons moeten deze een alternatieve tekst bevatten zodat bijvoorbeeld slechtzienden deze kunnen luisteren via de screenreader.

 

1.2.2 t/m 1.2.5 Lever alternatieven voor op tijd gebaseerde media

Van vooraf opgenomen video’s moeten een tekstalternatief en audio alternatief beschikbaar zijn voor zowel slechtzienden als slechthorenden. Een audio alternatief is alleen nodig als er in de video informatie wordt overgebracht door middel van beeld i.p.v. audio.

Het is belangrijk dat je rekening houdt dat de belangrijkste informatie vooral wordt gegeven via het geluid en als alternatief voor slechthorenden via de ondertiteling. De ondertiteling moet duidelijk onderaan het beeld staan.

Dit geldt ook voor alle live content.

 

1.3 Aanpasbaar

Maak content die op meerdere manieren gepresenteerd kan worden zonder dat het zijn informatie of structuur verliest.

1.3.1 Info en relaties

De informatie die wordt overbracht als visuele presentatie moeten herkend en voorgelezen kunnen worden door software of er moet een alternatief beschikbaar zijn in de tekst.

1.3.2 Betekenisvolle volgorde

Wanneer er content is die op een bepaalde manier gepresenteerd moet worden zoals een stappenplan, moet dit in de code worden aangegeven zodat hulpapparatuur dit op de juiste manier kan lezen.

1.3.3 Zintuigelijke eigenschappen

Informatie of instructies worden niet alleen aangeduid door kleur en vorm bijvoorbeeld doordat iets rood kleurt als het fout is. Voor mensen die bijvoorbeeld kleurenblind zijn of door middel van een screenreader lezen zal dit onduidelijk zijn en daarom moet het ook aangegeven worden doormiddel van tekst.

1.3.4. Weergavestand

De content op de pagina beperkt de weergave en bediening niet tot enkel staand of liggend behalve als dit echt essentieel is.

 

1.4 Onderscheidbaar

Maak het voor gebruikers gemakkelijker om content te horen en te zien, door scheiding van voorgrond en achtergrond.

1.4.1 Gebruik van kleur

Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.

Dit is bijvoorbeeld met de kleur groen en rood om goed en slecht aan te tonen. Voor kleurenblinden is dit niet duidelijk en moet het worden aangevuld met een icoon of met tekst.

1.4.2 Geluidsbediening

Als er een video of audiofragment automatisch meer dan 3 seconden wordt afgespeeld op de website moet hier een duidelijke aan-uit knop voor zijn. Dit is om te voorkomen dat het geluid van de audio/video en de screenreader door elkaar heen lopen.

1.4.4 Herschalen van de tekst

De tekst kan zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit. Dit geldt niet voor de ondertiteling.

1.4.5 Afbeeldingen van tekst

Op de webpagina mag geen tekst in een afbeelding worden geplaatst, want hierdoor kunnen de screenreaders dit niet kunnen lezen. Daarnaast kan de tekst ook niet goed worden uitvergroot.

1.4.10 Reflow

De content op de pagina kan zowel horizontaal als verticaal worden weergeven

1.4.11 Leesbaarheid

Er wordt rekening gehouden met een contrast verhouding van tenminste 3:1 met de aangrenzende kleuren. Dit geldt niet voor inactieve componenten van de gebruikersinterface en grafische objecten.

1.4.12 Tekstafstand

Er wordt rekening gehouden met de leesbaarheid voor gebruikers met een visuele beperking door:

  • Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte;
  • Afstand tussen alinea’s naar ten minste 2 keer de lettergrootte;
  • Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte;
  • Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.
1.4.13 Content bij hover of focus

Er mag geen content zichtbaar worden en daarna weer verborgen door het gebruik van een hover of focus met het toetsenbord. Een hover is als je met de muis over een element op de webpagina heen gaat en dat element verandert. Focus is als je met je muis bijvoorbeeld in een veld of element klikt en daardoor de content verandert.

 

Principe 2 Bedienbaarheid

Onderdelen van de website en navigatie moeten goed bedienbaar zijn door de gebruiker.

 

2.1 Toetsenbord toegankelijkheid

Alle functionaliteit op de pagina zijn bedienbaar door middel van het toetsenbord. Dit is voor gebruikers die geen gebruik kunnen maken van een muis maar door middel van het toetsenbord de pagina bedienen.

Het bedienen met een toetsenbord van de pagina moet vloeiend en logisch navigeren zonder dat de gebruiker tegen obstakels loopt.

2.1.2 Geen toetsenbord val

De gebruiker moet als hij navigeert op de pagina met zijn toetsenbord naar een component, weer makkelijk uit het component komen door het gebruik van de standaardtoetsen.

2.1.4 Enkel teken sneltoetsen

Als er sneltoetsen worden gebruikt op de website moeten deze makkelijk kunnen worden uitgezet en opnieuw kunnen worden toegewezen aan andere toetsen.

 

2.2 Genoeg tijd

Geef de gebruikers genoeg tijd om content te lezen en te gebruiken.

2.2.1 Timing aanpasbaar

Voor alle content op de pagina met een tijdslimiet, zoals automatisch uitloggen, moet rekening worden gehouden met het volgende:

Er geldt tenminste 1 van de volgende punten

  • De gebruiker kan de tijdslimiet uitzetten voordat die wordt bereikt
  • De gebruiker mag de tijdslimiet aanpassen.
  • De gebruiker krijgt een waarschuwing als de tijd afloopt en heeft minstens 20 seconden de tijd om deze te verlengen.
2.2.2 Pauzeren, stoppen, verbergen

Alle bewegende, knipperende en scrollende elementen moet kunnen worden gepauzeerd, gestopt of verborgen.

 

2.3. Fysische reacties
2.3.1 Flitsen

De website mag geen elementen bevatten die meer dan 3 keer knipperen in 1 seconde. Dit is in verband met gebruikers die elisie hebben.

 

2.4 Navigeerbaar
2.4.1 Blokken omzeilen

De pagina moet skiplinks bevatten. Die maken het mogelijk om blokken content die meerdere malen op de pagina voorkomen te omzeilen.

2.4.2 Paginatitel

Webpagina’s moeten een titel hebben die het onderwerp en doel van de pagina omschrijven. Titels moeten daarbij ook uniek zijn.

2.4.2 Focus volgorde

De volgorde van content moet logisch zijn wanneer genavigeerd wordt over de pagina met het toetsenbord.

2.4.4 Linkdoel

Alle links op de pagina moeten een duidelijke linktekst hebben die de context omschrijft. Denk hierbij aan een button met de tekst ‘Lees meer’. Voor een gebruiker met een screenreader is dit nietszeggend, zeker als hij alle links achter elkaar hoort.

2.4.5 Meerdere manieren

Er moet naast de hoofdnavigatie nog 2 andere manieren zijn om de webpagina’s te bereiken.

2.4.6 Knoppen en labels

Knoppen en labels moeten duidelijk het onderwerp of doel beschrijven zodat de gebruiker begrijpt wat er gebeurt als hij op de knop drukt of een invoerveld invult.

2.4.7 Focus zichtbaar

Wanneer de gebruiker met het toetsenbord de webpagina bedient moet hij goed kunnen zien waar hij zich bevindt op de pagina.

 

2.5 Modaliteiten
2.5.1 Aanwijzer gebaren

Alle functionaliteiten op de webpagina die worden bediend met gebaren moeten op meerdere manieren worden aangeboden. Denk bijvoorbeeld aan swipen of inzoomen met je vingers op een touchscreen. Dit moet ook mogelijk zijn met het toetsenbord.

2.5.2 Aanwijzer annulering

Er moet een mogelijkheid zijn om een touch-handeling ongedaan te maken.

2.5.3 Label in naam

De tekst die in buttons staat, moet een duidelijke naam hebben die omschrijft wat de functie is.

2.5.4 Bewegingsactivering

Functionaliteiten die alleen maar door beweging worden bediend, moeten ook kunnen worden uitgeschakeld. Denk aan bijvoorbeeld aan het schudden of draaien van je scherm.

 

Principe 3 Begrijpelijk

Informatie en de werking van de website moet duidelijk zijn voor de gebruiker.

3.1 Leesbaar
3.1.1 Taal van pagina

Als de tekst op de webpagina in het Nederlands geschreven is, is deze ook voor de screenreader ingesteld op Nederlands. Anders kan de screenreader moeite hebben met woorden uitspreken.

3.1.2 Taal van onderdelen

Als de website gebruik maakt van verschillende talen is dit aangegeven in de code.

 

3.2 Voorspelbaar
3.2.1 Focus

Als de gebruiker ergens op focust, mag de context niet veranderen. Er mag bijvoorbeeld geen extra informatie in beeld komen. Er mag bijvoorbeeld niet als je ergens op klikt ineens extra informatie komen zonder dat die gebruiker hiervan weet door bijvoorbeeld een “lees meer” button.

Ook moet er duidelijk zijn waar de focus ligt. De gebruiker moet kunnen zien waar hij is op de pagina, dit kan je doen door bijvoorbeeld het invoerveld te laten veranderen qua vormgeving als de focus hierop ligt.

3.2.2 Input

Als de gebruiker ergens input op geeft mag de context niet veranderen. Bijvoorbeeld wanneer de gebruiker op een invoerveld veld klikt mag er niet ineens “het wachtwoord moet minimaal 1 hoofdletter bevatten” verschijnen.

Dit moet vooraf al zichtbaar zijn.

3.2.3 Consistente navigatie

Het navigatiemenu heeft een logische volgorde en komt op iedere pagina op dezelfde manier terug.

3.2.4 Consistente identificatie

De onderdelen van het navigatiemenu hebben een duidelijke omschrijvende naam en komen consistent terug op iedere pagina.

 

3.3. Assistentie bij invoer

Help de gebruikers om fouten te voorkomen door ze te verbeteren.

3.3.1 Foutidentificatie

Als bij het invullen van bijvoorbeeld een formulier een fout automatisch wordt ontdekt, dan krijgt de gebruiker hier direct en op de juiste plek feedback over.

3.3.2 Labels of instructie

Wanneer de gebruiker iets moet invoeren in bijvoorbeeld een formulier worden er duidelijke instructies gegeven zoals: “vul je naam in” en “gebruik minstens een hoofdletter en cijfer voor je wachtwoord.” Dit is om te voorkomen dat de gebruiker een fout maakt.

3.3.3 Foutsuggestie

Invoervelden geven automatisch feedback bij het herkennen van een fout om deze te voorkomen.

3.3.4 Foutpreventie

Voor webpagina’s waar financiële gegevens moeten worden ingevoerd moet de gebruiker tenminste 1 van de volgende punten kunnen toepassen:

  • Terugdraaien
  • Verzending ongedaan maken
  • Controleren
  • De gegevens worden gecontroleerd
  • Feedback gegeven op eventuele fouten
  • Er is een systeem dat de gegevens beoordeeld,bevestigd en verbeterd voordat actie wordt voltooid.

 

Principe 4 Robuust

Content moet voldoende robuust zijn om betrouwbaar geïnterpreteerd te kunnen worden door een breed scala aan hulpmiddelen.

 

4.1 Compatibel
4.1.1 Parsen

De HTML-code bevat zo min mogelijk fouten doordat:

  • De elementen een begin-tag en een eind-tag hebben
  • De elementen juist zijn genest in de code
  • De elementen geen dubbele attributen bevatten
  • Alle ID’s uniek zijn
4.1.2 Naam rol, waarde

Alle elementen op de webpagina kunnen worden bediend door hulpapparatuur voor gebruikers met een beperking. Om te controleren of dit juist werkt wordt er getest met online tools om zo te kijken welke elementen verbeterd moeten worden.

4.1.3 Statusmeldingen

Alle statusmeldingen zoals foutmeldingen moeten ook beschikbaar zijn voor hulpapparatuur voor gebruikers met een beperking.

 

Bronnen

DigiToegankelijk | Logius. (n.d.). Retrieved August 16, 2020, from https://logius.nl/diensten/digitoegankelijk

Initiative, W. W. A. (2020, July 22). Web Content Accessibility Guidelines (WCAG) Overview. Retrieved October 16, 2020, from https://www.w3.org/WAI/standards-guidelines/wcag/

Download de WCAG-checklist als pdf

Overheidsinstanties horen een toegankelijkheidsverklaring aan te vragen en die één keer per jaar te laten vernieuwen. Zo wordt er voor gezorgd dat Web Accessibility bij alle overheidsinstanties, inclusief semi-overheid en zelfstandige bestuursorganen op de agenda komt te staan.

Om de verklaring aan te vragen doorloop je de volgende stappen. Als je organisatie geen overheidsinstelling is, kun je niet de verklaring aanvragen. Wel kun je met de andere stappen werken aan een toegankelijke website. Download ook onze whitepaper voor meer informatie.

Download de whitepaper

 

1. Maak een overzicht

Om deze verklaring aan te vragen, moet je een aantal stappen doorlopen. Je begint met het maken van een overzicht van de websites en apps in jouw organisatie.

Apps hoeven pas vanaf 23 juni 2021 aan de toegankelijkheidsrichtlijnen te voldoen, maar als je je zaken op orde wilt hebben, is het verstandig dit ook nu al mee te nemen. Dit is belangrijk, want als grote organisatie heb je misschien meer websites dan je denkt.

web accessibilty. Persoon in rolstoel kijkt naar groen scherm.

2. Onderzoek de toegankelijkheid

Onderzoek de Web Accessibility van je digitale producten. Kijk hiervoor naar de code, het design en de content. Een gedeelte van het onderzoek kan door middel van tools uitgevoerd worden, zoals de tools op deze lijst. 80% van het onderzoek blijft echter handwerk. Dit kun je laten doen door een externe dienstverlener of in eigen beheer.

Houd er rekening mee dat het onderzoek moet voldoen aan nauwkeurige criteria en dat je voor een compleet beeld de hele website bij het onderzoek moet betrekken. Er zijn verschillende onafhankelijke onderzoeksbureaus die dit onderzoek voor je kunnen doen.

 

3. Maatregelen en planning opstellen

Als je weet wat er al goed gaat op het gebied van Web Accessibility en waar nog winst te behalen is, kun je maatregelen opstellen. Deze maatregelen hebben betrekking op development, design en content, maar kunnen ook gaan om het creëren van bestuurlijk draagvlak. Deze maatregelen zet je om in een plan van aanpak per website of app.

Web Accessibilty. Persoon met blindenstok en zonnebril maakt gebruik van voice search met zijn smart phone.

4. Toegankelijkheidsverklaring aanvragen

Als overheidsinstelling gebruik je de informatie uit stap 3 om de toegankelijkheidsverklaring aan te vragen. In de verklaring staat in hoeverre je website al aan de eisen voldoet en welke maatregelen je nog gaat nemen om de toegankelijkheid te vergroten. Deze maatregelen moeten gepresenteerd worden inclusief een planning.

De toegankelijkheidsverklaring kun je aanvragen via deze website. Als je de verklaring hebt, publiceer je hem op al je websites.

Web Accessibility. Vrouw met gehoorapparaat bekijkt een video op haar laptop.

5. Web Accessibility verbeteren

De laatste en misschien wel grootste stap is om de maatregelen uit stap 3 uit te voeren. Vaak is hiervoor samenwerking tussen webredacteur, webdesigners en webdevelopers nodig. De WCAG-richtlijnen bevinden zich immers meestal op het snijpunt van deze drie gebieden.

Dat maakt het verstandig om ook hiervoor professionals in te schakelen. Bij Social Brothers werken tekstschrijvers, designers en developers samen om te zorgen dat de webtoegankelijkheid van jouw website gegarandeerd is.

Daarbij testen we continu. Denk aan testen bij de bouw van de vernieuwde toegankelijke website, testen bij de oplevering, maar ook testen bij het bouwen van nieuwe onderdelen of het schrijven van nieuwe content.

 

Meer weten?

Lees dan ook onze andere blogs over webtoegankelijkheid. Ontdek bijvoorbeeld enkele maatregelen die je kan nemen om je website toegankelijker te maken in dit blog.

Heb je een digitoegankelijke website nodig of wil je de toegankelijkheid van je app verbeteren? Bekijk dan onze dienstenpagina digitoegankelijkheid. Ook kun je met onze gratis scan meteen zicht krijgen op de digitoegankelijkheid van je website!

Neem gerust contact op als jouw website toe is aan toegankelijk design en development. Als ICT-leverancier kunnen we ervoor zorgen dat je website voldoet én blijft voldoen aan de nieuwe eisen.

In een wereld waarin steeds meer online gebeurt, vallen deze mensen vaak buiten boord. Zo wordt witte tekst op een lichtblauwe achtergrond onleesbaar voor slechtzienden, is een video zonder ondertiteling niet te volgen voor doven en kan de schermlezer van een blinde niks met een afbeelding waaraan geen alternatieve tekst is toegevoegd. Daarom is het belangrijk dat overheidsinstanties en bedrijven zich bewust worden van digitoegankelijkheid. Wettelijk zijn daar al verschillende stappen voor genomen.

Download onze WCAG-checklist

In onze checklist geven we je een compleet en duidelijk overzicht van de regels waar je aan moet voldoen om op niveau AA te zitten. Voor overheidsinstellingen is dit het verplichte toegankelijkheidsniveau.

Download de WCAG-checklist als pdf

Download onze whitepaper digitoegankelijkheid

Met onze whitepaper ontdek je alles over de regels en richtlijnen rondom digitoegankelijkheid, de voordelen van een toegankelijke website of app en krijg je advies over content, design en development.

Download de whitepaper

Regels & richtlijnen Digitoegankelijkheid

In 2006 heeft de VN het ‘verdrag inzake de rechten van personen met een handicap’ opgesteld. Hierin is bepaald dat mensen met een beperking op dezelfde manier moeten kunnen deelnemen aan de maatschappij als anderen, dus ook online.

In 2016 is Nederland begonnen met het implementeren van deze overeenkomst. Hiervoor is onder andere de Wet gelijke behandeling op grond van handicap en chronische ziekte aangepast. Deze wet gaat nu ook over goederen en diensten, ook online.

In hetzelfde jaar heeft de EU de Europese toegankelijkheidswet (European Accessibility Act) opgesteld en zijn er Europese richtlijnen voor de toegankelijkheid van websites en apps van overheidsinstanties. In Nederland is geregeld dat alle websites van overheidsinstanties ( inclusief semi-overheid en zelfstandige bestuursorganen) vanaf 23 september 2020 moeten voldoen aan de wereldwijd erkende WCAG 2.1.

Dit is de laatste officiële versie van de Web Content Accessibility Guidelines. Vanaf 23 juni 2021 moeten ook apps van overheidsinstanties die richtlijnen volgen. In de WCAG 2.1 staan 78 richtlijnen voor digitoegankelijkheid en overheidsinstanties moeten aan 50 daarvan voldoen. Dat wil zeggen dat er veel werk aan de winkel is.

Wil je een makkelijk overzicht van de richtlijnen voor digitoegankelijkheid? Download dan onze checklist WCAG 2.1.

digitoegankelijkheid: zoommeeting met gebarentaal

Voordelen digitoegankelijkheid

Als iedereen je website kan gebruiken heeft dat maatschappelijk en economisch voordeel. Ongeveer 20% van de bevolking heeft een tijdelijke of permanente beperking die vaak het gebruik van internet belemmert. Dat zijn 3,4 miljoen Nederlanders en zelf 148 miljoen Europeanen.

70% van hen klikt weg als een website niet goed toegankelijk is, zo blijkt uit dit onderzoek. Is je website echter wel goed toegankelijk, dan zijn deze 3,4 miljoen Nederlanders vaak hele loyale klanten. Met een toegankelijke website, help je dus je medemens, maar ook je organisatie.

De toegankelijkheid van websites verbetert ook de zelfredzaamheid van mensen. Hoe meer mensen zelf online kunnen regelen, hoe minder ze hier anderen voor in hoeven te schakelen. Dit betekent bijvoorbeeld ook minder belasting van je helpdesk.

Vergeet ook niet dat toegankelijk design voor iedereen is. Zit je in de stiltecoupé zonder headset, dan is de ondertitel ook opeens heel handig ook al ben je niet doof. Op dezelfde manier help je met een goed functionerende website zonder priegelige interacties niet alleen mensen met een motorische beperking, maar iedereen vooruit.

En dan nog twee pluspunten voor je organisatie. Een toegankelijke website is ook online beter vindbaar. Ook zoekmachines zijn niet in staat om afbeeldingen te zien. In plaats daarvan maken zij gebruik van de alternatieve tekst. Een goede omschrijving van je afbeeldingen is dus ook goed voor je SEO. En vergeet ook niet dat Google ook steeds meer gaat letten op de leesbaarheid van je website.

Als tweede: een toegankelijke website verbetert ook je imago. Met een toegankelijke website laat je zien dat je maatschappelijk verantwoord onderneemt.

Bekijk hier alvast enkele tips om je website toegankelijker te maken.

digitoegankelijkheid: navigatie voor schermlezer

Hoe digitoegankelijk is jouw website?

Nu wil je natuurlijk weten hoe het staat met de digitoegankelijkheid van je eigen site. Dat kan met het maturity model. Het maturity model geeft de vijf stadia van digitoegankelijkheid van een organisatie aan. Aan de hand van het model kun je groeien van een ‘ontoegankelijke organisatie’ naar een ‘inclusieve organisatie’. Dit zijn de vijf stadia:

  • Ontoegankelijk: de organisatie is zich niet bewust van digitoegankelijkheid en kennis over het onderwerp is afwezig.
  • Basis op orde: de organisatie is zich bewust van de regelgeving, maar kan deze nog niet tot uitvoering brengen
  • Geïntegreerd: de organisatie heeft een actieve houding ten opzichte van digitoegankelijkheid. Zij is zich bewust van het effect op eigen imago. De organisatie heeft de kennis, wil en vaardigheden om de digitale toegankelijkheid te verbeteren.
  • Optimaal: digitoegankelijkheid is organisatiebreed verankerd en de medewerkers zijn bewust bekwaam
  • Inclusiviteit: digitoegankelijkheid is een integraal onderdeel van de innovatiestrategie van de organisatie.

Wat is jouw organisatie? Kom erachter met onze gratis scan.

En hoe ga je daarmee verder? Lees meer over het proces om je website toegankelijker te maken. Voor een toegankelijke website moet je met veel zaken rekening houden, zoals content, design en development. We geven alvast wat advies.

 

Digitoegankelijke content

Voor toegankelijke content zijn er twee belangrijke zaken om rekening mee te houden. Het eerste is toegankelijkheid voor blinden en slechtzienden. Dit doe je door er onder andere voor te zorgen dat je content ook voorgelezen kan worden. Gebruik een duidelijke koppenstructuur waarbij de H2 op de H1 volgt. Schermlezers gebruiken deze volgorde. Gebruik tabellen en grafieken alleen als het echt nodig is en voorzie ze altijd van een tekstueel alternatief. Vergeet ook de alternatieve tekst bij afbeeldingen en de ondertiteling bij video’s niet.

Het tweede punt om rekening mee te houden is laaggeletterdheid en dyslexie. Denk aan een rustige tekstopbouw met voldoende wit. Dit oogt prettiger en leest makkelijker voor mensen met dyslexie. Zorg ook dat je taal voor iedereen begrijpelijk is. Vermijd jargon en ongebruikelijke woorden. Plug-ins als Yoast kunnen je helpen met de leesbaarheid, maar je kan ook gebruik maken van andere online tools. Ontkom je niet aan jargon en ander lastig taalgebruik? Overweeg dan een tweede versimpelde versie aan te bieden.

digitoegankelijkheid: brailletoetsenbord

Digitoegankelijk design

De designer is verantwoordelijk voor een duidelijk contrast tussen tekst en achtergrond. Ook is hij degene die zorgt voor een overzichtelijke website met een logische navigatiestructuur. Ook de font-keuze (groot genoeg!) en het gebruik van afbeeldingen ligt hier. Plaats bij voorkeur geen tekst in afbeeldingen, aangezien een schermlezer dit niet voorleest. Doe je dit toch, zorg dan dat de boodschap ook in de normale tekst naar voren komt en zorg voor een goed contrast tussen tekst en foto. Dat kan bijvoorbeeld met een kader achter de tekst.

Eigenlijk is toegankelijk design een volgende stap in UX Design. Belangrijk is vooral het testen van het design door middel van prototypes  en wireframes. Zo weet je zeker dat je website voor je doelgroep goed werkt. Lees ook ons expertblog van lead designer Sjors van Elst.

 

Digitoegankelijkheid en development

Ook de developer kan bijdragen aan digitoegankelijkheid. Zo wordt de HTML-code gebruikt door schermlezers om de structuur van een pagina te doorzien. Daarom is het belangrijk dat koppen, links enzovoort niet alleen visueel te herkennen zijn, maar ook in de HTML als zodanig gecodeerd zijn.

Bedenk ook dat niet iedereen een muis kan gebruiken. Daarom zorg je ervoor dat je ook met knoppen als ESC en TAB kan navigeren. Een pop-up kan dan gesloten worden met ESC en van het ene naar het andere item springen op een website met TAB. Voor de navigatie via de tab-toets is het handig om skiplinks te gebruiken. Hierdoor hoef je niet door het hele menu te lopen, maar kan je direct naar de hoofdinhoud.

Vroeger waren deze skiplinks vaak enkel zichtbaar in de code en niet op de website zelfs, omdat ze gebruikt worden door blinden met een schermlezer. Maar ze zijn ook nuttig voor mensen die door een motorisch stoornis niet in staat zijn om een muis te bedienen. Het huidige advies is daarom om de skiplinks wel zichtbaar te maken. Lees ook ons expertblog van lead front-end web Stan van der Heijden.

 

Meer weten of hulp nodig?

Heb je een digitoegankelijke website nodig of wil je de toegankelijkheid van je app verbeteren? Bekijk dan onze dienstenpagina digitoegankelijkheid. Of maak meteen een afspraak om de website van jouw (overheids)organisatie toegankelijk en inclusief te maken.

Native vs. hybrid vs. cross-platform app development

Native app-development

Bij Native app-development schrijf je in de taal van het specifieke systeem waarvoor je de app ontwikkelt. Een app voor IOS wordt geschreven in Objective C of Swift, terwijl een app voor Android wordt geschreven in Java of Kotlin.

Wil je dat je app zowel draait op Apple en Android, dan dien je dus twee verschillende apps te ontwikkelen. Dit betekent dat je niet alleen tijdens de developmentfase meer tijd kwijt bent, maar ook voor het onderhoud. Alles moet immers twee keer gebeuren.

Daar staat tegenover dat je de best mogelijke performance hebt, omdat elke app perfect aansluit bij het systeem waar hij op draait. Daar is de app immers exact voor geschreven ;).

Hybrid app-development

Wil je minder tijd in development en onderhoud steken, dan kun je gaan voor hybrid app development, bijvoorbeeld met Flutter. Je maakt dan één app die zowel op IOS als Android draait. In wezen is dit een soort website on steroids die toegang heeft tot de twee systemen.

Hoewel een hybrid app makkelijk te maken is, zijn er wel veel nadelen. Zo verlies je mogelijk performance en snelheid. Doordat het een website is die als app beschikbaar is, heeft een hybrid app ook niet de look-and-feel van een native app. Het gebrek aan native componenten maakt dat het gebruik van de app voor velen wat onwennig voelt. Verder is de integratie met het Operating System daardoor minder.

Cross platform app-development

Gelukkig is er nog een derde optie: cross platform app-development. Hierbij gebruik je één taal voor twee native apps. Een veelgebruikt framework voor cross platform app-development is React Native, maar er zijn ook andere opties zoals Xamarin.

Bij app-development aan de hand van React Native wordt het React-framework gebruikt samen met native mogelijkheden. Er wordt geschreven in JavaScript (of via Reacts UI paradigma) en dit wordt via een API omgezet in twee native talen. Eén JavaScript-functie wordt dus gepoort naar één Objective C-functie voor de IOS-app en naar één Java-functie voor de Android-app.

Een app die via cross platform development ontwikkeld is, heeft een native look-and-feel. Hierdoor heb je een goede performance en hebben de gebruikers van de app de beste ervaring. Je bespaart echter wel ontwikkeltijd en onderhoudstijd ten opzichte van native app development.

Waarom kiezen wij voor cross platform app-development?

Nu we de voor- en nadelen van de drie systemen op een rijtje hebben, zal meteen duidelijk zijn waarom we in de strijd native vs. hybrid vs. cross platform app-development kiezen voor de laatste optie. Uiteraard willen we dat onze klanten de best mogelijke app hebben en hybrid app-development voldoet hier niet aan. Een goede app is geschreven in een taal specifiek voor een systeem en cross platform app-development biedt ons de meest efficiënte manier om native apps te maken. Vandaar dat Social Brothers kiest voor React Native.

Meer weten?

Wil je meer weten, lees dan ook ons volgende blog over React Native vs. Flutter. Of schrijf je in voor de nieuwsbrief. Dan houden wij je maandelijks op de hoogte over nieuwe ontwikkelingen onder andere op het gebied van app development.

Wil je een app voor jouw bedrijf of organisatie laten ontwikkelen? Neem dan gerust contact op. Social Brothers helpt je graag.