DSO Component Library

Header 

<header>
    <div class="logo-bar">
        <div class="login">
            <a href="">
                <span class="login-icon" aria-hidden="true"></span>
                Inloggen
            </a>
        </div>
        <img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" />
        <form class="dso-search">
            <div class="dso-searchbar dso-animate  dso-open">
                <input type="text" id="searchbar" class="form-control" placeholder="Zoeken" />
                <span class="dso-searchbar-icon" aria-hidden="true"></span>
                <label for="searchbar">Zoeken</label>
                <button type="button">Open zoeken</button>
            </div>
            <button type="submit">Zoeken</button>
        </form>

    </div>

    <nav class="dso-navbar">
        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle">
                <span class="fas fa-bars" aria-hidden="true"></span>
                <span class="sr-only">Ga naar menu</span>
            </button>
        </div>
        <ul class="dso-nav dso-nav-main">
            <li class="dso-active">
                <a href="#">
                    Home
                </a>
            </li>
            <li>
                <a href="#">
                    Actueel
                </a>
            </li>
            <li>
                <a href="#">
                    Kalender
                </a>
            </li>
            <li>
                <a href="#">
                    Zelf aan de slag
                </a>
            </li>
            <li>
                <a href="#">
                    Documenten
                </a>
            </li>
            <li>
                <a href="#">
                    Over ons
                </a>
            </li>
            <li>
                <a href="#">
                    Wetgeving
                </a>
            </li>
        </ul>

    </nav>

    <ol class="breadcrumb">
        <li>
            <a href="#">Home</a>
        </li>
        <li class="active">Checken</li>
    </ol>
</header>
 
<header>
  <div class="logo-bar">
    <div class="login">
      {{> '@anchor' label="Inloggen" icon="login-icon" }}
    </div>
    {{> '@logo' }}
    {{render '@searchbar' searchbarContext merge=true }}
  </div>

  {{render '@menu' menu merge=true }}

  {{> '@breadcrumbs' breadcrumbs }}
</header>
 
searchbarContext:
  open: true
menu:
  menuItems:
    - label: Home
    - label: Actueel
    - label: Raadplegen
    - label: Checken
      active: true
    - label: Aanvragen
breadcrumbs:
  crumbs:
    - label: Home
      url: '#'
    - label: Checken
      url: '#'

Toevoeging van de class class .dso-open op de .dso-navbar opent het mobiele navigatiemenu. Dit dient scriptend te gebeuren.

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=""> <span class="login-icon" aria-hidden="true"></span> Inloggen </a>

WARNING: WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.Placeholder

Anchor element found with link content, but no href, ID or name attribute has been supplied.

<a href=""> <span class="login-icon" aria-hidden="true"></span> Inloggen </a>

NOTICE: WCAG2AA.Principle1.Guideline1_1.1_1_1.G73,G74

If this image cannot be fully described in a short text alternative, ensure a long text alternative is also available, such as in the body text or through a link.

<img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo">

NOTICE: WCAG2AA.Principle1.Guideline1_1.1_1_1.G94.Image

Ensure that the img element's alt text serves the same purpose and presents the same information as the image.

<img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo">

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=""> <span class="login-icon" aria-hidden="true"></span> Inloggen </a>

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<input type="text" id="searchbar" class="form-control" placeholder="Zoeken">

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_1.G83,G84,G85

If an input error is automatically detected in this form, check that the item(s) in error are identified and the error(s) are described to the user in text.

<form class="dso-search"> <div class="dso-searchbar dso-animate dso-open"> <input type="text" id="searchbar" class="form-control" placeholder="Zoeken"> <span class="dso-searchbar-icon" aria-hidden="true"></span> <label for="searchbar">Zoeken</label> <button type="button">Open zoeken</button> </div> <button type="submit">Zoeken</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_2.G131,G89,G184,H90

Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.

<form class="dso-search"> <div class="dso-searchbar dso-animate dso-open"> <input type="text" id="searchbar" class="form-control" placeholder="Zoeken"> <span class="dso-searchbar-icon" aria-hidden="true"></span> <label for="searchbar">Zoeken</label> <button type="button">Open zoeken</button> </div> <button type="submit">Zoeken</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_3.G177

Check that this form provides suggested corrections to errors in user input, unless it would jeopardize the security or purpose of the content.

<form class="dso-search"> <div class="dso-searchbar dso-animate dso-open"> <input type="text" id="searchbar" class="form-control" placeholder="Zoeken"> <span class="dso-searchbar-icon" aria-hidden="true"></span> <label for="searchbar">Zoeken</label> <button type="button">Open zoeken</button> </div> <button type="submit">Zoeken</button> </form>

NOTICE: WCAG2AA.Principle3.Guideline3_3.3_3_4.G98,G99,G155,G164,G168.LegalForms

If this form would bind a user to a financial or legal commitment, modify/delete user-controllable data, or submit test responses, ensure that submissions are either reversible, checked for input errors, and/or confirmed by the user.

<form class="dso-search"> <div class="dso-searchbar dso-animate dso-open"> <input type="text" id="searchbar" class="form-control" placeholder="Zoeken"> <span class="dso-searchbar-icon" aria-hidden="true"></span> <label for="searchbar">Zoeken</label> <button type="button">Open zoeken</button> </div> <button type="submit">Zoeken</button> </form>