Текстові мітки полів форм
дивитись опис критерію у WCAG 2.1
Варіант форми без підказок
<!-- Відповідний код HTML виглядає так -->
<form action="submit/" method="POST" id="form-1">
<div class="input-container">
<div><label for="input-email-1">Електронна пошта:</label></div>
<div><input type="email" id="input-email-1" name="email" aria-required="true" required></div>
</div>
<div class="input-container">
<div><label for="input-phone-1">Номер телефона:</label></div>
<div><input type="tel" id="input-phone-1" name="phone" aria-required="false"></div>
</div>
<button id="btn-submit-form-1">Надіслати</button>
</form>
Варіант форми з візуально відображеними підказками ("aria-describedby")
<!-- Відповідний код HTML виглядає так -->
<form action="submit/" method="POST" id="form-2">
<div class="input-container">
<div><label for="input-email-2">Електронна пошта:</label></div>
<div><input type="email" id="input-email-2" name="email" aria-required="true" aria-describedby="email-tip-2" required></div>
<div id="email-tip-2">Введіть свою дійсну електронну пошту.</div>
</div>
<div class="input-container">
<div><label for="input-phone-2">Номер телефона:</label></div>
<div><input type="tel" id="input-phone-2" name="phone" aria-required="false" aria-describedby="phone-tip-2"></div>
<div id="phone-tip-2">Введіть свій дійсний номер телефона.</div>
</div>
<button id="btn-submit-form-2">Надіслати</button>
</form>
Варіант форми з візуально прихованими підказками ("aria-describedby")
<!-- Відповідний код HTML виглядає так -->
<style>
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
</style>
<form action="submit/" method="POST" id="form-3">
<div class="input-container">
<div><label for="input-email-3">Електронна пошта:</label></div>
<div><input type="email" id="input-email-3" name="email" aria-required="true" aria-describedby="email-tip-3" required></div>
<div class="sr-only" id="email-tip-3">Введіть свою дійсну електронну пошту.</div>
</div>
<div class="input-container">
<div><label for="input-phone-3">Номер телефона:</label></div>
<div><input type="tel" id="input-phone-3" name="phone" aria-required="false" aria-describedby="phone-tip-3"></div>
<div class="sr-only" id="phone-tip-3">Введіть свій дійсний номер телефона.</div>
</div>
<button id="btn-submit-form-3">Надіслати</button>
</form>
Рекомендована поведінка форми, коли виникає помилка