Wat je als Web Agency moet weten om te voldoen aan de toegankelijkheidswet (EAA).

Table Of Contents

Wat is de toegankelijkheidswet?

De toegankelijkheidswet is een Europese wet die op 28 juni van 2025 ingaat en gevolgen heeft voor heel veel bedrijven die via een website diensten of producten leveren aan consumenten of de overheid. De wet is ook bekend als de EAA, de European Accessibility Act. Alle bedrijven die meer dan 10 medewerkers hebben, óf meer dan 2 miljoen omzet per jaar, moeten eraan voldoen. 

Om te voldoen aan deze wet, moet je zorgen dat jouw websites, apps of andere digitale kanalen toegankelijk zijn voor mensen met een functiebeperking. Dat zijn bijvoorbeeld mensen die niet kunnen zien, die de muis niet kunnen gebruiken of die kleurenblind zijn. Uit onderzoeken blijkt dat het om zo’n 25 procent van alle mensen gaat. De wet is bedacht om ervoor te zorgen dat elk mens, met of zonder beperking, digitale diensten en producten kan gebruiken.

Vanaf 26 juni 2025 moeten alle websites die je nieuw oplevert of ingrijpend aanpast voldoen aan de eisen van de toegankelijkheidswet, de European Accessibility Act. 

Wie moet voldoen aan de toegankelijkheidswet?

De wet geldt voor de meeste middelgrote en grote bedrijven die via digitale kanalen diensten of producten leveren aan consumenten of de overheid. Er zijn een paar uitzonderingen. Ten eerste geldt de wet niet voor bedrijven die uitsluitend aan de zakelijke markt leveren. Maar let op: de overheid valt hier dus niet onder. De wet geldt ook niet voor bedrijven die minder dan 10 medewerkers hebben, of minder dan 2 miljoen omzet per jaar.

Wat gebeurt er als ik niet voldoe aan de toegankelijkheidswet?

Niet voldoen aan de wet betekent dat je straks te maken kunt krijgen met een toezichthouder die het naleven van deze wet komt controleren. Er wordt nu gezegd dat er 7 verschillende toezichthouders komen die dit gaan doen. Op dit moment, in maart 2025, is het nog niet duidelijk hoe dit precies gaat werken.

Hoe kan een web agency digitale toegankelijkheid het beste aanpakken?

De beste oplossing is: zoek een ervaren auditbureau en ga een samenwerking aan. Laat je meest recente websites onderzoeken. Een audit levert een gedetailleerd rapport op met uitleg en oplossingen die je teamleden ook kunnen toepassen op toekomstige projecten. Zo bouw je kennis op binnen je bedrijf en voorkom je herhaling van dezelfde fouten.

Bel Julia (06-28742275), dan kunnen we samen kijken naar waar je behoefte ligt. 

Maar wat betekent dat concreet?

Op basis van onze ervaring in het auditen van websites volgens WCAG 2.1 en 2.2 hebben we een lijst gemaakt met controlepunten die je minimaal moet checken. Deze lijst bevat de meest voorkomende problemen die we op de websites zien. Als je deze fouten niet maakt, heb je al een behoorlijk toegankelijke website. 

Zijn sommige begrippen voor jou nieuw? Wil je meer weten over dit onderwerp? Of wil je je team door ons laten trainen? Neem dan contact op met Julia Tol: contact@properaccess.nl

Meest voorkomende toegankelijkheidsissues

In deze lijst verkorten we de toegankelijkheidsnaam tot een a11y naam.

  • Pagina heeft geenof deze bevat tekst die de pagina niet beschrijft.</li> <li>lang-attribuut ontbreekt op <html> of bevat een ongeldige waarde.</li> <li>Logo: zichtbare tekst staat niet in de a11y naam, interactieve rol en naam ontbreken, linkdoel is onduidelijk, tekst verdwijnt bij zoom tot 200% en 400%.</li> <li>Skiplink ontbreekt, is niet zichtbaar bij focus of verwijst niet naar unieke inhoud. </li> </ul> <h3 id="navigatie">Navigatie</h3> <ul> <li>Links en knoppen zijn niet te bedienen met het toetsenbord.</li> <li>Focus is niet zichtbaar, of komt op onzichtbare elementen terecht.</li> <li>Focus wordt niet naar het mobiele menu gestuurd, kan het menu verlaten of verplaatst na sluiten van het menu niet naar een logische plek.</li> <li>Contrast van tekst is lager dan 4,5:1.</li> <li>Bij 200% en 400% zoom gaat content of functionaliteit verloren.</li> <li>Content op hover en focus kan niet met ESC worden afgesloten.</li> <li>Actieve link is alleen visueel te herkennen, dit is niet in de HTML vastgelegd.</li> <li>Relatie tussen links is niet zichtbaar in de HTML (op te lossen met <ul> of <nav>).</li> <li>Button met dropdown mist aria-expanded-attribuut.</li> <li>Hamburgerknop mist aria-expanded-attribuut om de toestand van het menu aan te geven.</li> <li>De functie van de hamburgerknop (openen/sluiten) staat niet in de a11y naam. </li> </ul> <h3 id="zoekfunctie">Zoekfunctie</h3> <ul> <li>Zoekknop of invoerveld hebben geen a11y naam of geen rol.</li> <li>Contrast van zoekicoon met achtergrond is lager dan 3,0:1. Ook op hover en focus.</li> <li>Contrast van rand invoerveld is lager dan 3,0:1.</li> <li>Lijst met suggesties is geen combobox of mist de nodige attributen, bijvoorbeeld het aria-expanded-attribuut.</li> <li>Contrast van placeholder-tekst is lager dan 4,5:1 (als de placeholder als label of instructie dient).</li> <li>Zichtbare tekst op/bij het invoerveld staat niet in de a11y naam van het invoerveld.</li> <li>Focus is zichtbaar op of landt op onzichtbare elementen.</li> <li>Niet alle pagina’s of PDF’s zijn via het zoekveld te vinden.</li> </ul> <h3 id="hoofdinhoud">Hoofdinhoud</h3> <ul> <li>Koppen staan niet in <h>-elementen, niet in de correcte volgorde, <h>-element is voor opmaak gebruikt.</li> <li><strong> en <em> worden voor opmaak gebruikt of als alternatief voor koppen.</li> <li>Opsommingen zijn niet gemarkeerd met <ul> of <ol>.</li> <li>Meerdere alinea’s staan in één<p>-element.</li> <li>Niet alles wat je op de pagina ziet is in de HTML aanwezig. Denk bijvoorbeeld aan voortgangsbalken en informatie over de voortgang zelf.</li> </ul> <h3 id="sidebar">Sidebar</h3> <ul> <li>Skiplink slaat de sidebar niet over.</li> <li>Filters: groepen checkboxen zijn niet gegroepeerd. Relatie met het groepslabel ontbreekt. </li> <li>Filters: aanvinken van checkbox zorgt voor het herladen van de pagina waarbij de focus wordt verplaatst. </li> <li>Filters: niet alles is te bedienen met het toetsenbord.</li> <li>Filterknop op klein scherm: voldoet niet aan alle eisen (deze zijn hetzelfde als bij een hamburgerknop).</li> </ul> <h3 id="footer">Footer</h3> <ul> <li><h>-element is niet gebruikt voor de kopjes boven kolommen.</li> <li>Logo’s hebben geen tekstalternatieven.</li> <li>Opt-in formulier: invoerveld voor e-mail mist het autocomplete-attribuut.</li> </ul> <h3 id="dialoogvenster">Dialoogvenster </h3> <ul> <li>role=”dialog” en/of de toegankelijke naam ontbreekt.</li> <li>Focus kan het venster verlaten. Focus komt na sluiten van het venster niet terug op de triggerknop of het eerstvolgende element in de DOM.</li> </ul> <h3 id="accordeons">Accordeons</h3> <ul> <li>De tekst die een accordeon opent is geen <h>-element. Daarbinnen moet een <button>-element staan. Niet andersom!</li> </ul> <h3 id="formulieren-login--registratie">Formulieren: login / registratie</h3> <ul> <li>autocomplete op gebruikersnaam en wachtwoord ontbreekt.</li> <li>Bezoeker moet puzzel oplossen om in te loggen.</li> <li>Knop met oog heeft geen naam en geen rol.</li> <li>Correct ingevulde velden worden leeggemaakt als het formulier niet verzonden kan worden.</li> </ul> <h3 id="formulieren-algemeen">Formulieren: algemeen</h3> <ul> <li>Er zijn geen permanent zichtbare labels bij invoervelden (placeholder is geen label!).</li> <li>Invoervelden of knoppen hebben geen toegankelijke naam.</li> <li><label> is niet verbonden met <input> door for en id.</li> <li>Zichtbare tekst op knop of invoerveld staat niet in de toegankelijke naam.</li> <li>Foutmeldingen zijn instructies in plaats van dat ze aangeven wat er mis ging.</li> <li>Foutmeldingen zijn niet gekoppeld aan de bijbehorende invoervelden (gebruik aria-describedby).</li> <li>Focus is niet zichtbaar, landt op onzichtbare elementen of heeft onlogische volgorde.</li> <li>Knoppen en invoervelden zijn niet met toetsenbord te bedienen.</li> <li>Groepen radiobuttons of checkboxen zijn niet gegroepeerd in de HTML.</li> <li>Randen van de invoervelden en tekst (ook placeholder) hebben niet genoeg contrast..</li> <li>autocomplete-attribuut ontbreekt op velden die persoonlijke info verzamelen.</li> <li>Berichten die de status van de uitgevoerde acties bevestigen hebben geen aria-live region.</li> </ul> <p>Deze punten komen we in elke audit tegen. Dit zijn ongeveer 60% van alle technische fouten die ontwikkelaars regelmatig maken. Laat je website altijd door een expert bekijken om echt alle issues te detecteren.</p> <h2 id="wil-je-digitale-toegankelijkheid-écht-goed-aanpakken">Wil je digitale toegankelijkheid écht goed aanpakken?</h2> <p>Laat je devteam een training volgen en geef ze de juiste tools en kennis om toegankelijke websites en apps te bouwen. Ze leren hoe ze hun eigen werk kunnen testen en de resultaten correct interpreteren.</p> <p>Onze training is volledig afgestemd op jouw team en projecten. We analyseren je laatste 3 tot 5 projecten en focussen alleen op de kennishiaten binnen jouw team. Zo krijgen ze precies wat ze nodig hebben om inclusiever te ontwikkelen.</p> <p>We zijn trots op onze samenwerking met bedrijven als Ilionix, Stichting Rijksmuseum, Plus Retail, Jumbo Supermarkten, Wirelab en vele anderen.</p> <p>Wil je bespreken wat wij voor jouw team kunnen betekenen? Neem contact op via <strong><a href="mailto:contact@properaccess.nl" >contact@properaccess.nl</a></strong> of bel <strong>Julia Tol op 06 2874 22 75</strong>.</p> </div> <div class="row items-start justify-between"> <div class="lg:col-6 mb-10 flex items-center lg:mb-0"> <h5 class="mr-3">Tags :</h5> <ul> <li class="inline-block"> <a class="bg-light hover:bg-primary dark:bg-darkmode-light dark:hover:bg-darkmode-primary dark:hover:text-text-dark m-1 block rounded px-3 py-1 hover:text-white" href="/tags/toegankelijke-website/"> Toegankelijke website </a> </li> </ul> </div> <div class="lg:col-6 flex items-center lg:justify-end"> <h5>Share :</h5> <div class="share-icons"> <a class="share-link share-facebook" href="https://facebook.com/sharer/sharer.php?u=https%3a%2f%2fwww.properaccess.nl%2fblog%2fwat-developer-moet-weten-over-de-eaa%2f" target="_blank" rel="noopener" aria-label="share facebook"> <span class="share-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z" /> </svg> </span> </a> <a class="share-link share-x" href="https://x.com/intent/tweet/?text=Wat%20je%20als%20Web%20Agency%20moet%20weten%20om%20te%20voldoen%20aan%20de%20toegankelijkheidswet%20%28EAA%29.&url=https%3a%2f%2fwww.properaccess.nl%2fblog%2fwat-developer-moet-weten-over-de-eaa%2f" target="_blank" rel="noopener" aria-label="share x"> <span aria-hidden="true" class="share-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M8 2H1l8.26 11.015L1.45 22H4.1l6.388-7.349L16 22h7l-8.608-11.478L21.8 2h-2.65l-5.986 6.886zm9 18L5 4h2l12 16z" /> </svg> </span> </a> <a class="share-link share-email" href="mailto:?subject=Wat%20je%20als%20Web%20Agency%20moet%20weten%20om%20te%20voldoen%20aan%20de%20toegankelijkheidswet%20%28EAA%29.&body=https%3a%2f%2fwww.properaccess.nl%2fblog%2fwat-developer-moet-weten-over-de-eaa%2f" target="_self" rel="noopener" aria-label="share email"> <span aria-hidden="true" class="share-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z" /> </svg> </span> </a> <span class="fediverse-share"> <a class="share-link share-fediverse" href="javascript:void(0);" onclick="toggleFediverseInput(this)" aria-label="share fediverse"> <span aria-hidden="true" class="share-icon"> <svg viewBox="-10 -5 1034 1034" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_iconCarrier"> <path d="M539 176q-32 0 -55 22t-25 55t20.5 58t56 27t58.5 -20.5t27 -56t-20.5 -59t-56.5 -26.5h-5zM452 271l-232 118q20 20 25 48l231 -118q-19 -20 -24 -48zM619 298q-13 25 -38 38l183 184q13 -25 39 -38zM477 320l-135 265l40 40l143 -280q-28 -5 -48 -25zM581 336 q-22 11 -46 10l-8 -1l21 132l56 9zM155 370q-32 0 -55 22.5t-25 55t20.5 58t56.5 27t59 -21t26.5 -56t-21 -58.5t-55.5 -27h-6zM245 438q1 9 1 18q-1 19 -10 35l132 21l26 -50zM470 474l-26 51l311 49q-1 -8 -1 -17q1 -19 10 -36zM842 480q-32 1 -55 23t-24.5 55t21 58 t56 27t58.5 -20.5t27 -56.5t-20.5 -59t-56.5 -27h-6zM236 493q-13 25 -39 38l210 210l51 -25zM196 531q-21 11 -44 10l-9 -1l40 256q21 -10 45 -9l8 1zM560 553l48 311q21 -10 44 -9l10 1l-46 -294zM755 576l-118 60l8 56l135 -68q-20 -20 -25 -48zM781 625l-119 231 q28 5 48 25l119 -231q-28 -5 -48 -25zM306 654l-68 134q28 5 48 25l60 -119zM568 671l-281 143q19 20 24 48l265 -135zM513 771l-51 25l106 107q13 -25 39 -38zM222 795q-32 0 -55.5 22.5t-25 55t21 57.5t56 27t58.5 -20.5t27 -56t-20.5 -58.5t-56.5 -27h-5zM311 863 q2 9 1 18q-1 19 -9 35l256 41q-1 -9 -1 -18q1 -18 10 -35zM646 863q-32 0 -55 22.5t-24.5 55t20.5 58t56 27t59 -21t27 -56t-20.5 -58.5t-56.5 -27h-6z"></path> </g> </svg> </span> </a> <span class="fediverse-input-wrapper" style="display: none;"> <input type="text" placeholder="Enter Fediverse Instance URL" class="fediverse-input" onkeypress="handleFediverseShare(event, 'https:\/\/www.properaccess.nl\/blog\/wat-developer-moet-weten-over-de-eaa\/', 'Wat je als Web Agency moet weten om te voldoen aan de toegankelijkheidswet (EAA).')" /> <button class="fediverse-check-button" onclick="handleFediverseShareButton(this, 'https:\/\/www.properaccess.nl\/blog\/wat-developer-moet-weten-over-de-eaa\/', 'Wat je als Web Agency moet weten om te voldoen aan de toegankelijkheidswet (EAA).')"> Share </button> </span> </span> <button class="share-link share-copy" onclick="copyToClipboard(this, 'https:\/\/www.properaccess.nl\/blog\/wat-developer-moet-weten-over-de-eaa\/')"> <span class="share-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-1c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 17H5V5h14v14z" /> </svg> </span> </button> </div> <script> function toggleFediverseInput(element) { const container = element.closest(".fediverse-share"); const inputContainer = container.querySelector(".fediverse-input-wrapper"); inputContainer.style.display = inputContainer.style.display === "none" ? "block" : "none"; } function handleFediverseShare(event, url, title) { if (event.key === "Enter") { const input = event.target; let instanceUrl = input.value.trim(); if (instanceUrl) { if (!instanceUrl.startsWith("https://")) { instanceUrl = `https://${instanceUrl}`; } const shareUrl = `${instanceUrl}/share?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`; window.open(shareUrl, "_blank", "noopener"); } } } function handleFediverseShareButton(button, url, title) { const input = button.previousElementSibling; let instanceUrl = input.value.trim(); if (instanceUrl) { if (!instanceUrl.startsWith("https://")) { instanceUrl = `https://${instanceUrl}`; } const shareUrl = `${instanceUrl}/share?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`; window.open(shareUrl, "_blank", "noopener"); } } function copyToClipboard(button, text) { navigator.clipboard.writeText(text).then(() => { const icon = button.querySelector("svg path"); const originalIconPath = "M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-1c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 17H5V5h14v14z"; const checkIconPath = "M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4L9 16.2z"; icon.setAttribute("d", checkIconPath); setTimeout(() => { icon.setAttribute("d", originalIconPath); }, 1000); }); } </script> </div> </div> </article> </div> <div class="section pb-0"> <h2 class="h3 mb-12"> Related Posts </h2> <div class="row"> <div class="lg:col-4 md:col-6 mb-14"> <div class="bg-body dark:bg-darkmode-body"> <h4 class="mb-3"> <a href="/blog/meerdere-knoppen-met-dezelfde-naam/"> Meerdere knoppen met dezelfde naam </a> </h4> <ul class="mb-4"> <li class="mr-4 inline-block"> <i class="fa-regular fa-folder mr-1"></i> <a href="/categories/achtergrond_wcag/" class="ms-1" >Achtergrond wcag </a> </li> </ul> <p class="mb-6">In een webshop kom je vaak een pagina tegen met veel producten, elk met een knop om het product aan de winkelmand toe te voegen. Soms heeft deze knop een zichtbare tekst, soms een icoon. </p> <a class="btn btn-outline-primary btn-sm" href="/blog/meerdere-knoppen-met-dezelfde-naam/"> Lees meer <span class="sr-only"> over Meerdere knoppen met dezelfde naam</span> </a> </div> </div> <div class="lg:col-4 md:col-6 mb-14"> <div class="bg-body dark:bg-darkmode-body"> <h4 class="mb-3"> <a href="/blog/toegankelijkheidslabel-ontoegankelijk-plaatsen/"> Toegankelijkheidslabel ontoegankelijk plaatsen (doe dat niet!) </a> </h4> <ul class="mb-4"> <li class="mr-4 inline-block"> <i class="fa-regular fa-folder mr-1"></i> <a href="/categories/tips-en-tools/" class="ms-1" >Tips en tools </a> </li> </ul> <p class="mb-6">Wanneer je een toegankelijkheidsverklaring hebt opgesteld, kun je een label ophalen dat je op je website kunt plaatsen om de status van je website te tonen. Je vindt het label op deze pagina: https://www.toegankelijkheidsverklaring.nl/verklaringen </p> <a class="btn btn-outline-primary btn-sm" href="/blog/toegankelijkheidslabel-ontoegankelijk-plaatsen/"> Lees meer <span class="sr-only"> over Toegankelijkheidslabel ontoegankelijk plaatsen (doe dat niet!)</span> </a> </div> </div> <div class="lg:col-4 md:col-6 mb-14"> <div class="bg-body dark:bg-darkmode-body"> <h4 class="mb-3"> <a href="/blog/skiplinks-issue-op-mijn-wordpress-website/"> Skiplinks issue op mijn Wordpress website </a> </h4> <ul class="mb-4"> <li class="mr-4 inline-block"> <i class="fa-regular fa-folder mr-1"></i> <a href="/categories/tips-en-tools/" class="ms-1" >Tips en tools </a> </li> </ul> <p class="mb-6">Op mijn WordPress-website werkte de skiplink niet op sommige pagina’s. Op deze pagina’s heb ik een externe plugin toegevoegd die andere ID’s gebruikt, waardoor de connectie tussen de skiplink in de header en het ID op de content verloren is gegaan. </p> <a class="btn btn-outline-primary btn-sm" href="/blog/skiplinks-issue-op-mijn-wordpress-website/"> Lees meer <span class="sr-only"> over Skiplinks issue op mijn Wordpress website</span> </a> </div> </div> </div> </div> </div> </section> </main> <footer class="bg-light dark:bg-darkmode-light"> <div class="container"> <div class="row items-center py-10"> <div class="lg:col-3 mb-8 text-center lg:mb-0 lg:text-left"> <a class="navbar-brand inline-block" href="/"> <img fetchpriority="high" decoding="async" class="img img-light" width="160" height="32" src="/images/logo_pa_hu_d53944e0708ca8d4.webp" alt="Proper Access " onerror="this.onerror=null;this.src='\/images\/logo_pa_hu_e7b54e5978083180.png';" /> <img fetchpriority="high" decoding="async" class="img img-dark" width="160" height="32" src="/images/logo_pa_hu_d53944e0708ca8d4.webp" alt="Proper Access " onerror="this.onerror=null;this.src='\/images\/logo_pa_hu_e7b54e5978083180.png';" /> </a> </div> <div class="lg:col-6 mb-8 text-center lg:mb-0"> <ul> <li class="m-3 inline-block"> <a href=" /algemene-voorwaarden " >Algemene voorwaarden</a > </li> <li class="m-3 inline-block"> <a href=" /privacyverklaring " >Privacy</a > </li> <li class="m-3 inline-block"> <a href=" /samenwerken-proper-access " >Samenwerken</a > </li> </ul> </div> <div class="lg:col-3 mb-8 text-center lg:mb-0 lg:mt-0 lg:text-right"> <ul class="social-icons"> <li> <a target="_blank" aria-label="github" rel="nofollow noopener" href="https://www.github.com/"> <i class="fab fa-github"></i> </a> </li> <li> <a target="_blank" aria-label="linkedin" rel="nofollow noopener" href="https://www.linkedin.com/"> <i class="fab fa-linkedin"></i> </a> </li> <li> <a target="_blank" aria-label="codepen" rel="nofollow noopener" href="https://www.codepen.io/"> <i class="fab fa-codepen"></i> </a> </li> </ul> </div> </div> </div> <div class="border-border dark:border-darkmode-border border-t py-7"> <div class="dark:text-darkmode-text-light container text-center"> <p> Developed by Proper Access </p> </div> </div> </footer> <script crossorigin="anonymous" integrity="sha256-yCBVqlqGxIKWtVMQRCQg55eSKysNeZOcci9boiLzpTI=" src="/js/script.min.c82055aa5a86c48296b55310442420e797922b2b0d79939c722f5ba222f3a532.js"></script> <script defer async crossorigin="anonymous" integrity="sha256-8w9V5+VCnGhgTHXOsnVQjFqhE3cwvfCJD4096vUhMp0=" src="/js/script-lazy.min.f30f55e7e5429c68604c75ceb275508c5aa1137730bdf0890f8d3deaf521329d.js"></script> <script> if ('serviceWorker' in navigator){navigator.serviceWorker.register("/service-worker.js");} </script> <div id="cookie-box" class="cookie-box cookie-box-hide"> We gebruiken cookies (alleen de verplichte) <button id="cookie-button" class="cookie-box-button btn btn-sm btn-outline-primary"> Oke </button> </div> <script type="application/javascript"> const cookieBox = document.getElementById('cookie-box'); const cookieButton = document.getElementById('cookie-button'); if (!Cookies.get('cookie-consent')) { cookieBox.classList.remove('cookie-box-hide'); cookieButton.onclick = function () { Cookies.set('cookie-consent', true, { expires: 60 }); cookieBox.classList.add('cookie-box-hide'); }; } </script> <style> .cookie-box { position: fixed; left: 2rem; bottom: 2rem; z-index: 9999; padding: 1.5rem; background-color: #fff; max-width: calc(100% - 4rem); width: 25rem; box-shadow: 1px 0px 10px 7px rgba(154, 154, 154, 0.11); border-radius: inherit; } .cookie-box-hide { display: none; } .cookie-box-button { display: block; margin-top: 1rem; } .dark .cookie-box { background-color: #222; } </style> </body> </html>