{"id":4605,"date":"2019-04-12T12:45:44","date_gmt":"2019-04-12T10:45:44","guid":{"rendered":"https:\/\/wbvb.nl\/?p=4605"},"modified":"2021-10-13T10:19:26","modified_gmt":"2021-10-13T08:19:26","slug":"van-woord-tot-pixel","status":"publish","type":"post","link":"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/","title":{"rendered":"Van woord tot pixel"},"content":{"rendered":"<aside style=\"max-width: 50%; float: right; display: inline-block; padding: 1em; font-size: 110%;\">Download:<br \/>\n<a href=\"\/docs\/presentaties\/wcrtm2019\/van-woord-tot-pixel.pdf\">presentatie als PDF (79MB)<\/a><br \/>\n<a href=\"\/docs\/presentaties\/wcrtm2019\/van-woord-tot-pixel.pptx\">presentatie als Powerpoint (30MB)<\/a><br \/>\n<\/aside>\n<p>Onderstaand praatje hield ik op WordCamp Rotterdam op 12 april 2019. De titel was &#8216;Van woord naar pixel &#8211; Rekening houden met toegankelijkheid in alle fasen van je ontwerpproces&#8217;.<\/p>\n<p>Mijn praatje vandaag gaat over woorden. Van woord tot pixel.<br \/>\nWat ik wil bereiken is dat je voortaan slechte clich\u00e9s gaat mijden en goede cliches omhelst. En dat als je aan het ontwerpen gaat voor je website dat je eerst begint met de juiste woorden en dan pas gaat nadenken over kleurtjes en icoontjes.<\/p>\n<h2>Over mij<\/h2>\n<p>Ik maak al 20 jaar websites. In 2007 heb ik voor het eerst gewerkt met WordPress. In 2008 deed ik mee aan een verder niet gerealiseerd redesign voor DigiD. Sinds 2015 ben ik betrokken bij een overheidsgerelateerde website getiteld Gebruiker Centraal. De opdrachtgever heet ICTU. Voor ICTU heb ik ondermeer ook de website Digitale Overheid gemaakt. Samen met Jules Ernst ben ik vanaf 2017 verantwoordelijk voor frontend en interactie-ontwerp van internet.nl. Uit al deze projecten zal ik voorbeelden halen.<\/p>\n<h2>Cliches en tegeltjes<\/h2>\n<p>Ik praat nogal graag in tegeltjeswijsheden. Het is een van mijn grootste pleziertjes om mijn manier van praten terug te horen uit de mond van andere mensen. Wat dat betreft had ik beter carriere in de reclame gemaakt. Ik haat slechte clich\u00e9s en ik hou van goede clich\u00e9s.<\/p>\n<p>Zei ik clich\u00e9s? Ik zei clich\u00e9s dus. Maar wat is een clich\u00e9?<\/p>\n<blockquote><p>Een clich\u00e9 is een uitspraak die zo voor de hand ligt, dat je het eigenlijk niet eens had hoeven zeggen. Of iets formeler uitgedrukt: &#8220;Een stijlfiguur waarbij een beeldspraak wordt gebruikt die haar kracht door het vele gebruik ervan heeft verloren&#8221;.<\/p>\n<p>Het begrip clich\u00e9 is afgeleid van het Franse werkwoord clicher, wat \u2018een afdruk maken\u2019 betekent. Als zelfstandig naamwoord was clich\u00e9 aanvankelijk een drukplaat of kopie. In boekdrukkerijen gebruikte men deze clich\u00e9s om boeken mee te drukken. Omdat het gesmolten metaal een soort \u2018clischjjj clischjjj\u2019-geluid maakte als de drukplaten werden gemaakt, noemde men deze platen clich\u00e9s.<\/p>\n<p>(bron: <a href=\"https:\/\/historiek.net\/cliche-is-geen-stereotiep-woord\/60087\/\">historiek.net\/cliche-is-geen-stereotiep-woord<\/a>)<\/p><\/blockquote>\n<p>Een clich\u00e9 is dus niet altijd slecht. Een cliche is pas slecht als het betekenisloos wordt. Een goed clich\u00e9 impliceert voorspelbaarheid.<\/p>\n<p>Ik weet niet of ik hier vloek in de kerk. Maar ik vond \u2018m zelf wel goed gevonden. Een goed clich\u00e9 is coca cola: waar je ook ter wereld coca cola bestelt, je weet wat je krijgt. Een slecht clich\u00e9 is slappe, prikloze cola waar geen lol meer aan is.<\/p>\n<h2>Toegankelijkheid: 4 principes<\/h2>\n<p>Laten we het even hebben over toegankelijkheid. Ik ben geen toegankelijkheidsadviseur, maar ik weet er net genoeg vanaf om mee te kunnen praten.<br \/>\nZoals je ongetwijfeld vandaag eerder hebt gehoord bestaan er zoiets als de Web Content Accessibility Guidelines. WCAG. Deze richtlijnen geven je succescriteria. Test je website tegen deze criteria en je weet of die toegankelijk is of niet. Deze criteria zijn onderverdeeld naar vier principes. Die principes zijn:<\/p>\n<ol>\n<li>Waarneembaar<\/li>\n<li>Bedienbaar<\/li>\n<li>Begrijpelijk<\/li>\n<li>Robuust<\/li>\n<\/ol>\n<p>Wat is waarneembaar? Ik citeer Iacobien Riezebosch:<\/p>\n<blockquote><p>Principe Waarneembaar gaat erover dat informatie niet met alleen 1 zintuig waarneembaar is. Als je informatie geeft met een afbeelding, dan moet je zorgen dat die informatie ook beschikbaar is voor mensen die niet of niet goed kunnen zien. En als je informatie geeft met geluid dan moet je zorgen dat die informatie ook beschikbaar is voor mensen die niet of niet goed kunnen horen. Informatie die maar met \u00e9\u00e9n zintuig te benaderen is, is niet voor iedereen \u2018waarneembaar\u2019. En dus niet toegankelijk.<br \/>\n(bron: <a href=\"http:\/\/documenten-en-toegankelijkheid.nl\/richtlijnen\/principe-waarneembaar\/\">documenten-en-toegankelijkheid.nl\/richtlijnen\/principe-waarneembaar<\/a>)<\/p><\/blockquote>\n<p><em>Bedienbaar<\/em> houdt in dat alle componenten van je website (de gebruikersinterface en de navigatie) bedienbaar moeten zijn door de gebruiker. Dat wil zeggen dat ook mensen die alleen een toetsenbord gebruiken en geen muis ook door je pagina kunnen navigeren.<br \/>\nHet criterium <em>Begrijpelijk<\/em> houdt in dat alle informatie en het gebruik van de interface begrijpelijk moeten zijn voor de gebruiker. En wat is <em>Robuust<\/em> tenslotte? Dit principe houdt in dat content voldoende robuust zijn om betrouwbaar ge\u00efnterpreteerd te kunnen worden door uiteenlopende soorten gebruikersagenten (user agents), met inbegrip van technische hulpmiddelen (assistive technologies). Denk hierbij aan het kunnen parsen van je HTML; unieke ID\u2019s op je pagina, valide HTML en CSS.<\/p>\n<h3>Lessen in nederigheid<\/h3>\n<p>Eigenlijk zijn toegankelijkheidsrichtlijnen een grote les in nederigheid. Elk succescriterium is een herinnering: niet iedereen is zoals jij. Er zijn mensen die het web anders gebruiken dan jij. Ja echt, sorry. Je kunt nooit alle mogelijke scenario\u2019s testen en ondervangen. Maar je kunt er wel rekening mee houden dat je site-bezoeker niet exact denkt of doet als jij verwacht.<\/p>\n<p>Er zijn bijvoorbeeld mensen die amper een muis gebruiken en alles met een toetsenbord doen. Dus daarom test je of je site het doet met alleen toetsenbordbediening. Er zijn mensen die zo kippig zijn dat ze hun computer in hoog-contrastmodus gebruiken met een heel grote letter. Daarom gebruik je bijvoorbeeld schaalbare lettergroottes in plaats van pixels, want je wil dat de tekst fatsoenlijk meegroeit als de gebruiker inzoomt, om maar eens succescriterium 1.4.4 als voorbeeld te nemen. En je test of je site nog steeds begrijpelijk is als geen scripts of stylesheets geladen zijn.<\/p>\n<p>Er zijn volslagen idiote types \u2013 zoals ik \u2013 die beleefd alle cookies weigeren omdat ze zo min mogelijk gevolgd willen worden op het web (en ook om het web stuk te maken, ook dat). Ik accepteer alleen cookies als ik moet inloggen of als ik een webshopwinkelwagentje vul. Als je cookies nodig hebt, is het dus handig dat je eerst checkt of er \u00fcberhaupt cookies geplaatst mogen worden.<\/p>\n<p>Hoe houd je een website begrijpelijk als je weet dat \u2018ie gebruikt kan worden via een desktop, een screenreader, iemands commandline, een ereader, een smartwatch? Hou je er rekening mee dat niet iedereen zo goed kan lezen als jij? Ingewikkeld? Ingewikkelde dingen simpel maken is het mooiste in dit vak.<\/p>\n<h2>Voorbeeld: internet.nl<\/h2>\n<p>Laten we eens 1 website op een paar verschillende manier bekijken: internet.nl.<br \/>\nZoals ik zei had ik met Jules Ernst het front-end en interactieontwerp gedaan voor internet.nl. Via deze site kun je testen of je website voldoet aan moderne internetstandaarden. Is je site te bereiken via IPv6? Is je domeinnaam voldoende beveiligd tegen spoofing? Of anders: is je mailadres voldoende beveiligd tegen namaak? Is je internetverbinding veilig en naar moderne standaarden?<br \/>\nIk ben best trots op die site, want het is een nuttige site. Ik gebruik \u2018m regelmatig zelf en ik raad je aan om dat ook te doen.<\/p>\n<h3>Screenshot 1 &#8211; een testuitslag via internet.nl<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4633\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-01-test-wordpress-org-normaal.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-01-test-wordpress-org-normaal.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-01-test-wordpress-org-normaal-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-01-test-wordpress-org-normaal-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-01-test-wordpress-org-normaal-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-01-test-wordpress-org-normaal-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>Als de etterbak die ik ben heb ik wordpress.org eens door de test gehaald. Je ziet dat deze site niet hoog scoort: 52%. Onder de algemene test zie je de diverse onderdelen: IPv6, DNSSEC, HTTPS.<\/p>\n<h3>Screenshot 2 &#8211; dezelfde uitslag maar dan op een iPhone<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4632\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-02-test-wordpress-org-iphone-x.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-02-test-wordpress-org-iphone-x.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-02-test-wordpress-org-iphone-x-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-02-test-wordpress-org-iphone-x-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-02-test-wordpress-org-iphone-x-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-02-test-wordpress-org-iphone-x-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>Niet heel veel schokkends. De onderdelen worden compacter getoond. Het menu wordt weggemoffeld achter een frikandelmenu.<\/p>\n<h3>Screenshot 3 &#8211; geen CSS<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4631\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-03-test-wordpress-org-zonder-styles.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-03-test-wordpress-org-zonder-styles.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-03-test-wordpress-org-zonder-styles-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-03-test-wordpress-org-zonder-styles-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-03-test-wordpress-org-zonder-styles-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-03-test-wordpress-org-zonder-styles-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>Zie je die tekst \u2018Failed: IPv6\u2019? Ook zonder rood icoontje is dit te begrijpen. Het slagingspercentage is ook te lezen. Wel twee keer zelfs.<\/p>\n<h3>Screenshot 4 &#8211; print-style<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4630\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-04-test-wordpress-org-print-style.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-04-test-wordpress-org-print-style.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-04-test-wordpress-org-print-style-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-04-test-wordpress-org-print-style-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-04-test-wordpress-org-print-style-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-04-test-wordpress-org-print-style-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>Voor de printer hebben we voor de begrijpelijkheid toch zoveel mogelijk de schermvormgeving aangehouden. Alleen zijn de inklapblokken natuurlijk opengeklapt te zien.<\/p>\n<h3>Screenshot 5 &#8211; readability mode<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4629\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-05-test-wordpress-org-safari-readability-mode.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-05-test-wordpress-org-safari-readability-mode.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-05-test-wordpress-org-safari-readability-mode-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-05-test-wordpress-org-safari-readability-mode-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-05-test-wordpress-org-safari-readability-mode-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-05-test-wordpress-org-safari-readability-mode-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>In readability mode gaat het toch niet helemaal goed. Readability mode stript alle overbodige layout en toont louter tekst en inline plaatjes.<\/p>\n<h3>Screenshot 6 &#8211; geen javascript<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4628\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-06-test-wordpress-org-chrome-no-javascript.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-06-test-wordpress-org-chrome-no-javascript.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-06-test-wordpress-org-chrome-no-javascript-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-06-test-wordpress-org-chrome-no-javascript-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-06-test-wordpress-org-chrome-no-javascript-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-06-test-wordpress-org-chrome-no-javascript-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>Geen JavaScript, toch output. Hoor je dat, React? De animatie doet het niet. Maar de pagina is begrijpelijk en waarneembaar.<\/p>\n<h3>Screenshot 7 &#8211; no INLINE images (wel CSS-images)<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4627\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-07-test-wordpress-org-chrome-no-images.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-07-test-wordpress-org-chrome-no-images.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-07-test-wordpress-org-chrome-no-images-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-07-test-wordpress-org-chrome-no-images-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-07-test-wordpress-org-chrome-no-images-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-07-test-wordpress-org-chrome-no-images-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>Dit is een tricky voorwaarde. Je zie plaatjes, maar dit zijn de plaatjes die via CSS als achtergrond worden gezet.<\/p>\n<h3>Screenshot 8 &#8211; hoog contrast<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4626\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-08-test-wordpress-org-chrome-hight-contrast.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-08-test-wordpress-org-chrome-hight-contrast.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-08-test-wordpress-org-chrome-hight-contrast-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-08-test-wordpress-org-chrome-hight-contrast-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-08-test-wordpress-org-chrome-hight-contrast-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-08-test-wordpress-org-chrome-hight-contrast-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>Niet helemaal tevreden hierover. De zwarte tekst van het percentage lost nogal op in het verzadigde oranje.<\/p>\n<h2>Screenshot 9 &#8211; groenblind<\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4625\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-09-test-wordpress-org-chrome-groenblind.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-09-test-wordpress-org-chrome-groenblind.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-09-test-wordpress-org-chrome-groenblind-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-09-test-wordpress-org-chrome-groenblind-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-09-test-wordpress-org-chrome-groenblind-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/internet-nl-09-test-wordpress-org-chrome-groenblind-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>Zo ziet mijn vader deze website. Best zielig eigenlijk.<\/p>\n<h2>Woorden<\/h2>\n<p>Laten we het eens over woorden hebben.<br \/>\nZegt de term leesniveau je iets?<br \/>\nIk citeer de Stichting Accessibility:<\/p>\n<blockquote><p>Onderzoek toont aan dat ongeveer 1,5 miljoen mensen moeite hebben met lezen en schrijven.<\/p>\n<p>Figuur 1: Gemiddelde leesniveau zoals dat door veel overheden wordt aangeboden en het werkelijke leesniveau van de gemiddelde nederlander (bron: BureauTaal)<\/p>\n<p>Uit onderzoek blijkt dat veel communicatie niet effectief is omdat de teksten te moeilijk geschreven zijn. In de grafieken van het onderzoek wordt dat duidelijk gemaakt. Figuur 1 laat zien dat de piek van het gemiddelde leesniveau in Nederland ligt op taalniveau B1 (40%) terwijl het tekstniveau waarop tekst meestal wordt geschreven rond taalniveau C1 ligt (75%).<\/p>\n<p>(bron: <a href=\"https:\/\/www.accessibility.nl\/kennisbank\/tools\/leesniveau-tool\/leesniveaus\">accessibility.nl\/kennisbank\/tools\/leesniveau-tool\/leesniveaus<\/a>)<\/p><\/blockquote>\n<h3>Leesniveau A1 &#8211; C2<\/h3>\n<p>Wat is dan leesniveau precies? Ik citeer nogmaals Accesibility:<\/p>\n<ul>\n<li><strong>Taalniveau A1<\/strong><br \/>\nIk kan vertrouwde namen, woorden en zeer eenvoudige zinnen begrijpen, bijvoorbeeld in mededelingen, op posters en in catalogi.<br \/>\nVoorbeeld: Ik ga naar huis. Ik moet eten. Ga je ook mee?<\/li>\n<li><strong>Taalniveau A2<\/strong><br \/>\nIk kan korte eenvoudige teksten lezen. Ik kan specifieke voorspelbare informatie vinden in eenvoudige, alledaagse teksten zoals advertenties, menu&#8217;s en dienstregelingen en ik kan korte, eenvoudige, persoonlijke brieven begrijpen. Dit is het niveau dat behaald moet worden door inburgeraars.<\/li>\n<li><strong>Taalniveau B1<\/strong><br \/>\nIk kan teksten begrijpen die hoofdzakelijk bestaan uit hoogfrequente, alledaagse of aan mijn werk gerelateerde taal. Ik kan de beschrijving van gebeurtenissen, gevoelens en wensen in persoonlijke brieven begrijpen. Ongeveer 40 procent van de Nederlandse bevolking beschikt over dit taalniveau. Veel gratis kranten hanteren dit taalniveau. 95 procent van de Nederlandse bevolking is in staat om deze teksten te lezen en te begrijpen.<\/li>\n<li><strong>Taalniveau B2<\/strong><br \/>\nIk kan artikelen en verslagen lezen die betrekking hebben op eigentijdse problemen, waarbij de schrijvers een bijzondere houding of standpunt innemen. Ik kan eigentijds literair proza begrijpen.<\/li>\n<li><strong>Taalniveau C1<\/strong><br \/>\nIk kan lange en complexe feitelijke en literaire teksten begrijpen en het gebruik van verschillende stijlen waarderen. Ik kan gespecialiseerde artikelen en lange technische instructies begrijpen, zelfs wanneer deze geen betrekking hebben op mijn terrein.<\/li>\n<li><strong>Taalniveau C2<\/strong><br \/>\nIk kan moeiteloos vrijwel alle vormen van de geschreven taal lezen, inclusief abstracte, structurele of lingu\u00efstische complexe teksten, zoals handleidingen, gespecialiseerde artikelen en literaire werken.<\/li>\n<\/ul>\n<h3>Laaggeletterdheid<\/h3>\n<p>Ik hoorde deze week dat 30% van de Rotterdammers laaggeletterd is.<\/p>\n<p><em>Der-tig<\/em> procent, dertig.<\/p>\n<p>Wat betekent het om laaggeletterd te zijn? Laaggeletterdheid is een term voor mensen die grote moeite hebben met lezen, schrijven en\/of rekenen. Mensen die laaggeletterd zijn, zijn geen analfabeten. Ze kunnen wel lezen en schrijven, maar beheersen niet het eindniveau vmbo of niveau mbo-2\/3. Mensen die laaggeletterd zijn hebben onder meer moeite met:<\/p>\n<ul>\n<li>Formulieren invullen (zorgtoeslag, belasting, etc.)<\/li>\n<li>Straatnaamborden lezen, reizen met openbaar vervoer<\/li>\n<li>Voorlezen aan (klein)kinderen<\/li>\n<li>Pinnen en digitaal betalen<\/li>\n<li>Werken met de computer, solliciteren<\/li>\n<li>Begrijpen van informatie over gezondheid en zorg<br \/>\n(bron: <a href=\"https:\/\/www.lezenenschrijven.nl\/over-laaggeletterdheid\/\">lezenenschrijven.nl\/over-laaggeletterdheid<\/a>)<\/li>\n<\/ul>\n<h3>Terzijde: hoe lezen we?<\/h3>\n<p>Laten we eerlijk zijn: op het web lezen we niet echt. Erger nog dan bij het lezen van boeken, scannen we teksten. Dat houdt in dat we met onze ogen zoeken naar visuele hints waar een pagina over gaat. Je ogen springen van fixatiepunt naar fixatiepunt. Lezen gebeurt door het gedeeltelijk herkennen van woorden. Hoe groter je woordenschat, hoe sneller je woorden herkent, hoe sneller je kunt lezen.<\/p>\n<h3>Voorbeeld: een leesbare pagina over overheidsbeleid<\/h3>\n<p>Dat las je goed. Een -hou je vast- leesbare pagina, over overheidsbeleid.<br \/>\nWaar we het over hebben? De pagina \u2018Digitale Inclusie\u2019 op digitaleoverheid.nl.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4624\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/digitale-inclusie-01-readability-mode.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/digitale-inclusie-01-readability-mode.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/digitale-inclusie-01-readability-mode-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/digitale-inclusie-01-readability-mode-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/digitale-inclusie-01-readability-mode-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/digitale-inclusie-01-readability-mode-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>De tekst op deze pagina is zorgvuldig geredigeerd. Als je de tekst door de leesniveau-tool haalt van Stichting Accessibility haalt deze tekst een noemenswaardige B1\/B2-score. Die leesniveautool vind je trouwens hier: <a href=\"https:\/\/www.accessibility.nl\/kennisbank\/tools\/leesniveau-tool\">accessibility.nl\/kennisbank\/tools\/leesniveau-tool<\/a>.<\/p>\n<p>Wat deze tekst voor een standaardwebpagina ook apart maakt zijn de markeringen in de tekst. Je ziet in het screenshot dat belangrijke termen vetgemaakt zijn. Zo kun je de tekst makkelijker scannen.<br \/>\nHet is wat controversieel. Niet iedereen vindt deze manier van lezen prettig. Mijn persoonlijke ervaring is dat het in het begin tegenstaat, maar na gewenning erg prettig is.<\/p>\n<h2>Beelden<\/h2>\n<p>Beelden zijn niet beter dan woorden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4634\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/image16.png\" alt=\"\" width=\"73\" height=\"73\" \/><\/p>\n<p>Weet iemand wat deze cirkel betekent?<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4635\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/image17.png\" alt=\"\" width=\"960\" height=\"892\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/image17.png 960w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/image17-370x344.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/image17-768x714.png 768w\" sizes=\"(max-width: 960px) 100vw, 960px\" \/><\/p>\n<p>Lijkt me duidelijk. Deze cirkel betekent: \u201cChemisch reinigen toegestaan\u201d.<\/p>\n<p>Wat ik hiermee bedoel te zeggen is: een icoontje op zichzelf betekent niets. Een icoon betekent alleen iets in de juiste context voor iemand met de juiste voorkennis. Je las in die zin vooronderstellingen. Namelijk dat iemand voorkennis heeft en een symbool op de juiste plek en de juiste tijd tegenkomt. Maar je weet wat ze zeggen over aannames?<\/p>\n<p>Laten we het eens hebben over een verschrikkelijk clich\u00e9. Namelijk het hamburgermenu, eh frikandelmenu.<\/p>\n<p>Voor wie het niet weet wat een hamburger-icoontje is, dat is een plaatje met drie rechthoekjes boven elkaar: <img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4314 alignnone\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2015\/12\/omgekeerde-daniel-buren-maar-dan-heel-anders.png\" alt=\"Drie zwarte, horizontale streepjes op een witte ondergrond: een voorbeeld van een hamburger-icoon\" width=\"35\" height=\"35\" \/> Dit lijkt op\u00a0drie plakken vlees, zoals je soms op een hamburger krijgt. Of 1 plak vlees tussen twee stukken brood. Een vorm van <em>mystery meat navigatio<\/em>n dus: een navigatie-element waaraan je niet kunt zien waarheen een link leidt. Geen beschrijving, geen duidelijke indicatie. Waar je heen gaat blijft een verrassing. Dat is niet handig:\u00a0hoe meer je verbergt, hoe minder je ziet. Luke Wroblewski toont de veelvormigheid van <em>mystery meat navigation<\/em> in mobiele apps:<\/p>\n<figure id=\"attachment_4266\" aria-describedby=\"caption-attachment-4266\" style=\"width: 1023px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/twitter.com\/lukew\/status\/591296890030915585?lang=en\" rel=\"attachment wp-att-4266\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-4266\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2015\/12\/Luke-Wroblewski-The-Mystery-Meat-of-Mobile-Navigation.png\" alt=\"Luke Wroblewski - The Mystery Meat of Mobile Navigation\" width=\"1023\" height=\"575\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2015\/12\/Luke-Wroblewski-The-Mystery-Meat-of-Mobile-Navigation.png 1023w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2015\/12\/Luke-Wroblewski-The-Mystery-Meat-of-Mobile-Navigation-370x208.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2015\/12\/Luke-Wroblewski-The-Mystery-Meat-of-Mobile-Navigation-768x432.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2015\/12\/Luke-Wroblewski-The-Mystery-Meat-of-Mobile-Navigation-576x324.png 576w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2015\/12\/Luke-Wroblewski-The-Mystery-Meat-of-Mobile-Navigation-50x28.png 50w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2015\/12\/Luke-Wroblewski-The-Mystery-Meat-of-Mobile-Navigation-130x73.png 130w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2015\/12\/Luke-Wroblewski-The-Mystery-Meat-of-Mobile-Navigation-240x135.png 240w\" sizes=\"(max-width: 1023px) 100vw, 1023px\" \/><\/a><figcaption id=\"caption-attachment-4266\" class=\"wp-caption-text\">Luke Wroblewski &#8211; <a href=\"https:\/\/twitter.com\/lukew\/status\/591296890030915585?lang=en\">The Mystery Meat of Mobile Navigation<\/a><\/figcaption><\/figure>\n<h3>Mag ik een hamburgericoon gebruiken<\/h3>\n<p>Is een hamburger-icoontje altijd een slecht idee? Eh, neen, niet altijd. Is een hamburger-icoontje altijd een goed\u00a0idee? Eh, neen, niet altijd.<\/p>\n<figure id=\"attachment_4276\" aria-describedby=\"caption-attachment-4276\" style=\"width: 280px\" class=\"wp-caption alignright\"><a href=\"Trigram (I Tjing)\" rel=\"attachment wp-att-4276\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4276 \" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2015\/12\/Trigram-I-Tjing-370x305.png\" alt=\"De acht trigrammen uit de I Tjing\" width=\"280\" height=\"231\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2015\/12\/Trigram-I-Tjing-370x305.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2015\/12\/Trigram-I-Tjing-576x475.png 576w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2015\/12\/Trigram-I-Tjing-50x41.png 50w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2015\/12\/Trigram-I-Tjing-130x107.png 130w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2015\/12\/Trigram-I-Tjing-240x198.png 240w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2015\/12\/Trigram-I-Tjing.png 598w\" sizes=\"(max-width: 280px) 100vw, 280px\" \/><\/a><figcaption id=\"caption-attachment-4276\" class=\"wp-caption-text\">&#8216;Hemel&#8217; is ook een hamburgermenu. <a href=\"https:\/\/nl.wikipedia.org\/wiki\/Trigram_(I_Tjing)\">De acht trigrammen uit de I Tjing<\/a><\/figcaption><\/figure>\n<p>Vaak wordt het gebruikt op sites die\u00a0door een luie informatie-architect en een\u00a0luie designer zijn gemaakt. Als &#8216;Ik vind het niet mooi&#8217; een argument is om de\u00a0menubalk\u00a0weg te stoppen, zit je dus alleen voor je designer-vriendjes een site te maken. Dat mag natuurlijk. Maar het is niet echt tof\u00a0voor alle andere mogelijke bezoekers van je site. Of je bezoekers drie streepjes op elkaar snappen, hangt van hun ervaring af.\u00a0Het kan zijn dat je gebruikers fanatieke I-Tjing-lezers zijn. Dan verwachten ze dat je website direct <a href=\"https:\/\/nl.wikipedia.org\/wiki\/Trigram_(I_Tjing)\">naar de hemel verwijst<\/a>.\u00a0Webnerds en webdesigners die hele dagen op het web zitten zullen het waarschijnlijk herkennen. Maar weet je zeker dat je buurman het begrijpt? Hij zit niet elk uur van de dag op internet.\u00a0<a href=\"http:\/\/tegelizr.nl\/tegeltje\/assumption-is-the-mother-of-all-fuck-ups\">Je weet wat ze zeggen over aannames, he<\/a>?\u00a0In mobiele apps is het icoontje al iets minder onbekend (<a href=\"#attachment_4266\">zie Luke W&#8217;s plaatje<\/a>). Maar ook daar zijn interessante verschillen te zien in het gebruik ervan.<\/p>\n<table>\n<caption>Niet-uitputtende lijst met design-opties voor een hamburger-icoon<\/caption>\n<tbody>\n<tr>\n<th scope=\"col\">Icoon<\/th>\n<th scope=\"col\">Beschrijving<\/th>\n<th scope=\"col\">Bruikbaarheid<\/th>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4296\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2015\/12\/01_-_alleen_icoon_geen_rand.jpg\" alt=\"01_-_alleen_icoon_geen_rand\" width=\"41\" height=\"40\" \/><\/th>\n<td>Icoon zonder rand of achtergrondkleur<\/td>\n<td>Ideaal als je echt een hekel aan je bezoeker hebt. Deze kun je bijvoorbeeld zonder achtergrond gebruiken op een grote stockfoto. Zo vergroot je de kans\u00a0dat niemand je menu gebruikt<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-4290 size-full\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2015\/12\/02_-_alleen_icoon_wel_rand.jpg\" alt=\"02_-_alleen_icoon_wel_rand\" width=\"51\" height=\"50\" \/><\/th>\n<td>Icoon met een rand en achtergrondkleur<\/td>\n<td>Deze is al wat vriendelijker voor je gebruiker. Door de rand en achtergrond suggereer je dat je kunt iets kunt doen\u00a0met dit element op de pagina. Met andere woorden: de <em><a href=\"https:\/\/www.interaction-design.org\/literature\/book\/the-glossary-of-human-computer-interaction\/affordances\">affordance<\/a><\/em> is groter.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4291\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2015\/12\/03_-_icoon_met_tekst_geen_rand.jpg\" alt=\"03_-_icoon_met_tekst_geen_rand\" width=\"167\" height=\"50\" \/><\/th>\n<td>Icoon met tekst, zonder rand of achtergrondkleur<\/td>\n<td>Een beschrijving vertelt in ieder geval al duidelijk waar dit element voor dient. Maar dit is wel een opzet die veel schermruimte kost. Dat is niet handig op kleine schermen.<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4292\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2015\/12\/04_-_icoon_met_tekst_wel_rand.jpg\" alt=\"04_-_icoon_met_tekst_wel_rand\" width=\"167\" height=\"50\" \/><\/th>\n<td>Icoon met tekst, rand en\u00a0achtergrondkleur<\/td>\n<td><em>Affordance<\/em>, maar kost veel schermruimte<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4293\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2015\/12\/05_-_kleine_icoon_met_tekst_wel_rand.jpg\" alt=\"05_-_kleine_icoon_met_tekst_wel_rand\" width=\"51\" height=\"50\" \/><\/th>\n<td>Kleine rechthoekige knop met tekst<\/td>\n<td>Op kleine schermen is de tekst waarschijnlijk slecht te lezen. Maar dit is in veel gevallen een goede oplossing<\/td>\n<\/tr>\n<tr>\n<th scope=\"row\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-4294\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2015\/12\/06_-_kleine_icoon_met_tekst_wel_rand.jpg\" alt=\"06_-_kleine_icoon_met_tekst_wel_rand\" width=\"51\" height=\"50\" \/><\/th>\n<td>Een rond design met icoon en tekst<\/td>\n<td>Door de ronde vorm zal deze knop beter opvallen. Dat zorgt er voor dat je gebruiker waarschijnlijk vaker dit menu zal gebruiken. Een nadeel is dat andere elementen minder opvallen. Maar past het in je website-ontwerp?<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Een goed navigatiemenu zegt iets zinnigs over de structuur van de site. Als die structuur waardeloos is, is het menu dus ook waardeloos. Daarom kun je beter een onzinnig icoontje gebruiken om je menu helemaal te verwijderen, namelijk een spaghetti-icoontje. Luiheid en cynisme zijn wat mij betreft slechte redenen om iets te verbergen. Als je menustructuur blijkbaar zo onzinnig is dat je het moet verbergen, heb je een signaal te pakken dat je website nog niet goed genoeg is. Dat is fijn, want dan heb je meer werk. Nadelen van een menu-icoontje: je verbergt iets. Alles wat je verbergt, ziet je gebruiker niet en de meeste gebruikers zijn niet geneigd om moeite te doen voor iets waar ze niet direct nut van verwachten. Het nut van een navigatiemenu vervliegt zo een beetje. Daarnaast, als je bezoeker al benieuwd is, moet hij een extra handeling verrichten. Een hele extra klik, ja. Hoe minder kliks, hoe meer vreugd.<\/p>\n<h3>Ingewikkelde visualisatie: planningtool van digitale overheid<\/h3>\n<p>Bekijk de <a href=\"https:\/\/www.digitaleoverheid.nl\/nldigibeter\/planning-agenda-digitale-overheid\/\">planningspagina voor NL Digibeter<\/a>. Op deze pagina zie je de actuele stand van zaken van de actielijnen uit de Agenda Digitale Overheid.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4619\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-00-pdf.png\" alt=\"\" width=\"1493\" height=\"563\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-00-pdf.png 1493w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-00-pdf-370x140.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-00-pdf-768x290.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-00-pdf-1024x386.png 1024w\" sizes=\"(max-width: 1493px) 100vw, 1493px\" \/><\/p>\n<p>In oranje zie je het onderwerp. In de tabel eronder zie je links wat we \u2018actielijnen\u2019 noemen en rechts daarnaast een planning, om en nabij.<br \/>\nHet ministerie van Binnenlandse Zaken wilde deze planning ook op digitaleoverheid.nl en het liefst niet statisch. De planningsdatum moest kunnen worden aangepast. En het liefst zouden alle actielijnen onder elkaar in een begrijpelijke vorm gepresenteerd moeten worden.<br \/>\nDe datums waren wat onnauwkeurig. Dus die ronden we nu standaard af op een kwartaal.<\/p>\n<p>Bij actielijnen horen ook nog gebeurtenissen. Deze hebben een specifieke datum, zoals bijvoorbeeld 1 april.<\/p>\n<p>Een van de mogelijke oplossingen waaraan we dachten is een Gantt-chart. Hiermee kun je planning en voortgang van complexe projecten in beeld te brengen. Hiervoor was al eerder een demo gemaakt:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4618\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-03a-pip-demo.png\" alt=\"\" width=\"1994\" height=\"1442\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-03a-pip-demo.png 1994w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-03a-pip-demo-370x268.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-03a-pip-demo-768x555.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-03a-pip-demo-1024x741.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-03a-pip-demo-1568x1134.png 1568w\" sizes=\"(max-width: 1994px) 100vw, 1994px\" \/><\/p>\n<p>Demo van een Gantt-chart.<br \/>\nDeze opzet leunde zwaar op het gebruik van JavaScript en was niet makkelijk responsive te krijgen. We dachten dat dit nog simpeler kon. Dit is wat daarvan nu op de website staat:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4622\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-01-standaard.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-01-standaard.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-01-standaard-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-01-standaard-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-01-standaard-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-01-standaard-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>Je ziet weer het onderwerp, op oranje. Terzijde: zullen we gewoon afspreken dat de combinatie van witte tekst op oranje gewoon niet meer op het web voorkomt? Altijd moeilijk om hiervan het contrast goed te krijgen.<\/p>\n<p>De planningtool leunt zwaar op CSS. De eind- en start-stops worden aangegeven door before &amp; after pseudo selectors.<br \/>\nJe kunt via een subtiele donkerder gekleurde balk zien in welk kwartaal je zit en de gebeurtenissen worden via CSS-positionering op de juiste plek in de kalender gezet. Niet met pixels, maar met ems, dus als je zoomt (tekst-zoom of beeld-zoom), blijven ze op hun plek.<\/p>\n<p>Dit is wat ervan overblijft op een telefoon:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4621\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-02-iphone.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-02-iphone.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-02-iphone-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-02-iphone-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-02-iphone-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-02-iphone-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>Als javascript totaal uit staat wordt alleen de breedte van de container niet netjes bijgewerkt:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4617\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-04-no-js.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-04-no-js.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-04-no-js-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-04-no-js-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-04-no-js-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-04-no-js-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>De versie zonder styling whatsoever.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-4616\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-05-no-styles.png\" alt=\"\" width=\"2880\" height=\"1800\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-05-no-styles.png 2880w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-05-no-styles-370x231.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-05-no-styles-768x480.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-05-no-styles-1024x640.png 1024w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/planning-do-05-no-styles-1568x980.png 1568w\" sizes=\"(max-width: 2880px) 100vw, 2880px\" \/><\/p>\n<p>De datums zijn nu voluit te lezen. De kopjes (2018, Q1, Q3) zijn wel te zien, en zouden op zich niks betekenen. Daarom worden ze via aria-hidden=&#8221;true&#8221; verborgen voor screenreaders.<\/p>\n<h2>Conclusie<\/h2>\n<p>Ik ga afronden.<\/p>\n<p>Ik heb het gehad over hoe je op diverse manieren naar een website kunt kijken. Ik liet je de site internet.nl zien via een aantal zienswijzen. En je kunt nog meer manieren verzinnen om deze website te bekijken. Denk aan screenreaders. Denk aan parsing van de pagina. Je kunt onmogelijk zeker weten hoe een bezoeker naar jouw pagina kijkt. Dit heeft ons &#8211; als je het mij vraagt &#8211; geleerd dat je te allen tijde ervoor moet zorgen dat de tekst van je pagina begrijpelijk is.<\/p>\n<p>Durf ik het hardop te zeggen? Vooruit dan maar: je bezoeker zal het aan z\u2019n reet roesten hoe je website eruit ziet. En alle websites lijken sowieso op elkaar. Wat je bezoeker verwacht is een bruikbare, begrijpelijke website die niet lelijk is. Het vormgeven van je website doe je voor 80% voor je eigen ego. Je bezoeker komt om zo snel mogelijk te doen wat \u2018ie wilde doen en daarna gaat \u2018ie weer verder met z\u2019n leven. Het is onze taak als webbouwers en designers om dit zo makkelijk mogelijk te maken. Geen drempels, geen onbegrijpelijk gedoe.<\/p>\n<p>Ik zou zelfs willen zeggen: hoe hoger de bouncerate van je site, hoe beter het is voor je bezoekers. Want we zitten allemaal veel te veel achter schermen. Zeg nou eerlijk.<\/p>\n<p>Ik heb het gehad over leesvaardigheid. En kort over hoe we lezen. Ik liet je een pagina zien die heel goed herschreven was om zo begrijpelijk mogelijk te zijn. Ik hoop dat het je inspireert om zo bondig mogelijk te zijn. Niemand, echt niemand van je bezoekers zal zeggen: \u201cIk voel me diep beledigd want ik snapte prima wat er stond. Geef me moeilijke teksten die ik niet begrijp!\u201d<br \/>\nIk heb wat geginnegapt over iconen. Specifieker over het hamburgermenu (of frikandelmenu). Weer, als je het mij vraagt: tekst boven vormgeving. We stappen zo vaak in de valkuil dat we nadoen wat onze collega\u2019s doen; we moeten beter nadenken of wat we doen echt beter is voor onze bezoeker.<\/p>\n<p>Tenslotte liet ik een visualisatie zien van een planning. Weer liet ik zien dat het aller- allerbelangrijkste is dat de teksten op een pagina begrijpelijk zijn als alle vormgeving wegvalt.<\/p>\n<h3>Inclusive design<\/h3>\n<blockquote><p>In de Amerikaanse landmacht werden rond 1940 de eerste straalvliegtuigen in gebruik genomen. Om te bepalen wat de juiste afmetingen voor de cockpit waren werden duizenden soldaten gemeten. Lengte van de armen, benen, omvang borstkas, heup, schoenmaat. Wat allemaal niet. Toen dit was gebeurd kon het gemiddelde worden bepaald. En dit gemiddelde werd de basis voor de afmetingen van de cockpit.<br \/>\nDat werkte niet goed. Er gebeurden ongelukken die niet te maken hadden met mechanische gebreken. Een van de mogelijke oorzaken was dat piloten niet goed pasten in de cockpit. Dus werden er weer piloten opgetrommeld om gemeten te worden. Op 10 belangrijke punten werden ze gemeten. 4000 piloten werden gemeten. Geen van deze 4000 was exact gemiddeld; geen ervan voldeed had exact de afmetingen waarvanuit was gegaan bij het bouwen van de cockpit.<br \/>\nDe oplossing: stoelen die versteld konden worden. Gordels die langer of korter gemaakt konden worden. Kortom een cockpit die je naar je eigen lichaam kon instellen.<\/p>\n<p>(gejat uit het boek <a href=\"https:\/\/mitpress.mit.edu\/books\/mismatch\">\u2018Mismatch &#8211; How inclusion shapes design\u2019 &#8211; Kat Holmes<\/a>)<\/p><\/blockquote>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-4636 size-medium\" src=\"https:\/\/wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker-370x370.png\" alt=\"Tegeltje met tekst: &quot;Jij bent niet je gebruiker&quot;\" width=\"370\" height=\"370\" srcset=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker-370x370.png 370w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker-100x100.png 100w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker-768x768.png 768w, https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker.png 800w\" sizes=\"(max-width: 370px) 100vw, 370px\" \/>Wat is de les van deze anecdote? Dat is dat ontwerpen voor het gemiddelde een slecht idee is. Beter is het als je je realiseert dat wat je ontwerpt op heel veel verschillende manier gebruikt zal gaan worden. Met andere woorden: er is niet 1 soort gebruiker; er zijn duizenden soorten gebruikers.<\/p>\n<p>Mijn mantra is daarom: jij bent niet je gebruiker.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Onderstaand praatje hield ik op WordCamp Rotterdam op 12 april 2019. De titel was &#8216;Van woord naar pixel &#8211; Rekening houden met toegankelijkheid in alle fasen van je ontwerpproces&#8217;.<\/p>\n","protected":false},"author":3,"featured_media":4636,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[146],"tags":[],"class_list":{"0":"post-4605","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-presentations","8":"entry"},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Van woord tot pixel - WBVB webbureau van buuren<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Van woord tot pixel - WBVB webbureau van buuren\" \/>\n<meta name=\"twitter:description\" content=\"Onderstaand praatje hield ik op WordCamp Rotterdam op 12 april 2019. De titel was &#039;Van woord naar pixel - Rekening houden met toegankelijkheid in alle fasen van je ontwerpproces&#039;.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker.png\" \/>\n<meta name=\"twitter:creator\" content=\"@paulvanbuuren\" \/>\n<meta name=\"twitter:site\" content=\"@paulvanbuuren\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Paul van Buuren\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/\"},\"author\":{\"name\":\"Paul van Buuren\",\"@id\":\"https:\/\/admin.wbvb.nl\/#\/schema\/person\/17f76619517f3f7e1c62731174d8afb4\"},\"headline\":\"Van woord tot pixel\",\"datePublished\":\"2019-04-12T10:45:44+00:00\",\"dateModified\":\"2021-10-13T08:19:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/\"},\"wordCount\":3677,\"publisher\":{\"@id\":\"https:\/\/admin.wbvb.nl\/#organization\"},\"image\":{\"@id\":\"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker.png\",\"articleSection\":[\"Presentations\"],\"inLanguage\":\"nl-NL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/\",\"url\":\"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/\",\"name\":\"Van woord tot pixel - WBVB webbureau van buuren\",\"isPartOf\":{\"@id\":\"https:\/\/admin.wbvb.nl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker.png\",\"datePublished\":\"2019-04-12T10:45:44+00:00\",\"dateModified\":\"2021-10-13T08:19:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#primaryimage\",\"url\":\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker.png\",\"contentUrl\":\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker.png\",\"width\":800,\"height\":800},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/admin.wbvb.nl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Van woord tot pixel\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/admin.wbvb.nl\/#website\",\"url\":\"https:\/\/admin.wbvb.nl\/\",\"name\":\"WBVB webbureau van buuren\",\"description\":\"Webbureau Van Buuren\",\"publisher\":{\"@id\":\"https:\/\/admin.wbvb.nl\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/admin.wbvb.nl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/admin.wbvb.nl\/#organization\",\"name\":\"WBVB webbureau van buuren\",\"url\":\"https:\/\/admin.wbvb.nl\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"nl-NL\",\"@id\":\"https:\/\/admin.wbvb.nl\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2023\/02\/9A31C9EF-A6E6-48F1-B700-25B77ECFD56A.png\",\"contentUrl\":\"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2023\/02\/9A31C9EF-A6E6-48F1-B700-25B77ECFD56A.png\",\"width\":900,\"height\":900,\"caption\":\"WBVB webbureau van buuren\"},\"image\":{\"@id\":\"https:\/\/admin.wbvb.nl\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/pages\/WBVB-Webbureau-Van-Buuren\/692268457456783\",\"https:\/\/x.com\/paulvanbuuren\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/admin.wbvb.nl\/#\/schema\/person\/17f76619517f3f7e1c62731174d8afb4\",\"name\":\"Paul van Buuren\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Van woord tot pixel - WBVB webbureau van buuren","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/","twitter_card":"summary_large_image","twitter_title":"Van woord tot pixel - WBVB webbureau van buuren","twitter_description":"Onderstaand praatje hield ik op WordCamp Rotterdam op 12 april 2019. De titel was 'Van woord naar pixel - Rekening houden met toegankelijkheid in alle fasen van je ontwerpproces'.","twitter_image":"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker.png","twitter_creator":"@paulvanbuuren","twitter_site":"@paulvanbuuren","twitter_misc":{"Geschreven door":"Paul van Buuren","Geschatte leestijd":"18 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#article","isPartOf":{"@id":"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/"},"author":{"name":"Paul van Buuren","@id":"https:\/\/admin.wbvb.nl\/#\/schema\/person\/17f76619517f3f7e1c62731174d8afb4"},"headline":"Van woord tot pixel","datePublished":"2019-04-12T10:45:44+00:00","dateModified":"2021-10-13T08:19:26+00:00","mainEntityOfPage":{"@id":"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/"},"wordCount":3677,"publisher":{"@id":"https:\/\/admin.wbvb.nl\/#organization"},"image":{"@id":"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#primaryimage"},"thumbnailUrl":"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker.png","articleSection":["Presentations"],"inLanguage":"nl-NL"},{"@type":"WebPage","@id":"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/","url":"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/","name":"Van woord tot pixel - WBVB webbureau van buuren","isPartOf":{"@id":"https:\/\/admin.wbvb.nl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#primaryimage"},"image":{"@id":"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#primaryimage"},"thumbnailUrl":"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker.png","datePublished":"2019-04-12T10:45:44+00:00","dateModified":"2021-10-13T08:19:26+00:00","breadcrumb":{"@id":"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#primaryimage","url":"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker.png","contentUrl":"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2019\/04\/jij-bent-niet-je-gebruiker.png","width":800,"height":800},{"@type":"BreadcrumbList","@id":"https:\/\/admin.wbvb.nl\/van-woord-tot-pixel\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/admin.wbvb.nl\/"},{"@type":"ListItem","position":2,"name":"Van woord tot pixel"}]},{"@type":"WebSite","@id":"https:\/\/admin.wbvb.nl\/#website","url":"https:\/\/admin.wbvb.nl\/","name":"WBVB webbureau van buuren","description":"Webbureau Van Buuren","publisher":{"@id":"https:\/\/admin.wbvb.nl\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/admin.wbvb.nl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/admin.wbvb.nl\/#organization","name":"WBVB webbureau van buuren","url":"https:\/\/admin.wbvb.nl\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/admin.wbvb.nl\/#\/schema\/logo\/image\/","url":"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2023\/02\/9A31C9EF-A6E6-48F1-B700-25B77ECFD56A.png","contentUrl":"https:\/\/admin.wbvb.nl\/wp-content\/uploads\/2023\/02\/9A31C9EF-A6E6-48F1-B700-25B77ECFD56A.png","width":900,"height":900,"caption":"WBVB webbureau van buuren"},"image":{"@id":"https:\/\/admin.wbvb.nl\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pages\/WBVB-Webbureau-Van-Buuren\/692268457456783","https:\/\/x.com\/paulvanbuuren"]},{"@type":"Person","@id":"https:\/\/admin.wbvb.nl\/#\/schema\/person\/17f76619517f3f7e1c62731174d8afb4","name":"Paul van Buuren"}]}},"_links":{"self":[{"href":"https:\/\/admin.wbvb.nl\/wp-json\/wp\/v2\/posts\/4605"}],"collection":[{"href":"https:\/\/admin.wbvb.nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/admin.wbvb.nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/admin.wbvb.nl\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/admin.wbvb.nl\/wp-json\/wp\/v2\/comments?post=4605"}],"version-history":[{"count":14,"href":"https:\/\/admin.wbvb.nl\/wp-json\/wp\/v2\/posts\/4605\/revisions"}],"predecessor-version":[{"id":4641,"href":"https:\/\/admin.wbvb.nl\/wp-json\/wp\/v2\/posts\/4605\/revisions\/4641"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/admin.wbvb.nl\/wp-json\/wp\/v2\/media\/4636"}],"wp:attachment":[{"href":"https:\/\/admin.wbvb.nl\/wp-json\/wp\/v2\/media?parent=4605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/admin.wbvb.nl\/wp-json\/wp\/v2\/categories?post=4605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/admin.wbvb.nl\/wp-json\/wp\/v2\/tags?post=4605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}