DSO Component Library

# Aanvragen

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

    <main>
        <div class="row">
            <div class="col-xs-12">
                <h1>Project | Aanbouw Kerkstraat 1</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-md-9">
                <div class="dso-accordion">
                    <div class="dso-accordion-section dso-success">
                        <div class="dso-section-handle">
                            <a href="#">Woning</a>
                        </div>
                    </div>
                    <div class="dso-accordion-section dso-success">
                        <div class="dso-section-handle">
                            <a href="#">Bouwwerkzaamheden</a>
                        </div>
                    </div>
                    <div class="dso-accordion-section dso-warning dso-open">
                        <div class="dso-section-handle">
                            <a href="#">Plaats van het bouwwerk</a>
                        </div>
                        <div class="dso-section-body">
                            <form>
                                <fieldset class="dso-form-fields">
                                    <legend class="sr-only">Aanvraagformulier</legend>
                                    <fieldset>
                                        <legend>Plaats van het bouwwerk</legend>
                                        <div class="form-group dso-input dso-input-text">
                                            <div class="dso-label-container">
                                                <label for="omgevingsvergunningPostcode" class="control-label">
                                Postcode
                              </label>
                                            </div>
                                            <div class="dso-field-container">
                                                <input type="text" id="omgevingsvergunningPostcode" class="form-control" size="8" />
                                            </div>
                                        </div>
                                        <div class="form-group dso-input dso-input-text">
                                            <div class="dso-label-container">
                                                <label for="omgevingsvergunningHuisnummer" class="control-label">
                                Huisnummer
                              </label>
                                            </div>
                                            <div class="dso-field-container">
                                                <input type="text" id="omgevingsvergunningHuisnummer" class="form-control" size="8" />
                                            </div>
                                        </div>
                                        <div class="form-group dso-input dso-input-text">
                                            <div class="dso-label-container">
                                                <label for="omgevingsvergunningToevoeging" class="control-label">
                                Huisnummer toevoeging
                              </label>
                                            </div>
                                            <div class="dso-field-container">
                                                <input type="text" id="omgevingsvergunningToevoeging" class="form-control" size="8" />
                                            </div>
                                        </div>
                                        <div class="form-group dso-input dso-input-text">
                                            <div class="dso-label-container">
                                                <label for="omgevingsvergunningStraatnaam" class="control-label">
                                Straatnaam
                              </label>
                                            </div>
                                            <div class="dso-field-container">
                                                <input type="text" id="omgevingsvergunningStraatnaam" class="form-control" />
                                            </div>
                                        </div>
                                        <div class="form-group dso-input dso-input-text">
                                            <div class="dso-label-container">
                                                <label for="omgevingsvergunningWoonplaats" class="control-label">
                                Woonplaats
                              </label>
                                            </div>
                                            <div class="dso-field-container">
                                                <input type="text" id="omgevingsvergunningWoonplaats" class="form-control" />
                                            </div>
                                        </div>
                                    </fieldset>
                                </fieldset>
                                <div class="dso-form-buttons">
                                    <button type="submit" class="btn btn-primary">
                      Volgende stap
                    </button>
                                </div>
                            </form>

                        </div>
                    </div>
                    <div class="dso-accordion-section">
                        <div class="dso-section-handle">
                            <a href="#">Afmetingen van het bouwwerk</a>
                        </div>
                    </div>
                    <div class="dso-accordion-section">
                        <div class="dso-section-handle">
                            <a href="#">Extra werkzaamheden</a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="well progress-block" data-spy="affix" data-offset-top="245" data-offset-bottom="444">
                    <h2>Aanvraag voorbereiden</h2>
                    <p>Omgevingsvergunning</p>
                    <ul class="list-unstyled">
                        <li class="active">
                            <span class="fa fa-angle-right" aria-hidden="true"></span> Omschrijving project <span class="fa fa-check" aria-hidden="true"></span>

                        </li>
                        <li class="active">
                            <span class="fa fa-angle-right" aria-hidden="true"></span> Aanvrager <span class="fa fa-check" aria-hidden="true"></span>

                        </li>
                        <li>
                            <span class="fa fa-angle-right" aria-hidden="true"></span> Locatie
                        </li>
                        <li>
                            <span class="fa fa-angle-right" aria-hidden="true"></span> Werkzaamheden
                        </li>
                        <li>
                            <span class="fa fa-angle-right" aria-hidden="true"></span> Bijlagen
                        </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>

`
`

    {{render '@header' }}

    <main>
      <div class="row">
        <div class="col-xs-12">
          <h1>Project | Aanbouw Kerkstraat 1</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-md-9">
          {{#accordion}}
            {{#each sections }}
              {{#accordionSection title }}
                {{> '@form' }}
              {{/accordionSection}}
            {{/each}}
          {{/accordion}}
        </div>

        <div class="col-md-3">
          {{#progressBlock }}
            <h2>Aanvraag voorbereiden</h2>
            <p>Omgevingsvergunning</p>
            <ul class="list-unstyled">
              <li class="active">
                {{> '@icon' icon="fa fa-angle-right"}} Omschrijving project {{> '@icon' icon="fa fa-check"}}
              </li>
              <li class="active">
                {{> '@icon' icon="fa fa-angle-right"}} Aanvrager {{> '@icon' icon="fa fa-check"}}
              </li>
              <li>
                {{> '@icon' icon="fa fa-angle-right"}} Locatie
              </li>
              <li>
                {{> '@icon' icon="fa fa-angle-right"}} Werkzaamheden
              </li>
              <li>
                {{> '@icon' icon="fa fa-angle-right"}} Bijlagen
              </li>
            </ul>
          {{/progressBlock}}
        </div>
      </div>
    </main>

    {{render '@footer' }}

`
`

    breadcrumbs:
      crumbs:
        - label: Home
          url: '#'
        - label: Aanvragen
          url: '#'
        - label: Mijn project
          url: '#'
        - label: Aanvraag voorbereiden
          url: '#'
    sections:
      - title: Woning
        id: panel1
        state: success
      - title: Bouwwerkzaamheden
        id: panel2
        state: success
      - title: Plaats van het bouwwerk
        id: panel3
        state: warning
        open: true
        formLegend: Aanvraagformulier
        fieldsets:
          - legend: Plaats van het bouwwerk
            groups:
              - id: omgevingsvergunningPostcode
                inputType: input
                type: text
                label: Postcode
                size: 8
              - id: omgevingsvergunningHuisnummer
                inputType: input
                type: text
                label: Huisnummer
                size: 8
              - id: omgevingsvergunningToevoeging
                inputType: input
                type: text
                label: Huisnummer toevoeging
                size: 8
              - id: omgevingsvergunningStraatnaam
                inputType: input
                type: text
                label: Straatnaam
              - id: omgevingsvergunningWoonplaats
                inputType: input
                type: text
                label: Woonplaats
        submitButton:
          type: submit
          modifier: primary
          label: Volgende stap
      - title: Afmetingen van het bouwwerk
        id: panel4
      - title: Extra werkzaamheden
        id: panel5

`

- Handle: @aanvragen
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\06-examples\aanvragen.hbs
- References (4): @header, @form, @icon, @footer

De aside met de checklist schuift mee met het formulier, tot hij een punt bereikt waar hij niet verder MAG scrollen. We gebruiken hiervoor Bootstrap Affix, en deze heeft twee values - `data-offset-top` en `data-offset-bottom` - die bepalen waar het kantelpunt zit. Let op de uitlijning die te zien is in onderstaande instructie afbeelding.

Zie ook

- Bootstrap Affix
- Positioneren van de affix, links in het menu onder het kopje “Documentation”

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