DSO Component Library

Header 

<header>
    <div class="logo-bar">
        <div class="login">
            <span class="fa fa-user" aria-hidden="true"></span> Inloggen
        </div>
        <img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" /> </div>

    <nav class="navbar navbar-default menu">
        <form class="search">
            <fieldset>
                <legend class="sr-only">Zoekformulier</legend>
                <div class="input-group default">
                    <input type="text" class="form-control" aria-label="Zoeken" placeholder="Zoeken" />
                    <span class="input-group-btn">
            <button type="submit" class="btn btn-default" >
                <span class="fa fa-search" aria-hidden="true"></span>
                    <span class="sr-only">Zoeken</span>
                    </button>
                    </span>
                </div>
            </fieldset>
        </form>
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="fa fa-bars" aria-hidden="true"></span>
      <span class="sr-only">Ga naar menu</span>
    </button>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="#">
            Home
          </a>
                </li>
                <li>
                    <a href="#">
            Actueel
          </a>
                </li>
                <li>
                    <a href="#">
            Raadplegen
          </a>
                </li>
                <li class="active">
                    <a href="#">
            Checken
          </a>
                </li>
                <li>
                    <a href="#">
            Aanvragen
          </a>
                </li>
                <li>
                    <a href="#">
            Over ons
              <span class="badge">12</span>
          </a>
                </li>
                <li>
                    <a href="#">
            Wetgeving
          </a>
                </li>
            </ul>
        </div>
    </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">
      {{> '@icon' icon="fa fa-user" }}
      Inloggen
    </div>
    {{> '@logo' }}
  </div>

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

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

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.

<div class="login"> <span class="fa fa-user" aria-hidden="true"></span> Inloggen </div>

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="#"> Home </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" class="form-control" aria-label="Zoeken" 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="search"> <fieldset> <legend class="sr-only">Zoekformulier</legend> <div class="input-group default"> <input type="text" class="form-control" aria-label="Zoeken" placeholder="Zoeken"> <span class="input-group-btn"> <button type="submit" class="btn btn-default"> <span class="fa fa-search" aria-hidden="true"></span> <span class="sr-only">Zoeken</span> </button> </span> </div> </fieldset> </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="search"> <fieldset> <legend class="sr-only">Zoekformulier</legend> <div class="input-group default"> <input type="text" class="form-control" aria-label="Zoeken" placeholder="Zoeken"> <span class="input-group-btn"> <button type="submit" class="btn btn-default"> <span class="fa fa-search" aria-hidden="true"></span> <span class="sr-only">Zoeken</span> </button> </span> </div> </fieldset> </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="search"> <fieldset> <legend class="sr-only">Zoekformulier</legend> <div class="input-group default"> <input type="text" class="form-control" aria-label="Zoeken" placeholder="Zoeken"> <span class="input-group-btn"> <button type="submit" class="btn btn-default"> <span class="fa fa-search" aria-hidden="true"></span> <span class="sr-only">Zoeken</span> </button> </span> </div> </fieldset> </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="search"> <fieldset> <legend class="sr-only">Zoekformulier</legend> <div class="input-group default"> <input type="text" class="form-control" aria-label="Zoeken" placeholder="Zoeken"> <span class="input-group-btn"> <button type="submit" class="btn btn-default"> <span class="fa fa-search" aria-hidden="true"></span> <span class="sr-only">Zoeken</span> </button> </span> </div> </fieldset> </form>