Tabelrij met checkbox

Voor het selecteren van rijen van een tabel.

Benodigde stappen:

1. Voeg de checkbox toe aan de benodigde cellen. Voor het voorbeeld zie: Voorbeelden.
2. Zorg dat de checkbox een toegankelijk label heeft dat de rij uniek identificeert.
   • Staat de checkbox in een cel met tekst? Gebruik dan bij voorkeur die tekst als label. Identificeert de tekst de rij niet (voldoende)? Overweeg dan of de plaatsing van de checkbox wel duidelijk genoeg is.
   • Gebruik als label bijvoorbeeld een naam, ID of andere unieke informatie uit de tabelrij. Zorg dat het label geen informatie bevat die niet ook visueel aanwezig is.
   • Het toevoegen van een toegankelijk label kan bijvoorbeeld met aria-label, of door de tekst van een andere cel in een <label> te plaatsen. Geef in dat geval de checkbox een id en geef het label een for met het id van de checkbox.
3. Staan de checkboxes in een eigen kolom zonder header-tekst? Voeg dan een visueel verborgen tekst toe aan de header. Bijvoorbeeld: <th><span class="visually-hidden">Selectie</span></th>.

Aandachtspunten

• Zorg ervoor dat het duidelijk is wat er gebeurt als een checkbox geselecteerd wordt.
• Het is mogelijk een checkbox toe te voegen binnen de <th> waarmee alle checkboxes tegelijkertijd kunnen worden aan- of uit-geschakelt.
  • Om verwarring te voorkomen, kan deze checkbox beter geen toegankelijk label krijgen, omdat deze anders door de meeste screenreaders voor elke rij voorgelezen zou worden.
  • In plaats daarvan is het belangrijk om in de <caption> de functie van de checkbox in de header toe te lichten. Maak deze toelichting bij voorkeur zo kort en duidelijk mogelijk. Bijvoorbeeld: "selectievak in kolom 1 rij 1 selecteert alle rijen". Plaats de toelichting eventueel in een <span class="visually-hidden"> als het wenselijk is om deze visueel te verbergen.
• Het is voor dit component nodig om het dynamische gedrag zelf via JavaScript te implementeren. De exacte implementatie in JavaScript is afhankelijk van de context.

Voorbeelden

Visueel voorbeeld:

HTML-voorbeeld:

<div class="horizontal-scroll">
  <form>
    <table>
      <caption>
        Tabelvoorbeeld met selectievak:
        <span class="visually-hidden">
          Selectievak in kolom 1 rij 1 selecteert alle rijen.
        </span>
      </caption>
      <thead>
        <tr>
          <th scope="col">
            <span class="visually-hidden">Selectie</span>
            <input type="checkbox" onchange="toggleAll()" />
          </th>
          <th scope="col">Naam</th>
          <th scope="col">Actie</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" id="lorem-input" /></td>
          <td><label for="lorem-input">Lorem</label></td>
          <td><button type="button">Actie uitvoeren</button></td>
        </tr>
        <tr>
          <td><input type="checkbox" id="ipsum-input" /></td>
          <td><label for="ipsum-input">Ipsum</label></td>
          <td><button type="button">Actie uitvoeren</button></td>
        </tr>
        <tr>
          <td><input type="checkbox" id="dolor-input" /></td>
          <td><label for="dolor-input">Dolor</label></td>
          <td><button type="button">Actie uitvoeren</button></td>
        </tr>
      </tbody>
    </table>
    <button type="submit">Actie uitvoeren op geselecteerde items</button>
  </form>
</div>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/table";
@use "@minvws/manon/form-checkbox";

Gerelateerde pagina's