diff --git a/a11y/role-form/demos/custom-form-landmark/index.html b/a11y/role-form/demos/custom-form-landmark/index.html new file mode 100644 index 0000000000..14cdecd575 --- /dev/null +++ b/a11y/role-form/demos/custom-form-landmark/index.html @@ -0,0 +1,178 @@ + + + + Кастомный ориентир формы — form — Дока + + + + + + + + +
+
+ + +
+ + +
+ + + + diff --git a/a11y/role-form/demos/native-form-landmark/index.html b/a11y/role-form/demos/native-form-landmark/index.html new file mode 100644 index 0000000000..7b9056d70c --- /dev/null +++ b/a11y/role-form/demos/native-form-landmark/index.html @@ -0,0 +1,154 @@ + + + + Обычная форма — form — Дока + + + + + + + + +
+
+ + +
+ + +
+ + + + diff --git a/a11y/role-form/index.md b/a11y/role-form/index.md index d03955bc7b..ca76736196 100644 --- a/a11y/role-form/index.md +++ b/a11y/role-form/index.md @@ -2,47 +2,127 @@ title: "`form`" description: "Как добавить ориентир формы на страницу с помощью WAI-ARIA." authors: - - doka-dog -keywords: - - доступность - - ARIA - - ARIA-роль - - ориентир - - форма + - tatianafokina related: - - a11y/aria-intro - - a11y/aria-roles + - html/search + - a11y/role-search - html/form tags: - doka - - placeholder --- ## Кратко -[ARIA-роль ориентира](/a11y/aria-roles/#roli-orientirov), которая определяет область формы. Форма обычно состоит из нескольких полей с подписями и кнопки для отправки введённых данных на сервер. +[ARIA-роль ориентира](/a11y/aria-roles/#roli-orientirov), которая определяет область формы. Обычно формы состоят из нескольких полей и кнопки для отправки данных, которые ввёл пользователь. -Роль `form` есть у [`
`](/html/form/) по умолчанию. +Роль `form` есть у тега [``](/html/form/) по умолчанию. ## Пример ```html -
-

Подписка на новостную рассылку

+
- - + +
``` + + ## Как пишется -Добавьте к тегу `role="form"`. Лучше, чтобы это были семантически нейтральные [`
`](/html/div/) или [``](/html/span/). Одно из [правил использования ARIA](/a11y/aria-intro/#pravila-ispolzovaniya) — не перезаписывать роли без необходимости. +В первую очередь используйте HTML-элемент `` вместо явной роли `form`. У тега `` хорошая поддержка браузерами и [скринридерами](/a11y/screenreaders/). Также `` по умолчанию поддерживает необходимые атрибуты и слушает событие `onSubmit`: вам не нужно писать лишний JavaScript. + +```html + + + + + +``` + + + +Явная роль понадобится в редких случаях: при вёрстке сложных кастомных компонентов или для поддержки _очень_ старыми браузерами. + +Когда задаёте `role="form"` явно, лучше добавлять роль к семантически нейтральным [`
`](/html/div/) и [``](/html/span/). Одно из [правил использования ARIA](/a11y/aria-intro/#pravila-ispolzovaniya) — не перезаписывать роли без необходимости. + +Не забудьте _по-настоящему_ отправить данные из формы. Роль, в отличие от HTML-элемента, не умеет слушать браузерные события. Для этого, например, можете использовать метод [`fetch()`](/js/fetch/): + +```js +const form = document.getElementById('custom-form') +const input = document.getElementById('email') +const button = document.getElementById('subscribe-btn') + +function submitForm(event) { + event.preventDefault() + const email = input.value.trim() + + if (email) { + fetch('/subscribe', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ email }) + }) + } +} + +button.addEventListener('click', submitForm) +``` -В большинстве случаев лучше использовать `
` вместо роли `form`. К тому же, тег лучше поддерживают вспомогательные технологии. + -Для элемента с ролью `form` можно использовать все [глобальные ARIA-атрибуты](/a11y/aria-attrs/#globalnye-atributy). +Пользователи скринридеров смогут быстро переместиться к форме только в случае, если форма имеет [доступное имя](/a11y/accessible-names-and-descs/). Есть два способа задать имя форме: через атрибуты [`aria-label`](/a11y/aria-label/) и [`aria-labelledby`](/a11y/aria-labelledby/). + +Имя из `aria-label` скрыто визуально, но доступно для пользователей вспомогательных технологий и поисковых роботов. + +```html + + +
+``` + +С помощью `aria-labelledby` с формой связывают видимое имя, например, из заголовка. + +```html +
+

+ Подписка на рассылку +

+ +
+``` + +Хотя на странице может быть несколько форм, они не обязательно должны быть ориентирами. Старайтесь называть только формы для ввода важных данных, к которым пользователям скринридеров было бы полезно и необходимо быстро перемещаться. + +Для элемента с ролью `form` можно использовать и другие [глобальные ARIA-атрибуты](/a11y/aria-attrs/#globalnye-atributy). ## Как понять -Роль `form` создаёт ориентир на странице. Это значит, что пользователи скринридеров могут быстро переместиться к этой части страницы с помощью горячих клавиш или через меню ориентирами. +Роль `form` создаёт _ориентир_ на странице. Это значит, что пользователи скринридеров могут быстро переместиться к этой части страницы с помощью горячих клавиш или через меню со всеми ориентирами. + +## Подсказки + +💡 Для области с полем для поиска по сайту используйте [``](/html/search/) или `role="search"`. + +💡 Без `aria-label` или `aria-labelledby` форма не станет ориентиром для пользователей скринридеров.