Notificaties

Waarschuwingen, extra informatie en foutmeldingen.

Aandachtspunten:

De verschillende notificatie-types worden visueel onderscheidend weergegeven. Hierdoor zijn ze in een oogopslag herkenbaar en neemt de gebruiker ook zonder te lezen al informatie tot zich.
Notificaties kunnen verborgen worden door de class hidden toe te voegen aan de notification
Voeg de volledige code toe die in de voorbeelden staat om alle gebruikers een goede gebruikerservaring the bieden. Denk hierbij aan gebruikers die kleurenblind zijn of gebruikers die gebruik maken van hulptechnologiën. Zie voor meer informatie de beschikbare voorbeelden.

Notificatievoorbeeld op pagina-niveau

Voor het plaatsen van algemene meldingen bovenaan de pagina.

Aandachtspunten:

Plaats de notificatie direct binnen de main.
Gebruik een <section> met de class van het gewenste type voor het plaatsen van een pagina-notificatie.

Visueel voorbeeld section:

Rijksoverheid

Bevestiging:

Uw account is succesvol aangemaakt.

Html-voorbeeld:

                        
<main>
    <section class="confirmation" role="group" aria-label="bevestiging">
        <div>
            <span>Bevestiging:</span>
            <p>Uw account is succesvol aangemaakt.</p>
        </div>
    </section>
</main>

Visueel voorbeeld paragraaf:

Rijksoverheid

Bevestiging: Uw account is succesvol aangemaakt.

Html-voorbeeld:

                        
<main>
    <p class="confirmation" role="group" aria-label="bevestiging">
        <span>Bevestiging: </span>
        Uw account is succesvol aangemaakt.
    </p>
</main>

Visueel voorbeeld span:

Rijksoverheid

Bevestiging: Uw account is succesvol aangemaakt.

Html-voorbeeld:

                        
<main>
    <span class="confirmation" role="group" aria-label="bevestiging">
       <span>Bevestiging:</span>
       Uw account is succesvol aangemaakt.
    </span>
</main>

Foutmelding

Te gebruiken om de gebruiker te attenderen op een fout. Bijvoorbeeld bij het incorrect invoeren van data of een systeemfout.

Beschikbare voorbeelden:

Foutmelding binnen een blok

Voorbeeld

Visueel voorbeeld:

Foutmelding:

Lorem ipsum dolor set

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Donec luctus metus a lacus dictum, a porta ligula pellentesque. Phasellus ultricies purus id viverra ultrices. Proin sagittis rhoncus tempor. Nam efficitur elit commodo elit feugiat scelerisque. Nullam consectetur felis mi, ac bibendum urna convallis a. Ut maximus volutpat ligula, et accumsan ipsum varius eget. Mauris euismod a augue sit amet condimentum.

Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Lorem ipsum consectetur adipiscing elit.

Html-voorbeeld:

                        
<div class="error" role="group" aria-label="foutmelding">
    <span>Foutmelding:</span>
    <!-- Voeg hier de content toe. -->
</div>

Foutmelding op paragraaf:

Voorbeeld

Visueel voorbeeld:

Foutmelding: Lorem ipsum dolor sit.

Html-voorbeeld:

                        
<p class="error" role="group" aria-label="foutmelding"><span>Foutmelding:</span> Lorem ipsum dolor sit amet </p>

Foutmelding op `button`

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<button type="button" class="error">
    <span>Foutmelding:</span> Lorem ipsum
</button>

Foutmelding op tabel-elementen

Foutmelding op tabeltitel

Voorbeeld

Visueel voorbeeld:

Foutmelding: Lorem	Foutmelding: Ipsum
12	42
15	168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<th class="error" aria-label="foutmelding"><span>Foutmelding:</span> Lorem</th>

Foutmelding op Tabelcel

Voorbeeld

Visueel voorbeeld:

Lorem	Ipsum
12	42
Foutmelding: 15	Foutmelding: 168
Foutmelding: 15	Foutmelding: 168
Foutmelding: 15	Foutmelding: 168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<td class="error" aria-label="foutmelding"><span>Foutmelding:</span> 15</td>

Foutmelding op tabelrij

Aandachtspunten:

Niet alle screenreaders lezen aria-label op een tr op. Voeg daarom de labels toe aan de th of de td.

Voorbeeld

Visueel voorbeeld:

Foutmelding: Lorem	Foutmelding: Ipsum
Foutmelding: 12	Foutmelding: 42
15	168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<table>
    <thead>
        <tr class="error">
            <th aria-label="foutmelding"><span>Foutmelding:</span> Lorem</th>
            <th aria-label="foutmelding"><span>Foutmelding:</span> Ipsum</th>
        </tr>
    </thead>
    <tbody>
        <tr class="error">
            <td aria-label="foutmelding"><span>Foutmelding:</span> 12</td>
            <td aria-label="foutmelding"><span>Foutmelding:</span> 42</td>
        </tr>
    </tbody>
</table>

Foutmelding op formulier-elementen

Input

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="input-error">Input</label>
    <div>
        <input id="input-error" class="error" value="Lorem ipsum" aria-describedby="input-error-message" aria-invalid="true">
        <p class="error" id="input-error-message">
            <span>foutmelding:</span> Lorem ipsum dolor set amet
        </p>
    </div>
</form>

Voorbeeld tekstveld

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="voorbeeld-tekstveld-error">Voorbeeld tekstveld</label>
    <div>
        <textarea id="voorbeeld-tekstveld-error" name="voorbeeld-tekstveld-error" placeholder="Jouw vraag of opmerking" class="error" aria-describedby="voorbeeld-tekstveld-error-message" aria-invalid="true"></textarea>
        <p class="error" id="voorbeeld-tekstveld-error-message">
            <span>foutmelding:</span> Lorem ipsum dolor set amet
        </p>
    </div>
    <button type="submit">Verzend</button>
</form>

Selectielijst

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="select-error">Selectielijst</label>
    <div>
        <select id="select-error" name="select" class="error" aria-describedby="select-error-message" aria-invalid="true">
            <option value="1">Optie 1</option>
            <option value="2">Optie 2</option>
            <option value="3">Optie 3</option>
        </select>
        <p class="error" id="select-error-message">
            <span>foutmelding:</span> Lorem ipsum dolor set amet
        </p>
    </div>
</form>

Datalijst

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="datalist-error">Input</label>
    <div>
        <input id="datalist-error" class="error" placeholder="Begin met typen of klik om een optie uit te kiezen" list="example-list-error" aria-describedby="datalist-error-message" aria-invalid="true">
        <p class="error" id="datalist-error-message">
            <span>foutmelding:</span> Lorem ipsum dolor set amet
        </p>
    </div>

    <datalist id="example-list-error">
        <option value="Optie 1">
        <option value="Optie 2">
        <option value="Optie 3">
    </datalist>
</form>

Selectievak

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <div aria-describedby="checkbox-error-message">
        <div class="checkbox">
          <input type="checkbox" id="checkbox-error" name="standaard-checkbox" class="error" aria-invalid="true">
          <label for="checkbox-error">Lorem ipsum dolor set amet</label>
          <p class="error" id="checkbox-error-message">
              <span>foutmelding:</span> Lorem ipsum dolor set amet
          </p>
        </div>
    </div>
</form>

Radio-selecteerknop

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <div>
        <div class="radio">
            <input type="radio" id="radio-example-error" name="standaard-radiobutton" value="value" class="error" aria-invalid="true">
            <label for="radio-example-error">Lorem ipsum dolor set amet</label>
        </div>
        <p class="error" id="radio-example-error-message">
            <span>foutmelding:</span> Lorem ipsum dolor set amet
        </p>
    </div>
</form>

Waarschuwing

Te gebruiken om de gebruiker te waarschuwen.

Beschikbare voorbeelden:

Waarschuwing binnen een blok

Voorbeeld

Visueel voorbeeld:

Waarschuwing:

Lorem ipsum dolor set

Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Lorem ipsum consectetur adipiscing elit.

Html-voorbeeld:

                        
<div class="warning" role="group" aria-label="waarschuwing">
    <span>Waarschuwing:</span>
    <!-- Voeg hier de content toe. -->
</div>

Waarschuwing op paragraaf:

Voorbeeld

Visueel voorbeeld:

Waarschuwing: Lorem ipsum dolor sit.

Html-voorbeeld:

                        
<p class="warning" role="group" aria-label="waarschuwing"><span>Waarschuwing:</span> Lorem ipsum dolor sit</p>

Waarschuwing op `button`

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<button type="button" class="warning">
    <span>Waarschuwing:</span> Lorem ipsum
</button>

Waarschuwing op tabel-elementen

Waarschuwing op tabeltitel

Voorbeeld

Visueel voorbeeld:

Waarschuwing: Lorem	Waarschuwing: Ipsum
12	42
15	168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<th class="warning" aria-label="waarschuwing"><span>Waarschuwing:</span> Lorem</th>

Waarschuwing op Tabelcel

Voorbeeld

Visueel voorbeeld:

Lorem	Ipsum
12	42
Waarschuwing: 15	Waarschuwing: 168
Waarschuwing: 15	Waarschuwing: 168
Waarschuwing: 15	Waarschuwing: 168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<td class="warning" aria-label="waarschuwing"><span>Waarschuwing:</span> 15</td>

waarschuwing op tabelrij

Aandachtspunten:

Niet alle screenreaders lezen aria-label op een tr op. Voeg daarom de labels toe aan de th of de td.

Voorbeeld

Visueel voorbeeld:

Waarschuwing: Lorem	Waarschuwing: Ipsum
Waarschuwing: 12	Waarschuwing: 42
15	168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<table>
    <thead>
        <tr class="warning">
            <th aria-label="waarschuwing"><span>Waarschuwing:</span> Lorem</th>
            <th aria-label="waarschuwing"><span>Waarschuwing:</span> Ipsum</th>
        </tr>
    </thead>
    <tbody>
        <tr class="warning">
            <td aria-label="waarschuwing"><span>Waarschuwing:</span> 12</td>
            <td aria-label="waarschuwing"><span>Waarschuwing:</span> 42</td>
        </tr>
    </tbody>
</table>

Waarschuwing op formulier-elementen

Input

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="input-warning">Input</label>
    <div>
        <p class="warning" id="input-warning-message">
            <span>waarschuwing:</span> Lorem ipsum dolor sit.
        </p>
        <input id="input-warning" class="warning" value="Lorem ipsum" aria-describedby="input-warning-message">
    </div>
</form>

Voorbeeld tekstveld

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="voorbeeld-tekstveld-warning">Voorbeeld tekstveld</label>
    <div>
        <p class="warning" id="voorbeeld-tekstveld-warning-message">
            <span>waarschuwing:</span> Lorem ipsum dolor sit.
        </p>
        <textarea id="voorbeeld-tekstveld-warning" name="voorbeeld-tekstveld-warning" placeholder="Jouw vraag of opmerking" class="warning" aria-describedby="voorbeeld-tekstveld-warning-message"></textarea>
    </div>
    <button type="submit">Verzend</button>
</form>

Selectielijst

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="select-warning">Selectielijst</label>
    <div>
        <p class="warning" id="select-warning-message">
            <span>waarschuwing:</span> Lorem ipsum dolor sit.
        </p>
        <select id="select-warning" name="select" class="warning" aria-describedby="select-warning-message">
            <option value="1">Optie 1</option>
            <option value="2">Optie 2</option>
            <option value="3">Optie 3</option>
        </select>
    </div>
</form>

Datalijst

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="datalist-warning">Input</label>
    <div>
        <p class="warning" id="datalist-warning-message">
            <span>waarschuwing:</span> Lorem ipsum dolor sit.
        </p>
        <input id="datalist-warning" class="warning" placeholder="Begin met typen of klik om een optie uit te kiezen" list="example-list-warning" aria-describedby="datalist-warning-message">
    </div>

    <datalist id="example-list-warning">
        <option value="Optie 1">
        <option value="Optie 2">
        <option value="Optie 3">
    </datalist>
</form>

Selectievak

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <div>
        <p class="warning" id="checkbox-warning-message">
            <span>waarschuwing:</span> Lorem ipsum dolor sit.
        </p>
        <div class="checkbox">
          <input type="checkbox" id="checkbox-warning" name="standaard-checkbox" class="warning" aria-describedby="checkbox-warning-message">
          <label for="checkbox-warning">Lorem ipsum dolor set amet</label>
        </div>
    </div>
</form>

Radio-selecteerknop

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <div>
        <p class="warning" id="radio-example-warning-message">
            <span>waarschuwing:</span> Lorem ipsum dolor sit.
        </p>
        <div class="radio">
            <input type="radio" id="radio-example-warning" name="standaard-radiobutton" value="value" class="warning" aria-describedby="radio-example-warning-message">
            <label for="radio-example-warning">Lorem ipsum dolor set amet</label>
        </div>
    </div>
</form>

Bevestiging

Te gebruiken om de gebruiker een bevestiging te sturen. Denk bijvoorbeeld aan succesberichten bij het sturen van een formulier.

Beschikbare voorbeelden:

Bevestiging binnen een blok

Voorbeeld

Visueel voorbeeld:

Bevestiging:

Lorem ipsum dolor set

Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Lorem ipsum consectetur adipiscing elit.

Html-voorbeeld:

                        
<div class="confirmation" role="group" aria-label="bevestiging">
    <span>Bevestiging:</span>
    <!-- Voeg hier de content toe. -->
</div>

Bevestiging op paragraaf:

Voorbeeld

Visueel voorbeeld:

Bevestiging: Lorem ipsum dolor sit.

Html-voorbeeld:

                        
<p class="confirmation" role="group" aria-label="bevestiging">
    <span>Bevestiging:</span>
    Lorem ipsum dolor sit.
</p>

Bevestiging op `button`

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<button type="button" class="confirmation">
    <span>Bevestiging:</span> Lorem ipsum
</button>

Bevestiging op tabel-elementen

Bevestiging op tabeltitel

Voorbeeld

Visueel voorbeeld:

Bevestiging: Lorem	Bevestiging:Ipsum
12	42
15	168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<th class="confirmation" aria-label="bevestiging">
    <span>Bevestiging:</span> Lorem
</th>

Bevestiging op Tabelcel

Voorbeeld

Visueel voorbeeld:

Lorem	Ipsum
12	42
Bevestiging: 15	168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<td class="confirmation" aria-label="bevestiging">
    <span>Bevestiging:</span> 15
</td>

Bevestiging op tabelrij

Aandachtspunten:

Niet alle screenreaders lezen aria-label op een tr op. Voeg daarom de labels toe aan de th of de td.

Voorbeeld

Visueel voorbeeld:

Bevestiging: Lorem	Bevestiging: Ipsum
12	42
Bevestiging: 15	Bevestiging: 168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<table>
    <thead>
        <tr class="confirmation">
            <th aria-label="bevestiging"><span>Bevestiging:</span>Lorem</th>
            <th aria-label="bevestiging"><span>Bevestiging:</span>Ipsum</th>
        </tr>
    </thead>
    <tbody>

        <tr class="confirmation">
            <td aria-label="bevestiging"><span>Bevestiging:</span>15</td>
            <td aria-label="bevestiging"><span>Bevestiging:</span>168</td>
        </tr>
    </tbody>
</table>

Bevestiging op formulier-elementen

Input

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="input-confirmation">Input</label>
    <div>
        <input id="input-confirmation" class="confirmation" value="Lorem ipsum" aria-describedby="input-confirmation-message">
        <p class="confirmation" id="input-confirmation-message">
            <span>bevestiging:</span> Lorem ipsum dolor set amet
        </p>
    </div>
</form>

Voorbeeld tekstveld

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="voorbeeld-tekstveld-confirmation">Voorbeeld tekstveld</label>
    <div>
        <textarea id="voorbeeld-tekstveld-confirmation" name="voorbeeld-tekstveld-confirmation" placeholder="Jouw vraag of opmerking" class="confirmation" aria-describedby="voorbeeld-tekstveld-confirmation-message"></textarea>
        <p class="confirmation" id="voorbeeld-tekstveld-confirmation-message">
            <span>bevestiging:</span> Lorem ipsum dolor set amet
        </p>
    </div>

    <button type="submit">Verzend</button>
</form>

Selectielijst

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="select-confirmation">Selectielijst</label>
    <div>
        <select id="select-confirmation" name="select" class="confirmation" aria-describedby="select-confirmation-message">
            <option value="1">Optie 1</option>
            <option value="2">Optie 2</option>
            <option value="3">Optie 3</option>
        </select>
        <p class="confirmation" id="select-confirmation-message">
            <span>bevestiging:</span> Lorem ipsum dolor set amet
        </p>
    </div>
</form>

Datalijst

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="datalist-confirmation">Input</label>
    <div>
        <input id="datalist-confirmation" class="confirmation" placeholder="Begin met typen of klik om een optie uit te kiezen" list="example-list-confirmation" aria-describedby="datalist-confirmation-message">
        <p class="confirmation" id="datalist-confirmation-message">
            <span>bevestiging:</span> Lorem ipsum dolor set amet
        </p>
    </div>

    <datalist id="example-list-confirmation">
        <option value="Optie 1">
        <option value="Optie 2">
        <option value="Optie 3">
    </datalist>
</form>

Selectievak

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <div>
        <div class="checkbox">
            <input type="checkbox" id="checkbox-confirmation" name="standaard-checkbox" class="confirmation">
            <label for="checkbox-confirmation">Lorem ipsum dolor set amet</label>
        </div>
        <p class="confirmation" id="checkbox-confirmation-message">
            <span>bevestiging:</span> Lorem ipsum dolor set amet
        </p>
    </div>
</form>

Radio-selecteerknop

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <div>
        <div class="radio">
            <input type="radio" id="radio-example-confirmation" name="standaard-radiobutton" value="value" class="confirmation">
            <label for="radio-example-confirmation">Lorem ipsum dolor set amet</label>
        </div>
        <p class="confirmation" id="radio-example-confirmation-message">
            <span>bevestiging:</span> Lorem ipsum dolor set amet
        </p>
    </div>
</form>

Toelichting

Te gebruiken om de gebruiker van extra toelichting te voorzien.

Beschikbare voorbeelden:

Toelichting binnen een blok

Voorbeeld

Visueel voorbeeld:

Toelichting:

Lorem ipsum dolor set

Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Lorem ipsum consectetur adipiscing elit.

Html-voorbeeld:

                        
<div class="explanation" role="group" aria-label="toelichting">
    <span>Toelichting:</span>
    <!-- Voeg hier de content toe. -->
</div>

Toelichting op paragraaf:

Voorbeeld

Visueel voorbeeld:

Toelichting: Lorem ipsum dolor sit.

Html-voorbeeld:

                        
<p class="explanation" role="group" aria-label="toelichting">
    <span>Toelichting:</span>
    Lorem ipsum dolor sit.
</p>

Toelichting op `button`

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<button type="button" class="explanation">
    <span>Toelichting:</span> Lorem ipsum
</button>

Toelichting op tabel-elementen

Toelichting op tabeltitel

Voorbeeld

Visueel voorbeeld:

Toelichting: Lorem	Toelichting: Ipsum
12	42
15	168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<th class="explanation" aria-label="toelichting">
    <span>Toelichting:</span> Lorem
</th>

Toelichting op Tabelcel

Voorbeeld

Visueel voorbeeld:

Lorem	Ipsum
12	42
123	2
15	Toelichting: 168
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<td class="explanation" aria-label="toelichting">
    <span>Toelichting:</span> 15
</td>

Toelichting op tabelrij

Aandachtspunten:

Niet alle screenreaders lezen aria-label op een tr op. Voeg daarom de labels toe aan de th of de td.

Voorbeeld

Visueel voorbeeld:

Toelichting: Lorem	Toelichting: Ipsum
Toelichting: 12	Toelichting: 42
15	168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<table>
    <thead>
        <tr class="explanation">
            <th aria-label="toelichting"><span>Toelichting:</span> Lorem</th>
            <th aria-label="toelichting"><span>Toelichting:</span> Ipsum</th>
        </tr>
    </thead>
    <tbody>
        <tr class="explanation">
            <td aria-label="toelichting"><span>Toelichting:</span> 12</td>
            <td aria-label="toelichting"><span>Toelichting:</span> 42</td>
        </tr>
    </tbody>
</table>

Toelichting op formulier-elementen

Input

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="input-explanation">Input</label>
    <div>
        <p class="explanation" id="input-explanation-message">
            <span>toelichting:</span> Lorem ipsum dolor set amet
        </p>
        <input id="input-explanation" class="explanation" value="Lorem ipsum" aria-describedby="input-explanation-message">
    </div>
</form>

Voorbeeld tekstveld

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="voorbeeld-tekstveld-explanation">Voorbeeld tekstveld</label>
    <div>
        <p class="explanation" id="voorbeeld-tekstveld-explanation-message">
            <span>toelichting:</span> Lorem ipsum dolor set amet
        </p>
        <textarea id="voorbeeld-tekstveld-explanation" name="voorbeeld-tekstveld-explanation" placeholder="Jouw vraag of opmerking" class="explanation" aria-describedby="voorbeeld-tekstveld-explanation-message"></textarea>
    </div>

    <button type="submit">Verzend</button>
</form>

Selectielijst

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="select-explanation">Selectielijst</label>
    <div>
        <p class="explanation" id="select-explanation-message">
            <span>toelichting:</span> Lorem ipsum dolor set amet
        </p>
        <select id="select-explanation" name="select" class="explanation" aria-describedby="select-explanation-message">
            <option value="1">Optie 1</option>
            <option value="2">Optie 2</option>
            <option value="3">Optie 3</option>
        </select>
    </div>
</form>

Datalijst

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="datalist-explanation">Input</label>
     <div>
        <p class="explanation" id="datalist-explanation-message">
            <span>toelichting:</span> Lorem ipsum dolor set amet
        </p>
        <input id="datalist-explanation" class="explanation" placeholder="Begin met typen of klik om een optie uit te kiezen" list="example-list-explanation" aria-describedby="datalist-explanation-message">
    </div>

    <datalist id="example-list-explanation">
        <option value="Optie 1">
        <option value="Optie 2">
        <option value="Optie 3">
    </datalist>
</form>

Selectievak

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <div>
        <p class="explanation" id="checkbox-explanation-message">
            <span>toelichting:</span> Lorem ipsum dolor set amet
        </p>
        <div class="checkbox">
            <input type="checkbox" id="checkbox-explanation" name="standaard-checkbox" class="explanation" aria-describedby="checkbox-explanation-message">
            <label for="checkbox-explanation">Lorem ipsum dolor set amet</label>
        </div>
    </div>
</form>

Radio-selecteerknop

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <div>
        <p class="explanation" id="radio-example-explanation-message">
            <span>toelichting:</span> Lorem ipsum dolor set amet
        </p>
        <div class="radio">
            <input type="radio" id="radio-example-explanation" name="standaard-radiobutton" value="value" class="explanation" aria-describedby="radio-example-explanation-message">
            <label for="radio-example-explanation">Lorem ipsum dolor set amet</label>
        </div>
    </div>
</form>

Primair

Te gebruiken om de gebruiker te attenderen op een element.

Beschikbare voorbeelden:

Primair binnen een blok

Voorbeeld

Visueel voorbeeld:

Toelichting:

Lorem ipsum dolor set

Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Lorem ipsum consectetur adipiscing elit.

Html-voorbeeld:

                        
<div class="primary" role="group" aria-label="primair">
    <span>Toelichting:</span>
    <!-- Voeg hier de content toe. -->
</div>

Primair op paragraaf:

Voorbeeld

Visueel voorbeeld:

Toelichting: Lorem ipsum dolor sit.

Html-voorbeeld:

                        
<p class="primary" role="group" aria-label="primair">
    <span>Toelichting:</span>
    Lorem ipsum dolor sit.
</p>

Primair op `button`

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<button type="button" class="primary">
    <span>Toelichting:</span> Lorem ipsum
</button>

Primair op tabel-elementen

Primair op tabeltitel

Voorbeeld

Visueel voorbeeld:

Toelichting: Lorem	Toelichting: Ipsum
12	42
15	168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<th class="primary" aria-label="primary"><span>Toelichting:</span> Lorem</th>

Primair op tabeltitel

Voorbeeld

Visueel voorbeeld:

Lorem	Ipsum
12	42
Toelichting: 15	Toelichting: 168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<td class="primary" aria-label="primary"><span>Toelichting:</span> 15</td>

Primair op tabelrij

Aandachtspunten:

Niet alle screenreaders lezen aria-label op een tr op. Voeg daarom de labels toe aan de th of de td.

Voorbeeld

Visueel voorbeeld:

Toelichting: Lorem	Toelichting: Ipsum
Toelichting: 12	Toelichting: 42
15	168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<table>
    <thead>
        <tr class="primary">
            <th aria-label="primair"><span>Toelichting:</span> Lorem</th>
            <th aria-label="primair"><span>Toelichting:</span> Ipsum</th>
        </tr>
    </thead>
    <tbody>
        <tr class="primary">
            <td aria-label="primair"><span>Toelichting:</span> 12</td>
            <td aria-label="primair"><span>Toelichting:</span> 42</td>
        </tr>
    </tbody>
</table>

Primair op formulier-elementen

Input

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="input-primary">Input</label>
    <div>
        <p class="primary" id="input-primary-message">
            <span>primair:</span> Lorem ipsum dolor set amet
        </p>
        <input id="input-primary" class="primary" value="Lorem ipsum" aria-describedby="input-primary-message">
    </div>
</form>

Voorbeeld tekstveld

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="voorbeeld-tekstveld-primary">Voorbeeld tekstveld</label>
    <div>
        <p class="primary" id="voorbeeld-tekstveld-primary-message">
            <span>primair:</span> Lorem ipsum dolor set amet
        </p>
        <textarea id="voorbeeld-tekstveld-primary" name="voorbeeld-tekstveld-primary" placeholder="Jouw vraag of opmerking" class="primary" aria-describedby="voorbeeld-tekstveld-primary-message"></textarea>
    </div>

    <button type="submit">Verzend</button>
</form>

Selectielijst

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="select-primary">Selectielijst</label>
    <div>
        <p class="primary" id="select-primary-message">
            <span>primair:</span> Lorem ipsum dolor set amet
        </p>
        <select id="select-primary" name="select" class="primary" aria-describedby="select-primary-message">
            <option value="1">Optie 1</option>
            <option value="2">Optie 2</option>
            <option value="3">Optie 3</option>
        </select>
    </div>
</form>

Datalijst

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <label for="datalist-primary">Input</label>
    <div>
        <p class="primary" id="example-list-primary-message">
            <span>primair:</span> Lorem ipsum dolor set amet
        </p>
        <input id="datalist-primary" class="primary" placeholder="Begin met typen of klik om een optie uit te kiezen" list="example-list-primary" aria-describedby="example-list-primary-message">
    </div>

    <datalist id="example-list-primary">
        <option value="Optie 1">
        <option value="Optie 2">
        <option value="Optie 3">
    </datalist>
</form>

Selectievak

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <div>
        <p class="primary" id="checkbox-primary-message">
            <span>primair:</span> Lorem ipsum dolor set amet
        </p>
        <div class="checkbox">
            <input type="checkbox" id="checkbox-primary" name="standaard-checkbox" class="primary" aria-describedby="checkbox-primary-message">
            <label for="checkbox-primary">Lorem ipsum dolor set amet</label>
        </div>
    </div>
</form>

Radio-selecteerknop

Voorbeeld

Visueel voorbeeld:

Html-voorbeeld:

                        
<form action="" method="post">
    <div>
        <p class="primary" id="radio-example-primary-message">
            <span>primair:</span> Lorem ipsum dolor set amet
        </p>
        <div class="radio">
            <input type="radio" id="radio-example-primary" name="standaard-radiobutton" value="value" class="primary" aria-describedby="radio-example-primary-message">
            <label for="radio-example-primary">Lorem ipsum dolor set amet</label>
        </div>
    </div>
</form>

Systeemberichten

Te gebruiken om de gebruiker extra systeeminformatie te geven. Bijvoorbeeld bij het tonen van een leeg element.

Beschikbare voorbeelden:

Systeemberichten binnen een blok

Voorbeeld

Visueel voorbeeld:

Lorem ipsum dolor set

Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Lorem ipsum consectetur adipiscing elit.

Html-voorbeeld:

                        
<div class="system-notification" role="group" aria-label="systeembericht">
    <span>Systeembericht:</span>
    <!-- Voeg hier de content toe. -->
</div>

Systeemberichten op paragraaf:

Voorbeeld

Visueel voorbeeld:

Er is momenteel geen data beschikbaar.

Html-voorbeeld:

                        
<p class="system-notification" role="group" aria-label="systeembericht">Er is momenteel geen data beschikbaar.</p>

Attentie

Te gebruiken extra aandacht te vestigen op bepaalde teksten.

Aandachtspunten:

Voeg de class attention toe om extra aandacht te geven.

Beschikbare voorbeelden:

"Attentie" op een blokelement

Voorbeeld

Visueel voorbeeld:

Lorem ipsum dolor set

Lorem ipsum
Lorem ipsum
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec ante a nisi consequat facilisis ac eu velit. Lorem ipsum consectetur adipiscing elit.

Html-voorbeeld:

                        
<div class="attention" aria-label="attentie">
    <!-- Voeg hier de content toe. -->
</div>

"Attentie" op paragraaf:

Voorbeeld

Visueel voorbeeld:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et porta ante. Sed vehicula dictum augue, et egestas arcu malesuada vitae.

Html-voorbeeld:

                        
<p class="attention" aria-label="attentie">Lorem ipsum dolor sit amet.</p>

"Attentie" op `<span>`:

Voorbeeld

Visueel voorbeeld:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et porta ante. Sed vehicula dictum augue, et egestas arcu malesuada vitae.

Html-voorbeeld:

                        
<span class="attention" aria-label="attentie">Lorem ipsum dolor sit amet.</span>

"Attentie" op tabel-elementen:

Attentie op tabeltitel

Voorbeeld

Visueel voorbeeld:

Lorem	Ipsum
12	42
15	168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<th class="attention" aria-label="attentie">
    Lorem
</th>

Attentie op tabelcel

Voorbeeld

Visueel voorbeeld:

Lorem	Ipsum
12	42
15	168
15	168
15	168
123	2
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<td class="attention" aria-label="attentie">
    15
</td>

Attentie op tabelrij

Voorbeeld

Visueel voorbeeld:

Lorem	Ipsum
12	42
15	168
15	168
Lorem ipsum	Dolor set amet

Html-voorbeeld:

                        
<!-- Attentie op een tabelrij binnen een tabeltitel -->
<tr class="attention" aria-label="attentie">
    <th>Lorem</th>
    <th>Ipsum</th>
</tr>

<!-- Attentie op een tabelrij binnen een tabel body of footer -->
<tr class="attention" aria-label="attentie">
    <td>15</td>
    <td>168</td>
</tr>

Terug naar het hoofdmenu

Notificaties

Notificatievoorbeeld op pagina-niveau

Visueel voorbeeld section:

Visueel voorbeeld paragraaf:

Visueel voorbeeld span:

Foutmelding

Foutmelding binnen een blok

Voorbeeld

Lorem ipsum dolor set

Foutmelding op paragraaf:

Voorbeeld

Foutmelding op button

Voorbeeld

Foutmelding op tabel-elementen

Foutmelding op tabeltitel

Voorbeeld

Foutmelding op Tabelcel

Voorbeeld

Foutmelding op tabelrij

Voorbeeld

Foutmelding op formulier-elementen

Input

Voorbeeld

Voorbeeld tekstveld

Voorbeeld

Selectielijst

Voorbeeld

Datalijst

Voorbeeld

Selectievak

Voorbeeld

Radio-selecteerknop

Voorbeeld

Waarschuwing

Waarschuwing binnen een blok

Voorbeeld

Lorem ipsum dolor set

Waarschuwing op paragraaf:

Voorbeeld

Waarschuwing op button

Voorbeeld

Waarschuwing op tabel-elementen

Waarschuwing op tabeltitel

Voorbeeld

Waarschuwing op Tabelcel

Voorbeeld

waarschuwing op tabelrij

Voorbeeld

Waarschuwing op formulier-elementen

Input

Voorbeeld

Voorbeeld tekstveld

Voorbeeld

Selectielijst

Voorbeeld

Datalijst

Voorbeeld

Selectievak

Voorbeeld

Radio-selecteerknop

Voorbeeld

Bevestiging

Bevestiging binnen een blok

Voorbeeld

Lorem ipsum dolor set

Bevestiging op paragraaf:

Voorbeeld

Bevestiging op button

Voorbeeld

Bevestiging op tabel-elementen

Bevestiging op tabeltitel

Voorbeeld

Bevestiging op Tabelcel

Voorbeeld

Bevestiging op tabelrij

Voorbeeld

Bevestiging op formulier-elementen

Input

Voorbeeld

Voorbeeld tekstveld

Foutmelding op `button`

Waarschuwing op `button`

Bevestiging op `button`

Toelichting op `button`

Primair op `button`