Error and success message handling

[rianrietveld]

For form feedback handling the following is needed:

If a field is required it should be indicated as such. Visually by adding a * and indicating at the top of the form (first step) what the * means.

Add in the inputs a required attribute if it's required. If you want to keep your own error messages and not the default HTML5 ones, add novalidate to the form element, like
<form action="#" novalidate>

And for the inputs :
<input type="text" name="companyName" aria-describedby="" class="text-field-input" required>

Adding the error messages on top of the page dynamically is good. For blind people, to get this info, we can add an aria-live attribute to all dynamically generated info.
Like:
<p class="error" aria-live="polite" style="display: none;">Wil je je bedrijfsnaam alsjeblieft invullen?</p>
<p class="success" aria-live="polite" style="display: none;">Je aanmelding is compleet!</p>

<div  id="address" aria-live="polite"  style="display: none;">
    <p> We hebben je adres gevonden. Klopt dit niet? Pas dan hierboven je postcode en huisnummer aan. </p>
[...]
</div>

Then as the display:none; toggles, the change of content is announced.

If extra info is given as text on an image, give the image a good alt attibute. And remove the role presentation.
Like:
<img id="tegoedje" alt="Bijna goed." src="/img/bijnagoed.fe91f414.svg">

Maybe this needs to be styled yet, but the address is very very small.