role="" - Атрибут HTML

Применение атрибута role в HTML

Использовано подробное описание всех значений role в HTML документе, узнайте что это за атрибут, зачем его надо применять для элементов вёрстки сайта и как правильно определить место установки.

Классификация и применение Role

Атрибуты role определяют соотношение различных классов в наследовании свойств суперклассов иерархии документа HTML, классификация может включать в себя часть формального определения онтологии. Правильное распределение является основной задачей в применении role к отдельным участкам страницы и формировании общей картины документа. Если Вам не понятна принадлежность участка документа к атрибуту role, лучше не применяйте его.

Схема иерархии role в документе

Класс схема иерархии role

Абстрактные Role

role="command"
Применяется к формам в виде виджета, который выполняет действие, но при этом не получает входящих данных.
role="composite"
Применяется для композитных виджетов, которые могут иметь плавающих потомков или принадлежащих им наследников. При этом композитный виджет должен быть единым механизьмом навигации и при получении фокуса предоставить доступ к элементам, которые являются прямыми потомками и наследниками основной навигации составного элемента.
role="input"
Применяется к универсальному виду виджета имеющего доступ к пользовательскому вводу.
role="landmark"
Применяется в области страницы, предназначенной для навигационного ориентира.
role="range"
Применяется для входа, представляющего диапазон значений, которые могут быть установлены пользователем.
role="roletype"
Применяется к базовому значению role, в которой все другие role в этой таксономии наследуют её параметры.
role="section"
Применяется к отображаемому блоку структурной локализации в документе или приложении.
role="sectionhead"
Применяется к структуре блока(ов) и суммирует тему соответствующему разделу.
role="select"
Применяется к форме виджету , которая позволяет пользователю сделать выбор из предоставленного набора вариантов.
role="structure"
Применяется для структуры документа чтобы поддерживать доступность динамического веб-контента, помогая вспомогательным технологиям определять активное содержимое против статического содержимого документа. Структурное значение используется для создания виджетов или помощи в адаптации контента для вспомогательных технологий.
role="widget"
Применяется к нтерактивному компоненту графического пользовательского интерфейса (GUI).
role="window"
Применяется к интерактивному компоненту графического пользовательского интерфейса (GUI).

Виджеты Role

role="alert"
Применяется к важным или срочным сообщениям.
role="alertdialog"
Применяется к диалогам которые содержат предупреждающее сообщение, где первоначальный акцент идет на элемент в диалоге.
role="button"
Применяется как разрешение входа для пользовательских действий при нажатии или отжатии.
role="checkbox"
Применяется в качестве проверяемого входа, который имеет три возможных значения: true, talse или смешанные.
role="dialog"
Применяется к диалоговому окну приложения, которое предназначено для прерывания текущей обработки данных, чтобы побудить пользователя ввести информацию, требующую подтверждения. Например для подтверждения пользователем его совершеннолетия. Или к модальному окну.
role="gridcell"
Применяется к сетке или TreeGrid. Ячейки могут быть активными и редактироваться по выбору.
Применяется к интерактивным ссылкам на внутренний или внешний ресурс, который при активации вызывает агента пользователя, чтобы перейти к этому ресурсу.
role="log"
Применяется там, где добавляется новая информация в содержательном порядке, а старая информация может исчезнуть, например в мини-чате с ограниченным количеством сообщений.
role="marquee"
Применяется там, где находится не существенная информация и часто меняется, например данные количества просмотров.
role="menuitem"
Применяется как опция в выборе нескольких вариантов, содержащихся в меню или на панели меню.
role="menuitemcheckbox"
Применяется в пунктах меню с триггерной структурой, с возможностью выбора: истина, ложь , или смешанные.
role="menuitemradio"
Применяется как проверочный пункт меню в наборе элементов, где только один из них может быть проверен в это время, и когда один элемент в группе проверяется, ранее отмеченный элемент будет снят (становится ложным ).
role="option"
Применяется там, где выбирается пункт из списка, но опции не должны быть связаны со значением role="listbox".
role="progressbar"
Применяется для элемента, который отображает статус выполнения продолжительное время, что запрос пользователя был получен и приложение делает успехи в направлении завершения требуемого действия.
role="radio"
Применяется в триггерной группе ввода, где только один из которых может быть проверен в это время, чтобы элементы с role="radio" были явно сгруппированы для того, чтобы указывать, какие из них влияют на то же значение. Это достигается для ограждения радио элементов в элементе со значением role="radiogroup".
role="scrollbar"
Применяется к графическому объекту, который управляет прокруткой содержимого внутри области просмотра, независимо от того, полностью ли отображается содержимое в области просмотра.
role="slider"
Применяется для пользовательского ввода, когда пользователь выбирает значение в пределах заданного диапазона.
role="spinbutton"
Применяется в формах с плавающим диапазоном значений, позволяет пользователю выбрать из данного диапазона за счет использования кнопок вверх и вниз на клавиатуре, например калькулятор с ползунком.
role="status"
Применяется в контейнере, содержание которого в виде консультативной информации для пользователя, но не настолько важная, чтобы создавать предупреждение, должно исключаться получение фокуса элементом.
role="tab"
Применяется для группировки вкладок обеспечивая механизм для выбора во вкладке содержания, которое должно быть вынесено к пользователю. Нужно обеспечить элементам иметь значение в содержании role="tablist" и вкладкам в активном состоянии значением role="tabpanel".
role="tabpanel"
Применяется к контейнеру для ресурсов, связанных с вкладками, где каждый вкладка содержится в role="tablist".
role="textbox"
Применяется для поля ввода, в которых элементы различной семантики можно многократно использовать в качестве текстового поля.
role="timer"
Применяется для числовых счетчиков, которые указывают количество прошедшего времени от начальной точки, или время, оставшееся до конечной точки. Например время проведённое на странице.
role="tooltip"
Применяется для контекстных всплывающих подсказок, которые отображают описание для элемента.
role="treeitem"
Применяется как один из пунктов элемента со значением role="tree", и должен содержаться в элементе со значением role="group"

Составные виджеты Role

role="combobox"
Применяется в выпадающих списках с комбинированным показом одного текстового поля линии с LISTBOX во всплывающем окне. Выпадающий список может быть доступен для редактирования, обычно редактируемые поля со списком используются для автозаполнения.
role="grid"
Применяется в элементах с интерактивным управлением, которые содержат ячейки табличных данных, расположенных в строках и столбцах
role="listbox"
Применяется в виджете, который позволяет пользователю выбрать один или несколько элементов из списка выбора.
role="menu"
Применяется как меню со списком общих действий или функций, которые пользователь может вызвать.
role="menubar"
Применяется для видимых строк элемента со значением role="menu", используются для создания строки меню, похожих на те, что в настольных приложениях Windows, Mac, и Gnome.
role="radiogroup"
Применяется к группе переключателей.
role="tablist"
Применяется к списку во вкладке элементов, которые ссылаются на значения role="tabpanel" элементов.
role="tree"
Применяется для типа списка, который может содержать суб-уровень вложенных групп, которые могут быть свернуты или развернуты.
role="treegrid"
Применяется для сетки , строки которой могут быть расширены и падать в том же порядке, что и для дерева.

Структура документа Role

role="article"
Применяется к разделу страницы, которая образует самостоятельную часть документа, страницы или сайта. Раздел может быть постом форума, журнала или газетной статьёй, записью в веб-журнале, где пользователь может оставить комментарий, или любой другой независимый элемент содержимого. Другими словами это относится к уникальной части страницы и может быть использована не более одного раза.
role="columnheader"
Применяется для заголовка ячейки столбца в таблице или сетке, устанавливает связь между ними и всех клеток в соответствующей графе. Может быть использовано в виде круговой диаграммы, чтобы показать, аналогичные отношения в данных. Нужно обеспечить элементам с role="columnheader" содержатся в, или в собственности по, элемента со значением role="row".
role="definition"
Применяется для определения термина или понятия.
role="directory"
Применяется к списку ссылок на членов группы, имеющих статическое содержание в качестве статического оглавления, будь те ссылки связанными или несвязанными, в том числе вложенные в списки.
role="document"
Применяется к области, которая содержит информацию соответствующую веб-документу, но не применяется для веб-приложений. Например, не применима к прикрепляемому документу в виде PDF приложения.
role="group"
Применяется к набору объектов пользовательского интерфейса, которые не предназначены для включения в резюме страницу или оглавление вспомогательными технологиями.
role="heading"
Применяется для заголовков, при этом многое зависит от логической иерархии заголовков. В HTML5 можно использовать заголовки высшего уровня в каждой отдельно взятой секции, тогда это значение можно применять несколько раз. Но если заголовки идут последовательно: h1, h2, h3..., тогда значение применимо только к h1.
role="img"
Применяется к блоку с несколькими изображениями, если они образуют общую картину. Или к одному изображению, основному по теме содержания. Не забывайте что для изображений существует обязательный атрибут ALT, групповое изображение формируется программой из его содержания. Например alt="Моё фото на природе", alt="Сверху меня облака", alt="С лева от меня горы", alt="С права от меня река".
role="list"
Применяется к группе не интерактивных списков со значением role="listbox". Списки содержат наследников, чьи значения устанавливаются role="listitem" или элементы , роль которых является группа , которая в свою очередь содержит наследников, чья роль является role="listitem".
role="listitem"
Применяется к одному элементу в списке или каталоге. Элементы с этим значением содержатся в, или в собственности по, элемента со значением role="list" или role="group".
role="math"
Применяется к контенту, который представляет собой математическое выражение.
role="note"
Применяется к добавлению, содержание которого находится в скобках или вспомогательного к основному содержанию ресурса.
role="presentation"
Применяется к элементу, содержание которого полностью презентационный (как спейсерную изображения, декоративной графики, или клирингового элемента).
role="region"
Применяется к более воспринимаемому разделу веб-страницы или документа, что является достаточно важным, чтобы быть включенным в резюме страницы или оглавления, например, область страницы, содержащей статистику.
role="row"
Применяется к ряду клеток в сетке. Строки содержат элементы со значением role="gridcell", и таким образом, служат для организации role="grid". Требуется обеспечить значениям, подряд содержатся в, или в собственности по, элементам со значениями role="grid", role="rowgroup", role="treegrid".
role="rowgroup"
Применяется в группе, содержащую один или несколько элементов строки в сетке. Является структурным эквивалентом THEAD , TFOOT и TBODY элементов в HTML.
role="rowheader"
Применяется для указания информации заголовка ячейки, содержащей на ряду в таблице или сетке.
role="separator"
Применяется как делитель, который разделяет и отличает разделы материалов или групп пунктов меню. Например, сепараторы нашли между группами пунктов меню в меню или как смещаемого разделителя между двумя регионами в разделенной панели.
role="toolbar"
Применяется для набора часто используемых функциональных кнопок и элементов управления, представленных в компактной визуальной форме, например последовательные вложения или переключатели страниц.

Региональные Role

role="application"
Применяется для область объявленной как веб-приложение, а не веб-документ. Намерение состоит в том, чтобы намекнуть вспомогательным технологиям на возможность переключения из нормального режима просмотра в режим больше подходящий для взаимодействия с веб-приложением. Некоторые агенты пользователей имеют режим навигации просмотра, где ключи, такие как стрелки вверх и вниз, которые используются, чтобы просмотреть документ, и это поведение предотвращает использование этих ключей на веб-приложении.
role="banner"
Применяется как ориентированное содержание, как правило, включает в себя такие вещи, как логотип или идентичность спонсора сайта, и сайт-специфический инструмент поиск. Баннер обычно появляется в верхней части страницы и, как правило, охватывает всю его ширину.
role="complementary"
Применяется для различных типов контента, которые бы соответствующим образом имели подобное значение. Например, в случае портала, это может включать, но не ограничиваться, чтобы показать раз, текущую погоду, связанные статьи, или акции, для обозрения. Вспомогательная роль показывает, что содержащее содержание имеет отношение к основному содержанию. Если дополнительный контент полностью размыкает основное содержание, может быть целесообразным использовать более общие значения.
role="contentinfo"
Применяется для примеров информации, включенной в этом регионе страницы, копирайтов и ссылок. Применяется для "футера" сайта и предполагает наличие статичной и динамичной информации о странице.
role="form"
Применяется как форма, может быть в сочетании с управлением основного языка форм, скриптовых управлений и гиперссылок.
role="main"
Применяется в основном содержании документа. Это содержание, которое непосредственно связано с расширенной и центральной темой документа. Может применяться не более одного раза, включая role="document" и role="application" где так же применяется по одному разу.
role="navigation"
Применяется для основного навигационного меню.
Применяется для поиска.

Применение role атрибутов не создаёт приоритета для поисковых систем и не играет подавляющей роли как таковой.

Рейтинг: 4.9/5 из 9



Добавлено Автор Ник Источник Просмотров Комментариев Теги
28-10-2014 Михаил Меренков aTmpl © 3201 0 описание, применение, html, Role