No sort
Last updated
Was this helpful?
Last updated
Was this helpful?
Was this helpful?
Определяет вызывает ли элемент появление выпадающего меню (списка)ю Можно устанавливать на элемент “button” Сообщает вспомогательным технологиям, что кнопка управляет меню. Название этого свойства немного вводит в заблуждение, поскольку подразумевает, что его можно использовать для любого типа всплывающих окон. Это не тот случай! Это свойство предназначено только для использования со всплывающими меню (например, не с диалоговыми окнами, всплывающими подсказками или всплывающей подсказкой).
Необходим для создания описания к элементам.
Атрибут используется для указания идентификаторов элементов, описывающих объект.
Пример 1:
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h1 id="calendar">Calendar</h1>
<p id="info">
Пример 2:
<button aria-label="Close" aria-describedby="descriptionClose"
onclick="myDialog.close()">X</button>
...
<div id="descriptionClose"
Cодержит идентификаторы (атрибут id) меток для таких обьектов как элементы ввода (input), виджеты, группы. Атрибут создает связь между обьектами и их метками. Вспомогательные технологии, такие как средства чтения экрана, используют этот атрибут чтобы собирать все метки в каталог документа, из которого пользователь может перемещаться между ними. Без идентификатора (атрибута id) вспомогательные технологии не могут собрать данные обьекты в каталог.
Example 1: Multiple Labels
<div id="billing">Billing</div>
<div>
<div id="name">Name</div>
<input type="text" aria-labelledby="billing name"/>
</div>
<div>
<div id="address">Address</div>
<input type="text" aria-labelledby="billing address"/>
</div>
Example 2: Associating Headings With Regions
<div role="main" aria-labelledby="foo">
<h1 id="foo">Wild fires spread across the San Diego Hills</h1>
Strong winds expand fires ignited by high temperatures ...
</div>
Example 3: Radio Groups
<div id="radio_label">My radio label</div>
<ul role="radiogroup" aria-labelledby="radio_label">
<li role="radio">Item #1</li>
<li role="radio">Item #2</li>
<li role="radio">Item #3</li>
</ul>
Example 4: Dialog Label
<div role="dialog" aria-labelledby="dialogheader">
<h2 id="dialogheader">Choose a File</h2>
... Dialog contents
</div>
Example 5: Inline Definition
<p>The doctor explained it had been a <dfn id="placebo">placebo</dfn>, or <span role="definition" aria-labelledby="placebo">
an inert preparation prescribed more for the mental relief of the patient than for its actual effect on a disorder.</span>
</p>
Example 6: Definition Lists
<dl>
<dt id="anathema">anathema</dt>
<dd role="definition" aria-labelledby="anathema">a ban or curse solemnly pronounced by ecclesiastical authority
and accompanied by excommunication</dd>
<dd role="definition" aria-labelledby="anathema">a vigorous denunciation : cursor</dd>
<dt id="homily">homily</dt>
<dd role="definition" aria-labelledby="homily">a usually short sermon</dd>
<dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd>
</dl>
Example 7: Menus
<div role="menubar">
<div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>
<div role="menu" aria-labelledby="fileMenu">
<div role="menuitem">Open</div>
<div role="menuitem">Save</div>
<div role="menuitem">Save as ...</div>
...
</div>
Сообщает вспомогательным технологиям, какое меню управляет этой кнопкой.
Сообщает вспомогательным технологиям, раскрыто ли всплывающее меню или нет. И да, это состояние переходит на кнопку, а не на меню
Сообщает вспомогательным технологиям, установлен ли флажок menuitemradio или menuitemcheckbox. Обратите внимание, что мы не используем aria-selected.
Ссылка на текущий элемент данных
Создает вежливую live-область вокруг заголовка. Это означает, что состояние заголовка будет объявлено вспомогательными технологиями при его изменении.
Создает ориентир навигации для вспомогательных технологий.
Применяется к тэгам SVG для закладки для усиления семантики изображения.
Создает вежливую live-область вокруг заголовка. Это означает, что состояние заголовка будет объявлено вспомогательными технологиями при его изменении.
Сообщает вспомогательным технологиям, что это меню, содержащее элементы меню, элементы меню радио или элементы меню с флажками
Информирует вспомогательные технологии о том, что блоки div вокруг групп пунктов меню предназначены только для целей презентации и не должны добавляться в дерево доступности
Сообщает вспомогательным технологиям, что эта команда меню имеет поведение кнопки
Сообщает вспомогательным технологиям, что эта команда меню имеет поведение переключателя.
Сообщает вспомогательным технологиям, что эта команда меню имеет поведение флажка