From 1122a1a19368d953c9d2dbae30358845f16fc377 Mon Sep 17 00:00:00 2001 From: TatianaFokina Date: Thu, 14 Aug 2025 23:57:39 +0400 Subject: [PATCH 1/2] =?UTF-8?q?=D0=94=D0=BE=D0=BF=D0=B8=D1=81=D1=8B=D0=B2?= =?UTF-8?q?=D0=B0=D0=B5=D1=82=20=D0=B4=D0=BE=D0=BA=D1=83=20=D0=B8=20=D0=B4?= =?UTF-8?q?=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F=D0=B5=D1=82=20=D0=B4=D0=B5?= =?UTF-8?q?=D0=BC=D0=BA=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demos/custom-form-landmark/index.html | 178 ++++++++++++++++++ .../demos/native-form-landmark/index.html | 154 +++++++++++++++ a11y/role-form/index.md | 120 ++++++++++-- 3 files changed, 432 insertions(+), 20 deletions(-) create mode 100644 a11y/role-form/demos/custom-form-landmark/index.html create mode 100644 a11y/role-form/demos/native-form-landmark/index.html 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..548e8ada1d 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` форма не станет ориентиром для пользователей скринридеров. From bc52a8b9c64bc9d1538c9f98f2734ff3fdc6ce0f Mon Sep 17 00:00:00 2001 From: Tatiana Fokina Date: Fri, 15 Aug 2025 00:08:11 +0400 Subject: [PATCH 2/2] =?UTF-8?q?=D0=98=D0=B7=D0=BC=D0=B5=D0=BD=D1=8F=D0=B5?= =?UTF-8?q?=D1=82=20=D0=B2=D1=8B=D1=81=D0=BE=D1=82=D1=83=20=D0=B4=D0=B5?= =?UTF-8?q?=D0=BC=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/role-form/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/a11y/role-form/index.md b/a11y/role-form/index.md index 548e8ada1d..ca76736196 100644 --- a/a11y/role-form/index.md +++ b/a11y/role-form/index.md @@ -36,7 +36,7 @@ tags:
``` - + ## Как пишется @@ -56,7 +56,7 @@ tags: ``` - + Явная роль понадобится в редких случаях: при вёрстке сложных кастомных компонентов или для поддержки _очень_ старыми браузерами. @@ -85,7 +85,7 @@ function submitForm(event) { button.addEventListener('click', submitForm) ``` - + Пользователи скринридеров смогут быстро переместиться к форме только в случае, если форма имеет [доступное имя](/a11y/accessible-names-and-descs/). Есть два способа задать имя форме: через атрибуты [`aria-label`](/a11y/aria-label/) и [`aria-labelledby`](/a11y/aria-labelledby/).