@utrecht/data-list-css

Data list

De data list component gebruik je onder andere voor:

• een overzicht van gegevens uit een formulier, in een controle-stap voor het verzenden
• een overzicht vooringevulde gegevens, aan het begin van een formulier
• een overzicht van bekende gegevens, bijvoorbeeld in een profiel-pagina

Om verschillende soorten data optimaal weer te geven, zijn er speciale componenten gemaakt:

• URL data: gebruik deze voor internetadressen en e-mailadressen
• IBAN: gebruik deze voor dit type bankrekeningnummer

Er zijn BEM modifier class names beschikbaar van utrecht-data-list__value, voor datatypes:

• multiline: voor gegevens die worden aangeleverd als string, maar waarvan de tekst verdeeld is over meerdere tekstregels zonder HTML <br/> maar met een newline character. Bijvoorbeeld ingevoerde tekst uit een textarea, of een adres.
• number
• telephone

Anatomie

De data list is opgebouwd uit de volgende onderdelen en BEM class names:

• de data list
  • data list item, één of meerdere. Naam is gebaseerd op "item" uit role="associationlistitemvalue" in de WAI-ARIA 1.3 Draft
    • de item key. Naam is gebaseerd op het "key" in uit role="associationlistitemkey" in de WAI-ARIA 1.3 Draft.
    • de item value. Naam is gebaseerd op value van het input HTML-element en op role="associationlistitemvalue" in de WAI-ARIA 1.3 Draft.
    • de item actions (deze zijn optioneel)

BEM class names:

• utrecht-data-list. Gebruik ook utrecht-data-list--html-dl voor een reset van standaard styling van het <dl> element.
• utrecht-data-list__item voor de <div>
• utrecht-data-list__item-key voor de <dt>
• utrecht-data-list__item-value voor de <dd>
• utrecht-data-list__actions met een eigen <dd>

Vertaalde gegevens

Kies per datatype of de value in een andere taal vertaald moet zijn bij gebruikers van automatische vertaalsoftware zoals Google Translate. Van sommige gegevens moet je vertaling voorkomen, bijvoorbeeld bij namen van personen, straatnamen, codes zoals bankrekeningnummers, internetadressen en e-mailadressen. Gebruik het HTML-attribuut translate="no" voor deze gegevens.

Bijvoorbeeld:

• Gebruik translate="no" voor Voorletters. Voorkom dat "KVK" in in het Nederlands wordt vertaald naar "Chamber of Commerce" in het Engels.
• Gebruik translate="no" voor Voornaam. Voorkom dat "Mees" in het Nederlands wordt vertaald naar "Tit" in het Engels.
• Gebruik translate="no" voor Tussenvoegsel. Voorkom dat "Van" in het Nederlands wordt vertaald naar "By" in het Engels.
• Gebruik translate="no" voor Achternaam. Voorkom dat "Post" in het Nederlands wordt vertaald naar "Mail" in het Engels.
• Gebruik translate="no" voor Adres. Voorkom dat "Donau 1" in het Nederlands wordt vertaald naar "Danube 1" in het Engels.
• Gebruik translate="no" voor Postcode. Voorkom dat "1234 CD" in het Nederlands wordt vertaald naar "1234 discos compactos" in het Spaans.

Er zijn enkele plaatsnamen die in een andere taal een naam hebben, er staan veel voorbeelden op Wikipedia: Lijst van anderstalige namen voor geografische entiteiten in het Nederlandse taalgebied. Toch is het in de meeste veiliger om de plaatsnaam niet automatisch te vertalen.

HTML

Gebruik in de HTML-elementen dl, dt en dd om (WCAG eis 1.3.1) om duidelijk onderscheid te maken tussen key en de value. Gebruik één div element om dt en dd te groeperen om met makkelijker met CSS de layout te maken.

Je mag in theorie ook een table element met th voor de key en td voor de value gebruiken, maar alleen als je ook een tabel-layout gebruikt. Om de data list leesbaar te maken op kleine schermen is het handiger om geen tabel te gebruiken.

Hoe het niet moet

Geen dl of table gebruiken

Gebruik niet alleen div, span en p HTML-element omdat dit niet voldoende duidelijk is (WCAG eis 1.3.1).

Button of link tekst heeft geen context

Niet:

<dl>
  <div>
    <dt>Naam</dt>
    <dd>Jos de Vos</dd>
    <dd><a href="./step-1">Wijzig</a></dd>
  </div>
  <div>
    <dt>Woonplaats</dt>
    <dd>Amsterdam</dd>
    <dd><a href="./step-2">Wijzig</a></dd>
  </div>
</dl>

Wel:

<dl>
  <div>
    <dt>Naam</dt>
    <dd>Mees de Vos</dd>
    <dd><a href="./edit" title="Wijzig naam">Wijzig</a></dd>
  </div>
  <div>
    <dt>Woonplaats</dt>
    <dd>Amsterdam</dd>
    <dd><a href="./edit" title="Wijzig woonplaats">Wijzig</a></dd>
  </div>
</dl>

Links

• Summary list van GOV.UK Design System
• MDN: <dl>: The Description List element

Relevante WCAG-eisen

• WCAG eis 1.3.1 voor gebruik van semantische HTML
• WCAG eis 2.4.4 en WCAG eis 2.4.9 voor duidelijke namen van acties bij een data list item
• WCAG eis 2.5.3: als de zichtbare tekst van een action "Wijzig" is, dan moet het volledige label ook "Wijzig" gebruiken, dus "Wijzig voornaam" en niet "Bewerk voornaam".
• WCAG eis 3.2.4: en data list voor controle van formulier-invoer moet consistent zijn bij de tekst van het formulier-label en de tekst van de data list item key.
• WCAG eis 3.3.4 en WCAG eis 3.3.6: de data list gebruik je voor formulieren zodat gebruikers de invoer kunnen controleren