From 5e134476f84b76a1c98af0f25d33fee34d3d4535 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=A2=D0=B5=D0=BF=D0=BB?= =?UTF-8?q?=D0=BE=D1=81=D1=82=D0=B0=D0=BD=D1=81=D0=BA=D0=B8=D0=B9?= Date: Fri, 31 Jan 2025 23:56:49 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D1=81=D1=82=D0=B0=D1=82=D1=8C=D1=8E=20=D0=BF?= =?UTF-8?q?=D1=80=D0=BE=20aria-=D1=80=D0=BE=D0=BB=D1=8C=20generic=20(#5650?= =?UTF-8?q?)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Добавляет статью про generic * Добавляет демку к статье про generic * Исправляет фирменный цвет в демке * Добавляет аватар и описание @teplostanski * Вносит синтаксические правки * быстренько подтягивает фирстиль * Меняет тайл демки, ставит ёлочки * Слегка форматирует, добавляет ссылки * Ещё раз изменяет тайтл демки --------- Co-authored-by: Svetlana Korobtseva Co-authored-by: Tatiana Fokina --- a11y/role-generic/demos/index.html | 103 +++++++++++++++++++++++++++++ a11y/role-generic/index.md | 68 +++++++++++++++++-- people/teplostanski/avatar.png | Bin 0 -> 1540 bytes people/teplostanski/index.md | 4 ++ 4 files changed, 169 insertions(+), 6 deletions(-) create mode 100644 a11y/role-generic/demos/index.html create mode 100644 people/teplostanski/avatar.png diff --git a/a11y/role-generic/demos/index.html b/a11y/role-generic/demos/index.html new file mode 100644 index 0000000000..e41589a28b --- /dev/null +++ b/a11y/role-generic/demos/index.html @@ -0,0 +1,103 @@ + + + + Две статьи с ролью и без роли generic — generic — Дока + + + + + + + + +
+
+

Обычная статья

+

+ Этот элемент article имеет + семантическое значение статьи. Скринридеры объявят его как «статья». +

+
+ +
+

Статья со сброшенной ролью

+

+ Этот элемент article с ролью + generic теряет своё семантическое значение. + Скринридеры не объявят его как статью. +

+
+
+ + diff --git a/a11y/role-generic/index.md b/a11y/role-generic/index.md index 5b75b09247..b8aa39e8b7 100644 --- a/a11y/role-generic/index.md +++ b/a11y/role-generic/index.md @@ -2,24 +2,80 @@ title: "`generic`" description: "Роль элемента-контейнера без имени и семантики." authors: - - doka-dog + - teplostanski related: - a11y/role-presentation-none - html/div - html/span tags: - doka - - placeholder --- ## Кратко -[Роль структуры документа](/a11y/aria-roles/#roli-struktury-dokumenta) из [WAI-ARIA](/a11y/aria-intro/#specifikaciya). Означает, что у элемента нет семантики и имени. +[ARIA-роль](/a11y/aria-roles/) `generic` — это базовая роль, которая не добавляет элементу специального семантического значения. Она автоматически присваивается элементам [`
`](/html/div/) и [``](/html/span/). Несмотря на то, что эта роль является базовой, она не очень популярна среди разработчиков и многие даже не знают о её существовании, так как обычно используют `
` и `` без явного указания роли. -В HTML роль `generic` есть у [`
`](/html/div/) и [``](/html/span/). +## Как понять + +Эта роль полезна, когда вы хотите: + +- создать элемент без особого семантического значения; +- сгруппировать контент, но не использовать семантические элементы или другие ARIA-роли; +- сбросить более специфичную роль до базовой. ## Как пишется -Роль `generic` нужна только браузерам, и её не рекомендуют явно задавать элементам. Если хотите сбросить встроенную роль тега, используйте [`presentation`](/a11y/role-presentation-none/) или `none`. +Роль можно добавить через атрибут `role`: + +```html +
+ Просто контейнер +
+``` + +Так как `generic` — это роль по умолчанию у `
` и ``. Лучше использовать эти HTML-элементы без явного указания роли: + +```html + +
+ Просто контейнер +
+``` + + + +### Взаимодействие с ARIA-атрибутами + +С ролью `generic` можно использовать глобальные ARIA-атрибуты. Чаще используются: + +- [`aria-hidden`](/a11y/aria-hidden/) +- [`aria-label`](/a11y/aria-label/) +- [`aria-describedby`](/a11y/aria-describedby/) +- [`aria-labelledby`](/a11y/aria-labelledby/) +- [`aria-details`](/a11y/aria-details/) +- [`aria-expanded`](/a11y/aria-expanded/) +- [`aria-controls`](/a11y/aria-controls/) +- [`aria-owns`](/a11y/aria-owns/) + +Важно помнить, что если вам нужно добавить ARIA-атрибуты, возможно, стоит использовать более специфичную роль или семантический HTML-элемент. + +## Подсказки + +💡 Используйте роль `generic` только когда действительно нужен элемент без семантического значения. В большинстве случаев лучше выбрать подходящий семантический тег или более конкретную ARIA-роль. + +💡 Если вам нужно сделать элемент интерактивным, используйте другие ARIA-роли, например, [`button`](/a11y/role-button/) или [`link`](/a11y/role-link/). + +## Особенности + +- Роль `generic` — это абстрактная роль, которая используется как основа для других ролей. +- Элементы с ролью `generic` не попадают в [дерево доступности](/a11y/a11y-tree/) как отдельные элементы, если у них нет других ARIA-атрибутов или ролей. +- В отличие от ролей `presentation` и `none`, роль `generic` не удаляет семантику дочерних элементов. +- Если элемент с ролью `generic` получает фокус, некоторые [скринридеры](/a11y/screenreaders/) могут объявить его как «группу» или «область». + +### Подводные камни + +**Неправильная замена**: роль `generic` не должна использоваться вместо ролей `presentation` или `none`, когда нужно удалить семантическое значение элемента. + +**Сложности с фокусом**: если элемент с ролью `generic` становится фокусируемым (например, через [`tabindex`](/html/tabindex/)), пользователи скринридеров могут быть дезориентированы из-за отсутствия чёткого семантического значения. -Элементам с ролью `generic` можно задавать все [глобальные ARIA-атрибуты](/a11y/aria-attrs/#globalnye-atributy), кроме атрибутов для имён и описаний. Это [`aria-label`](/a11y/aria-label/), [`aria-labelledby`](/a11y/aria-labelledby/), [`aria-roledescription`](/a11y/aria-roledescription/) и [`aria-brailleroledescription`](/a11y/aria-brailleroledescription/). +**Вложенность**: при вложении элементов с ролью `generic` друг в друга может возникнуть путаница в дереве доступности, особенно если используются ARIA-атрибуты. diff --git a/people/teplostanski/avatar.png b/people/teplostanski/avatar.png new file mode 100644 index 0000000000000000000000000000000000000000..42f8b2c9f95925fdf7547b11eeaf24944d183ae0 GIT binary patch literal 1540 zcmeAS@N?(olHy`uVBq!ia0y~yU|a&i985rwk9x)O>clujbtoMb+xgt&L%sC6GiJwruz$GzH{O;Zfo&tR&=Ecl0c!=vHw`Sb zSC-iI)+<3iuJuAle8t1h{b#z~4^Nf(Pf4~>t_D1K=%-?F`-eCPVwL!$ch$U|5h zLi>yhx3neqYeV_&^|fDFqWV5Z+CE&nhvtO_-0lHMNiF9klE1Pw#6M4^UlCQq%E0jd Z|IbMI;`z5arUOfN22WQ%mvv4FO#u6m^u_=H literal 0 HcmV?d00001 diff --git a/people/teplostanski/index.md b/people/teplostanski/index.md index d49d6a854e..a1815f6e55 100644 --- a/people/teplostanski/index.md +++ b/people/teplostanski/index.md @@ -1,6 +1,10 @@ --- name: 'Игорь Теплостанский' url: https://github.com/teplostanski +photo: avatar.png badges: - first-contribution-small --- + +Я frontend developer. В свободное время разрабатываю vite-plugin-pretty-module-classnames, Moonbloom Theme и многое другое. +Мне нравится создавать приложения и проекты с открытым исходным кодом.