Componenten

Data blokken

Veel back-office applicaties tonen gegevens die ingevuld zijn door klanten. Hierom is de weergave van deze gegevens aangepast om het beter leesbaar en scanbaar te maken.

  • De class data-block zorgt voor een grijs block waarin blokken met data getoond kunnen worden. Dit geeft de mogelijkheid om gegevens extra te groeperen.
  • Met de reguliere bootstrap grids kun je de breedte van de labels en data velden bepalen.

Toegankelijkheid

  • Semantisch zijn de rijen in data-blokken description terms en definities. De ondersteuning voor het voorlezen hiervan door screenreaders als 'beschrijvingen lijst' is momenteel nog beperkt.
  • Om de inhoud van de lijst duidelijker te maken kan er voor worden gekozen om het dl element te voorzien van een aria-label.

Voorbeeld

Gestapelde weergave

Wanneer de labels of (standaard)antwoorden erg lang zijn, gebruik dan de class .stacked op een datablock, zodat de vragen boven de antwoorden worden getoond. Dit wordt gebruikt in combinatie met de gestapelde weergave van fieldsets.

In het volgende voorbeeld wordt de class .data-block--stacked gebruikt in combinatie met responsive grid classes. Deze worden genegeerd wanneer deze modifier class wordt gebruikt.

Voorbeeld gestapeld datablock

Datablok met toelichting

Wanneer het voor een deel van de gebruikers nodig is om een term verder toe te lichten, kan hiervoor een inklapbare helptekst worden gebruikt. Let erop dat elke term binnen hetzelfde data-block in een extra HTML-element wordt geplaatst, zodat de visuele uitlijning correct is. Dit element is optioneel als er geen helptekst wordt gebruikt.

Toegankelijkheid

  • Er wordt gebruik gemaakt van aria-attributen om de zichtbaarheid van het panel te communiceren aan screenreaders.
  • Nadat het paneel wordt geopent wordt de focus gezet om de inhoud van het paneel.
  • Na het sluiten van het paneel wordt de focus teruggezet op de knop waarmee het paneel geopend kan worden.
  • De knop waarmee het paneel wordt geopend heeft een `aria-label` en `title` attribuut. Wanneer het paneel geopend is worden deze bijgewerkt zodat duidelijk wordt dat het paneel daarmee (ook) gesloten kan worden.
  • Het paneel met de extra toelichting is een dd element. Dit maakt semantisch duidelijk dat het een beschrijving van de term is.