Repository: nl-design-system/documentatie
Pull request #2344: Feat/content sollution ready
Author: login: huijkman
Created: 2025-05-16T12:25:46Z | Merged: 2025-05-20T10:25:20Z

Deze PR bevatten verbeteringen in artikelen in het content-gedeelte van de kennisbank. De aanpassingen zijn gemaakt zodat contentmakers sneller oplossingen kunnen vinden voor veel gemaakte toegankelijkheidsfouten.


Diff:
diff --git a/docs/richtlijnen/content/tekstopmaak/emphasize-text.md b/docs/richtlijnen/content/tekstopmaak/emphasize-text.md
index 3d1e5ec2ea5..05d74e041ba 100644
--- a/docs/richtlijnen/content/tekstopmaak/emphasize-text.md
+++ b/docs/richtlijnen/content/tekstopmaak/emphasize-text.md
@@ -39,20 +39,6 @@ Als contentspecialist werk je meestal in een contentmanagementsysteem (CMS). Vee
 
 Door deze knoppen in een CMS te gebruiken, verander je de visuele opmaak én de onderliggende code.
 
-## ALL CAPS-tekst
-
-Probeer het gebruik van ‘ALL CAPS’ tot een minimum te beperken. We herkennen letters aan hun vorm en dan met name de bovenkant van een letter. Eigenlijk maakt je oog steeds sprongetjes aan de bovenkant van een woord. Bij all caps is het onderscheid in lettervorm minder duidelijk, dit vertraagt het lezen.
-
-Als je in de HTML all caps gebruikt lezen screenreaders dit vaak voor als losse letters. Geen probleem bij bijvoorbeeld FBI of NBA maar bij VOORNAAM of NIEUWS wordt dat wel heel vreemd.
-
-Daarnaast geeft het ook een gevoel van ‘schreeuwen’. Over het algemeen niet het gevoel dat je wilt overbrengen op de lezer toch… TOCH?!
-
-## Onderstrepen
-
-Onderstreep tekst niet. Bezoekers verwachten dat onderstreepte woorden in een zin links zijn waar ze op kunnen klikken.
-
-## Voorbeelden
-
 <Guideline appearance="do" title="vette tekst gebruiken om een deel van de zin extra belangrijk te maken.">
   <Canvas language="html">
     {() => (
@@ -94,6 +80,27 @@ Onderstreep tekst niet. Bezoekers verwachten dat onderstreepte woorden in een zi
   </Canvas>
 </Guideline>
 
+## ALL CAPS-tekst
+
+Probeer het gebruik van ‘ALL CAPS’, oftewel alléén hoofdletters, tot een minimum te beperken. We herkennen letters aan hun vorm en dan met name de bovenkant van een letter. Eigenlijk maakt je oog steeds sprongetjes aan de bovenkant van een woord. Bij all caps is het onderscheid in lettervorm minder duidelijk, dit vertraagt het lezen.
+
+<Guideline appearance="do" title="Beperkt gebruik maken van all caps">
+  <Canvas language="html">
+    {() => (
+      <>
+        <p>
+          Als je in de HTML all caps gebruikt lezen screenreaders dit vaak voor als losse letters. Geen probleem bij bijvoorbeeld FBI of NBA maar bij VOORNAAM of NIEUWS wordt dat wel heel vreemd.
+        </p>
+        <p>Daarnaast geeft het ook een gevoel van ‘schreeuwen’. Over het algemeen niet het gevoel dat je wilt overbrengen op de lezer toch… TOCH?!</p>
+      </>
+    )}
+  </Canvas>
+</Guideline>
+
+## Onderstrepen
+
+Onderstreep tekst niet. Bezoekers verwachten dat onderstreepte woorden in een zin links zijn waar ze op kunnen klikken.
+
 <Guideline appearance="dont" title="Tekst onderstrepen">
   <Canvas language="html">
     {() => (
diff --git a/docs/richtlijnen/content/tekstopmaak/headings.md b/docs/richtlijnen/content/tekstopmaak/headings.md
index 8246e216f35..2afd80d559d 100644
--- a/docs/richtlijnen/content/tekstopmaak/headings.md
+++ b/docs/richtlijnen/content/tekstopmaak/headings.md
@@ -28,19 +28,33 @@ import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/\_f
 
 # Koppen
 
-Zorg voor een duidelijke structuur van de tekst. Het structeren van de tekst op de pagina door gebruik te maken van koppen is heel belangrijk. Zo begrijpen bezoekers de inhoud en opbouw van de tekst. Daarnaast maakt het het navigeren op pagina's makkelijker.
+Koppen vormen de ruggengraat van de inhoud van een pagina. Aan de hand van koppen kan een gebruiker snel wegwijs worden in de inhoud van een webpagina. Zorg voor een duidelijke structuur van de tekst door gebruik te maken van koppen. Dit is heel belangrijk. Want zo begrijpen bezoekers de inhoud en opbouw van de tekst. Daarnaast maakt het het navigeren op pagina's makkelijker.
 
 ## Voor wie zijn toegankelijke koppen belangrijk?
 
-Koppen moeten goed beschrijven waar de tekst onder de kop over gaat. Dit is vooral handig voor mensen die blind of slechtziend zijn, dyslectisch zijn of een cognitieve beperking hebben.
+Schermlezergebruikers kunnen een lijst van koppen oproepen en daarmee snel naar een kopje navigeren. Ook ziende bezoekers scannen de inhoud van een pagina aan de hand van koppen. Daarom is het belangrijk dat een kopje de inhoud onder de kop goed beschrijft. De koppen zijn daarmee een soort inhoudsopgave van de webpagina. Dit helpt mensen om snel de informatie te vinden die ze zoeken.
 
-Een duidelijke koppenstructuur is heel belangrijk. Blinde mensen maken gebruik van schermlezers. Schermlezers kunnen een overzicht van alle koppen op een pagina laten zien. Dit helpt mensen om snel de informatie te vinden die ze zoeken. Ze kunnen ook makkelijk van de ene kop naar de andere gaan, door gebruik te maken van sneltoetsen.
+Bezoekers die gebruik maken van een schermlezer kunnen ook met sneltoetsen snel door de koppen op een pagina navigeren. Laat koppen daarom ook niet leeg. Ook lege koppen worden herkend door schermlezers. Maar omdat ze geen beschrijvende tekst bevatten scheppen ze vooral verwarring in plaats van verduidelijking.
+
+<Guideline appearance="dont" title="Koppen leeg laten">
+  <Canvas language="html" defaultExpandedCode>
+    {() => (
+      <>
+          <p>
+            Voorzie een kop altijd van een beschrijvende tekst. Zorg ervoor dat koppen niet leeg zijn. Bijvoorbeeld om extra witruimte te creëren.
+          </p>
+          <h2>&nbsp;</h2>
+          <p>Zo'n lege kop wordt namelijk wel herkend door hulpsoftware. Maar de gebruiker kan er vervolgens helemaal niks mee. Het schept met name verwarring.</p>
+      </>
+    )}
+  </Canvas>
+</Guideline>
 
 Ook ziende bezoekers maken gebruik van de koppenstructuur op een pagina. Doordat koppen van verschillende niveaus er anders uit zien, is het snel duidelijk hoe de informatie op de pagina gestructureerd is.
 
 ## Opmaak van koppen
 
-Een koptekst moet opgemaakt zijn als echte kop. Gebruik daarvoor de opties die het contentmanagementsysteem waarin je werkt je biedt. Vaak kun je in een uitklapbaar lijstje kiezen welke opmaak je tekst moet krijgen, bijvoorbeeld een paragraaf of kop van niveau 1 of 2.
+Een koptekst moet opgemaakt zijn als echte kop. Gebruik daarvoor de opties die het contentmanagementsysteem waarin je werkt je biedt. Vaak kun je in een uitklapbaar lijstje kiezen welke opmaak je tekst moet krijgen, bijvoorbeeld een paragraaf of kop van niveau 1 of 2. Gebruik een kop niet enkel en alleen om tekst groot en vet te maken.
 
 <Guideline appearance="dont" title="Tekst dikgedrukt en groter maken en een andere kleur geven zodat het op een kop lijkt.">
   <Canvas language="html">
@@ -57,6 +71,10 @@ Een koptekst moet opgemaakt zijn als echte kop. Gebruik daarvoor de opties die h
   </Canvas>
 </Guideline>
 
+## Inhoud van koppen
+
+Koppen moeten goed beschrijven waar de tekst onder de kop over gaat. Een duidelijke kop beschrijft de inhoud eronder, als kleine samenvatting. Dit is handig voor mensen die blind of slechtziend zijn, dyslectisch zijn of een cognitieve beperking hebben, en het helpt de scannende gebruikers om snel de informatie te vinden die ze zoeken.
+
 ## Kopniveaus
 
 Koppen kunnen verschillende niveaus hebben. Door de verschillende niveaus zorg je voor een goede volgorde en deel je de tekst overzichtelijk in.
diff --git a/docs/richtlijnen/content/tekstopmaak/summaries.md b/docs/richtlijnen/content/tekstopmaak/summaries.md
index 998b3734cc0..194c6df605d 100644
--- a/docs/richtlijnen/content/tekstopmaak/summaries.md
+++ b/docs/richtlijnen/content/tekstopmaak/summaries.md
@@ -29,6 +29,8 @@ Met opsommingen of lijsten kun je informatie ordenen. Als een opsomming goed opg
 
 ## Lijst-elementen
 
+Stel een lijst in als lijst-element via de contenteditor in je contentmanagementsysteem (CMS). Zo krijgt de lijst de juiste opmaak en de juiste HTML-elementen mee. De meeste CMS-en bieden hier een aparte optie voor aan. Maak niet zelf een lijst door het gebruik van bijvoorbeeld leestekens. Hulpsoftware herkent deze opmaak namelijk niet als een lijst.
+
 <Guideline appearance="dont" title="Zelf sterretjes, streepjes of nummers typen om een lijst te maken.">
   <Canvas language="html">
     {() => (
@@ -43,8 +45,6 @@ Met opsommingen of lijsten kun je informatie ordenen. Als een opsomming goed opg
           2. Dit is óók geen lijst<br/>
           3. Dit is óók geen lijst<br/>
           4. Dit is óók geen lijst<br/><br/>
-
-          Hulpsoftware herkent deze opmaak niet als een lijst. Stel een lijst in als lijst-element via de contenteditor in je contentmanagementsysteem (CMS). Zo krijgt de lijst de juiste opmaak en de juiste HTML-elementen mee.
         </p>
       </>
     )}
diff --git a/docs/richtlijnen/content/tekstopmaak/tables.md b/docs/richtlijnen/content/tekstopmaak/tables.md
index 0f91df6381b..98287760583 100644
--- a/docs/richtlijnen/content/tekstopmaak/tables.md
+++ b/docs/richtlijnen/content/tekstopmaak/tables.md
@@ -27,18 +27,12 @@ import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/\_f
 
 # Tabellen
 
-Met tabellen kun je data presenteren. Een tabel maak je toegankelijk zodat mensen die een schermlezer gebruiken bij elke cel kunnen achterhalen wat de bijbehorende koppen zijn. In het systeem waarmee je informatie op een site publiceert, kun je vaak aangeven of er alleen rijkoppen, alleen kolomkoppen of rijkoppen en kolomkoppen zijn. Dit geeft de relatie tussen kopcellen en gegevenscellen aan.
-
-## Begrijpelijke tabellen maken
-
-Tabellen zijn een goede manier om relaties tussen gegevens aan te geven. Maar een tabel kan ook snel erg complex worden. Probeer daarom altijd om tabellen overzichtelijk en begrijpelijk te maken, voor iedereen.
-
-- Gebruik een goede logische tabelstructuur.
-- Maak tabellen niet te ingewikkeld, dit maakt het moeilijker om tabellen toegankelijk te maken.
-- Bedenk goed hoe data zo eenvoudig mogelijk weergegeven kan worden. Splits bijvoorbeeld ingewikkelde tabellen op in eenvoudige tabellen.
+Met tabellen kun je data op een overzichtelijke manier presenteren. Ze zijn vooral geschikt om gestructureerde informatie te tonen, zoals cijferreeksen of vergelijkingen. Een toegankelijke tabel helpt ook mensen die een schermlezer gebruiken: zij moeten bij elke cel kunnen achterhalen wat de bijbehorende kolom- en/of rijkoppen zijn.
 
 ## Toegankelijke tabellen maken
 
+Zorg ervoor dat je in het systeem waarmee je publiceert aangeeft welke cellen kopcellen zijn. Vaak kun je instellen of er kolomkoppen, rijkoppen of beide aanwezig zijn. Schermlezers gebruiken deze informatie om bij elke cel de juiste kop voor te lezen, zodat de structuur en betekenis van de gegevens duidelijk blijven.
+
 <Guideline appearance="do" title="Markeer koppen als rijkoppen of kolomkoppen">
   <Canvas language="html">
     {() => (
@@ -65,114 +59,178 @@ Tabellen zijn een goede manier om relaties tussen gegevens aan te geven. Maar ee
   </Canvas>
 </Guideline>
 
-<Guideline appearance="dont" title="Tussenkopjes gebruiken in de tabel die niet als koppen zijn aangegeven.
-">
-<Canvas language="html">
-{() => (
-<>
-
-<table>
-<tr>
-<th>Datum</th>
-<th>Evenement</th>
-<th>Locatie</th>
-</tr>
-<tr><td colspan='3'><strong>Concerten in het voorjaar</strong></td></tr>
-<tr>
-<td>6 mei 2025</td>
-<td>Rolling Stones</td>
-<td>Westerpark, Amsterdam</td>
-</tr>
-<tr>
-<td>7 mei 2025</td>
-<td>Rolling Stones</td>
-<td>Westerpark, Amsterdam</td>
-</tr>
-<tr><td colspan='3'><strong>Concerten in het najaar</strong></td></tr>
-<tr>
-<td>10 oktober 2025</td>
-<td>Beatles</td>
-<td>Goffertpark, Nijmegen</td>
-</tr>
-<tr>
-<td>11 oktober 2025</td>
-<td>Beatles</td>
-<td>Goffertpark, Nijmegen</td>
-</tr>
-</table>
-</>
-)}
-</Canvas>
+<Guideline appearance="dont" title="Tussenkopjes gebruiken in de tabel die niet als koppen zijn aangegeven.">
+  <Canvas language="html">
+    {() => (
+      <>
+          <table>
+            <tr>
+              <th>Datum</th>
+              <th>Evenement</th>
+              <th>Locatie</th>
+            </tr>
+            <tr>
+              <td colspan='3'><strong>Concerten in het voorjaar</strong></td></tr>
+            <tr>
+              <td>6 mei 2025</td>
+              <td>Rolling Stones</td>
+              <td>Westerpark, Amsterdam</td>
+            </tr>
+            <tr>
+              <td>7 mei 2025</td>
+              <td>Rolling Stones</td>
+              <td>Westerpark, Amsterdam</td>
+            </tr>
+            <tr>
+              <td colspan='3'><strong>Concerten in het najaar</strong></td></tr>
+            <tr>
+              <td>10 oktober 2025</td>
+              <td>Beatles</td>
+              <td>Goffertpark, Nijmegen</td>
+            </tr>
+            <tr>
+              <td>11 oktober 2025</td>
+              <td>Beatles</td>
+              <td>Goffertpark, Nijmegen</td>
+            </tr>
+          </table>
+      </>
+    )}
+  </Canvas>
 </Guideline>
 
+## Begrijpelijke tabellen maken
+
+Tabellen zijn een goede manier om relaties tussen gegevens aan te geven. Maar een tabel kan ook snel erg complex worden. Probeer daarom altijd om tabellen overzichtelijk en begrijpelijk te maken, voor iedereen.
+
+- Gebruik een goede logische tabelstructuur.
+- Maak tabellen niet te ingewikkeld, dit maakt het moeilijker om tabellen toegankelijk te maken.
+- Bedenk goed hoe data zo eenvoudig mogelijk weergegeven kan worden. Splits bijvoorbeeld ingewikkelde tabellen op in eenvoudige tabellen.
+
 <Guideline appearance="do" title="Complexere tabellen opsplitsen">
-<Canvas language="html">
-{() => (
-<>
-
-<table>
-<caption>Concerten in het voorjaar</caption>
-<thead>
-<tr>
-<th>Datum</th>
-<th>Evenement</th>
-<th>Locatie</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>6 mei 2025</td>
-<td>Rolling Stones</td>
-<td>Westerpark, Amsterdam</td>
-</tr>
-<tr>
-<td>7 mei 2025</td>
-<td>Rolling Stones</td>
-<td>Westerpark, Amsterdam</td>
-</tr>
-</tbody>
-</table>
-
-<br/>
-<table>
-<caption>Concerten in het najaar</caption>
-<thead>
-<tr>
-<th>Datum</th>
-<th>Evenement</th>
-<th>Locatie</th>
-</tr>
-</thead>
-<tbody>
-<tr>
-<td>10 oktober 2025</td>
-<td>Beatles</td>
-<td>Goffertpark, Nijmegen</td>
-</tr>
-<tr>
-<td>11 oktober 2025</td>
-<td>Beatles</td>
-<td>Goffertpark, Nijmegen</td>
-</tr>
-</tbody>
-</table>
-</>
-)}
-</Canvas>
+  <Canvas language="html">
+    {() => (
+      <>
+        <table>
+          <caption>Concerten in het voorjaar</caption>
+          <thead>
+            <tr>
+              <th>Datum</th>
+              <th>Evenement</th>
+              <th>Locatie</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>6 mei 2025</td>
+              <td>Rolling Stones</td>
+              <td>Westerpark, Amsterdam</td>
+            </tr>
+            <tr>
+              <td>7 mei 2025</td>
+              <td>Rolling Stones</td>
+              <td>Westerpark, Amsterdam</td>
+            </tr>
+          </tbody>
+        </table>
+        <br/>
+        <table>
+          <caption>Concerten in het najaar</caption>
+          <thead>
+            <tr>
+              <th>Datum</th>
+              <th>Evenement</th>
+              <th>Locatie</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>10 oktober 2025</td>
+              <td>Beatles</td>
+              <td>Goffertpark, Nijmegen</td>
+            </tr>
+            <tr>
+              <td>11 oktober 2025</td>
+              <td>Beatles</td>
+              <td>Goffertpark, Nijmegen</td>
+            </tr>
+          </tbody>
+        </table>
+      </>
+    )}
+  </Canvas>
 </Guideline>
 
+## Doel van de tabel
+
 Gebruik tabellen niet alleen voor een mooiere opmaak. Met een tabel geef je namelijk een relatie aan tussen tabelcellen. Iemand die een schermlezer gebruikt, krijgt namelijk te horen dat er een tabel aanwezig is. En ook voor iedere cel in welke rij en in welke kolom de cel staat. Als er geen relatie is, is het gebruik van een tabel verwarrend.
 
 <Guideline appearance="dont" title="Een tabel gebruiken voor mooiere opmaak">
   <Canvas language="html">
     {() => (
       <>
-          <table>
+        <table>
+          <tr>
+            <td style={{inlineSize:'50%'}}><img src="https://raw.githubusercontent.com/nl-design-system/documentatie/assets/wcag_headings_in_voiceover.png"/></td>
+            <td>De koppenstructuur zoals die wordt weergegeven door VoiceOver op MacOS</td>
+          </tr>
+        </table>
+      </>
+    )}
+  </Canvas>
+</Guideline>
+
+## Inhoud van de tabel
+
+Zorg dat de inhoud van de tabel in een volgorde staat die óók begrijpelijk is voor een gebruiker met een schermlezer. De schermlezer leest een tabel voor per rij en van links naar rechts.
+
+<Guideline appearance="dont" title="Gerelateerde informatie in verschillende rijen plaatsen">
+  <Canvas language="html">
+    {() => (
+      <>
+        <table>
+          <tr>
+            <th>Naam</th>
+            <td>Jan</td>
+            <td>Piet</td>
+            <td>Kees</td>
+          </tr>
+          <tr>
+            <th>Functie</th>
+            <td>Docent Natuurkunde</td>
+            <td>Netwerkbeheerder</td>
+            <td>Docent Nederlands</td>
+          </tr>
+        </table>
+        <p>Een schermlezer zal in dit geval eerst alle namen voor gaan lezen en daarna pas de functies. Het verband tussen die twee is dan helemaal verdwenen</p>
+      </>
+    )}
+  </Canvas>
+</Guideline>
+
+<Guideline appearance="do" title="Gerelateerde informatie in kolommen plaatsen">
+  <Canvas language="html">
+    {() => (
+      <>
+        <table>
+          <tr>
+            <th>Naam</th>
+              <th>Functie</th>
+          </tr>
+          <tr>
+            <td>Jan</td>
+              <td>Docent Natuurkunde</td>
+          </tr>
             <tr>
-              <td style={{width:'50%'}}><img src="https://raw.githubusercontent.com/nl-design-system/documentatie/assets/wcag_headings_in_voiceover.png"/></td>
-              <td>De koppenstructuur zoals die wordt weergegeven door VoiceOver op MacOS</td>
-            </tr>
-          </table>
+            <td>Piet</td>
+              <td>Netwerkbeheerder</td>
+          </tr>
+            <tr>
+            <td>Kees</td>
+              <td>Docent Nederlands</td>
+          </tr>
+        </table>
+        <p>Een schermlezer zal in dit geval de naam en bijbehorende functie achter elkaar voorlezen.</p>
       </>
     )}
   </Canvas>
@@ -183,5 +241,6 @@ Gebruik tabellen niet alleen voor een mooiere opmaak. Met een tabel geef je name
 Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
 
 - [Succescriterium 1.3.1 Info en relaties](/wcag/1.3.1)
+- [Succescriterium 1.3.2 Betekenisvolle volgorde](/wcag/1.3.2)
 
 <FooterInfo />
diff --git a/docs/wcag/1.3.02.mdx b/docs/wcag/1.3.02.mdx
index 8530eb7f6f4..4e2e37e2a2b 100644
--- a/docs/wcag/1.3.02.mdx
+++ b/docs/wcag/1.3.02.mdx
@@ -51,6 +51,7 @@ In een lijst met evenementen staat de categorie en de datum van het evenement bo
 
 - Formulieren - Meerdere stappen: [Plaats de informatie over waar de gebruiker is in de stappen boven het formulier](https://nldesignsystem.nl/richtlijnen/formulieren/meerdere-stappen/plaatsing-voortgang).
 - Formulieren - Visueel ontwerp: [Zorg voor een logische volgorde van de informatie](https://nldesignsystem.nl/richtlijnen/formulieren/visueel-ontwerp/logische-volgorde).
+- Content - Tekstopmaak: [Tabellen](/richtlijnen/content/tekstopmaak/tabellen).
 
 ## Bron
 


Reviews:
user: login: RenateRoke
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-16T13:52:52Z
user: login: huijkman
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-20T07:04:26Z
user: login: huijkman
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-20T07:04:56Z
user: login: huijkman
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-20T07:05:35Z
user: login: RenateRoke
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-20T07:41:11Z
user: login: Robbert
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-20T10:24:51Z

Review comments:
diff_hunk: @@ -94,6 +80,27 @@ Onderstreep tekst niet. Bezoekers verwachten dat onderstreepte woorden in een zi
   </Canvas>
 </Guideline>
 
+## ALL CAPS-tekst
+
+Probeer het gebruik van ‘ALL CAPS’ tot een minimum te beperken. We herkennen letters aan hun vorm en dan met name de bovenkant van een letter. Eigenlijk maakt je oog steeds sprongetjes aan de bovenkant van een woord. Bij all caps is het onderscheid in lettervorm minder duidelijk, dit vertraagt het lezen.
path: docs/richtlijnen/content/tekstopmaak/emphasize-text.md
user: login: RenateRoke
body: moeten we hier ook nog even 'hoofdletters' benoemen, voor de mensen die de Engelse term niet kennen?
created_at: 2025-05-16T13:42:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -28,13 +28,25 @@ import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/\_f
 
 # Koppen
 
-Zorg voor een duidelijke structuur van de tekst. Het structeren van de tekst op de pagina door gebruik te maken van koppen is heel belangrijk. Zo begrijpen bezoekers de inhoud en opbouw van de tekst. Daarnaast maakt het het navigeren op pagina's makkelijker.
+Koppen vormen de ruggengraat van de inhoud van een pagina. Aan de hand van koppen kan een gebruiker snel wegwijs worden in de inhoud van een webpagina. Zorg voor een duidelijke structuur van de tekst door gebruik te maken van koppen. Dit is heel belangrijk. Want zo begrijpen bezoekers de inhoud en opbouw van de tekst. Daarnaast maakt het het navigeren op pagina's makkelijker.
 
 ## Voor wie zijn toegankelijke koppen belangrijk?
 
-Koppen moeten goed beschrijven waar de tekst onder de kop over gaat. Dit is vooral handig voor mensen die blind of slechtziend zijn, dyslectisch zijn of een cognitieve beperking hebben.
+Schermlezergebruikers kunnen een lijst van koppen oproepen en snel naar een kopje navigeren. Dan is het belangrijk dat een kopje de inhoud eronder goed beschrijft. De koppen zijn daarmee een soort inhoudsopgave van de webpagina. Dit helpt mensen om snel de informatie te vinden die ze zoeken. Ze kunnen ook makkelijk van de ene kop naar de andere gaan, door gebruik te maken van sneltoetsen. Laat koppen daarom ook nooit leeg. Ook lege koppen worden herkend door schermlezers. Maar omdat ze geen beschrijvende tekst bevatten scheppen ze vooral verwarring in plaats van verduidelijking.
path: docs/richtlijnen/content/tekstopmaak/headings.md
user: login: RenateRoke
body: ```suggestion
Schermlezergebruikers kunnen een lijst van koppen oproepen en daarmee snel naar een kopje navigeren. Ook ziende bezoekers scannen de inhoud van een pagina aan de hand van koppen. Daarom is het belangrijk dat een kopje de inhoud onder de kop goed beschrijft. De koppen zijn daarmee een soort inhoudsopgave van de webpagina. Dit helpt mensen om snel de informatie te vinden die ze zoeken. 

Bezoekers die gebruik maken van een schermlezer kunnen ook met sneltoetsen snel door de koppen op een pagina navigeren. Laat koppen daarom ook niet leeg. Ook lege koppen worden herkend door schermlezers. Maar omdat ze geen beschrijvende tekst bevatten scheppen ze vooral verwarring in plaats van verduidelijking.
```
created_at: 2025-05-16T13:47:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -28,13 +28,25 @@ import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/\_f
 
 # Koppen
 
-Zorg voor een duidelijke structuur van de tekst. Het structeren van de tekst op de pagina door gebruik te maken van koppen is heel belangrijk. Zo begrijpen bezoekers de inhoud en opbouw van de tekst. Daarnaast maakt het het navigeren op pagina's makkelijker.
+Koppen vormen de ruggengraat van de inhoud van een pagina. Aan de hand van koppen kan een gebruiker snel wegwijs worden in de inhoud van een webpagina. Zorg voor een duidelijke structuur van de tekst door gebruik te maken van koppen. Dit is heel belangrijk. Want zo begrijpen bezoekers de inhoud en opbouw van de tekst. Daarnaast maakt het het navigeren op pagina's makkelijker.
 
 ## Voor wie zijn toegankelijke koppen belangrijk?
 
-Koppen moeten goed beschrijven waar de tekst onder de kop over gaat. Dit is vooral handig voor mensen die blind of slechtziend zijn, dyslectisch zijn of een cognitieve beperking hebben.
+Schermlezergebruikers kunnen een lijst van koppen oproepen en snel naar een kopje navigeren. Dan is het belangrijk dat een kopje de inhoud eronder goed beschrijft. De koppen zijn daarmee een soort inhoudsopgave van de webpagina. Dit helpt mensen om snel de informatie te vinden die ze zoeken. Ze kunnen ook makkelijk van de ene kop naar de andere gaan, door gebruik te maken van sneltoetsen. Laat koppen daarom ook nooit leeg. Ook lege koppen worden herkend door schermlezers. Maar omdat ze geen beschrijvende tekst bevatten scheppen ze vooral verwarring in plaats van verduidelijking.
 
-Een duidelijke koppenstructuur is heel belangrijk. Blinde mensen maken gebruik van schermlezers. Schermlezers kunnen een overzicht van alle koppen op een pagina laten zien. Dit helpt mensen om snel de informatie te vinden die ze zoeken. Ze kunnen ook makkelijk van de ene kop naar de andere gaan, door gebruik te maken van sneltoetsen.
+<Guideline appearance="dont" title="Koppen leeg laten">
+  <Canvas language="html">
path: docs/richtlijnen/content/tekstopmaak/headings.md
user: login: RenateRoke
body: ```suggestion
  <Canvas language="html" defaultExpandedCode>
```
created_at: 2025-05-16T13:48:44Z
author_association: CONTRIBUTOR
diff_hunk: @@ -57,6 +69,10 @@ Een koptekst moet opgemaakt zijn als echte kop. Gebruik daarvoor de opties die h
   </Canvas>
 </Guideline>
 
+## Inhoud van koppen
+
+Koppen moeten goed beschrijven waar de tekst onder de kop over gaat. Dit is vooral handig voor mensen die blind of slechtziend zijn, dyslectisch zijn of een cognitieve beperking hebben. Gebruik een kopje daarom niet enkel en alleen om tekst groot en vet te maken. Maar beschrijf in de koppen de inhoud eronder, als kleine samenvatting. Dit helpt de scannende gebruikers om snel de informatie te vinden die ze zoeken.
path: docs/richtlijnen/content/tekstopmaak/headings.md
user: login: RenateRoke
body: 'Gebruik een kopje daarom niet enkel en alleen om tekst groot en vet te maken.' die snap ik niet in de context van de inhoud, ik denk dat de beschrijving hierboven begrijpelijker is.
created_at: 2025-05-16T13:50:25Z
author_association: CONTRIBUTOR
diff_hunk: @@ -27,18 +27,12 @@ import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/\_f
 
 # Tabellen
 
-Met tabellen kun je data presenteren. Een tabel maak je toegankelijk zodat mensen die een schermlezer gebruiken bij elke cel kunnen achterhalen wat de bijbehorende koppen zijn. In het systeem waarmee je informatie op een site publiceert, kun je vaak aangeven of er alleen rijkoppen, alleen kolomkoppen of rijkoppen en kolomkoppen zijn. Dit geeft de relatie tussen kopcellen en gegevenscellen aan.
-
-## Begrijpelijke tabellen maken
-
-Tabellen zijn een goede manier om relaties tussen gegevens aan te geven. Maar een tabel kan ook snel erg complex worden. Probeer daarom altijd om tabellen overzichtelijk en begrijpelijk te maken, voor iedereen.
-
-- Gebruik een goede logische tabelstructuur.
-- Maak tabellen niet te ingewikkeld, dit maakt het moeilijker om tabellen toegankelijk te maken.
-- Bedenk goed hoe data zo eenvoudig mogelijk weergegeven kan worden. Splits bijvoorbeeld ingewikkelde tabellen op in eenvoudige tabellen.
+Met tabellen kun je data presenteren op een overzichtelijke manier. Een tabel maak je toegankelijk zodat mensen die een schermlezer gebruiken bij elke cel kunnen achterhalen wat de bijbehorende koppen zijn. In het systeem waarmee je informatie op een site publiceert, kun je vaak aangeven of er alleen rijkoppen, alleen kolomkoppen of rijkoppen en kolomkoppen zijn. Dit geeft de relatie tussen kopcellen en gegevenscellen aan.
path: docs/richtlijnen/content/tekstopmaak/tables.md
user: login: RenateRoke
body: is dit niet dubbelop met de informatie hier onder?
created_at: 2025-05-16T13:51:49Z
author_association: CONTRIBUTOR
diff_hunk: @@ -27,18 +27,12 @@ import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/\_f
 
 # Tabellen
 
-Met tabellen kun je data presenteren. Een tabel maak je toegankelijk zodat mensen die een schermlezer gebruiken bij elke cel kunnen achterhalen wat de bijbehorende koppen zijn. In het systeem waarmee je informatie op een site publiceert, kun je vaak aangeven of er alleen rijkoppen, alleen kolomkoppen of rijkoppen en kolomkoppen zijn. Dit geeft de relatie tussen kopcellen en gegevenscellen aan.
-
-## Begrijpelijke tabellen maken
-
-Tabellen zijn een goede manier om relaties tussen gegevens aan te geven. Maar een tabel kan ook snel erg complex worden. Probeer daarom altijd om tabellen overzichtelijk en begrijpelijk te maken, voor iedereen.
-
-- Gebruik een goede logische tabelstructuur.
-- Maak tabellen niet te ingewikkeld, dit maakt het moeilijker om tabellen toegankelijk te maken.
-- Bedenk goed hoe data zo eenvoudig mogelijk weergegeven kan worden. Splits bijvoorbeeld ingewikkelde tabellen op in eenvoudige tabellen.
+Met tabellen kun je data presenteren op een overzichtelijke manier. Een tabel maak je toegankelijk zodat mensen die een schermlezer gebruiken bij elke cel kunnen achterhalen wat de bijbehorende koppen zijn. In het systeem waarmee je informatie op een site publiceert, kun je vaak aangeven of er alleen rijkoppen, alleen kolomkoppen of rijkoppen en kolomkoppen zijn. Dit geeft de relatie tussen kopcellen en gegevenscellen aan.
path: docs/richtlijnen/content/tekstopmaak/tables.md
user: login: huijkman
body: Ik heb de tekst in beide paragrafen aangepast zodat het geen dubbelingen meer bevat. Kun je checken of het wat jou betreft beter is zo?
created_at: 2025-05-20T07:04:26Z
author_association: CONTRIBUTOR
diff_hunk: @@ -57,6 +69,10 @@ Een koptekst moet opgemaakt zijn als echte kop. Gebruik daarvoor de opties die h
   </Canvas>
 </Guideline>
 
+## Inhoud van koppen
+
+Koppen moeten goed beschrijven waar de tekst onder de kop over gaat. Dit is vooral handig voor mensen die blind of slechtziend zijn, dyslectisch zijn of een cognitieve beperking hebben. Gebruik een kopje daarom niet enkel en alleen om tekst groot en vet te maken. Maar beschrijf in de koppen de inhoud eronder, als kleine samenvatting. Dit helpt de scannende gebruikers om snel de informatie te vinden die ze zoeken.
path: docs/richtlijnen/content/tekstopmaak/headings.md
user: login: huijkman
body: Tekst gewijzigd. Kun je checken of het wat jou betreft beter loopt, zo?
created_at: 2025-05-20T07:04:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -94,6 +80,27 @@ Onderstreep tekst niet. Bezoekers verwachten dat onderstreepte woorden in een zi
   </Canvas>
 </Guideline>
 
+## ALL CAPS-tekst
+
+Probeer het gebruik van ‘ALL CAPS’ tot een minimum te beperken. We herkennen letters aan hun vorm en dan met name de bovenkant van een letter. Eigenlijk maakt je oog steeds sprongetjes aan de bovenkant van een woord. Bij all caps is het onderscheid in lettervorm minder duidelijk, dit vertraagt het lezen.
path: docs/richtlijnen/content/tekstopmaak/emphasize-text.md
user: login: huijkman
body: Eens. Ik heb hier een kort tekstje voor toegevoegd. Beter zo?

created_at: 2025-05-20T07:05:35Z
author_association: CONTRIBUTOR

PR comments:
user: login: changeset-bot[bot]
created_at: 2025-05-16T12:25:51Z
body: ###  ⚠️  No Changeset found

Latest commit: 1dc388e7e134924b596f6e150a648536990fcce8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/nl-design-system/documentatie/new/feat/content-sollution-ready?filename=.changeset/cold-panthers-listen.md&value=---%0A%0A---%0A%0AFeat%2Fcontent%20sollution%20ready%0A)


author_association: NONE
user: login: vercel[bot]
created_at: 2025-05-16T12:25:52Z
body: [vc]: #QGAZnoNzzzWZbyqgNPmC9jn5wMe3yxcuTXWI8yNGFHU=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJkb2N1bWVudGF0aWUiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbmwtZGVzaWduLXN5c3RlbS9kb2N1bWVudGF0aWUvNGY0eVdaVHA2aUx4RmZGb2laaE01OHJrR0dDTiIsInByZXZpZXdVcmwiOiJkb2N1bWVudGF0aWUtZ2l0LWZlYXQtY29udGVudC1zb2xsdXRpb24tcmVhZHktbmwtZGVzaWduLXN5c3RlbS52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6ImRvY3VtZW50YXRpZS1naXQtZmVhdC1jb250ZW50LXNvbGx1dGlvbi1yZWFkeS1ubC1kZXNpZ24tc3lzdGVtLnZlcmNlbC5hcHAifSwicm9vdERpcmVjdG9yeSI6bnVsbH1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **documentatie** | ✅ Ready ([Inspect](https://vercel.com/nl-design-system/documentatie/4f4yWZTp6iLxFfFoiZhM58rkGGCN)) | [Visit Preview](https://documentatie-git-feat-content-sollution-ready-nl-design-system.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/documentatie-git-feat-content-sollution-ready-nl-design-system.vercel.app?via=pr-comment-feedback-link) | May 20, 2025 7:17am |


author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-05-20T07:04:15Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=nl-design-system_documentatie&pullRequest=2344) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=nl-design-system_documentatie&pullRequest=2344&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=nl-design-system_documentatie&pullRequest=2344&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=nl-design-system_documentatie&pullRequest=2344&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=nl-design-system_documentatie&pullRequest=2344&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=nl-design-system_documentatie&pullRequest=2344&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=nl-design-system_documentatie&pullRequest=2344)


author_association: NONE