Natuurlijk! Hier is een overzicht van hoe je een toegankelijke Svelte-component kunt maken die voldoet aan WCAG-richtlijnen, inclusief het gebruik van semantische HTML, ARIA-rollen en toetsenbordnavigatie: 1. Gebruik semantische HTML: - Kies de juiste HTML-elementen voor je interactieve onderdelen. Bijvoorbeeld: - `<button>` voor klikbare knoppen. - `<ul>` en `<li>` voor lijsten. - `<nav>` voor navigatie. - Semantische elementen maken het voor schermlezers en andere assistieve technologieën duidelijk wat de rol van elk onderdeel is. 2. Voeg ARIA-rollen en attributen toe waar nodig: - Gebruik `role` attributen om extra betekenis te geven aan niet-semantische elementen. - Bijvoorbeeld: ```html <div role="button" tabindex="0" aria-pressed="{pressed}"> Klik mij </div> ``` - Voor complexe widgets, zorg dat je de juiste ARIA-rollen, labels en states gebruikt, zoals `aria-label`, `aria-labelledby`, `aria-pressed`, etc. 3. Zorg voor toetsenbordnavigatie: - Maak alle interactieve elementen focusbaar met `tabindex="0"` (voor niet-semantiële elementen). - Voeg event handlers toe voor `keydown` of `keyup` om op toetsen te reageren, zoals Enter en Spatie. - Bijvoorbeeld, voor een custom knop: ```svelte <div role="button" tabindex="0" aria-pressed={pressed} on:keydown={handleKeydown} on:click={toggle} > {#if pressed}Aan{/if}{#else}Uit{/if} </div> ``` - En de handler: ```js function handleKeydown(event) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggle(); } } ``` 4. Voorbeeld van een eenvoudige toegankelijke knop in Svelte: ```svelte <script> let pressed = false; function toggle() { pressed = !pressed; } function handleKeydown(event) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggle(); } } </script> <div role="button" tabindex="0" aria-pressed={pressed} on:click={toggle} on:keydown={handleKeydown} > {pressed ? 'Aan' : 'Uit'} </div> ``` 5. Toegankelijkheidsrichtlijnen: - Zorg dat alle interactieve elementen focusbaar zijn. - Geef visuele focusindicatoren zodat gebruikers kunnen zien waar ze zich bevinden. - Gebruik `aria`-eigenschappen om status en labels duidelijk te maken. - Test je component met toetsenbord en schermlezers. Door deze principes toe te passen, maak je je Svelte-component niet alleen functioneel voor alle gebruikers, maar ook conform WCAG-richtlijnen voor toegankelijkheid.

Zeker, ik help je met het maken van een toegankelijke Svelte-component. Hier is een voorbeeld van een toegankelijke navigatiebalk met uitleg over de implementatie: ```svelte <script> let isMenuOpen = false; let activeIndex = -1; const menuItems = ['Home', 'Diensten', 'Over ons', 'Contact']; function toggleMenu() { isMenuOpen = !isMenuOpen; if (isMenuOpen) { setTimeout(() => activeIndex = 0, 100); } } function handleKeydown(event) { if (!isMenuOpen) return; switch(event.key) { case 'Escape': isMenuOpen = false; break; case 'ArrowDown': event.preventDefault(); activeIndex = (activeIndex + 1) % menuItems.length; break; case 'ArrowUp': event.preventDefault(); activeIndex = (activeIndex - 1 + menuItems.length) % menuItems.length; break; case 'Home': event.preventDefault(); activeIndex = 0; break; case 'End': event.preventDefault(); activeIndex = menuItems.length - 1; break; } } $: if (activeIndex >= 0) { const items = document.querySelectorAll('[role="menuitem"]'); if (items[activeIndex]) items[activeIndex].focus(); } </script> <nav aria-label="Hoofdnavigatie"> <!-- Toegankelijke menuknop --> <button aria-expanded={isMenuOpen} aria-haspopup="true" aria-controls="menu-list" on:click={toggleMenu} on:keydown={handleKeydown} class="menu-toggle" > Menu {isMenuOpen ? 'sluiten' : 'openen'} </button> <!-- Semantische navigatielijst --> {#if isMenuOpen} <ul id="menu-list" role="menu" aria-labelledby="menu-button" class="menu-list" > {#each menuItems as item, index} <li role="none"> <a href="#{item.toLowerCase().replace(' ', '-')}" role="menuitem" tabindex={activeIndex === index ? 0 : -1} aria-current={activeIndex === index ? 'page' : undefined} class="menu-item" > {item} </a> </li> {/each} </ul> {/if} </nav> <style> .menu-toggle { padding: 0.5rem 1rem; border: 2px solid #333; background: #fff; cursor: pointer; } .menu-toggle:focus { outline: 3px solid #005fcc; outline-offset: 2px; } .menu-list { list-style: none; padding: 0; margin: 0; } .menu-item { display: block; padding: 0.5rem 1rem; text-decoration: none; color: #333; } .menu-item:focus, .menu-item:hover { background-color: #f0f0f0; outline: 2px solid #005fcc; } </style> ``` ## Belangrijke toegankelijkheidsprincipes: ### 1. Semantische HTML - Gebruik `<nav>` voor navigatie - Gebruik `<button>` voor klikbare elementen - Gebruik `<ul>` en `<li>` voor lijsten - Gebruik betekenisvolle aria-labels ### 2. ARIA-attributen - `aria-expanded`: Toont of menu open/gesloten is - `aria-haspopup`: Geeft aan dat er een popup-menu is - `aria-controls`: Koppelt knop aan het menu - `role="menu"` en `role="menuitem"`: Definieert semantische rollen ### 3. Toetsenbordnavigatie - **Tab**: Navigeert tussen interactieve elementen - **Enter/Space**: Activeert elementen - **Pijltjestoetsen**: Navigeert binnen menu's - **Escape**: Sluit menu's - **Home/End**: Springt naar begin/einde van lijsten ### 4. Focus management - `tabindex="-1"` voor programmatische focus - `tabindex="0"` voor focusbaar via tab - Automatische focus bij openen menu - Focus trapping binnen modals ### 5. Visuele feedback - Duidelijke focus indicators - Hover states - Hoge contrastverhoudingen Test je component altijd met: - Alleen toetsenbordnavigatie - Screen readers (NVDA, VoiceOver) - Accessibility checkers (WAVE, axe) Wil je dat ik een specifiek type component verder uitwerk?