Разное

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

22.04.2020

Атрибут 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

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

qaru.site

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

Ваш адрес email не будет опубликован.