Role html5 – Атрибут role в HTML5

Атрибут role в HTML5

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

gaserge.ru

Атрибут role и его значения

Атрибут  role в HTML5 позволяет наиболее четко указать семантическое предназначение блока/элемента страницы при взаимодействии пользователя с сайтом.

<div role='banner'>...</div>
<nav role='navigation'>
    <ul>
    ...
    </ul>
</nav>

Возможные значения атрибута role=»

banner — содержит главный заголовок или внутренний заголовок страницы. Например логотип и название сайта. Рекомендуется использовать не больше одного раза на странице.
article — Раздел состоящий из композиции, которая в свою очередь образует самостоятельную часть документа, страницы или сайта.
complementary — информационный блок, отделенный от основного содержания ресурса.
contentinfo — обобщающая информация о содержании страницы (к примеру, footer). Рекомендуется использовать не больше одного раза на странице.
definition — указывает определение термина или понятия.
main — выступает в качестве основного содержания документа. Рекомендуется использовать не больше одного раза на странице.
navigation — набор элементов предназначенных для навигации по документу или связанным документам. Рекомендуется использовать не больше одного раза на странице.
note — заметка ( вспомогательная информация) к основному содержанию ресурса.
search — указывает область для поиска по содержимому.
alert — Сообщение с важной и, как правило срочной, информация. Также см. alertdialog и status.
alertdialog — Сообщение, которое содержит важную информацию, и первоначальный акцент переходит элементу в диалоговом окне. Также см. alert и dialog.
application — Область объявленная как веб-приложение, в отличие от веб-документа.
button — Кнопка, позволяющая пользователю вызвать какие-либо действия. Также см. link.
checkbox — Чекбокс, который имеет три возможных значения: истина, ложь, или смешанное.
columnheader — Ячейка таблицы, содержащая заголовок для столбца.
combobox — Вариация селекта; аналогично textbox, позволяющая пользователям печатать для выбора опции, или при печате добавить новую опцию к списку. Также см. listbox.
dialog — Сообщение, предназначенное для прерывания обработки текующего приложения, для ввода пользователем какой-либо информации или требующее от него какое-либо действие. Также см. alertdialog.
directory — Список ссылок на части группы, например содержание.
document — Область, содержащая информацию, которая объявлена как содержимое документа, в отличие от веб-приложений.
form — Ориентир области, которая содержит коллекцию элементов и объектов, которые, в целом, объединяются, чтобы создать форму. См. также search.
grid — Сетка интерактивного управления, которая содержит элементы сведенные в таблицу данных, в виде строк и столбцов, как таблица.
gridcell — Ячейки в сетке или древовидная сетка.
group — Набор объектов пользовательского интерфейса, которые не предназначены для включения в итоговую страницу или содержимое, вспомогательных технологий.
heading — Заголовок для раздела страницы.
img — Контейнер для набора элементов, которые формируют изображение.
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, может быть свернут или расширен, если имеет вложенный подуровень.

sauron.org.ua

зачем использовать атрибут role в html5 — css

Я создал веб-страницу с помощью html5.

Я использовал исходный код из бутстрапа.

Например: role="main", role ="navigation", role = "document" и т.д.

Если я удалю этот атрибут из своего кода, страница не изменилась.

Итак, я хочу знать: какова цель атрибута «role»?

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href='http://fonts.googleapis.com/css?family=Raleway:900,500,600,200,400,700' rel='stylesheet' type='text/css'>
      <title>Layout</title>
      <!-- Bootstrap core CSS -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <link href="css/style.css" rel="stylesheet">
   </head>
   <body role="document">
      <!-- Fixed navbar -->
      <div role="navigation">
         <div>
            <div>
               <h2><img src="img/logo.png" /></h2>
            </div>
         </div>
      </div>
      <div role="main">
         <!-- Main jumbotron for a primary marketing message or call to action -->
         <div>
            <div>
               <img src="img/banner.png"/>
               <img src="img/issue-no-img.png"/>
               <span>Issue No.<br /><b>376</b></span>
            </div>
            <div>
               <div>
                  <img src="img/left-note-img.png"/>
               </div>
               <div>
                  <p><span> NEW! </span>&nbsp;<span>JUN 07, 2003</span></p>
                  <p><i>Get your breaks points on.</i></p>
                  <span>
                     <h2>DOT NET ARTICLES</h2>
                  </span>

                  <span><i>by</i> <a>JOHN WOO</a> <i> - 10 Commments</i></span><br/>
               </div>
               <div>
                  <div>
                     <input type="text" placeholder="Search..." />
                     <span></span>
                  </div>
               </div>
            </div>
            <hr/>
            <p class = "header-pgf">
               Text, navigation, and tables, oh, my! What a responsive web designer to do? How can you confine your design to as few major breakpoints as possible? Where and when will you sketching?  Is it possible to sketch on actual devices, and what are the accessibility implications of doing so? The answers to these and other profound questions will be found in this exclusive excerpt from Chapter 7 of Responsive Design Workflow, Stephen Hay new book, available now from New Riders.
            </p>
            <hr>
            <h2>More from A List Apart</h2>
            <hr>
            <div>
               <div>
                  <h3>Columnists</h3>
                  <p>JACK MCGRANE <i>on</i> CONTENT</p>
                  <p>The Alternative is Nothing</p>
                  <img src="img/thumb1.jpg" /> 
                  <p>We're witnessing one of thr latest waves of technological disruption, as mobile devices put access to the internet in the hands of people who previously never had that power.</p>
               </div>
               <div>
                  <h3>From the Blog</h3>
                  <p>Maps Should Be Crafted.Not "Plugged In"></p>
                  <p>Web designers: erase the line between "the map" and "the content" by harnessing the power of open-source Leafler and your own fresh creative thinking. In the tradition of ALA recent "Hack Your Maps." Happy Cog Brandon Rosage shares how to make location a central aspect of the content experience-not just a visual aid.</p>
               </div>
               <div>
                  <p>Amazon Web Services Introduces a New API</p>
                  <p>Amazon Web Services Identity and Access Management(IAM) is expanding to support web identity federation. Developers can integrate Amazon.com, Facebook, or Google odentity into their app by using the new AWS Security Token Services(STS) API, AssumeRoleWithWebIdentity. to request temporary security credentials.</p>
               </div>
               <div>
                  <h5>Gratitude</h5>
                  <p>Thanks to our RSS sponser Typekit-offering desktop and web fonts in a single subscription starting June 17</p>
                  <div>
                     <img src="img/mothers-day.jpg" /> <br/>
                     <p>Two special Mothers' Say Kits are available from Field Notes Brand. Ad via The Deck </p>
                  </div>
                  <div>
                     <h5>Job Board</h5>
                     <a href="#" >New York Times is looking for a <br />Ruby on Rails Web Developer.</a>
                     More on the <a href ="#">Job Board ></a>
                  </div>
               </div>
            </div>
            <br />
         </div>
      </div>
      <!-- /container -->
      <div>
         <div>
            <div>
               <span><img src="img/article-logo.png" /></span>
               <span>ARTICLES</span>
               <span>COLUMNS</span>
               <span>BLOG</span>
               <span>TOPICS</span>
            </div>
            <div class = "list-footer"> 
               <span>ABOUT</span>
               <span>AUTHORS</span>
               <span>MASTHEAD</span>
               <span>CONTRIBUTE</span>
               <span>STYLE GUIDE</span>
               <span>CONTACT</span>
               <span>SPONSORSHIPS</span>
            </div>
            <hr/>

            <div>
               <div>
                  <img src="img/dot-net-ad.jpg"/> 
                  <h4>.NET Training</h4>
                  <p>If you have a .NET question on a topic that  not covered by other more specific forums.</p>
                  <a href="#">ask here. ></a> 
               </div>
               <div>
                  <img src="img/shopify-expert-ad.jpg"/> 
                  <h4>Shopify Expert</h4>
                  <p>Unique custom made Shopify theme and tweaks.</p>
                  <a href="#">click to view</a>
               </div>
            </div>
            <hr />
            <div>
               <p>Copyright &copy; 2013 Dot Net How</p>
            </div>
         </div>
      </div>
   </body>
</html>

user3890317 12 авг. ’14 в 12:30

источник поделиться

qaru.site