files/ru/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

---
title: Использование атрибута aria-describedby
slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
tags:
  - доступность
translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute
---
<h3 id="Описание">Описание</h3>

<p><span class="seoSummary">Атрибут <a class="external" href="https://www.w3.org/TR/wai-aria/#aria-describedby" rel="external"><code>aria-describedby</code></a> используется для указания ID элементов, описывающих объект. Он используется для установления отношений между элементами управления или группами и текстом, описывающим их. Это очень похоже на <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a>: лэйбл описывает сущность объекта, в то время как описание предоставляет дополнительную информацию, которая может понадобиться пользователю.</span></p>

<p>Атрибут <code>aria-describedby</code> используется не только для элементов форм; он, также, используется для связывания статического текста с элементами управления, группами элементов, панелями, областями, которые имеют заголовок, определениями, и др. В разделе {{ anch("Examples") }} ниже приведено больше информации о том как использовать атрибут в этих случаях.</p>

<p>Этот атрибут может использоваться с любым типичным элементом HTML-форм; он не ограничивается элементами, которым назначена  ARIA <code>role</code> .</p>

<h3 id="Значение">Значение</h3>

<p>разделённый пробелами список ID элементов</p>

<h3 id="Возможные_последствия_для_пользовательских_агентов_и_вспомогательных_технологий">Возможные последствия для пользовательских агентов и вспомогательных технологий</h3>


<div class="note"><strong>Примечание:</strong> Мнения о том, как вспомогательная технология должна справляться с этой техникой, могут отличаться. Приведённая выше информация является одним из таких мнений и поэтому не носит нормативного характера.</div>

<h3 id="Примеры">Примеры</h3>

<h4 id="Пример_1_Связывание_приложения_и_описания">Пример 1: Связывание приложения и описания</h4>

<p>В примере ниже, вводный параграф описывает приложение календаря. <code>aria-describedby</code> используется для связывания параграфа с контейнером приложения.</p>

<pre class="brush: html">&lt;div role="application" aria-labelledby="calendar" aria-describedby="info"&gt;
    &lt;h1 id="calendar"&gt;Calendar&lt;/h1&gt;
    &lt;p id="info"&gt;
        This calendar shows the game schedule for the Boston Red Sox.
    &lt;/p&gt;
    &lt;div role="grid"&gt;
        ...
    &lt;/div&gt;
&lt;/div&gt;
</pre>

<h4 id="Пример_2_Кнопка_закрытия">Пример 2: Кнопка закрытия</h4>

<p>В примере ниже, ссылка, которая функционирует как кнопка закрытия диалога, описана в другом месте документа. Атрибут aria-describedby используется для связывания описания с ссылкой.</p>

<pre class="brush: html">&lt;button aria-label="Close" aria-describedby="descriptionClose"
    onclick="myDialog.close()"&gt;X&lt;/button&gt;

...

&lt;div id="descriptionClose"&gt;Closing this window will discard any information entered and
return you back to the main page&lt;/div&gt;
</pre>

<h3 id="Примечания">Примечания</h3>

<ul>
 <li>Атрибут <code>aria-describedby</code> не предназначен для ссылки, описывающей внешний ресурс - так как это ID, он должен ссылаться на элемент в том же документе  DOM.</li>
</ul>

<h3 id="Использование_ARIA_ролей">Использование ARIA ролей</h3>

<p>все элементы базовой разметки</p>

<h3 id="Связанные_ARIA_методы">Связанные ARIA методы</h3>

<ul>
 <li><a href="/en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li>
</ul>

<h3 id="Совместимость">Совместимость</h3>

<p class="comment">TBD: добавить информацию о поддержке для общих UA и AT комбинаций продуктов</p>

<h3 id="Дополнительные_ресурсы">Дополнительные ресурсы</h3>

<ul>
 <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-describedby">WAI-ARIA specification for aria-describedby</a></li>
</ul>