Role tag in html

Атрибут role в HTML5

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

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

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

• banner — содержит главный заголовок или внутренний заголовок страницы. Например логотип и название сайта. Рекомендуется использовать не больше одного раза на странице.
• complementary — информационный блок, отделенный от основного содержания ресурса.
• contentinfo — обобщающая информация о содержании страницы ( к примеру футер сайта ). Рекомендуется использовать не больше одного раза на странице.
• definition — указывает определение термина или понятия.
• main — выступает в качестве основного содержания документа. Рекомендуется использовать не больше одного раза на странице.
• navigation — набор элементов предназначенных для навигации по документу или связанным документам. Рекомендуется использовать не больше одного раза на странице.
• note — заметка ( вспомогательная информация) к основному содержанию ресурса.
• search — указывает область для поиска по содержимому.

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

 Блог Васи Пупкина
Самый обычный заголовок.
Привет мир!
Очень хочу чтобы вы поделились со мной мыслями по этому поводу.
*Гусь и утки - это птицы.
** с 2011 года.

Как я уже говорил, при простой разметке атрибут 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, может быть свернут или расширен, если имеет вложенный подуровень.

Источник

HTML Role Attribute Explained

The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers.

Screen Readers will read this element as “button” instead of “link”.

There are four categories of roles:

• Abstract Roles
• Widget Roles
• Document Structure Roles
• Landmark Roles

More info about HTML attributes:

More info about HTML attributes

HTML elements can have attributes, which contain additional information about the element.

HTML attributes generally come in name-value pairs, and always go in the opening tag of an element. The attribute name says what type of information you’re providing about the element, and the attribute value is the actual information.

Here’s an example of a link that sends users to freeCodeCamp’s home page:

Notice that the attribute name ( href ) and value (“www.freeCodeCamp.org”) are separated with an equals sign, and quotes surround the value.

There are many different HTML attributes, but most of them only work on certain HTML elements. For example, the href attribute won’t work if it’s placed in an opening tag.

In the example above, the value supplied to the href attribute could be any valid link. However, some attributes only have a set of valid options you can use, or values need to be in a specific format. The lang attribute tells the browser the default language of the contents in an HTML element. The values for the lang attribute should use standard language or country codes, such as en for English, or it for Italian.

Boolean Attributes

Some HTML attributes don’t need a value because they only have one option. These are called Boolean attributes. The presence of the attribute in a tag will apply it to that HTML element. However, it’s okay to write out the attribute name and set it equal to the one option of the value. In this case, the value is usually the same as the attribute name.

For example, the element in a form can have a required attribute. This requires users to fill out that item before they can submit the form.

Here are examples that do the same thing:

Источник