Атрибут role в HTML5

Атрибут role в HTML5

Да зачем он нужен?!

С приходом HTML5, появилось множество семантических тегов предназначенных для "понимания" кода поисковиками и людьми ( чтобы было легче разобраться в назначении тех или иных блоков страницы ), так вот атрибут role, позволяет наиболее четко указать назначение блока/элемента страницы при взаимодействии пользователя с сайтом.

Излишне злоупотреблять, конечно, атрибутом не стоит, если разметка и так проста, и можно обойтись использованием элементов section, article, nav, aside и др. Но, допустим если сайт имеет множество таких блоков, то здесь стоит задуматься об использовании role.

Основные
и наиболее часто используемые значения role

Упрощенный пример использования

<a href="/" role="banner"><img src="logo.png" alt="" />Блог Васи Пупкина</a>

<nav role="navigation">
  <ul>
    <li><a href="/">Главная</a></li>
    <li><a href="/news">Новости</a></li>
    <li><a href="/contacts">Контакты</a></li>
  </ul>
</nav>

<main role="main">
  <h1>Самый обычный заголовок.</h1>
  <p>Привет мир!</p>
  <p>Очень хочу чтобы вы поделились со мной мыслями по этому поводу.</p>
  <p role="definition">*Гусь и утки - это птицы.</p>
  <p role="note">** с 2011 года.</p>
</main>

<aside role="complementary">
  <b>Голосование, чего не хватает на сайте</b>
  <ul>
    <li><a href="#">Медведей</a></li>
    <li><a href="#">Дельфинов</a></li>
    <li><a href="#">Детей</a></li>
  </ul>
        
</aside>

<aside role="search">
  <form>
    Найти гуся или утку: <input type="text" /> <input type="submit" value="Найти" />
  </form>
</aside>

<div role="contentinfo">
  <p>© 2012 Сайт непревзойденного Васи Пупкина.</p>
</div>

Как я уже говорил, при простой разметке атрибут role - смысла использовать нет, по сути вышеприведенный пример нисколько неоправдан, но ведь это пример :)

Возможные значения role

В следующей таблице приведены другие возможные значения атрибута role:

Значение Назначение
alert Сообщение с важной и, как правило срочной, информация. Также см. alertdialog и status.
alertdialog Сообщение, которое содержит важную информацию, и первоначальный акцент переходит элементу в диалоговом окне. Также см. alert и dialog.
application Область объявленная как веб-приложение, в отличие от веб-документа.
article Раздел состоящий из композиции, которая в свою очередь образует самостоятельную часть документа, страницы или сайта.
button Кнопка, позволяющая пользователю вызвать какие-либо действия. Также см. link.
checkbox Чекбокс, который имеет три возможных значения: истина, ложь, или смешанное.
columnheader Ячейка таблицы, содержащая заголовок для столбца.
combobox Вариация селекта; аналогично textbox, позволяющая пользователям печатать для выбора опции, или при печате добавить новую опцию к списку. Также см. listbox.
dialog Сообщение, предназначенное для прерывания обработки текующего приложения, для ввода пользователем какой-либо информации или требующее от него какое-либо действие. Также см. alertdialog.
directory Список ссылок на части группы, например содержание.
document Область, содержащая информацию, которая объявлена ??как содержимое документа, в отличие от веб-приложений.
form Ориентир области, которая содержит коллекцию элементов и объектов, которые, в целом, объединяются, чтобы создать форму. См. также search.
grid Сетка интерактивного управления, которая содержит элементы сведенные в таблицу данных, в виде строк и столбцов, как таблица.
gridcell Ячейки в сетке или древовидная сетка.
group Набор объектов пользовательского интерфейса, которые не предназначены для включения в итоговую страницу или содержимое, вспомогательных технологий.
heading Заголовок для раздела страницы.
img Контейнер для набора элементов, которые формируют изображение.
link Интерактивная ссылка на внутренний или внешний ресурс, который при активации заставляет браузер пользователя перейти к этому ресурсу. См. также button.
link Интерактивная ссылка на внутренний или внешний ресурс, который при активации приводит к переходу браузера пользователя к этому ресурсу. См. также button.
list Группа неинтерактивных элементов списка. Также см. listbox.
listbox Виджет, который позволяет пользователю выбрать один или несколько элементов из списка вариантов. См. также combobox и list.
listitem Один элемент в списоке или содержании.
log Тип интерактивной области, где новая информация добавляется в осмысленном порядке, а старая может исчезнуть. См. также marquee.
marquee Тип интерактивной области, где не существенная информация часто меняется. См. также log.
math Контент, который представляет собой математическое выражение.
menu Тип виджета, который предоставляет выбор списка вариантов для пользователя.
menubar Представление menu, которое обычно остается видимым и, как правило, представлено горизонтально.
menuitem Опции в группе выбора содержащиеся в menu или menubar.
menuitemcheckbox Чекбокс пункта menu, который имеет три возможных значения: истина, ложь, или смешанное.
menuitemradio Отмечаемый пункт меню в группе menuitemradio, из которых только один может быть выбран одновременно.
option Выбираемый элемент в списке выбора.
presentation Элемент чья семантически неявная роль не будет отображаться на доступности API.
progressbar Элемент, который отображает ход статуса задач, занимающих много времени.
radio Отмечаемый пункт в группе таких же пунктов, из которых только один может быть выбран одновременно.
radiogroup Группа переключателей.
region Большая область веб-страницы или документа, которую автор счел достаточно важной, чтобы включить в основную информацию страницы или оглавление, например, область страницы содержающая спортивную статистику событий онлайн.
row Ряд ячеек в grid.
rowgroup Группы, содержащие один или несколько элементов row в grid.
rowheader Ячейка содержащая заголовок для row в grid.
scrollbar Графический объект, который управляет прокруткой содержимого области просмотра, независимо от того, полностью ли содержание отображается в области просмотра.
separator Разделитель, который разделяет и отличает разделы содержимого или группы пунктов menuitems.
slider Интерфейс ввода для пользователя, когда пользователь выбирает значение из заданного диапазона.
spinbutton Форма диапазона, где пользователь может выбрать из числа дискретных решений.
status Контейнер, содержание которого носит рекомендательный характер для информирования пользователя, но не является достаточно важным. Также см. alert.
tab Вкладка, представляющая из себя механизм для выбора вкладки необходимой пользователю.
tablist Список элементов tab, которые являются ссылками на tabpanel элементы.
tabpanel Контейнер для ресурсов связанных с tab, где каждый tab содержиться в tablist.
textbox Поле ввода, которое предоставляет ввод в свободной форме текста.
timer Тип интерактивной области, содержащую числовой счетчик, который указывает на количество затраченного времени от начальной точки, или время, оставшееся до конечной точки.
toolbar Набор часто используемых функциональных кнопок, представленых в компактной визуальной форме.
tooltip Контекстное всплывающее окно, которое отображает описание элемента.
tree Тип списка, который может содержать подуровни вложенных групп, которые могут быть свернуты и расширены.
treegrid Сетка, чьи строки могут быть свернуты и расширины так же как и в tree.
treeitem Опция элемента tree. Этот элемент внутри tree, может быть свернут или расширен, если имеет вложенный подуровень.

Спецификация W3C тык


03 июля 2012, 19:38
HTML, CSS


Авторизация
Зайди на сайт с помощью соц. сети: