DSO Component Library

Wizard 

<nav class="wizard">
    <ul class="nav nav-wizard">
        <li class="done">
            <a href="#">Locatie bepalen</a>
        </li>
        <li class="active">
            <span>Werkzaamheden kiezen</span>
        </li>
        <li class="next">
            <a href="#">Werkzaamheden checken</a>
        </li>
        <li class="disabled">
            <span>Resultaat</span>
        </li>
    </ul>
</nav>
 
<nav class="wizard">
  <ul class="nav nav-wizard">
    {{#each items }}
      <li class="{{ state }}">
        {{#if (in 'active disabled' state) }}
          <span>{{ label }}</span>
        {{else}}
          <a href="#">{{ label }}</a>
        {{/if}}
      </li>
    {{/each}}
  </ul>
</nav>
 
items:
  - label: Locatie bepalen
    state: done
  - label: Werkzaamheden kiezen
    state: active
  - label: Werkzaamheden checken
    state: next
  - label: Resultaat
    state: disabled

There are no notes for this item.

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<a href="#">Locatie bepalen</a>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Default

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

<a href="#">Locatie bepalen</a>