Notice: Undefined offset: 3 in /var/www/accessibilitytips/accessibility-tips.org.ua/wcag/examples/fields-and-labels/index.php on line 59

Текстові мітки полів форм

дивитись опис критерію у 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>
Введіть свою дійсну електронну пошту.
Введіть свій дійсний номер телефона.

Рекомендована поведінка форми, коли виникає помилка

Дивитись за посиланням.