<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-animate 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>
<button type="submit">Zoeken</button>
</form>
</div>
<nav class="dso-navbar">
<div class="dso-navbar-header">
<button type="button" class="dso-navbar-toggle">
<span class="fas fa-bars" aria-hidden="true"></span>
<span class="sr-only">Ga naar menu</span>
</button>
</div>
<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>
</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="fas fa-angle-right" aria-hidden="true"></span>
Omschrijving project <span class="fas fa-check" aria-hidden="true"></span>
</li>
<li class="active">
<span class="fas fa-angle-right" aria-hidden="true"></span>
Aanvrager <span class="fas fa-check" aria-hidden="true"></span>
</li>
<li>
<span class="fas fa-angle-right" aria-hidden="true"></span>
Locatie
</li>
<li>
<span class="fas fa-angle-right" aria-hidden="true"></span>
Werkzaamheden
</li>
<li>
<span class="fas 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="fas fa-angle-right"}} Omschrijving project {{> '@icon' icon="fas fa-check"}}
</li>
<li class="active">
{{> '@icon' icon="fas fa-angle-right"}} Aanvrager {{> '@icon' icon="fas fa-check"}}
</li>
<li>
{{> '@icon' icon="fas fa-angle-right"}} Locatie
</li>
<li>
{{> '@icon' icon="fas fa-angle-right"}} Werkzaamheden
</li>
<li>
{{> '@icon' icon="fas 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
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.
<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-animate 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>
<button type="submit">Zoeken</button>
</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-animate 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>
<button type="submit">Zoeken</button>
</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-animate 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>
<button type="submit">Zoeken</button>
</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-animate 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>
<button type="submit">Zoeken</button>
</form>