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-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>

        </form>
    </div>

    <nav class="dso-navbar dso-menu">
        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle" 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 class="dso-navbar-collapse dso-collapse">
            <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>

        </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">
      {{> '@anchor' label="Inloggen" icon="login-icon" }}
    </div>
    {{> '@logo' }}
    <form class="dso-search">
      {{render '@searchbar' searchbarContext merge=true }}
    </form>
  </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: '#'

There are no notes for this item.

ERROR: WCAG2AA.Principle3.Guideline3_2.3_2_2.H32.2

This form does not contain a submit button, which creates issues for those who cannot submit the form using the keyboard. Submit buttons are INPUT elements with type attribute "submit" or "image", or BUTTON elements with type "submit" or omitted/invalid.

<form class="dso-search"> <div class="dso-searchbar 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> </form>

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-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> </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-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> </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-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> </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-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> </form>