DSO Component Library

# Checken

Ready

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

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

    <main>
        <h1>Checken</h1>
        <div class="row">
            <div class="col-md-9">
                <nav class="wizard">
                    <ul class="nav nav-wizard">
                        <li class="done">
                            <a href="#">Locatie bepalen</a>
                        </li>
                        <li class="done">
                            <a href="#">Werkzaamheden kiezen</a>
                        </li>
                        <li class="active">
                            <span>Werkzaamheden checken</span>
                        </li>
                        <li class="disabled">
                            <span>Resultaat</span>
                        </li>
                    </ul>
                </nav>
                <h2>Werkzaamheden checken</h2>
                <h3>Bouwen van een dakkapel</h3>

                <div class="dso-select single">
                    <fieldset>
                        <legend>Waar wordt de dakkapel gebouwd?</legend>
                        <div class="option">
                            <input type="radio" id="radio_dakkapel_positie_0" name="dakkapel_positie" value="1" />
                            <label for="radio_dakkapel_positie_0">
                Zijkant
              </label>
                        </div>
                        <div class="option">
                            <input type="radio" id="radio_dakkapel_positie_1" name="dakkapel_positie" value="2" />
                            <label for="radio_dakkapel_positie_1">
                Voorkant
              </label>
                        </div>
                        <div class="option">
                            <input type="radio" id="radio_dakkapel_positie_2" name="dakkapel_positie" value="3" />
                            <label for="radio_dakkapel_positie_2">
                Achterkant
              </label>
                        </div>
                        <div class="option">
                            <input type="radio" id="radio_dakkapel_positie_3" name="dakkapel_positie" value="4" disabled />
                            <label for="radio_dakkapel_positie_3">
                Onderkant
              </label>
                        </div>
                    </fieldset>
                </div>

                <h2 class="streamer">U heeft geen vergunning nodig</h2>
                <div class="highlight-box">
                    <h3>Toelichting: Vergunningvrij onder voorbehoud</h3>
                    <p>Het Informatiehuis Bouw kent, op basis van de huidige gebruikerswensen, vier Informatieproducten, namelijk het Opleverdossier, de Bouwregelgeving, de Vergunningvrije bouwwerken en een Digitaliseringshulp.</p>
                    <p>Het Opleverdossier (zie voor een nadere omschrijving van de informatieproducten de volgende paragrafen) is de, door gebruikers gewenste, centrale registratie waarin alle informatie over een bouwwerk is opgenomen. Het gaat hierbij om de
                        tekeningen, berekeningen en de resultaten van de kwaliteitsborging (zoals toetsen en inspecties).</p>
                    <p>De Bouwregelgeving is een database met alle bouwregelgeving in Nederland, die op zodanige wijze moet zijn ingericht en ontsloten dat die voldoet aan de eisen van de Omgevingswet (3B’s), en daarmee bruikbaar is in de ontwerp- en toetsingsfase
                        van ieder bouwwerk.</p>
                    <p>Het derde informatieproduct zijn de Vergunningvrije bouwwerken, hierin zijn opgenomen de (bekende) bouwwerken die vergunningvrij, maar niet regelvrij, zijn gerealiseerd. Het vierde en vooralsnog laatste informatieproduct is de Digitaliseringshulp,
                        een service voor het centraal en gestandaardiseerd digitaliseren van documenten.</p>

                </div>
            </div>
            <div class="col-md-3">
                <div class="well progress-block" data-spy="affix" data-offset-top="245" data-offset-bottom="444">
                    <h2>Tussenresultaten</h2>
                    <ul class="list-unstyled">
                        <li>
                            Bouwen van een dakkapel
                        </li>
                    </ul>

                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="row">
            <div class="col-sm-6 col-md-3">
                <h2>Service</h2>
                <ul>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Sitemap</a></li>
                    <li><a href="#">Help</a></li>
                </ul>
            </div>
            <div class="col-sm-6 col-md-3">
                <h2>Over deze site</h2>
                <ul>
                    <li><a href="#">Copyright</a></li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Cookies</a></li>
                    <li><a href="#">Toegankelijkheid</a></li>
                </ul>
            </div>
            <div class="col-sm-6 col-md-3">
                <h2>Volg ons ook op</h2>
                <ul>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">LinkedIn</a></li>
                </ul>
            </div>
        </div>
    </footer>

`
`

    {{> '@header' }}

    <main>
      <h1>Checken</h1>
      <div class="row">
        <div class="col-md-9">
          {{> '@wizard' wizard }}

          <h2>Werkzaamheden checken</h2>
          <h3>Bouwen van een dakkapel</h3>

          {{render '@dso-select' }}
          {{render '@streamer' }}
          {{render '@highlight-box' }}
        </div>
        <div class="col-md-3">
          {{#progressBlock }}
            <h2>Tussenresultaten</h2>
            <ul class="list-unstyled">
              {{#each checkSideListItems }}
                <li>
                  {{ this }}
                </li>
              {{/each}}
            </ul>
          {{/progressBlock}}
        </div>
      </div>
    </main>

    {{render '@footer' }}

`
`

    menu:
      menuItems:
        - label: Home
        - label: Actueel
        - label: Raadplegen
        - label: Checken
          active: true
        - label: Aanvragen
    breadcrumbs:
      crumbs:
        - label: Home
          url: '#'
        - label: Checken
          url: '#'
    wizard:
      items:
        - label: Locatie bepalen
          state: done
        - label: Werkzaamheden kiezen
          state: done
        - label: Werkzaamheden checken
          state: active
        - label: Resultaat
          state: disabled
    checkSideListItems:
      - Bouwen van een dakkapel

`

- Handle: @checken
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\06-examples\checken.hbs
- References (6): @header, @wizard, @dso-select, @streamer, @highlight-box, @footer

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