Geldige child-elementen in lijstelementen

Hoe los je dit op?

Gebruik alleen <li>-, <script>- of <template>-elementen als directe children van <ul> of <ol>:

<ul>
  <li>Eerste item</li>
  <li>Tweede item</li>
  <li>Derde item</li>
</ul>

<ul>
  <li>Eerste item</li>
  <script>/* ... */</script>
  <template>...</template>
</ul>

Als je extra opmaak rond lijstitems nodig hebt, plaats die dan binnenin het <li>-element:

<ul>
  <div>
    <li>Eerste item</li>
  </div>
</ul>

<ul>
  <li>
    <div>Eerste item</div>
  </li>
</ul>

Waarom is dit belangrijk?

Screen readers kondigen het aantal items in een lijst aan om gebruikers te helpen navigeren. Ongeldige child-elementen verstoren de lijststructuur, waardoor screen readers onjuiste informatie rapporteren of items volledig overslaan.