Ga naar de inhoud

Kilian is de man achter de browser Polypane, een browser speciaal gemaakt voor webbouwers. Denk hierbij aan developers, ontwerpers, SEO-specialisten en andere professionals en hobbyisten die web-oplossingen maken. Wat onze interesse trok was de focus op toegankelijkheid.

Genoeg reden voor een digitaal gesprek dus. Tijdens dit interview gaat Kilian in op onze vragen over het ontstaan van de app, de focus op digitale toegankelijkheid en de plannen voor de toekomst.

Screenshot van Polypane met daarin drie versies van digitaaltoegankelijk.nl, mobiel, tablet en desktopWat is het verhaal achter jullie browser? Hoe is het idee voor Polypane ontstaan?

“Ik ben als web-ontwikkelaar begonnen en heb lang een eigen internetbureau gehad. Tijdens dit werk maakte ik altijd al tools die mij hielpen om processen te versnellen en het werk te vereenvoudigen.

Op een gegeven moment ben ik overgestapt naar de design tool Sketch. Deze tool wordt gebruikt om websites en apps te ontwerpen. Toentertijd had deze tool als enige de mogelijkheid om met meerdere canvassen van verschillende schermgroottes te werken. Zo kon je eenvoudig zien hoe het ontwerp er op verschillende apparaten uit zou zien.

Een hele handige optie, maar bij het implementeren van het ontwerp in Google’s browser Chrome miste ik deze mogelijkheid. Ik merkte dat ik handmatig het scherm aan het vergroten en verkleinen was, wat onnodig werk opleverde. Hierom ging ik aan het werk voor een tool die meerdere browserschermen naast elkaar kon zetten, wat uiteindelijk resulteerde in Polypane.

Ik ben in 2015 begonnen. Tijdens de eerste twee jaar heb ik de browser ontwikkeld voor eigen gebruik. Vanaf 2017 konden gebruikers de bèta-versie gebruiken en uiteindelijk is in 2019 versie 1 uitgekomen.

Kilian. Foto door John Brussel

Polypane-bedenker Kilian Valkhof. Foto door John Brussel

Hoe is de app ontwikkeld tot wat het nu is?

De eerste versie van de browser had drie schermen naast elkaar van standaard afmetingen. Toen bleek dat ik 60% sneller ging werken dankzij de app, ben ik doorgegaan met het ontwikkelen.

De tool is ontwikkeld voor iedereen die websites maakt. De klantenkring is ook heel breed, onder de gebruikers zijn veel front-end-ontwikkelaars, maar ook veel designers en SEO-specialisten. Voor iedere gebruiker zijn andere functies belangrijk.

Het leuke van de techniek achter de browser is dat Polypane een website in een app is. De applicatie is geschreven met webtechnieken (HTML, CSS en JavaScript). De browser is geschreven met het Electron framework. Dit framework is geschreven door medewerkers van Microsoft om middels webtechnieken desktop-applicaties te kunnen ontwikkelen.

Het voordeel hiervan is dat het ontwikkelen hiervan gemakkelijk en toegankelijker wordt. Daarnaast is Electron toepasbaar op Windows, Mac en Linux, waardoor er gemakkelijk een app gelanceerd kan worden op deze drie platformen. Andere voorbeelden van applicaties die dit framework gebruiken, zijn Microsoft Teams, Slack, Skype en WhatsApp Web.

Man met donker haar en donkere baard werkt op een iMac
Op welke manier draagt Polypane bij aan een toegankelijk internet?

Polypane maakt het niet alleen leuker om een website te maken, maar maakt ook betere websites. Ontwerp- en realisatiefouten worden bijvoorbeeld eenvoudig zichtbaar. Als je het over betere websites hebt, kom je al snel uit op digitaal toegankelijke websites. Daarom zijn er gedurende de jaren steeds meer toegankelijkheidsopties toegevoegd aan Polypane.

Deze opties en scans dragen bij aan bewustwording over het onderwerp toegankelijkheid. Zo maakt Polypane bijvoorbeeld de focusvolgorde visueel zichtbaar, waardoor ontwikkelaars zich er bewuster van worden. Op deze manier leren developers hoe mensen die navigeren via schermlezers door een website gaan.

Polypane draagt dus bij aan meer bewustwording omtrent digitale toegankelijkheid en helpt developers digitaal toegankelijke websites te ontwikkelen.

screenshot van PolypaneEr zijn meer dan 80 toegankelijkheidstests mogelijk via Polypane, wat zijn de testen waar je het meest trots op bent?

Wat ik zelf heel gaaf vind, zijn de vele simulatoren die de browser rijk is. Polypane had bijvoorbeeld al een kleurenblindheidsimulator voordat andere browsers dit hadden. Maar, de app kent ook een dyslexie-simulator en een glaucoma-simulator. Met glaucoma heb je in het midden wel zicht, maar alles daaromheen is wazig.

Deze laatste simulator maakt het voor een developer mogelijk om te ervaren hoe het is om een website te gebruiken als je glaucoma hebt. Dit biedt niet direct praktische oplossingen, maar verhoogt wel de bewustwording.

Daarnaast heeft Polypane een check om te controleren of je niet te kleine tekst gebruikt. Dit betekent dat lopende tekst minimaal 12px groot moet zijn. Er is verder geen toegankelijkheidscheck die daar een foutmelding voor geeft, maar het is wel te klein om goed leesbaar te zijn. Ik probeer verder te gaan dan de standaard toegankelijkheidfouten.

Niet alleen de grootte van tekst wordt getest, maar ook de inhoud zelf. Een algoritme checkt (bij Westerse talen en Arabisch) hoe gemakkelijk een tekst te lezen is. Een moeilijk leesbare zin wordt door de browser rood gearceerd.

Het visueel maken van de focusvolgorde en kopstructuur zijn veruit het meest populair. Het leuke van de focusvolgorde is dat deze met een lijntje wordt uitgetekend op je website. In de onderstaande screenshot is bijvoorbeeld de foute focusvolgorde op Coronatest.nl te zien. De fout is gelukkig inmiddels wel verholpen.

screenshot van coronatest.nl waarin met rode cirkels staat aangegeven waar de fout in de focusvolgorde zitWat kunnen we in de toekomst van Polypane verwachten?

Andere tools (voor toegankelijkheid, optimalisatie, SEO, etc) geven je een lijst met alles wat fout gaat. Dit zijn ontwikkelaars gewend, of het werkt of niet. Maar bij het zien van een foutmelding heb je als developer twee keuzes: ga ik tijd investeren om te leren hoe ik deze foutmelding moet oplossen, of negeer ik het vanwege een deadline?

Polypane geeft al bij heel veel plekken aan wat bij een probleem de oplossing is. Dat is ook de leidraad voor toekomstige features.

Een voorbeeld hiervan is de kleurcontrastchecker. Als de kleur van een lettertype niet voldoet aan de WCAG-normen, berekent Polypane welke kleur het dichtst bij de originele kleur staat, maar wel voldoende contrast heeft. In de toekomst zullen er dus meer van dit soort handige en praktische oplossingen aan de browser worden toegevoegd. De kleurcontrastchecker is gratis te gebruiken via de website van Polypane.

Screenshot van de kleurcontrastchecker van polypane. In beeld is een verhouding van 4.54:1, dus voldoende voor de WCAG AAPolypane uitproberen

Meer lezen over deze browser? Bezoek dan de website van Polypane. Geïnteresseerden kunnen Polypane gratis 14 dagen uitproberen.

Vincent van Brakel

Vincent van Brakel onderzoekt voor Digitaal Toegankelijk de toegankelijkheid van websites en apps. Daarnaast schrijft Vincent over alles wat met digitale toegankelijkheid te maken heeft en deelt hij praktische tips op DigitaalToegankelijk.nl.