<nav class="navbar navbar-default menu">
<form class="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>
<span class="sr-only">Zoeken</span>
</button>
</span>
</div>
</fieldset>
</form>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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 id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="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
<span class="badge">12</span>
</a>
</li>
<li>
<a href="#">
Wetgeving
</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default menu">
<form class="search">
<fieldset>
<legend class="sr-only">Zoekformulier</legend>
{{> '@input-group--button' searchGroupInput }}
</fieldset>
</form>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
{{> '@icon' icon='fa fa-bars' }}
<span class="sr-only">Ga naar menu</span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
{{#each menuItems }}
<li {{#if active }}class="active"{{/if}}>
<a href="#">
{{ label }}
{{#if count }}
{{> '@badge' }}
{{/if}}
</a>
</li>
{{/each}}
</ul>
</div>
</nav>
menuItems:
- label: Home
active: true
- label: Actueel
- label: Kalender
- label: Zelf aan de slag
- label: Documenten
- label: Over ons
count: 12
- label: Wetgeving
searchGroupInput:
id: button
modifier: default
label: Zoeken
ariaLabel: Zoeken
placeholder: Zoeken
iconOnly: true
type: submit
buttonRight: true
icon: fa fa-search
There are no notes for this item.
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.
<legend class="sr-only">Zoekformulier</legend>
Check that the title element describes the document.
<title>Default
Check that the link text combined with programmatically determined link context identifies the purpose of the link.
<a href="#">
Home
</a>
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">
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="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>
<span class="sr-only">Zoeken</span>
</button>
</span>
</div>
</fieldset>
</form>
Check that descriptive labels or instructions (including for required fields) are provided for user input in this form.
<form class="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>
<span class="sr-only">Zoeken</span>
</button>
</span>
</div>
</fieldset>
</form>
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="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>
<span class="sr-only">Zoeken</span>
</button>
</span>
</div>
</fieldset>
</form>
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="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>
<span class="sr-only">Zoeken</span>
</button>
</span>
</div>
</fieldset>
</form>