@utrecht/number-data-css

Number value component

Gebruik de number value component voor getallen in tabellen en overzichten van gegevens (table en data list), waar je getallen moet controleren of opzoeken.

Design

Als het lettertype de mogelijkheid heeft, dan worden "tabulaire cijfers" gebruikt, zodat lange getallen beter te vergelijken zijn. Het cijfer "2" is standaard vaak iets breder dan het cijfer "1", met tabulaire cijfers worden getallen met even veel cijfers ook even lang.

Positief en negatief

Er twee varianten om positieve of juist negative getallen extra opvallend te maken:

• utrecht-number-data--positive
• utrecht-number-data--negative

Maak niet alleen gebruik van kleur om duidelijk te maken dat een getal negatief is, gebruik ook een minteken. Dit is belangrijk voor onder andere gebruikers die beperkt kleuren zien en gebruikers van screen readers.

HTML

Gebruik in HTML het <data> element zodat het value attribuut het getal kan bevatten in valid floating-point number notatie, net als bijvoorbeeld <input type="number">.

Bijvoorbeeld:

<td lang="nl-NL" dir="ltr">
  <data value="1243.56">1.234,56</data>
</td>

Notatie van getallen

Getallen bestaan niet altijd puur uit de cijfers 0 tot 9. Complexe getallen zijn duidelijker voor mensen als niet teveel cijfers achter elkaar staan. Voor duizendtallen en decimalen worden vaak punten, komma's en spaties gebruikt; dit verschilt heel erg per taal. Bijvoorbeeld:

• "1.234,56" in het Nederlands
• "1,234.56" in het Engels
• "1’234.56" in Zwitserland

Om de notatie van een getal aan te passen aan de taal, kun je in JavaScript Intl.NumberFormat gebruiken:

const nl = new Intl.NumberFormat("nl-NL").format(1234.56);
const en = new Intl.NumberFormat("en").format(1234.56);
const ch = new Intl.NumberFormat("de-CH").format(1234.56);

Het is ook belangrijk dat het getal duidelijk is voor software (WCAG eis 1.3.6), onder andere zodat een screen reader het getal foutloos kan voorlezen.

Wanneer het getal niet helemaal aaneen is geschreven om de leesbaarheid van een groot getal te verbeteren, of als getal decimalen heeft, dan is het essentiëel dat de taal van de tekst goed is ingesteld (WCAG eis 3.1.2). Als de taal niet klopt, dan kan een screen reader een heel ander getal voorlezen dan bedoeld is.

Tip: als je test met een screen reader of een getal in verschillende talen foutloos voorgelezen wordt, controleer dan of alle talen wel beschikbaar zijn. Screen readers zijn vaak ingesteld op één taal, andere talen moeten als optie gekozen worden.

Links

• font-variant-numeric: tabular-nums in de CSS 4 specificatie, die je gebruikt voor tabulaire nummers.

Relevante WCAG eisen

• WCAG eis 1.3.6: numerieke gegevens kunnen automatisch herkend worden, zelfs als number formatting is gebruikt.
• WCAG eis 1.4.1: gebruik een minteken voor negatieve getallen, niet alleen kleur
• WCAG eis 1.4.3: contrast van de kleur voor positief en negatief moet voldoende zijn met de achtergrondkeur
• WCAG eis 3.1.2: als je number formatting gebruikt zonder de taal in te stellen is het niet toegankelijk.
• WCAG eis 3.1.4: als een getal afgekort is, bijvoorbeeld duizend als "1K", moet er een manier zijn om duidelijk te maken welk getal bedoeld wordt.