[{"data":1,"prerenderedAt":268},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-inclusive-design-accessible-web-development-i18n-slugs":134,"language-blog-slug-en-inclusive-design-accessible-web-development":138},{"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],{"locale":136,"value":137},"en","inclusive-design-accessible-web-development",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":143,"subtitle":79,"isArchived":147,"headerIllustration":148,"date":153,"authors":154,"introTitle":164,"items":165,"pivots":230,"relatedBlogPosts":231,"tags":232,"onMountedScript":157,"onUnmountedScript":157},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"Inclusive Design & Accessible Web Development","Accessibilty and inclusivity still gets too little attention in web development. We talked about this during our meetup in collab with Girl Code on march 16.",{"url":146},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1679314130-linkedin-post-4.jpg",false,{"url":149,"alt":150,"width":151,"height":152},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1679300511-a11y-bird-tree-house.svg","Bird on a treehouse thinking about why it's not accessibile",277,361,"2023-03-20T01:00:00.000+01:00",[155],{"name":156,"lastName":157,"slug":158,"image":159},"Vera","","vera",{"url":160,"alt":161,"width":162,"height":163},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",null,1235,1646,"Accessibility and inclusivity still gets too little attention in web development. Mostly for reasons like budget and capacity. Even though it's proven that when you build your website or app accessible, it's more useful for all users. ",[166,176,180,188,192,198,202,207,211,216,220,226],{"__typename":167,"id":168,"image":169,"caption":174,"fullWidth":147,"captionPosition":175},"ImageRecord","147122849",{"url":170,"alt":171,"width":172,"height":173},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1679070132-meetup-girl-code-voorhoede-2.jpg","A group of people sitting in chairs listening to a woman presenting in a front of a big screen that says 'inclusive design & accessible web development.",4000,2252,"Girl Code Meetup at De Voorhoede office in Amsterdam","bottom",{"__typename":177,"id":178,"title":157,"body":179},"TextSectionRecord","147122850","\u003Cp>\u003Cspan style=\"font-weight: 400;\">On 16 March 2023 we organised a meetup in collaboration with Girl Code about Inclusive Design and Accessible Web Development. In our office in Amsterdam we enjoyed 3 talks from Darice de Cuba, Cyd Stumpel and our own developer Roos Steigenga. They inspired everybody present to be a little more aware of the need of web accessibility and inclusivity. \u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":181,"image":182,"caption":187,"fullWidth":147,"captionPosition":175},"147122851",{"url":183,"alt":184,"width":185,"height":186},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1679070336-a11y-meetup.jpg","Presention screen with the text: I don't consider myself disabled, rather i'm made disabled by the obstacles created by society. A society built only for the seeing, hearing, talking, walking, healthy, straight, cis male, white people.",4032,2268,"Darice: I don't consider myself disabled, rather i'm made disabled by the obstacles created by society. A society built only for the seeing, hearing, talking, walking, healthy, straight, cis male, white people.",{"__typename":177,"id":189,"title":190,"body":191},"147122852","Comment sections and communication preferences","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Darice took us through some examples from her life in which she experiences difficulties using ordering apps. Darice lost her hearing later on in her life. She explained how comment sections can be a reason for her to use an app or not. The field can be used to tell your preference for communication. So she doesn’t have to run out on the streets to find the delivery person that keeps calling her. She made a strong case that when you make your website or app more inclusive and accessible, you will get more clients.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":193,"image":194,"caption":197,"fullWidth":147,"captionPosition":175},"147122853",{"url":195,"alt":196,"width":185,"height":186},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1679070387-meetup-inclusivity.jpg","Women in a blue shirt and yellow pants presenting in front of a big screen that says 'inclustories'","Roos talking about her web app Inclustories",{"__typename":177,"id":199,"title":200,"body":201},"147122854","Adjust stories the way you prefer them with Inclustories","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Roos pointed out in her talk that stories need to be more inclusive to make people feel like they’re a part of society.  She got inspired when she visited the Efteling. The fairytales behind the attractions are full of stereotypes and not very inclusive. Under the motto of ‘be the change you wanna see in this world’ she decided that as a web developer, she could let people adjust those stories the way they prefer them. She created ‘Inclustories’ an inclusive story app using variables in text. Check it out yourself: \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Finclustories.vercel.app\u002F\" title=\"inclustories app\" target=\"_blank\" rel=\"noopener\">\u003Cspan style=\"font-weight: 400;\">https:\u002F\u002Finclustories.vercel.app\u002F\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>",{"__typename":167,"id":203,"image":204,"caption":206,"fullWidth":147,"captionPosition":175},"147122855",{"url":205,"alt":206,"width":185,"height":186},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1679069464-pxl_20230316_183255395-mp.jpg","Cyd presenting 'A creative developer's guide to creating accessible, award winning websites'",{"__typename":177,"id":208,"title":209,"body":210},"147122856","Tips for accessibility in creative development","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Cyd wrapped up the evening with a presentation about the state of, or even lack of accessibility in creative development. She noticed that when projects are winning awards, that doesn't mean the accessibility of the site is up to par. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">She shared some common mistakes made in creative development:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Removing ability to select text \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Removing focus styles with no replacement\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Removing native scrolling functionality \u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Omitting alternative text in buttons\u002Fimages\u002Fetc.\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Not adding a text alternative to letter animations\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Not respecting prefers-reduced-motion\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">And some tips on how to do better:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Rethink your defaults, your resets, your go-to code snippets\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Add text alternatives to letter\u002Fword\u002Fline animations\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Consider native functionality in virtual scrolling libraries\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Respect user settings with animations\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003Ca href=\"https:\u002F\u002Fgirl-code.cydstumpel.nl\u002F\" title=\"girl code presentation cyd\" target=\"_blank\" rel=\"noopener\">Check out her presentation\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":212,"image":213,"caption":215,"fullWidth":147,"captionPosition":175},"147122857",{"url":214,"alt":215,"width":185,"height":186},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1679070106-meetup-girl-code-voorhoede-1.jpg","People trying the simulation glasses of the a11y kit",{"__typename":177,"id":217,"title":218,"body":219},"147122858","Experience the accessibility kit","\u003Cp>\u003Cspan style=\"font-weight: 400;\">After the presentations people got a chance to experience our accessibility kit. Using the simulation gloves while holding a phone or using a keyboard. Looking at a screen through low vision glasses or simulation glasses. We had also set up a laptop with different accessibility personas. All part of our \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fblog\u002Faccessibility-kit-for-web-developers\u002F\" title=\"accessibility kit for web developers\">accessibility kit for web developers\u003C\u002Fa>.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":167,"id":221,"image":222,"caption":225,"fullWidth":147,"captionPosition":175},"147122859",{"url":223,"alt":224,"width":185,"height":186},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1679070079-meetup-girl-code-voorhoede.jpg","View of the audience at the Girl Code meetup hosted in 2023. An attendee sitting in the audience is holding a microphone and asking a question to the speaker.","Girl Code meetup at De Voorhoede in Amsterdam",{"__typename":177,"id":227,"title":228,"body":229},"147122860","Join our meetup groups","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Do you want to be there next time we organise a meetup? Join our meetup groups:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n  \u003Cli>\u003Cspan style=\"font-weight: 400;\">\u003Ca href=\"https:\u002F\u002Fwww.meetup.com\u002Ffront-end-forward\u002F\" title=\"Front-end Forward Meetup group\" target=\"_blank\" rel=\"noopener\">Front-end Forward (Amsterdam)\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fli>\n  \u003Cli>\u003Cspan style=\"font-weight: 400;\">\u003Ca href=\"https:\u002F\u002Fwww.meetup.com\u002Fdelft-digital-meetup\u002F\" title=\"Delft Digital meetup group\" target=\"_blank\" rel=\"noopener\">Delft Digital\u003C\u002Fa>\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>",[],[],[233],{"id":234,"title":235,"slug":236,"blogPosts":237},"HgWm8aCCRMWWS0eqggo5xg","Accessibility ","accessibility",[238,249,260],{"slug":239,"title":240,"date":241,"authors":242},"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",[243],{"name":244,"image":245},"Marleen",{"url":246,"alt":161,"width":247,"height":248},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1760339746-marleen-edit.jpeg",1431,1908,{"slug":250,"title":251,"date":252,"authors":253},"accessibility-in-design-systems","Accessibility in Design Systems","2025-06-17T14:15:56.000+02:00",[254],{"name":255,"image":256},"Sjoerd",{"url":257,"alt":161,"width":258,"height":259},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,{"slug":261,"title":262,"date":263,"authors":264},"testing-accessibility-on-windows-with-virtualbox","Testing Accessibility on Windows with VirtualBox","2019-09-18T02:00:00.000+02:00",[265],{"name":266,"image":267},"Bas",{"url":160,"alt":161,"width":162,"height":163},1776256139108]