@utrecht/data-list-css
v1.2.0
Published
Data list component for the Municipality of Utrecht based on the NL Design System architecture
Downloads
99
Keywords
Readme
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 alsstring
, maar waarvan de tekst verdeeld is over meerdere tekstregels zonder HTML<br/>
maar met een newline character. Bijvoorbeeld ingevoerde tekst uit eentextarea
, 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 hetinput
HTML-element en oprole="associationlistitemvalue"
in de WAI-ARIA 1.3 Draft. - de item actions (deze zijn optioneel)
- de item key. Naam is gebaseerd op het "key" in uit
- data list item, één of meerdere. Naam is gebaseerd op "item" uit
BEM class names:
utrecht-data-list
. Gebruik ookutrecht-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
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