jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-tools

Gratis ARIA Live Region Generator

Genereer toegankelijke ARIA-live-regio's voor schermlezeraankondigingen.

Tool laden...

Wat is ARIA Live Region Generator?

Een ARIA live region is een HTML-element dat schermlezers in de gaten houden voor inhoudswijzigingen en deze automatisch aan de gebruiker aankondigen. Dit maakt dynamische inhoudsupdates - zoals formuliervalidatiefouten, statusberichten of chatberichten - mogelijk om te worden voorgelezen zonder de toetsenbordfocus te verplaatsen. Het aria-live attribuut bepaalt hoe dringend wijzigingen worden aangekondigd (polite of assertive).

Snel antwoord

Maak een ARIA live region om dynamische inhoudsupdates aan te kondigen aan schermlezers. Gebruik role=status (polite) voor adviserende updates, role=alert (assertive) voor kritieke meldingen. De regio moet bij het laden van de pagina in de DOM bestaan en content moet worden bijgewerkt via textContent, niet innerHTML.

Last updated: 2026-05-28

Beperkingen

  • ARIA live regions werken alleen met schermlezers die ze ondersteunen. Gebruikers die visueel browsen zonder schermlezer zien geen visuele indicatie van live region updates tenzij u er een toevoegt.
  • aria-live=assertive onderbreekt schermlezers onmiddellijk, wat storend kan zijn voor gebruikers die afhankelijk zijn van audiovoortgang. Gebruik het spaarzaam en alleen voor echt kritieke berichten.
  • Frequente of snelle textContent-updates kunnen ervoor zorgen dat schermlezers aankondigingen in de wachtrij plaatsen en achter raken. Debounce updates die vaker dan eens per seconde plaatsvinden.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Kies het regietype op basis van hoe kritiek de updates zijn - status voor adviserend, alert voor urgent, log voor sequentiële updates.
  2. Configureer aria-atomic (hele regio lezen of alleen wijzigingen) en aria-relevant (welke soorten DOM-wijzigingen aankondigingen activeren).
  3. Kopieer het HTML-fragment met of zonder de JavaScript-updatehelper.
  4. Plaats de live region bij het laden van de pagina in de DOM zodat schermlezers deze kunnen registreren.

Waarvoor je het kunt gebruiken

  • Voeg een statusregio toe voor formuliervalidatiefeedback die schermlezers aankondigen zonder de focus te verplaatsen.
  • Maak een meldingsregio voor kritieke foutmeldingen die de gebruiker onmiddellijk onderbreken.
  • Bouw een chatberichtenlogboek waarin nieuwe berichten op volgorde worden aangekondigd terwijl ze verschijnen.

Gebruik

Praktische voorbeelden

Voorbeeld

Formuliervalidatiestatus

Een formulier moet validatiefouten aankondigen aan schermlezergebruikers. Maak een polite statusregio en werk de textContent bij met foutmeldingen na het verzenden van het formulier. Schermlezers lezen de fouten zonder de focus van het formulier te verplaatsen.

Voorbeeld

Asynchrone zoekresultatenteller

Een zoekpagina werkt resultaten bij terwijl de gebruiker typt. Een aria-live polite regio kondigt '12 resultaten gevonden' aan na elke toetsaanslag zonder de typervaring van de gebruiker te onderbreken.

Veelgemaakte fouten

  • aria-live assertive gebruiken voor niet-kritieke updates - assertive onderbreekt de huidige schermlezer spraak en kan desoriënterend werken.
  • Vergeten de live region aan de DOM toe te voegen voordat updates worden verzonden - de regio moet bij het laden van de pagina bestaan zodat schermlezers deze kunnen detecteren.
  • De live region te vaak bijwerken - snelle updates kunnen schermlezergebruikers overweldigen. Debounce of beperk frequente updates.

Verificatie

  1. Test met een schermlezer (VoiceOver op Mac, NVDA op Windows) om te bevestigen dat aankondigingen op het juiste moment en met de juiste inhoud plaatsvinden.
  2. Controleer of de live region bij het laden van de pagina in de DOM aanwezig is en de juiste role- en aria-live-attributen heeft.

FAQ

Vragen over ARIA Live Region Generator

Wat is het verschil tussen role=status en role=alert?

role=status wordt standaard toegewezen aan aria-live=polite - schermlezers wachten tot de huidige spraak is afgelopen voordat ze aankondigen. role=alert wordt toegewezen aan aria-live=assertive - schermlezers onderbreken de huidige spraak onmiddellijk. Gebruik status voor adviserende updates zoals opslagbevestiging. Gebruik alert voor kritieke berichten zoals time-outwaarschuwingen.

Moet ik aria-atomic true of false gebruiken?

aria-atomic=true zorgt dat schermlezers de volledige regio-inhoud lezen wanneer er iets verandert. aria-atomic=false zorgt dat ze alleen het gewijzigde deel lezen. Gebruik true voor korte berichten waar context belangrijk is (zoals foutsamenvattingen). Gebruik false voor lange logs waar alleen nieuwe items aangekondigd moeten worden.

Gerelateerde tools

Meer html-tools

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool

Probeer ook

Probeer ook