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 0000000000..42f8b2c9f9 Binary files /dev/null and b/people/teplostanski/avatar.png differ 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 и многое другое. +Мне нравится создавать приложения и проекты с открытым исходным кодом.