Skip to content

Commit

Permalink
Добавляет статью про aria-роль generic (#5650)
Browse files Browse the repository at this point in the history
* Добавляет статью про generic

* Добавляет демку к статье про generic

* Исправляет фирменный цвет в демке

* Добавляет аватар и описание @teplostanski

* Вносит синтаксические правки

* быстренько подтягивает фирстиль

* Меняет тайл демки, ставит ёлочки

* Слегка форматирует, добавляет ссылки

* Ещё раз изменяет тайтл демки

---------

Co-authored-by: Svetlana Korobtseva <wizzzjer@gmail.com>
Co-authored-by: Tatiana Fokina <fokinatatian@gmail.com>
  • Loading branch information
3 people authored Jan 31, 2025
1 parent b1b34c2 commit 5e13447
Show file tree
Hide file tree
Showing 4 changed files with 169 additions and 6 deletions.
103 changes: 103 additions & 0 deletions a11y/role-generic/demos/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Две статьи с ролью и без роли generic — generic — Дока</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
<style>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
color-scheme: dark;
}

body {
min-height: 100vh;
padding: 50px;
display: flex;
align-items: center;
justify-content: center;
background-color: #18191C;
font-family: "Roboto", sans-serif;
}

h2 {
margin-bottom: 17px;
font-weight: 500;
font-size: 1.375rem;
}

.container {
width: 80%;
max-width: 800px;
display: flex;
flex-direction: column;
gap: 20px;
}

.block {
padding: 55px 40px;
background-color: #FFFFFF;
color: #000000;
}

.block--semantic {
background-color: #10F3AF;
}

.block__title {
margin-bottom: 10px;
font-weight: 500;
}

.block__content {
font-size: 16px;
line-height: 1.5;
}

.highlight {
color: #FFFFFF;
border-radius: 3px;
padding: 0 3px;
background-color: #000000;
}

@media (max-width: 768px) {
body {
padding: 30px;
}

.container {
width: 100%;
}
}
</style>
</head>
<body>
<section class="container">
<article class="block block--semantic">
<h2 class="block__title">Обычная статья</h2>
<p class="block__content">
Этот элемент <span class="highlight">article</span> имеет
семантическое значение статьи. Скринридеры объявят его как «статья».
</p>
</article>

<article class="block" role="generic">
<h2 class="block__title">Статья со сброшенной ролью</h2>
<p class="block__content">
Этот элемент <span class="highlight">article</span> с ролью
<span class="highlight">generic</span> теряет своё семантическое значение.
Скринридеры не объявят его как статью.
</p>
</article>
</section>
</body>
</html>
68 changes: 62 additions & 6 deletions a11y/role-generic/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` — это базовая роль, которая не добавляет элементу специального семантического значения. Она автоматически присваивается элементам [`<div>`](/html/div/) и [`<span>`](/html/span/). Несмотря на то, что эта роль является базовой, она не очень популярна среди разработчиков и многие даже не знают о её существовании, так как обычно используют `<div>` и `<span>` без явного указания роли.

В HTML роль `generic` есть у [`<div>`](/html/div/) и [`<span>`](/html/span/).
## Как понять

Эта роль полезна, когда вы хотите:

- создать элемент без особого семантического значения;
- сгруппировать контент, но не использовать семантические элементы или другие ARIA-роли;
- сбросить более специфичную роль до базовой.

## Как пишется

Роль `generic` нужна только браузерам, и её не рекомендуют явно задавать элементам. Если хотите сбросить встроенную роль тега, используйте [`presentation`](/a11y/role-presentation-none/) или `none`.
Роль можно добавить через атрибут `role`:

```html
<div role="generic">
Просто контейнер
</div>
```

Так как `generic` — это роль по умолчанию у `<div>` и `<span>`. Лучше использовать эти HTML-элементы без явного указания роли:

```html
<!-- Так лучше -->
<div>
Просто контейнер
</div>
```

<iframe title="Две статьи с ролью и без роли generic" src="demos/" height="650"></iframe>

### Взаимодействие с 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-атрибуты.
Binary file added people/teplostanski/avatar.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions people/teplostanski/index.md
Original file line number Diff line number Diff line change
@@ -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 и многое другое.
Мне нравится создавать приложения и проекты с открытым исходным кодом.

0 comments on commit 5e13447

Please sign in to comment.