form

Кога се използва

Около съдържателен формуляр — за регистрация, плащане, контакт, редактиране на профил — когато той заслужава навигация като ориентир. Подобно на region, елементът <form> се повишава до ориентир за формуляр САМО когато има достъпно наименование (aria-label или aria-labelledby).

Достъпното наименование на формуляра трябва да описва предназначението му: „Формуляр за контакт”, „Регистрация”, „Редактиране на профил”. Избягвайте общото „Формуляр” — то е излишно в съчетание с обявяването на ролята.

Ако формулярът е за търсене, вместо него трябва да се използва <search> (или role="search") — ориентирът за търсене е по-специфичен.

Единичен полезен имейл бюлетин за абониране или поле за „търсене” не изискват ориентир за формуляр. Той се запазва за формуляри с три или повече значими полета за въвеждане и ясна цел.

Кога да се добавя наименование

Винаги — без наименование <form> не се превръща в ориентир. При наличие на няколко формуляра на страница (формуляр за коментар И абониране за бюлетин), всеки ТРЯБВА да има отделно наименование.

Предпочита се aria-labelledby, сочещ към видим заглавен елемент, пред aria-label, тъй като свързва видимото заглавие с обявяването на ориентира.

Чести грешки

• <form> без aria-label / aria-labelledby. Не е ориентир. Потребителите не могат да прескачат до него чрез навигация по ориентири.
• aria-label="Form" — излишно.
• Използване на <form role="search"> заедно с aria-label="Search". Ориентирът за търсене вече покрива случая; ролята form би създала конфликт.
• Формуляри за влизане и регистрация, наречени и двата „Вход” — неразличими в менюто с ориентири.
• Обвиване на единично поле за въвеждане в <form> и обозначаването му като ориентир за формуляр. Прекомерно приложение; ориентирът не добавя стойност.

Пример

<form aria-labelledby="contactHeading">
  <h2 id="contactHeading">Contact us</h2>
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <button type="submit">Send</button>
</form>