[{"data":1,"prerenderedAt":282},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-accessibility-kit-for-web-developers-i18n-slugs":134,"language-blog-slug-en-accessibility-kit-for-web-developers":141},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135,138],{"locale":136,"value":137},"en","accessibility-kit-for-web-developers",{"locale":139,"value":140},"nl","accessibility-kit-voor-webdevelopers",{"page":142},{"slug":137,"i18nSlugs":143,"social":146,"title":151,"subtitle":79,"isArchived":152,"headerIllustration":153,"date":158,"authors":159,"introTitle":168,"items":169,"pivots":223,"relatedBlogPosts":224,"tags":250,"onMountedScript":206,"onUnmountedScript":206},[144,145],{"locale":136,"value":137},{"locale":139,"value":140},{"title":147,"description":148,"image":149},"Accessibility kit for web developers | De Voorhoede","We put together an accessibility kit that we can use as web developers. With these tools we can test our products and make the web a better place. Have a look.",{"url":150},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1673860265-accessibility-kit-web-developers.jpg","Accessibility kit for web developers",false,{"url":154,"alt":155,"width":156,"height":157},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1673856882-a11y-tools.svg",null,261,185,"2023-01-16T01:00:00.000+01:00",[160],{"name":161,"lastName":162,"slug":163,"image":164},"Zowie","van Geest","zowie",{"url":165,"alt":155,"width":166,"height":167},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535300-zowie.jpg",1880,2507,"Making digital products that are enjoyable for everyone is one of the focus areas at De Voorhoede. That is why we put together an accessibility kit that we can use as web developers. With these tools we can test our products and make the web a better place.",[170,175,179,188,192,196,204,208,212,216],{"__typename":171,"id":172,"title":173,"body":174},"TextSectionRecord","145051583","Why should you use an a11y kit?","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Accessibility, or a11y for short, is a subject that we find very important. Everybody deserves the right to the same information. When you have a disability that prevents you from getting information in a certain way, there should be alternative ways to gain the same information at the same time and place. Luckily the web provides those options. So we should use them all.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">The accessibility kit is the closest we get to simulating disabilities. For the real deal, you should find people with all kinds of disabilities and let them test your website. It might be time consuming to do these kinds of tests, but they will make your website better. Even though it’s better to test with real people, the kit is a nice temporary solution.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":171,"id":176,"title":177,"body":178},"145051584","European Accessibility Act","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Besides all the moral reasons, there is also a legal reason. In July 2018 the Dutch law stated that (semi)government organisations need a website that is in line with the Web Content Accessibility Guidelines (WCAG 2.1, level AA). The European Union is also working on a new law similar to the Dutch one. In June 2025 the European Accessibility Act will be instated. That means that all European websites, government and non-government, should be accessible for everyone. The details are still being determined, but it is clear that they expect everybody to make an effort.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":180,"id":181,"image":182,"caption":151,"fullWidth":152,"captionPosition":187},"ImageRecord","145051699",{"url":183,"alt":184,"width":185,"height":186},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1673860438-img_6541-2-1.png","A desk with a laptop on it where a color a screenfilter is active. On top of the keyboard are simulation gloves. Next to the laptop are lying simulation glasses.",3812,2960,"bottom",{"__typename":171,"id":189,"title":190,"body":191},"145051585","What is in our A11y kit?","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Our accessibility kit contains 4 different tools:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Col>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Low vision glasses\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Simulation glasses\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Simulation gloves\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Accessibility personas\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Fol>",{"__typename":171,"id":193,"title":194,"body":195},"145051586","How do we use these tools?","\u003Ch3>Low vision glasses\u003C\u002Fh3>\n\u003Cp>These glasses have acuity and contrast loss. By stacking them on top of eachother you can create more vision loss. With these low vision glasses, we can evaluate the colour contrast and font size to ensure that they are both easily readable and provide optimal visual clarity. They also help when we want to check if the layout is linear and logical and if buttons and notifications in context are not too far apart.\u003C\u002Fp>\n\u003Ch3>Simulation glasses\u003C\u002Fh3>\n\u003Cp>These glasses simulate different eye conditions:\u003C\u002Fp>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FRetinitis_pigmentosa\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Retinitis pigmentosa\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> (yellow)\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMacular_degeneration\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Macular degeneration\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> (white)\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FCataract\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Cataract\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> (grey)\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FDiabetic_retinopathy\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Diabetic retinopathy\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> (blue)\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Ca href=\"https:\u002F\u002Fwww.mayoclinic.org\u002Fdiseases-conditions\u002Fdiabetic-retinopathy\u002Fmultimedia\u002Fdiabetic-macular-edema\u002Fimg-20124558\" style=\"letter-spacing: 0px;\" target=\"_blank\" rel=\"noopener\">\u003Cspan>Diabetic macular edema\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> (pink)\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>These glasses can also be used to test colour contrast and readability. \u003C\u002Fp>",{"__typename":180,"id":197,"image":198,"caption":203,"fullWidth":152,"captionPosition":187},"145051700",{"url":199,"alt":200,"width":201,"height":202},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1673860589-img_6555-1.png","5 paper glasses in the colors blue, white, pink, yellow and grey. They all have different eye conditions written on them.",3924,2988,"Glasses that simulate different eye conditions",{"__typename":171,"id":205,"title":206,"body":207},"145051701","","\u003Ch3>Simulation gloves\u003C\u002Fh3>\n\u003Cp>The Cambridge Simulation Gloves are for experiencing physical disabilities. You can use them to test your website on different devices like on a desktop with a keyboard and mouse. Or on a laptop with a touchpad or holding a mobile phone or a tablet. \u003C\u002Fp>\n\u003Cp>With the gloves on you can experience which elements are hard to reach. For example a mobile menu on top of the screen. You might have to overstretch your hand. But also discover which elements are too close to each other. For example when you are filling in a form with radio buttons, dropdowns and checkboxes. \u003C\u002Fp>\n\u003Ch3>Accessibility personas\u003C\u002Fh3>\n\u003Cp>The accessibility personas are user profiles you can add in Google Chrome. Each profile has a different simulation of their persona’s condition. In the profile it’s also noted which technology they use to access a website properly. You’ll have to use specific userscripts, stylesheets and plugins to test a website from their point of view. We recommend using a test laptop where you install these profiles.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>The extensions we use:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>Tampermonkey; for specific persona userscripts, wobbly mouse effect, distractions and scrambled letters\u003C\u002Fli>\n  \u003Cli>Colour overlay; for looking at your website in different colours\u003C\u002Fli>\n  \u003Cli>OpenDyslexic; for simulating dyslexia\u003C\u002Fli>\n  \u003Cli>Chrome sound effects; for adding sounds to actions\u003C\u002Fli>\n  \u003Cli>Midnight Lizard; for custom colour schemes\u003C\u002Fli>\n  \u003Cli>Stylus; for adding distractions, light blur and heavy blur\u003C\u002Fli>\n  \u003Cli>Screen Reader; a tool that allows users to have web content read aloud to them, making it easier for people with visual impairments to access and use the internet.\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":171,"id":209,"title":210,"body":211},"145051587","Agile approach","\u003Cp>\u003Cspan style=\"font-weight: 400;\">To effectively do an accessibility review with these tools, we need an agile approach. While developing the website we test components on several a11y points. This allows us to check in with the designer during the process. After we wrap up all the different components, we finish the project with a big a11y test. \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":171,"id":213,"title":214,"body":215},"145051588","Toolkit resources","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Want to make your own a11y kit? We got our tools here:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">\u003Ca href=\"https:\u002F\u002Fwww.inclusivedesigntoolkit.com\u002Fcsg\u002Fcsg\" target=\"_blank\" rel=\"noopener\">Low vision glasses\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Ca href=\"https:\u002F\u002Fwww.lowvisionshop.nl\u002Fproduct\u002Fdagelijks-gebruik\u002Fbrillen\u002Fsimulatiebrillen-karton\u002F \" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Simulation glasses\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Ca href=\"https:\u002F\u002Fwww.inclusivedesigntoolkit.com\u002Fgloves\u002Fgloves.html\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">Simulation gloves\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Ca href=\"https:\u002F\u002Falphagov.github.io\u002Faccessibility-personas\u002F\" target=\"_blank\" rel=\"noopener\">Accessibility personas for Chrome\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":217,"id":218,"title":219,"body":220,"linkLabel":221,"linkUrl":222},"CallToActionRecord","145052090","Do you want us to test your web application on A11y?","\u003Cp>Let's have a chat and see how we can help you.\u003C\u002Fp>","Contact us","\u002Fnl\u002Fcontact",[],[225,236,243],{"slug":226,"title":227,"date":228,"authors":229},"improving-accessibility-for-the-blind-8-guidelines","Improving accessibility for the blind: 8 guidelines","2016-12-27T01:00:00.000+01:00",[230],{"name":231,"image":232},"Bas",{"url":233,"alt":155,"width":234,"height":235},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,{"slug":237,"title":238,"date":239,"authors":240},"testing-accessibility-on-windows-with-virtualbox","Testing Accessibility on Windows with VirtualBox","2019-09-18T02:00:00.000+02:00",[241],{"name":231,"image":242},{"url":233,"alt":155,"width":234,"height":235},{"slug":244,"title":245,"date":246,"authors":247},"why-skip-links-are-important-for-accessibility","Why skip-links are important for accessibility","2021-03-23T01:00:00.000+01:00",[248],{"name":231,"image":249},{"url":233,"alt":155,"width":234,"height":235},[251],{"id":252,"title":253,"slug":254,"blogPosts":255},"HgWm8aCCRMWWS0eqggo5xg","Accessibility ","accessibility",[256,267,278],{"slug":257,"title":258,"date":259,"authors":260},"designing-css-for-non-latin-languages-on-the-web","Designing CSS\u002FHTML for Non-Latin Languages on the Web","2025-09-01T09:23:50.428+02:00",[261],{"name":262,"image":263},"Marleen",{"url":264,"alt":155,"width":265,"height":266},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1760339746-marleen-edit.jpeg",1431,1908,{"slug":268,"title":269,"date":270,"authors":271},"accessibility-in-design-systems","Accessibility in Design Systems","2025-06-17T14:15:56.000+02:00",[272],{"name":273,"image":274},"Sjoerd",{"url":275,"alt":155,"width":276,"height":277},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,{"slug":237,"title":238,"date":239,"authors":279},[280],{"name":231,"image":281},{"url":233,"alt":155,"width":234,"height":235},1776256149579]