Code
Community
Markeert korte tekst die code vertegenwoordigt.
Let op: Gebruik de component Code Block als de code meerdere regels beslaat.
Anatomie
Definition of Done
Implementaties
Community Utrecht
11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord
Component gebruiken?
Acceptatiecriteria
Gebruik jij één van de implementaties van deze component of heb je je eigen component gemaakt? In beide gevallen geldt: met onderstaande acceptatiecriteria kun je nagaan of jouw gebruik van deze component klopt met NL Design System.
Als je implementatie voldoet aan de acceptatiecriteria voor dit component, kun je er vanuit gaan dat je gebruik van dit component voldoet aan WCAG, niveau A en AA, en voor twee succescriteria aan niveau AAA (2.4.13 Focusweergave en 2.5.5 Grootte van het aanwijsgebied uitgebreid).
Toegankelijkheid visueel ontwerp
De tekst, gemarkeerd als code, is niet alleen herkenbaar aan een andere achtergrondkleur
Zorg ervoor dat kleur niet het enige visuele middel is om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Niet iedereen kan kleuren zien of verandering in kleur of kleurcontrast opmerken.
Bijvoorbeeld: geef een foutmelding niet alleen aan met een rood randje, maar ook in tekst en eventueel met een icoontje dat een foutmelding markeert.
De tekst, gemarkeerd als code, heeft voldoende contrast met de achtergrondkleur
De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg. Minimale contrastverhoudingen:
- 4,5:1 contrast voor normale tekst.
- 3:1 contrast voor grotere letters (vanaf 24 pixels).
- 3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).
Hogere verhoudingen mogen natuurlijk altijd. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen. Denk erom dat dit moet gelden voor alle achtergrondkleuren waarop de tekst geplaatst kan worden. Het kan dus zijn dat je meerdere checks moet doen.
NL Design System richtlijnen:
Wanneer de achtergrondkleur van de Code component anders is dan de default browserkleur, dan heeft deze een kleurcontrast van minimaal 3:1 met de achtergrondkleur van de pagina
Als je het code-element gebruikt en met CSS een eigen kleur definieert voor background-color, dan moet deze achtergrondkleur een contrastverhouding hebben van minimaal 3:1 met de achtergrondkleur van de pagina.
Dit geldt niet als je de achtergrondkleur niet zelf definieert, maar overlaat aan de browser. Daarvoor bestaat namelijk een uitzondering in het WCAG-succescriterium 1.4.11 Contrast van niet-tekstuele content.
Dit geldt ook niet als het lettertype of de weergave van de code duidelijke te onderscheiden is als code, door bijvoorbeeld het kiezen van een monospace lettertype.
NL Design System richtlijnen:
Toegankelijkheid zoom en herschalen
Als je inzoomt naar 200% blijft alle tekst leesbaar
Als je de tekst vergroot tot 200% (via browserzoom en via de browserinstellingen voor tekstgrootte) blijft de tekst in zijn geheel zichtbaar.
Zorg ervoor dat het element mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.
NL Design System richtlijnen:
Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar
- WCAG
- 1.4.12 Tekstafstand
Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar. Dit gaat om regelhoogte, afstand tussen alinea's, letterafstand en ruimte tussen woorden.
Zorg ervoor dat het element mee kan groeien met de tekst. Geef de breedte en de hoogte dus niet hard op in pixels.
Je moet de afstand kunnen vergroten naar deze waardes:
- Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte;
- Afstand tussen alinea's naar ten minste 2 keer de lettergrootte;
- Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte;
- Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.
Dit is te testen met een bookmarklet of door in de inspector van de browser de volgende code toe te voegen aan de head van de pagina:
<style>
body * {
line-height: 1.5 !important;
letter-spacing: 0.12em !important;
word-spacing: 0.16em !important;
}
body p {
margin-bottom: 2em !important;
}
</style>
NL Design System richtlijnen:
Toegankelijkheid screenreader
Het juiste HTML-element voor de Code component is toegepast
Gebruik voor tekst gemarkeerd als code semantische HTML. In het geval van de component Code is dat het HTML-element code.
Dus niet zo:
codevoorbeeld<!-- dit niet doen -->
Een zin over het element <span class="code">button</span> met een achtergrondkleur in CSS.
Maar zo:
codevoorbeeldEen zin over het element `<code>button</code>` met een achtergrondkleur in CSS.
Let op: Het element <code> wordt op het moment van schrijven (2024) nog niet ondersteund door alle hulpsoftware. Wellicht in de toekomst wel, dan is het goed om nu alvast het juiste element te gebruiken.
Help component verbeteren
We vinden het belangrijk dat de component Code goed te gebruiken is door iedereen. Help je mee?
- Vul de GitHub Discussion aan met de eisen en wensen voor jouw project of organisatie.
- Draag bij aan de voortang van Code door te zorgen dat deze aan meer checkpoints van de Definition of Done voldoet. Deze houden we bij in de projectborden bij de publieke GitHub Backlog.