<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="dso-navbar dso-menu">
<form class="dso-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> Zoeken
</button>
</span>
</div>
</fieldset>
</form>
<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>
<a href="#">Aanvragen</a>
</li>
<li>
<a href="#">Mijn project</a>
</li>
<li class="active">Aanvraag voorbereiden</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>
{{> '@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' }}
menu:
menuItems:
- label: Home
- label: Actueel
- label: Raadplegen
- label: Checken
- label: Aanvragen
active: true
searchGroupInput:
id: button
ariaLabel: Zoeken
placeholder: Zoeken
type: submit
buttonRight: true
icon: fa fa-search
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
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”
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="dso-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>
Zoeken
</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="dso-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>
Zoeken
</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="dso-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>
Zoeken
</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="dso-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>
Zoeken
</button>
</span>
</div>
</fieldset>
</form>