Rijksoverheid
Lijsten
Voor het toevoegen en tonen van opsommingen en lijsten in de stijl van de Rijksoverheid.
Overzicht van de verschillende lijstweergaven:
Ongenummerde lijst (ul)
Te gebruiken als de lijstelementen niet genummerd dienen te zijn, denk hierbij aan lijsten met bulletpoints of lijsten met navigatie-elementen.
Ongenummerde lijst
visueel voorbeeld:
- Unordered list item 1
- Unordered list item 2
Html-voorbeeld:
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2</li>
</ul>
Ongenummerde lijst met geneste elementen
visueel voorbeeld:
- Unordered list item 1
- Unordered list item 2
- Subitem 1 list item 2
- Subitem 2 list item 2
- Unordered list item 3
Html-voorbeeld:
<ul>
<li>Unordered list item 1</li>
<li>Unordered list item 2
<ul>
<li>Subitem 1 list item 2</li>
<li>Subitem 2 list item 2</li>
</ul>
</li>
<li>Unordered list item 3</li>
</ul>
Ongenummerde lijst met navigatie-elementen
visueel voorbeeld:
Html-voorbeeld:
<nav aria-label="Navigatie voorbeeldlijst">
<ul>
<li>unordered list item 1</li>
</ul>
</nav>
Ongenummerde lijst met navigatie-elementen - externe link
visueel voorbeeld:
Html-voorbeeld:
<nav aria-label="Navigatie voorbeeldlijst">
<ul>
<li><a href="" rel="external">Outgoing link</a></li>
</ul>
</nav>
Genummerde lijst (ol)
Te gebruiken als de lijstelementen genummerd dienen te zijn.
Genummerde lijst
Visueel voorbeeld:
- Ordered list item 1
- Ordered list item 2
Html-voorbeeld:
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
Genummerde lijst met hoofdletters
Visueel voorbeeld:
- Ordered list item 1
- Ordered list item 2
Html-voorbeeld:
<ol type="A">
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
Genummerde lijst met kleine letters
Visueel voorbeeld:
- Ordered list item 1
- Ordered list item 2
Html-voorbeeld:
<ol type="a">
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
Genummerde lijst met Romeinse cijfers in hoofdletters
Visueel voorbeeld:
- Ordered list item 1
- Ordered list item 2
Html-voorbeeld:
<ol type="I">
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
Genummerde lijst met Romeinse cijfers in kleine letters
Visueel voorbeeld:
- Ordered list item 1
- Ordered list item 2
Html-voorbeeld:
<ol type="i">
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
Genummerde lijst met geneste elementen
visueel voorbeeld:
- Ordered list item 1
- Ordered list item 2
- Subitem 1 list item 2
- Subitem 2 list item 2
- Ordered list item 3
Html-voorbeeld:
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2
<ol>
<li>Subitem 1 list item 2</li>
<li>Subitem 2 list item 2</li>
</ol>
</li>
<li>Ordered list item 3</li>
</ol>
Genummerde lijst met navigatie-elementen
visueel voorbeeld:
Html-voorbeeld:
<nav aria-label="Navigatie voorbeeldlijst">
<ol>
<li>Ordered list item 1</li>
<li>Ordered list item 2</li>
</ol>
</nav>
Genummerde lijst met navigatie-elementen - externe link
visueel voorbeeld:
Html-voorbeeld:
<nav aria-label="Navigatie voorbeeldlijst">
<ol>
<li><a href="" rel="external">Outgoing link</a></li>
</ol>
</nav>
Lijst met navigatie-elementen
Het correct weergeven van navigatie-elementen.
Voeg de nav toe rondom de lijst met navigatie-elementen, hierdoor wordt aangegeven
dat het om navigatie-elementen gaat, wat qua semantiek relevant is maar bijvoorbeeld ook
gebruikt kan worden door screenreaders.
Om de gebruiker te laten weten dat een link naar een externe site leidt, is het nodig om een
class outgoing-link toe te voegen aan de link.
visueel voorbeeld:
Html-voorbeeld:
<nav aria-label="Navigatie voorbeeldlijst">
<ul>
<li><a href="">Internal link</a></li>
<li><a href="" rel="external">Outgoing link</a></li>
</ul>
</nav>
Gecombineerde lijstweergave
Het is mogelijk om binnen een lijst gebruik te maken van verschillende lijstweergaven. Bijvoorbeeld een lijst met daarbinnen een genummerde lijst of een lijst met navigatie-elementen
Ongenummerde lijst met daarbinnen genummerde lijstelementen
visueel voorbeeld:
- Unordered list item
- Unordered list item
- Ordered subitem
- Ordered subitem
Html-voorbeeld:
<ul>
<li>Unordered list item</li>
<li>Unordered list item
<ol>
<li>Ordered subitem</li>
<li>Ordered subitem</li>
</ol>
</li>
</ul>
genummerde lijst met daarbinnen ongenummerde lijstelementen
Visueel voorbeeld:
- Unordered list item
- Unordered list item
- Ordered subitem
- Ordered subitem
Html-voorbeeld:
<ol>
<li>Unordered list item</li>
<li>Unordered list item
<ul>
<li>Ordered subitem</li>
<li>Ordered subitem</li>
</ul>
</li>
</ol>
Genummerde lijst met daarbinnen lijstelementen met links
Visueel-voorbeeld:
- Unordered list item
- Unordered list item
- Unordered list item
Html-voorbeeld:
<ol>
<li>Unordered list item</li>
<li>Unordered list item
<nav aria-label="Navigatie voorbeeldlijst">
<ul>
<li><a href="">Internal link</a></li>
<li><a href="" rel="external">Outgoing link</a></li>
</ul>
</nav>
</li>
<li>Unordered list item</li>
</ol>
Ongenummerde lijst met daarbinnen lijstelementen met links
Visueel voorbeeld:
- Unordered list item
- Unordered list item
- Unordered list item
Html-voorbeeld:
<ul>
<li>Unordered list item</li>
<li>Unordered list item
<nav aria-label="Navigatie voorbeeldlijst">
<ul>
<li><a href="">Internal link</a></li>
<li><a href="" rel="external">Outgoing link</a></li>
</ul>
</nav>
</li>
<li>Unordered list item</li>
</ul>