Natuurlijk! Hier is een stapsgewijze gids om een toegankelijke Angular-component voor een dialoogvenster te ontwikkelen met geavanceerde toegankelijkheidsfuncties: ### 1. ARIA-rollen en attributen toepassen Gebruik ARIA-rollen om het dialoogvenster te identificeren voor schermlezers. - **Role:** Gebruik `role="dialog"` of `role="alertdialog"` afhankelijk van de urgentie. - **Label:** Voeg een `aria-labelledby` toe dat verwijst naar de titel van het dialoogvenster. - **Beschrijving:** Voeg indien nodig `aria-describedby` toe voor aanvullende informatie. Voorbeeld in HTML: ```html <div class="dialog" role="dialog" aria-modal="true" aria-labelledby="dialogTitle" aria-describedby="dialogDesc" tabindex="-1" > <h2 id="dialogTitle">Belangrijke Informatie</h2> <div id="dialogDesc"> <!-- Inhoud van het dialoogvenster --> </div> <!-- Sluitknop --> <button (click)="close()">Sluiten</button> </div> ``` ### 2. Toetsenbordnavigatie implementeren Zorg dat gebruikers het dialoog kunnen navigeren met het toetsenbord. - **Focus initialiseren:** Wanneer het dialoog opent, zet de focus naar de eerste focusbare element (bijvoorbeeld de sluitknop of de titel). - **Focus trap:** Beperk de focus tot de elementen binnen het dialoog. Als tab of Shift+Tab wordt gebruikt, houd de focus binnen de dialoog. - **Escape-toets:** Laat gebruikers het dialoog sluiten met de Escape-toets. Voorbeeld in Angular (typescript): ```typescript import { Component, ElementRef, ViewChild, HostListener } from '@angular/core'; @Component({ selector: 'app-accessible-dialog', templateUrl: './accessible-dialog.component.html' }) export class AccessibleDialogComponent { @ViewChild('dialog') dialogRef!: ElementRef; open() { // Open dialoog en focus eerste element setTimeout(() => { this.dialogRef.nativeElement.focus(); }); } close() { // Sluit dialoog } @HostListener('keydown', ['$event']) handleKeydown(event: KeyboardEvent) { const focusableEls = this.dialogRef.nativeElement.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ); const firstEl = focusableEls[0]; const lastEl = focusableEls[focusableEls.length - 1]; if (event.key === 'Tab') { if (event.shiftKey) { if (document.activeElement === firstEl) { event.preventDefault(); lastEl.focus(); } } else { if (document.activeElement === lastEl) { event.preventDefault(); firstEl.focus(); } } } else if (event.key === 'Escape') { this.close(); } } } ``` ### 3. Ondersteuning voor schermlezers - **Focus management:** Zorg dat focus na openen naar de dialoog gaat. - **Live regio's:** Als de inhoud dynamisch wordt bijgewerkt, gebruik `aria-live` om schermlezers te informeren. - **Verbale beschrijvingen:** Zorg dat alle belangrijke informatie duidelijk wordt weergegeven en dat knoppen en elementen beschrijvend zijn. - **ARIA-atributen:** Gebruik `aria-hidden="true"` op achtergrondinhoud wanneer het dialoog open is, zodat schermlezers zich op de dialoog richten. Voorbeeld in HTML: ```html <div *ngIf="isOpen" aria-hidden="false"> <!-- Dialoog inhoud --> </div> <div *ngIf="isOpen" aria-hidden="true"> <!-- Achtergrond content die niet gelezen moet worden --> </div> ``` ### Samenvatting - Gebruik `role="dialog"`, `aria-labelledby`, en `aria-describedby`. - Focuseer automatisch bij openen, trap de focus binnen de dialoog en sluit met Escape. - Zorg dat alle elementen focusbaar en beschrijvend zijn. - Beheer de zichtbaarheid voor schermlezers met `aria-hidden`. Met deze technieken maak je een volledig toegankelijke en gebruiksvriendelijke dialoogcomponent in Angular.

Zeker, ik help je graag een toegankelijk Angular dialoogvenster te ontwikkelen. Hier is een stapsgewijze uitleg. ### 1. Component Basisstructuur Eerst genereren we het component. Je kunt de Angular CLI gebruiken: ```bash ng generate component toegankelijke-dialog ``` **toegankelijke-dialog.component.html:** ```html <div #dialogElement role="dialog" aria-modal="true" aria-labelledby="dialog-titel" aria-describedby="dialog-beschrijving" class="dialog-overlay" (keydown)="onKeydown($event)" *ngIf="isOpen" > <div class="dialog-content" role="document" > <h2 id="dialog-titel">{{ titel }}</h2> <div id="dialog-beschrijving"> <ng-content></ng-content> </div> <button type="button" (click)="sluitDialog()" aria-label="Dialoog sluiten" > Sluiten </button> </div> </div> ``` ### 2. Component Logica (TypeScript) **toegankelijke-dialog.component.ts:** ```typescript import { Component, ElementRef, HostListener, Input, Output, EventEmitter, ViewChild, AfterViewInit, OnDestroy } from '@angular/core'; @Component({ selector: 'app-toegankelijke-dialog', templateUrl: './toegankelijke-dialog.component.html', styleUrls: ['./toegankelijke-dialog.component.css'] }) export class ToegankelijkeDialogComponent implements AfterViewInit, OnDestroy { @Input() isOpen = false; @Input() titel = 'Belangrijke informatie'; @Output() closed = new EventEmitter<void>(); @ViewChild('dialogElement') dialogElement!: ElementRef; private previousActiveElement!: HTMLElement | null; // Sla het actieve element op wanneer de dialog opent ngAfterViewInit(): void { if (this.isOpen) { this.previousActiveElement = document.activeElement as HTMLElement; this.focusDialog(); } } // Focus beheer: focus valt terug op het vorige element bij sluiten ngOnDestroy(): void { this.restoreFocus(); } // Focus de dialog wanneer deze opent private focusDialog(): void { // Focus het eerste focusbare element in de dialog (bijv. de sluit-knop) const focusableElements = this.dialogElement?.nativeElement.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ); if (focusableElements.length > 0) { focusableElements[0].focus(); } } // Sluit de dialog en herstel focus sluitDialog(): void { this.isOpen = false; this.closed.emit(); this.restoreFocus(); } private restoreFocus(): void { if (this.previousActiveElement) { this.previousActiveElement.focus(); } } // Toetsenbordnavigatie @HostListener('keydown', ['$event']) onKeydown(event: KeyboardEvent): void { switch (event.key) { case 'Escape': this.sluitDialog(); event.preventDefault(); break; case 'Tab': this.trapFocus(event); break; } } // Focus insluiten binnen de dialog private trapFocus(event: KeyboardEvent): void { const focusableElements = this.getFocusableElements(); if (focusableElements.length === 0) return; const firstElement = focusableElements[0]; const lastElement = focusableElements[focusableElements.length - 1]; if (event.shiftKey) { // Shift + Tab: van eerste element naar laatste if (document.activeElement === firstElement) { lastElement.focus(); event.preventDefault(); } } else { // Tab: van laatste element naar eerste if (document.activeElement === lastElement) { firstElement.focus(); event.preventDefault(); } } } private getFocusableElements(): HTMLElement[] { return Array.from( this.dialogElement?.nativeElement.querySelectorAll( 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])' ) ); } } ``` ### 3. Styling (CSS) **toegankelijke-dialog.component.css:** ```css .dialog-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .dialog-content { background: white; padding: 2rem; border-radius: 8px; max-width: 500px; width: 90%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } /* Visuele focus indicatoren voor toetsenbordgebruikers */ .dialog-content button:focus { outline: 3px solid #005fcc; outline-offset: 2px; } /* Verberg de dialog voor schermlezers wanneer deze gesloten is */ .dialog-overlay[aria-hidden="true"] { display: none; } ``` ### 4. Gebruik in een Parent Component **app.component.html:** ```html <button type="button" (click)="openDialog()" aria-haspopup="dialog" > Toon belangrijke informatie </button> <app-toegankelijke-dialog [isOpen]="dialogOpen" [titel]="'Veiligheidsinstructies'" (closed)="onDialogClosed()" > <p>Dit is een belangrijke mededeling voor alle gebruikers.</p> <p>Zorg dat u alle instructies zorgvuldig leest.</p> </app-toegankelijke-dialog> ``` **app.component.ts:** ```typescript export class AppComponent { dialogOpen = false; openDialog(): void { this.dialogOpen = true; } onDialogClosed(): void { this.dialogOpen = false; } } ``` ### Toegankelijkheidsfuncties Toegelicht: 1. **ARIA-rollen en -attributen:** - `role="dialog"`: Identificeert het element als een dialog. - `aria-modal="true"`: Gaat aan dat de dialog modaal is. - `aria-labelledby/describedby`: Koppelt titel en beschrijving voor schermlezers. 2. **Toetsenbordnavigatie:** - **Escape**: Sluit de dialog. - **Tab**: Focus insluiten binnen de dialog. - **Shift + Tab**: Omgekeerde tab-volgorde. 3. **Focus Management:** - Focus wordt naar de dialog verplaatst wanneer deze opent. - Focus wordt hersteld naar het oorspronkelijke element bij sluiten. 4. **Schermlezer Ondersteuning:** - Semantische HTML-structuur. - Logische focus volgorde. - Duidelijke aria-labels en beschrijvingen. Dit component voldoet aan WCAG 2.1 richtlijnen en biedt een robuuste toegankelijke ervaring voor alle gebruikers.