View HTML markup
<div role="alert" class="form-errors">
<h2>Errors</h2>
<ul>
<li><a href="#text-err">
text error message
</a>
</li>
<li><a href="#textarea-err">
textarea error message
</a>
</li>
<li><a href="#select-err">
select error message
</a>
</li>
<li><a href="#checkbox-err">
checkbox error message
</a>
</li>
<li><a href="#radio-err">
radio error message
</a>
</li>
<li><a href="#file-err">
file error message
</a>
</li>
</ul>
</div>
<form method="POST" novalidate action="?/">
<div>
<label for="text-err" id="text-err">Text
</label>
<span id="text-err-error" aria-live="off">
text error message
</span>
<input dir="auto" value="" autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" id="text-err" type="text">
</div>
<div>
<label for="textarea-err" id="textarea-err">Textarea
</label>
<span id="textarea-err-error" aria-live="off">
textarea error message
</span>
<textarea name="textarea-err" id="textarea-err" aria-describedby="textarea-err-error" aria-invalid="true"></textarea>
</div>
<div>
<label for="select-err" id="select-err">Select
</label>
<span id="select-err-error" aria-live="off">
select error message
</span>
<div><select id="select-err">
<option label="A" value="a">
</option>
<option label="B" value="b">
</option>
</select>
</div>
</div>
<fieldset id="checkbox-err" name="checkbox-err">
<legend id="checkbox-err">Checkboxes
</legend>
<span id="checkbox-err-error" aria-live="off">
checkbox error message
</span>
<div><input dir="auto" value="a" id="checkbox-err-a" name="checkbox-err" type="checkbox" checked aria-describedby="hint">
<label for="checkbox-err-a" id="checkbox-err-a">A
</label>
<span id="checkbox-err-a-hint">
hint
</span>
</div>
<div><input dir="auto" value="b" id="checkbox-err-b" name="checkbox-err" type="checkbox" aria-describedby="hint">
<label for="checkbox-err-b" id="checkbox-err-b">B
</label>
<span id="checkbox-err-b-hint">
hint
</span>
</div>
</fieldset>
<fieldset id="radio-err" name="radio-err">
<legend id="radio-err">Radios
</legend>
<span id="radio-err-error" aria-live="off">
radio error message
</span>
<div><input dir="auto" value="a" id="radio-err-a" name="radio-err" type="radio" checked aria-describedby="hint">
<label for="radio-err-a" id="radio-err-a">A
</label>
<span id="radio-err-a-hint">
hint
</span>
</div>
<div><input dir="auto" value="b" id="radio-err-b" name="radio-err" type="radio" aria-describedby="hint">
<label for="radio-err-b" id="radio-err-b">B
</label>
<span id="radio-err-b-hint">
hint
</span>
</div>
</fieldset>
<div>
<label for="file-err" id="file-err">File
</label>
<span id="file-err-error" aria-live="off">
file error message
</span>
<input dir="auto" is="ds-input-file" id="file-err" type="file">
</div>
<button type="button">
Submit
</button>
</form>