Состояния и свойства объектов — ARIA-атрибуты

Атрибутов спецификации, как нетрудно догадаться, гораздо больше. Их делят на следующие секции.

Атрибуты виджетов

Эта секция содержит атрибуты, определенные для элементов пользовательского интерфейса, (GUI) веб-документов или интернет-приложений, взаимодействующих с пользователем. Эти атрибуты предназначены для поддержки ролей-виджетов:

— aria-autocomplete — показывает, применяется ли автозаполнение для текстового поля;

— aria-checked — показывает состояние «checked» у чекбоксов или радиокнопок;

— aria-disabled — показывает состояние «disabled» у элементов упражнения;

— aria-expanded — показывает, развернут или свернут текущий элемент;

— aria-hidden — показывает состояние «hidden» у текущего элемента;

— aria-multiline — показывает возможность многострочного ввода у текстового элемента;

— aria-multiselectable — показывает возможность множественного выбора у элементов управления у тега <select>;

— aria-orientation — показывает положение элемента (горизонтальное или вертикальное);

— aria-readonly — показывает состояние «readonly» у элементов управления;

— aria-required — аналог HTML5 атрибута required;

— aria-selected — показывает состояние «selected» у элементов управления;

— aria-sort — показывает порядок сортировки у строк таблицы или элементов с ролью «grid».

Атрибуты для Live Region

Live Region — это элементы страницы, обновляемые в результате внешнего события, обычно вне пользовательского фокуса. Канонический пример Live Region — информер биржевых сводок.

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

— aria-busy — указывает, обновляются ли элемент и его поддерево, в настоящее время.

— aria-live — указывает, что элемент будет обновлен, и описывает типы обновлений браузеру.

Атрибуты перетаскивания (Drag-and-Drop)

Тут все понятно — эти атрибуты обеспечивают эффект drag-and-drop:

— aria-grabbed — указывает, может ли элемент быть захвачен перетаскиванием;

— aria-dropeffect — определяет функции, которые могут быть задействованы в процессе и при завершении перетаскивания.

Атрибуты отношений

В этой секции — атрибуты, указывающие на отношения или ассоциации между элементами, которые не могут быть полностью определены структурой документа.

— aria-activedescendant — указывает на элемент, чей контент является активным потомком составного виджета;

— aria-controls — указывает элемент (элементы), чьим содержанием или поведением управляет текущий элемент;

— aria-describedb — указывает элемент (или элементы), описывающие объект;

— aria-owns — определяет положение в иерархии документов по схеме потомок/родитель;

— aria-posinset — определяет позицию элементов наборе;

— aria-setsize — определяет число пунктов в текущем наборе lis-titems или treeitems.

По состоянию на сегодняшний день это почти все, ну а чтобы покончить с этой непростой темой, приведем как пример использования технологии реализацию дерева на html-разметке с применением WAI-ARIA (пример из спецификации):

<h1 id="treelabel">WAI-ARIA Tree Example</h1>

<ul role="tree" aria-labelledby="treelabel" aria-activedescendant="example_id" tabindex=”0”>

<li role=”treeitem” aria-expanded=”true”>Animals <ul role=”group”>

<li role=”treeitem”>Birds</li>

<li role=”treeitem” aria-expanded=”false”>Cats <ul role=”group”>

<li role=”treeitem”>Siamese</li>

<li role=”treeitem”>Tabby</li>

</ul>

</li>

<li role=”treeitem” aria-expanded=”true”>Dogs <ul role=”group”>

<li role=”treeitem” aria-expanded=”true”>Small Breeds <ul role=”group”>

<li role=”treeitem”>Chihuahua</li>

<li role=”treeitem” id=”example_id”>Italian Greyhound</li> <li role=”treeitem”>Japanese Chin</li>

</ul>

</li>

<li role=”treeitem” aria-expanded=”false”>Medium Breeds <ul role=”group”>

<li role=”treeitem”>Beagle</li>

<li role=”treeitem”>Cocker Spaniel</li>

<li role=”treeitem”>Pit Bull</li>

</ul>

</li>

<li role=”treeitem” aria-expanded=”false”>Large Breeds <ul role=”group”>

<li role=”treeitem”>Afghan</li>

<li role=”treeitem”>Great Dane</li>

<li role=”treeitem”>Mastiff</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li role=”treeitem” aria-expanded=”true”>Minerals <ul role=”group”>

<li role=”treeitem”>Zinc</li>

<li role=”treeitem” aria-expanded=”false”>Gold <ul role=”group”>

<li role=”treeitem”>Yellow Gold</li>

<li role=”treeitem”>White Gold</li>

</ul>

</li>

<li role="treeitem">Silver</li>

</ul>

</li>

<li role="treeitem" aria-expanded="true">Vegetables <ul role="group">

<li role="treeitem">Carrot</li>

<li role="treeitem">Tomato</li>

<li role="treeitem">Lettuce</li>

</ul>

</li>

</ul>

Наверное, для понимания концепции WAI-ARIA этого достаточно, все остальное, в том числе примеры BestPractices, можно найти в документации W3C.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *