Ga naar hoofdinhoud

Alert

Community

Belangrijk bericht dat informeert over de huidige activiteit van de gebruiker.

Checklist voor toegankelijkheid

Hier beschrijven we waar de component al aan voldoet en wat je zelf nog moet doen om de component toegankelijk én gebruiksvriendelijk in te zetten.

Acceptatiecriteria bij gebruik

Een component gebruik je in de context van een pagina, website of applicatie. Hoe toegankelijk en gebruiksvriendelijk een component is, hangt daarom voor een groot deel af van context. We hebben onderstaande criteria verdeeld op rol: de developer, de designer en de contentmaker. Vanuit iedere rol kun je je steentje bijdragen om een toegankelijke en gebruiksvriendelijke ervaring te bieden aan je gebruikers.

Filter acceptatiecriteria voor:

12 van de 12 items zijn nu zichtbaar.

  • De Alert bevat geen informatieve icons, en decoratieve icons zijn verborgen voor hulpsoftware.

    Zorg ervoor dat de tekst in de Alert duidelijk genoeg is om de melding te begrijpen. Het is dan niet nodig om informatieve icons te gebruiken die een alternatieve tekst nodig hebben voor bezoekers die het scherm niet kunnen zien.

    Bekijk de acceptatiecriteria voor de Icon component.

    NL Design System richtlijnen:

    developerWCAG 1.1.1Niveau A
  • De Alert staat op een logische plek op de pagina.

    Zorg ervoor dat meldingen op een logische plek op de pagina staan. Wanneer de Alert informatie bevat die invloed heeft op een beslissing of acties van een bezoeker, dan plaats je de Alert vóór de interactieve elementen die de bezoeker daarvoor nodig heeft.

    Wanneer de Alert op een logische plek staat, dan wordt er geen belangrijke informatie en andere interactieve inhoud overgeslagen wanneer de Alert focus krijgt en de bezoeker verder navigeert met het toetsenbord.

    Bijvoorbeeld:

    • Een samenvattende melding over foutmeldingen in een formulier staat direct boven het formulier. De bezoeker moet de foutmeldingen oplossen om het formulier te kunnen versturen.
    • Een waarschuwing over het permanent verwijderen van gegevens staat boven de knop die gegevens verwijdert. De bezoeker wordt geïnformeerd over de gevolgen van een actie vóór het uitvoeren van de actie.
    • Een succesmelding over het uploaden van een bestand staat direct na de uploadfunctie. De bezoeker hoeft niets meer te doen.

    NL Design System richtlijnen:

    designerdeveloperWCAG 1.3.2Niveau A
  • Instructies in de Alert zijn op een inclusieve manier beschreven.

    Geef instructies op een inclusieve manier. De instructies kunnen begrijpen moet niet afhankelijk zijn van eigenschappen die sommige gebruikers niet ervaren.

    Het gaat hierbij om eigenschappen zoals vorm, kleur, afmeting, locatie op het scherm, richting, of geluid. Bijvoorbeeld:

    • "De fouten zijn met een rode rand gemarkeerd". Niet iedereen kan zien, niet iedereen kan de kleur rood van zwart onderscheiden.
    • "Klik op de meest rechtse knop". Niet iedereen kan zien, sommige gebruikers zijn ingezoomd waardoor de knoppen op twee regels staan.
    • "Als je het geluid hoort, heb je nog 5 minuten." Niet iedereen kan dat geluid goed horen of heeft het geluid aanstaan.
    designercontentmakerWCAG 1.3.3Niveau A
  • Als kleuren worden gebruikt om aan te geven of de melding in de Alert positief of negatief is, is die informatie ook op een andere manier beschikbaar.

    Zorg ervoor dat kleur niet het enige visuele middel is om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Niet iedereen kan kleuren zien of verandering in kleur of kleurcontrast opmerken.

    Bijvoorbeeld: geef een foutmelding niet alleen aan met een rood randje, maar ook in tekst en eventueel met een icoontje dat een foutmelding markeert.

    designerWCAG 1.4.1Niveau A
  • De tekst in de Alert heeft een contrastratio van minimaal 4,5:1 met de achtergrondkleur.

    De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg. Minimale contrastverhoudingen:

    • 4,5:1 contrast voor normale tekst.
    • 3:1 contrast voor grotere letters (vanaf 24 pixels).
    • 3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).

    Hogere verhoudingen mogen natuurlijk altijd. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen. Denk erom dat dit moet gelden voor alle achtergrondkleuren waarop de tekst geplaatst kan worden. Het kan dus zijn dat je meerdere checks moet doen.

    NL Design System richtlijnen:

    designerWCAG 1.4.3Niveau AA
  • Als je de tekst van de Alert vergroot tot 200% blijft deze in zijn geheel zichtbaar.

    Als je de tekst vergroot tot 200%, via browserzoom of via de browserinstellingen voor tekstgrootte, blijft de tekst volledig zichtbaar.

    Zorg ervoor dat de component meegroeit met de tekst. Definieer hoogte en de breedte niet in px, maar gebruik een relatieve waarde als em of rem.

    Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld overflow-wrap: break-word; hyphens: auto; eventueel in combinatie met text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :root niveau.

    NL Design System richtlijnen:

    developerWCAG 1.4.4Niveau AA
  • De bezoeker kan de Alert tot 400% vergroten zonder verlies van functionaliteit of informatie.

    De gebruiker moet de webpagina 400% kunnen vergroten in de browser. Het gaat hierbij om alle elementen van een webpagina.

    Er mag geen inhoud buiten beeld vallen, onbereikbaar of verborgen zijn of gedeeltelijk verborgen worden door andere inhoud wanneer de gebruiker 400% inzoomt of op een buitengewoon klein scherm werkt (320 bij 256 pixels).

    Zorg ervoor dat er geen horizontale scrollbar nodig is. Uitzonderingen zijn voor onderdelen die in essentie twee-dimensionaal zijn, zoals tabellen, grafieken, video's en landkaarten.

    Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld overflow-wrap: break-word; hyphens: auto; eventueel in combinatie met text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :root niveau.

    developerdesignerWCAG 1.4.10Niveau AA
  • De Alert is niet bereikbaar en bedienbaar met het toetsenbord.

    Componenten en elementen die niet interactief zijn, zijn niet bereikbaar en bedienbaar met het toetsenbord.

    Een uitzondering geldt voor situaties waarbij een interactief element zoals een Skip Link of een Link in een Side Navigation, de bezoeker direct naar de component of het element stuurt.

    NL Design System richtlijnen:

    developerWCAG 2.1.1Niveau A
  • Het lezen van de informatie in de Alert is niet gebonden aan een tijdslimiet.

    Zorg ervoor dat een melding niet vanzelf na een bepaalde periode verdwijnt.

    Een Alert geeft informatie over het proces van de bezoeker. De bezoeker moet de tijd krijgen om meldingen over het proces te lezen en te verwerken.

    Bijvoorbeeld:

    • Een samenvatting van foutmeldingen boven een formulier blijft staan tot de bezoeker het formulier opnieuw verstuurt of de invoer verbetert. De inhoud mag wel veranderen.
    • Een waarschuwing blijft zichtbaar totdat de bezoeker actie heeft ondernomen.
    • Een succesmelding blijft zichtbaar totdat de bezoeker de pagina verlaat of een andere actie op de pagina uitvoert.

    NL Design System richtlijnen:

    developerWCAG 2.2.1Niveau A
  • De Alert komt niet voor in de normale focusvolgorde van de pagina.

    Componenten en elementen die niet interactief zijn, komen niet voor in de normale toetsenbord-focusvolgorde van de pagina.

    Een uitzondering geldt voor situaties waarbij een interactief component, zoals een Skip Link of een Link in een Side Navigation, de bezoeker direct naar de component of het element stuurt.

    NL Design System richtlijnen:

    developerWCAG 2.4.3Niveau A
  • Als de Alert in een andere taal is dan de taal van de pagina, dan heeft het een lang-attribuut met de juiste taalcode.

    Als een tekst in een andere taal is dan de taal van de pagina, dan heeft het element een lang-attribuut met de juiste taalcode.

    Denk bijvoorbeeld aan buttons voor het veranderen van de taal van een pagina, bij meertalige websites. Of aan een citaat in het Engels, op een Nederlandstalige pagina.

    NL Design System richtlijnen:

    developerWCAG 3.1.2Niveau AA
  • Meldingen in de Alert worden voorgelezen aan bezoekers die een screenreader gebruiken.

    Een Alert geeft informatie over het proces van de bezoeker. Zorg ervoor dat deze informatie ook meteen beschikbaar is voor bezoekers die een screenreader gebruiken.

    Dit kun je op verschillende manieren doen:

    • Door de rol alert te gebruiken. Deze live-region rol gebruik je voor foutmeldingen en waarschuwingen. De melding wordt dan direct voorgelezen. Dit onderbreekt een screenreader in het voorlezen van de tekst die op dat moment wordt voorgelezen.
    • Door de rol status te gebruiken. Deze live-region rol gebruik je voor statusupdates, zoals succesmeldingen. De melding wordt dan voorgelezen zodra de screenreader klaar is met het voorlezen van de tekst die op dat moment wordt voorgelezen.
    • Door de toetsenbordfocus naar de Alert te verplaatsen. De melding wordt dan direct voorgelezen. Dit onderbreekt een screenreader in het voorlezen van de tekst die op dat moment wordt voorgelezen.

    Vermijd het dubbel voorlezen van de melding door een screenreader. Maak een goede keuze tussen een live-region of focus verplaatsen, op basis van de beste gebruikerservaring met een toetsenbord en screenreader.

    Kies de methode die het beste aansluit bij de aard van de melding.

    NL Design System richtlijnen:

    developerWCAG 4.1.3Niveau AA

Acceptatiecriteria van de component

Als je de NL Design System component gebruikt kun je er vanuit gaan dat onderstaande checks zijn gedaan. Maar door keuzes in de website of applicaties kan het natuurlijk zijn dat ze toch niet helemaal werken. Voor de zekerheid is het dus goed om ook op onderstaande punten te letten.

Filter acceptatiecriteria voor:

4 van de 4 items zijn nu zichtbaar.

  • Tekst in de Alert blijft leesbaar wanneer de tekstafstand vergroot wordt.

    Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea's, letterafstand en ruimte tussen woorden. Gebruikers kunnen dit instellen vanuit hun browser. Het is niet nodig om hier buttons voor te maken in de website zelf.

    Zorg ervoor dat de component mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.

    Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld overflow-wrap: break-word; hyphens: auto; eventueel in combinatie met text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :root niveau.

    Je moet de afstand kunnen vergroten naar deze waardes:

    • Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte.
    • Afstand tussen alinea's naar ten minste 2 keer de lettergrootte.
    • Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte.
    • Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.

    Dit is te testen met een extensie zoals Stylus of User CSS, een bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de head van de pagina:

    <style>
body * {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}
body p {
    margin-bottom: 2em !important;
}
</style>

    NL Design System richtlijnen:

    developerWCAG 1.4.12Niveau AA
  • De Alert is standaard niet bereikbaar en bedienbaar met het toetsenbord.

    Niet-interactieve componenten en elementen zijn standaard niet bereikbaar en bedienbaar met het toetsenbord.

    NL Design System richtlijnen:

    developerWCAG 2.1.1Niveau A
  • Het is mogelijk om via code de toetsenbordfocus naar de Alert te verplaatsen.

    Het is mogelijk om de Alert focusbaar te maken met tabindex="-1" en de focus() methode. Vermijd tabindex="0" of een positieve tabindex waarde.

    NL Design System richtlijnen:

    developerWCAG 2.4.3Niveau A
  • Het is mogelijk om van de Alert een live-region te maken.

    Het moet mogelijk zijn om van de Alert een live-region te maken met de rol alert of status. Zo kan een screenreader de melding voorlezen zonder dat de toetsenbordfocus naar de Alert wordt verplaatst.

    Vermijd het dubbel voorlezen van de melding door een screenreader. Verplaats niet de focus naar de Alert als de Alert ook al een live-region is.

    developerWCAG 4.1.3Niveau AA

Definition of Done

Help Wanted - 11 van 11
  • Afgevinkt.

    Naam

    Naam bepaald op basis van NL Design System naamgeving.
  • Afgevinkt.

    Beschrijving

    Doel van component is in één zin beschreven.
  • Afgevinkt.

    Afbeelding

    Afbeelding gemaakt om de component visueel duidelijk te maken.
  • Afgevinkt.

    Discussion URL

  • Afgevinkt.

    Backlog

    Staat in de publieke backlog van NL Design System.
  • Afgevinkt.

    Bruikbaar

    Bewijs verzameld dat de component algemeen bruikbaar is.
  • Afgevinkt.

    Link

    Link beschikbaar naar component in Figma of Storybook met alle belangrijke states en varianten.
  • Afgevinkt.

    Varianten

    Naam en doel van benodigde varianten beschreven.
  • Afgevinkt.

    Onderzoek

    Nut van component is onderbouwd door gebruikersonderzoek.
  • Afgevinkt.

    Kernteam

    Kernteam verwacht dat dit component tot Hall of Fame kan komen.
  • Afgevinkt.

    nldesignsystem.nl

    Vindbaar op de NL Design System website.

Help Wanted projectbord op GitHub

Community - 15 van 15
  • Afgevinkt.

    Welk bord

  • Afgevinkt.

    GitHub (CSS)

  • Afgevinkt.

    Storybook (CSS)

  • Afgevinkt.

    Implementatie voldoet

  • Afgevinkt.

    Minimale design tokens

  • Afgevinkt.

    Prefix

  • Afgevinkt.

    Naamgeving design tokens

  • Afgevinkt.

    Licentie component

  • Afgevinkt.

    Licentie documentatie

  • Afgevinkt.

    Storybook thema's

  • Afgevinkt.

    Visuele regressietest

  • Afgevinkt.

    Figma URL

  • Afgevinkt.

    nldesignsystem.nl

  • Afgevinkt.

    Component assessment

  • Afgevinkt.

    Promotie

Community projectbord op GitHub

Candidate - 0 van 15
  • Afgevinkt.

    🔍 Huisstijl input

  • Afgevinkt.

    🔍 Productie input

  • Afgevinkt.

    🔍 WCAG input

  • Niet afgevinkt.

    📝 Issues bekend

  • Afgevinkt.

    📝 Varianten bepaald

  • Niet afgevinkt.

    📝 Acceptatiecriteria a11y

  • Niet afgevinkt.

    📝 Keywords en Aliassen bepaald

  • Afgevinkt.

    📝 Anatomie bepaald

  • Niet afgevinkt.

    📝 HTML bepaald

  • Niet afgevinkt.

    📝 API bepaald

  • Niet afgevinkt.

    📝 Design tokens bepaald

  • Niet afgevinkt.

    📝 Stories en specs vastgelegd

  • Niet afgevinkt.

    📝 Testcases voor gebruik

  • Niet afgevinkt.

    🛠️ React component

  • Niet afgevinkt.

    🛠️ CSS component

  • Niet afgevinkt.

    🛠️ Figma component

  • Niet afgevinkt.

    🛠️ Voorbeeld thema

  • Niet afgevinkt.

    🛠️ Documentatie

  • Niet afgevinkt.

    🧪 Design Tokens getest

  • Niet afgevinkt.

    🧪 A11y getest

  • Niet afgevinkt.

    🧪 Test coverage getest

  • Niet afgevinkt.

    🧪 Testcases getest

  • Niet afgevinkt.

    🧪 Documentatie getest

  • Niet afgevinkt.

    🚀 NPM

  • Niet afgevinkt.

    🚀 Figma - Start Bibliotheek

  • Niet afgevinkt.

    🚀 Figma - Voorbeeld Bibliotheek

  • Niet afgevinkt.

    🚀 Themes repository

  • Niet afgevinkt.

    🚀 nldesignsystem.nl

Candidate projectbord op GitHub

Community implementaties

Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Snel aan de slag

utrecht-alert in CSS
utrecht-alert in Web Component
utrecht-alert in React

Amsterdam

10 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord

Snel aan de slag

ams-alert in CSS
ams-alert in React

Den Haag

10 van 11 stappen gedocumenteerd op het Community Den Haag projectbord

Snel aan de slag

denhaag-alert in CSS

Rijkshuisstijl Community

10 van 11 stappen gedocumenteerd op het Community Rijkshuisstijl Community projectbord

Snel aan de slag

rhc-alert in CSS
rhc-alert in Web Component
rhc-alert in React
rhc-alert in Twig

RVO

9 van 11 stappen gedocumenteerd op het Community RVO projectbord

Snel aan de slag

rvo-alert in CSS
rvo-alert in React

Gerelateerde componenten: Alert Dialog, Invalid Form Alert, Notification Banner, Note.

Help om deze component te verbeteren

We vinden het belangrijk dat de component Alert goed te gebruiken is door iedereen. Help je mee?