No sort
aria-haspopup
Определяет вызывает ли элемент появление выпадающего меню (списка)ю Можно устанавливать на элемент “button” Сообщает вспомогательным технологиям, что кнопка управляет меню. Название этого свойства немного вводит в заблуждение, поскольку подразумевает, что его можно использовать для любого типа всплывающих окон. Это не тот случай! Это свойство предназначено только для использования со всплывающими меню (например, не с диалоговыми окнами, всплывающими подсказками или всплывающей подсказкой).
aria-label
Необходим для создания описания к элементам.
aria-describedby
Атрибут используется для указания идентификаторов элементов, описывающих объект.
Пример 1:
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h1 id="calendar">Calendar</h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
</p>
<div role="grid">
...
</div>
</div>
Пример 2:
<button aria-label="Close" aria-describedby="descriptionClose"
onclick="myDialog.close()">X</button>
...
<div id="descriptionClose">Closing this window will discard any information entered and
return you back to the main page</div>
aria-labelledby
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>
aria-controls
Сообщает вспомогательным технологиям, какое меню управляет этой кнопкой.
aria-expanded
Сообщает вспомогательным технологиям, раскрыто ли всплывающее меню или нет. И да, это состояние переходит на кнопку, а не на меню
aria-checked
Сообщает вспомогательным технологиям, установлен ли флажок menuitemradio или menuitemcheckbox. Обратите внимание, что мы не используем aria-selected.
aria-current
Ссылка на текущий элемент данных
aria-live
Создает вежливую live-область вокруг заголовка. Это означает, что состояние заголовка будет объявлено вспомогательными технологиями при его изменении.
role=navigation
Создает ориентир навигации для вспомогательных технологий.
role=img
Применяется к тэгам SVG для закладки для усиления семантики изображения.
role=status
Создает вежливую live-область вокруг заголовка. Это означает, что состояние заголовка будет объявлено вспомогательными технологиями при его изменении.
role=menu
Сообщает вспомогательным технологиям, что это меню, содержащее элементы меню, элементы меню радио или элементы меню с флажками
role=presentation
Информирует вспомогательные технологии о том, что блоки div вокруг групп пунктов меню предназначены только для целей презентации и не должны добавляться в дерево доступности
role=menuitem
Сообщает вспомогательным технологиям, что эта команда меню имеет поведение кнопки
role=menuitemradio
Сообщает вспомогательным технологиям, что эта команда меню имеет поведение переключателя.
role=menuitemcheckbox
Сообщает вспомогательным технологиям, что эта команда меню имеет поведение флажка
Last updated
Was this helpful?